前端开发者的 AI 入场券：LangChain.js 完全学习资源指南

LangChain 的 Python 版本热度极高，但很多人忽略了：LangChain 的 JavaScript/TypeScript 版本同样强大，而且对前端开发者更友好。如果你一直是写 JS/TS 的，想进入 AI 应用开发领域，LangChain.js 是最自然的入口。

一、LangChain.js 是什么

LangChain.js 是 LangChain 的 JavaScript/TypeScript 实现，专门用于构建基于大语言模型（LLM）的应用。它提供了一套模块化的抽象层，让你可以把 ChatModel、PromptTemplate、Tool、Memory 等组件像搭积木一样组合起来。

核心设计理念：Chain（链）——把多个组件串联成处理管道，从接收用户输入到产生最终输出，每一步都可组合、可替换。

二、六大核心概念

1. ChatModel / LLM

连接大语言模型的统一接口。支持 OpenAI、Google Gemini、Anthropic Claude 等主流模型，切换模型只需改一行配置：

import { ChatOpenAI } from "@langchain/openai";
import { ChatGoogleGenerativeAI } from "@langchain/google-genai";

// 用 OpenAI
const model = new ChatOpenAI({ modelName: "gpt-4o" });
// 换成 Gemini？只需替换这一行
const model = new ChatGoogleGenerativeAI({ model: "gemini-2.0-flash" });

2. PromptTemplate

把 prompt 从硬编码字符串变成可复用的模板，支持变量注入：

import { ChatPromptTemplate } from "@langchain/core/prompts";

const prompt = ChatPromptTemplate.fromMessages([
  ["system", "你是一个{role}，用专业但易懂的方式回答问题"],
  ["human", "{question}"],
]);

const formatted = await prompt.invoke({ role: "前端架构师", question: "如何设计微前端" });

三种模板类型：String PromptTemplate（纯文本）、Chat PromptTemplate（对话格式）、MessagesPlaceholder（动态插入历史消息）。

3. Chain（链式调用）

用 pipe() 方法把 PromptTemplate → Model → OutputParser 串成管道：

import { StringOutputParser } from "@langchain/core/output_parsers";

const chain = prompt.pipe(model).pipe(new StringOutputParser());
const result = await chain.invoke({ role: "技术专家", question: "什么是 RAG" });

LangChain 的 LCEL（LangChain Expression Language）让链式调用像 Unix 管道一样自然——上一个组件的输出自动流入下一个。

4. Tool & Agent

Tool 是 Agent 可以调用的外部能力（搜索引擎、数据库查询、API 调用等）。Agent 则根据用户输入自主决定调用哪些 Tool、什么顺序调用：

import { tool } from "@langchain/core/tools";
import { createReactAgent } from "@langchain/langgraph/prebuilt";

const searchTool = tool(async ({ query }) => {
  // 调用搜索 API...
  return results;
}, {
  name: "web_search",
  description: "搜索互联网获取最新信息",
  schema: z.object({ query: z.string() }),
});

const agent = createReactAgent({ llm: model, tools: [searchTool] });

5. RAG（检索增强生成）

让 LLM 基于你的私有数据回答问题。流程分三步：文档分块 → 向量化与存储 → 检索相关片段 + 生成回答：

import { RecursiveCharacterTextSplitter } from "@langchain/textsplitters";
import { MemoryVectorStore } from "langchain/vectorstores/memory";

// 1. 文档分块
const splitter = new RecursiveCharacterTextSplitter({ chunkSize: 1000 });
const docs = await splitter.splitDocuments(rawDocs);

// 2. 向量化存储
const vectorStore = await MemoryVectorStore.fromDocuments(docs, embeddings);

// 3. 检索 + 生成
const retriever = vectorStore.asRetriever();
const ragChain = await createRetrievalChain(retriever, combineDocsChain);

6. Memory（记忆管理）

让对话应用记住上下文。LangChain.js 提供了多种记忆策略：Buffer Memory（保存全部历史）、Summary Memory（自动压缩历史为摘要）、Window Memory（只保留最近 N 轮）。

三、LangChain.js vs Python 版：关键差异

维度	LangChain.js	Python LangChain
生态位置	与 Next.js、React、Node.js 无缝集成的唯一选择	Python AI 生态最完整
部署方式	Vercel Edge、Cloudflare Workers、Deno 等边缘运行时	传统服务器、Docker
前端集成	直接在浏览器/SSR 中调用，零中间层	需搭 API 中间层
包管理	@langchain/core + 按需安装子包	langchain 单包起步
社区资源	相对较少但在快速增长	最丰富

