聊聊前端怎么玩转 LangChain

先说一句，咱们前端小伙伴想玩 AI，真的是要先把 LangChain 给捋清楚。

别慌，老友我今天就来掰扯掰扯这事儿。

说实话，LangChain 就是把大模型和一堆工具链串起来的框架。

它帮你把 Prompt、Memory、Tool、Chain 那些碎片化的东西统一管理。

对前端来说好处是：Ke以直接用 TypeScript/JavaScript 写业务逻辑。

所以你只需要熟悉点 npm、tsconfig，还有 async/await，就Neng上手啦。

第一步，装 Node.js，然后打开终端敲：

npm init -y
npm i @langchain/core @langchain/openai dotenv

记得加个 .env 文件，把你的 API Key 配进去。

比如：

OPENAI_API_KEY=这里填你的 key

不对不对，我刚才说的是 OpenAI，其实你Ke以换成 DeepSeek、Claude 那种模型，只要对应的 SDK 支持就行。

下面我们来写个Zui基础的「问答」链子。

import { PromptTemplate } from "@langchain/core/prompts";
import { ChatOpenAI } from "@langchain/openai";
import { StringOutputParser } from "@langchain/core/output_parsers";
import dotenv from "dotenv";
dotenv.config;
const model = new ChatOpenAI;
const prompt = PromptTemplate.fromTemplate(
  "请用简短的中文回答下面的问题：{question}"
);
const chain = prompt.pipe.pipe);
async function ask {
  const answer = await chain.invoke;
  console.log;
}
ask;

kan到没？.pipe 把提示词、模型、解析器给串起来了一行代码搞定整个流程。

光会问答还不够，你得让 AI Neng调用外部工具，比如获取当前时间或者查询天气。

下面演示一个「获取时间」的小工具：

import { DynamicTool } from "@langchain/core/tools";
const timeTool = new DynamicTool({
  name: "get_time",
  description: "返回当前系统时间",
  func: async  => new Date.toLocaleString,
});
const toolChain = prompt.pipe.pipe.pipe);
async function askWithTool {
  const result = await toolChain.invoke;
  console.log;
}
askWithTool;

哈，这样一来模型在回答时Ru果需要时间，就会主动去调用 timeTool。

Ru果你想Zuo聊天机器人，单轮回复根本不够。LangChain 提供了 Memory 把历史对话保存下来。

import { ConversationBufferMemory } from "@langchain/memory";
const memory = new ConversationBufferMemory;
const chatChain = prompt.pipe.pipe.pipe);
await chatChain.invoke;
await chatChain.invoke;

这样每次调用dou会把之前的聊天记录塞进去，模型Neng感知上下文啦。

这个问题经常被问到，我也遇到过。其实原因大多是：

页面缺少结构化数据，搜索引擎难以识别内容主体。

Spa 单页应用渲染太慢，爬虫只Nengkan到空壳子。

No‑index 或 robots.txt 把页面给屏蔽了。

解决办法嘛：在关键页面加上 使用 SSR 或预渲染，并且在 sitemap.xml 中列出所有路由。这样百度爬虫才Neng顺利抓取，你的网站自然就Neng被收录啦。

1️⃣ 用 .stream kan实时输出，这比一次性等全部结果geng好定位问题。 2️⃣ 打印 .invoke) 的原始响应对象，你会kan到 token 使用情况和日志。 3️⃣ Ru果报错 “Model token limit exceeded”，赶紧加上文本分割器再重试。哈哈，这一步hen常见呀。

A/B 测试其实就是改动 Prompt 的细节，然后比较两套答案的质量。

A版："请简要说明……"

B版："请用通俗易懂的语言说明……"

CamelCase 的变量名还是 snake_case？这douKe以放进 A/B 测试里kan哪种geng符合用户期待。咱就是说这种实验精神真的hen重要啊！你懂的～

P.S. 老实说Zui酷的玩法是自己写一个 Agent，把多个工具组合成工作流，比如「先查询天气 → 再计算出行时间 → Zui后返回Zui佳路线」。代码长了点，但逻辑清晰：

import { initializeAgentExecutor } from "@langchain/agents";
import { loadTools } from "@langchain/tools";
const tools = await loadTools;
const agent = await initializeAgentExecutor(tools, model, {
  agentType: "zero-shot-react-description",
});
await agent.run;

- 就这么多啦，Ru果还有啥卡住的地方，直接在评论区砸我吧，我会抽空给你指点迷津。哈哈哈~