大模型应用开发：LangChain.js 在前端业务中的落地实战

目录 (Outline)

一、 AI 应用的新架构：为什么前端需要 LangChain.js？
二、核心组件：模型 (Model)、提示词 (Prompt) 与链 (Chain)
三、实战 1：利用 Web-based RAG 实现「本地文档对话」
四、实战 2：结合 React 状态管理实现流式对话输出 (Streaming)
五、总结与最佳实践

一、 AI 应用的新架构：为什么前端需要 LangChain.js？

1. 历史背景

在早期，前端与 AI 的交互仅仅是简单的 fetch('/api/chat')。随着业务复杂化，我们需要处理提示词模板、对话上下文记忆（Memory）、甚至是多模型切换。

2. 标志性事件

2022 年底：LangChain（Python 版）发布，确立了 AI 应用开发的标准抽象。
2023 年：LangChain.js 发布，支持浏览器、Node.js、Deno 等全平台运行。

3. 解决的问题 / 带来的变化

LangChain.js 解决了「胶水代码」过多的问题。它将大模型调用抽象为标准化的组件，使得前端开发者可以像拼积木一样构建 AI 流程。

二、核心组件：模型 (Model)、提示词 (Prompt) 与链 (Chain)

在 LangChain.js 中，一个典型的 AI 调用流程被称为「链」。

Model：底层大模型（如 OpenAI, Claude, 或是通过 Ollama 本地运行的模型）。
PromptTemplate：标准化的提示词模板，支持变量注入。
OutputParser：将 AI 返回的字符串解析为结构化数据（如 JSON）。

代码示例：基础链调用

import { ChatOpenAI } from "@langchain/openai";
import { PromptTemplate } from "@langchain/core/prompts";

const model = new ChatOpenAI({ temperature: 0.9 });
const prompt = PromptTemplate.fromTemplate("帮我写一段关于 {topic} 的技术博客简介。");

const chain = prompt.pipe(model);
const result = await chain.invoke({ topic: "React 19" });
console.log(result.content);

三、实战 1：利用 Web-based RAG 实现「本地文档对话」

RAG 是解决 AI 「胡说八道」的关键。通过检索本地知识库，AI 能给出更准确的回答。

实战步骤

文档加载：读取 PDF 或 Markdown 文件。
切分与向量化：将文档切分为小块（Chunks），并转换为向量。
检索：当用户提问时，从向量库中找到最相关的文本。
生成回答：将相关文本和用户问题一起发给 AI。

// 简单 RAG 流程伪代码
const vectorStore = await MemoryVectorStore.fromDocuments(docs, embeddings);
const retriever = vectorStore.asRetriever();

const chain = RunnableSequence.from([
  {
    context: retriever.pipe(formatDocumentsAsString),
    question: new RunnablePassthrough(),
  },
  prompt,
  model,
]);

四、实战 2：结合 React 状态管理实现流式对话输出 (Streaming)

在前端展示时，逐字跳出的效果比等待 10 秒后一次性显示体验好得多。

实战代码

import { useState } from "react";

function ChatBox() {
  const [messages, setMessages] = useState([]);

  const onSend = async (input) => {
    const stream = await model.stream(input);
    let fullText = "";

    // 异步迭代器读取流
    for await (const chunk of stream) {
      fullText += chunk.content;
      // 实时更新状态，实现逐字跳出效果
      setMessages((prev) => [...prev.slice(0, -1), { role: 'ai', content: fullText }]);
    }
  };

  return (/* UI 渲染逻辑 */);
}

五、总结与最佳实践

端云结合：对于轻量级任务，可以使用 WebLLM 在浏览器端本地运行模型，节省 Token 成本。
安全性：永远不要在前端暴露 API Key。应通过后端代理或边缘函数（Edge Functions）转发请求。
建议：优先利用 LangChain 的 LCEL（表达式语言）来构建链，它的可读性和调试体验更好。

LangChain.js 不仅仅是一个库，它代表了一种全新的「AI 原生」前端开发范式。