选择建议：如果你的应用前端是 JS/TS 技术栈，优先用 LangChain.js——少一层 API 转发意味着更低的延迟和更简单的架构。

四、LangGraph.js：从 Chain 到可控 Agent

LangGraph.js 是 LangChain 团队推出的低级 Agent 编排框架，被 Replit、Uber、LinkedIn、GitLab 等公司使用。它解决了传统 Agent 的最大痛点——可控性：

状态图（StateGraph）：每个 Agent 步骤是一个节点，节点间的流转用边定义，支持条件分支和循环
持久化：Agent 的每一步状态都可以持久化到数据库，中断后可恢复
人工介入（Human-in-the-loop）：在任何节点暂停等待人类审批后继续

import { StateGraph, END } from "@langchain/langgraph";

const graph = new StateGraph({ channels: stateSchema })
  .addNode("analyze", analyzeNode)
  .addNode("search", searchNode)
  .addNode("respond", respondNode)
  .addEdge("analyze", "search")
  .addConditionalEdges("search", routeDecision)
  .addEdge("respond", END);

当你的 Agent 需要复杂决策逻辑、多步审核或长时间运行时，LangGraph.js 比 AgentExecutor 更可靠。

五、推荐学习资源

官方资源

LangChain.js 中文文档：https://js.langchain.ac.cn — 最完整的中文参考，包含教程和 API 文档
LangChain.js GitHub：https://github.com/langchain-ai/langchain — 源码、示例、Issue
LangGraph.js GitHub：https://github.com/langchain-ai/langgraphjs — Agent 编排框架
菜鸟教程 LangChain：https://www.runoob.com/langchain/langchain-tutorial.html — 中文入门教程

视频教程

LangChain JS Full Tutorial（YouTube）：从零搭建 AI 应用的完整课程 https://www.youtube.com/watch?v=7Cs0kJ5Xp9k
Build AI Agents with JavaScript, LangChain & LangGraph（YouTube）：Agent 开发实战 https://www.youtube.com/watch?v=f09KbQUBDB0

实战项目

mayooear/langchain-js-tutorial（GitHub）：TypeScript 版配套教程，含可视化架构图 https://github.com/mayooear/langchain-js-tutorial
Robin Wieruch 教程：Next.js + React + LangChain.js 搭建 Chatbot https://www.robinwieruch.de/langchain-javascript-openai/
LangChain.js + Gemini 教程：5 个模块循序渐进 https://www.linkedin.com/pulse/langchain-js-tutorial-using-gemini-nasir-sultan-5fvlf

书籍

《LangChainJS For Beginners》（Nathan Sebhastian）：从零到部署的完整指南，涵盖 OpenAI、Gemini 等多模型

中文社区

**掘金「从前端到 AI：LangChain.js 入门和实战」**小册：前端开发者视角的中文实战教程
**掘金「LangChain.js 完全开发手册」**系列：19 篇深度文章覆盖进阶技巧 https://juejin.cn/post/7572972346073137179
CSDN「一篇搞懂 Agent、RAG、LangChain 之间的关系」：概念梳理入门 https://blog.csdn.net/Code1994/article/details/1406664011

六、5 分钟上手实战

如果你已经装好了 Node.js，只需要 3 步就能跑起来：

# 1. 安装核心包
npm install @langchain/core @langchain/openai

# 2. 设置 API Key
export OPENAI_API_KEY="your-key-here"

# 3. 第一个 Chain

import { ChatOpenAI } from "@langchain/openai";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { StringOutputParser } from "@langchain/core/output_parsers";

const model = new ChatOpenAI({ modelName: "gpt-4o-mini" });
const prompt = ChatPromptTemplate.fromMessages([
  ["system", "用最多3句话解释"],
  ["human", "{topic}"],
]);
const chain = prompt.pipe(model).pipe(new StringOutputParser());

const answer = await chain.invoke({ topic: "什么是 LangChain.js" });
console.log(answer);

七、总结

LangChain.js 不是 Python 版的"二等公民"。对于 JavaScript/TypeScript 开发者来说，它是构建 AI 应用最自然的工具选择——无需学 Python、无需搭中间层、直接在你熟悉的技术栈里拥抱 AI。

从 Chain 到 Agent，从 RAG 到 LangGraph，LangChain.js 的生态正在快速追赶 Python 版。现在上车，刚好赶上最活跃的发展期。

推荐学习路径：官方中文文档入门 → GitHub 教程动手做 → 视频课程深入理解 → LangGraph.js 进阶 Agent → 自己的项目中实战