LangChain.js 入门实战 | 前端如何构建 RAG 应用

最新推荐文章于 2025-09-20 12:11:29 发布

原创最新推荐文章于 2025-09-20 12:11:29 发布 · 1.6k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #prompt

AI 专栏收录该内容

165 篇文章

订阅专栏

一、背景：为什么前端也需要 RAG？

过去，前端工程师的工作大多集中在交互界面、状态管理和网络请求层面。但随着 大语言模型（LLM） 的爆发，前端开发者也逐渐站到了 AI 应用的第一线。

问题在于：大模型虽然强大，却常常“张口就来”。想要让它真正结合企业内部知识，就必须解决 幻觉（hallucination） 的问题。

而 RAG（Retrieval-Augmented Generation，检索增强生成） 正是解决方案：

R（Retrieval，检索）：从外部知识库中找到相关信息
A（Augmented，增强）：把这些信息注入到模型的上下文中
G（Generation，生成）：让 LLM 基于增强后的上下文生成回答

在 Python 世界，LangChain 已经成为事实标准；而在 JavaScript / TypeScript 世界，LangChain.js 则是构建前端 RAG 应用的首选框架。

二、原理：LangChain.js 的核心机制

1. 模块化抽象

LangChain.js 的设计理念是 把大模型应用拆分成可组合的模块：

LLM 接口：统一封装 OpenAI、Anthropic、DeepSeek 等模型
Prompt 模板：让提示词工程化，参数化拼装
Chain 调用链：组合多个步骤形成流水线
Retriever 检索器：从文档向量库中找到相关片段
Agent 智能体：支持模型动态调用工具和 API

2. 文档分块与向量检索

RAG 的关键步骤是 把长文档切成片段 → 生成向量 → 检索相似片段。
LangChain.js 内置了 RecursiveCharacterTextSplitter、OpenAIEmbeddings、MemoryVectorStore 等工具，帮助开发者快速搭建检索流程。

3. 运行环境的优势

与 Python 版本相比，LangChain.js 最大的亮点是 能直接运行在浏览器与 Cloudflare Workers 上，真正实现了边缘推理与前端直接调用。

三、实战：用 LangChain.js 构建一个前端 RAG 应用

接下来，我们通过三个示例，完整走一遍“RAG 应用开发”的流程。

示例一：最小化 RAG Demo

以下代码展示了如何用 30 行 LangChain.js 实现一个基于内存向量库的问答。

// rag-demo.mjs
import { ChatOpenAI, OpenAIEmbeddings } from "@langchain/openai";
import { MemoryVectorStore } from "langchain/vectorstores/memory";
import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { RunnableSequence } from "@langchain/core/runnables";
import { Document } from "@langchain/core/documents";

const docs = [
  new Document({ pageContent: "LangChain.js 是 LLM 应用的 JS 框架，支持 RAG、Agent、链式调用。" }),
  new Document({ pageContent: "它能运行在 Node.js、浏览器与 Cloudflare Workers，生态活跃。" }),
];

const splitter = new RecursiveCharacterTextSplitter({ chunkSize: 100 });
const splitDocs = await splitter.splitDocuments(docs);

const vectorStore = await MemoryVectorStore.fromDocuments(
  splitDocs,
  new OpenAIEmbeddings({ model: "text-embedding-3-small" })
);

const retriever = vectorStore.asRetriever({ k: 2 });
const llm = new ChatOpenAI({ model: "gpt-4o-mini", temperature: 0 });

const prompt = ChatPromptTemplate.fromTemplate(
  `依据<context>回答用户问题，如无答案请说“不知道”。\n<context>\n{context}\n</context>\n问题：{question}`
);

const chain = RunnableSequence.from([
  {
    context: async (input) => (await retriever.getRelevantDocuments(input.question))
      .map(d => d.pageContent).join("\n"),
    question: (input) => input.question
  },
  prompt,
  llm
]);

const res = await chain.invoke({ question: "为什么 LangChain.js 适合前端开发者？" });
console.log(res.content);

运行效果：
👉 模型的回答会严格依赖于 docs 文档，而不是胡编。

示例二：加载企业 PDF 知识库

前端常见的需求是把公司文档（PDF/Markdown/HTML）加载进来，供 RAG 使用。LangChain.js 提供了 PDFLoader：

import { PDFLoader } from "langchain/document_loaders/fs/pdf";
import { OpenAIEmbeddings } from "@langchain/openai";
import { MemoryVectorStore } from "langchain/vectorstores/memory";

const loader = new PDFLoader("company-handbook.pdf");
const docs = await loader.load();

const vectorStore = await MemoryVectorStore.fromDocuments(
  docs,
  new OpenAIEmbeddings()
);

const retriever = vectorStore.asRetriever();
const results = await retriever.getRelevantDocuments("公司的加班制度是什么？");
console.log(results.map(r => r.pageContent));

效果：
👉 直接返回 PDF 中的相关内容，之后可交给 LLM 生成更自然的回答。

示例三：结合 Agent 调用外部工具

在前端 RAG 应用中，有时还需要调用外部 API（比如计算器、搜索引擎）。这时就要用到 Agent：

import { initializeAgentExecutorWithOptions } from "langchain/agents";
import { ChatOpenAI } from "@langchain/openai";
import { Calculator } from "langchain/tools/calculator";

const llm = new ChatOpenAI({ model: "gpt-4o-mini", temperature: 0 });
const tools = [new Calculator()];

const executor = await initializeAgentExecutorWithOptions(tools, llm, {
  agentType: "openai-functions",
  verbose: true,
});

const result = await executor.invoke({
  input: "今天是 2025 年 8 月 26 日，请计算 100 天后的日期。",
});

console.log(result.output);

结果：
👉 Agent 会调用计算器工具，而不是依赖 LLM 自己推算日期。

四、架构图示

1. RAG 工作流

graph TD
  A[用户问题] --> B[Retriever 检索器]
  B --> C[相关文档片段]
  C --> D[Prompt 模板]
  D --> E[LLM 生成]
  E --> F[增强后的答案]

2. Agent 调用流程

sequenceDiagram
  User->>Agent: 提问
  Agent->>Tools: 判断是否需要工具调用
  Tools->>Agent: 返回执行结果
  Agent->>LLM: 拼接上下文
  LLM->>User: 最终回答

五、LangChain.js 与 Python 版的对比

特性	LangChain.js	LangChain (Python)
社区生态	前端/全栈开发者，偏轻量	数据科学/后端开发者，偏重
运行环境	Node.js、浏览器、Cloudflare Workers	本地/服务端/容器
API 风格	TypeScript 风格，链式调用	Pythonic，适合 Notebook
应用场景	Web 前端 + Serverless + Edge AI	数据管道、企业后端、研究