LangChain 前端学习笔记

一、LangChain 核心认知

1.1 基本定位与背景

LangChain 是一款面向 AI 应用开发的工程化框架，核心目标是简化基于语言大模型（LLM）的应用开发流程，让开发者无需关注不同大模型的底层 API 差异，专注于业务逻辑的实现。

从时间线来看，LangChain 的诞生早于 2022 年横空出世的 ChatGPT（基于 Transformer 架构的 AIGC 代表性产品），并在近期完成了 1.0+ 版本的重大更新，进一步完善了模块化、可扩展性和工程化能力。LangChain 采用 Node.js 开发，完全兼容现代前端工程化体系，能够无缝融入前端项目或 Node.js 服务端项目中。

对于前端开发者而言，LangChain 的出现填补了 “前端开发 + 大模型应用” 的技术鸿沟 —— 以往开发者需要针对不同大模型（如 GPT、DeepSeek、文心一言等）编写不同的调用代码，适配成本高；而 LangChain 通过适配器模式和统一接口，将大模型调用转化为标准化的组件化开发，极大降低了 AI 应用的开发门槛。

1.2 核心概念：LangChain = Lang + Chain

LangChain 的名称拆解直观体现了其核心设计思想：

1. Lang（语言）：聚焦 LLM 标准化调用

   • 核心是对各类语言大模型的封装，LangChain 为市面上主流 LLM（如 OpenAI GPT 系列、DeepSeek、Anthropic Claude 等）提供了统一的调用接口，包括 completion（文本完成）和 chat（聊天对话）两种核心能力。
   • 解决的核心问题：LLM 市场更新换代频繁，不同模型的 API 格式、调用方式、参数配置差异较大，开发者通过 LangChain 无需修改核心代码，仅需更换适配器依赖即可切换底层 LLM，实现LLM 可拔插。

2. Chain（链）：实现 AI 业务的流程化编排

   • 核心是将 AI 业务的多个处理步骤（如 “提示词生成 → LLM 调用 → 结果处理 → 多轮对话管理”）串联成有序的工作流，每个步骤都是一个可配置、可执行的 “节点”。
   • 设计理念类似前端开发中的 “流水线” 或低代码平台（如 n8n、Coze）的节点链接思想，通过链式调用实现复杂业务逻辑的拆解与重组。
   • 延伸能力：基于 Chain 可以扩展出更高级的 Agent（智能代理），即让 AI 根据业务需求自动选择执行步骤，实现自主决策型的 AI 应用。

1.3 前端开发者学习 LangChain 的价值

• 技术拓展：掌握 LangChain 可以快速切入 AI 应用开发赛道，结合前端技术栈（如 Vue、React）开发智能对话、知识库问答、代码生成等 AI 产品。
• 工程化思维：LangChain 的模块化设计（如提示词模板、链式调用、数据增强）与前端组件化思想高度一致，能够强化开发者的工程化抽象能力。
• 求职竞争力：在 AI 大模型普及的背景下，掌握 LangChain 的前端开发者在求职中更具优势，可胜任 “前端 + AI” 的复合型岗位。

二、前置环境配置

2.1 启用 ESM 模块规范与顶层 Await

LangChain 基于 ESM 模块规范开发，因此项目必须配置为 ESM 环境，以支持顶层 await（无需将 await 包裹在 async 函数中，可直接在代码顶层使用）。

配置步骤：

1. 在项目根目录的 package.json 中添加以下配置：

   json

   {
     "type": "module"
   }
   

2. 配置说明：

   • 该配置会将 Node.js 项目的默认模块系统从 CommonJS 切换为 ESM，支持 import/export 语法。
   • 顶层 await 的支持是开发 LangChain 应用的关键，因为大模型调用、模板渲染等核心操作均为异步操作，顶层 await 可以简化代码结构，避免多层 async 函数嵌套。

2.2 安装核心依赖

以集成 DeepSeek 大模型为例，需安装以下核心依赖：

bash

运行

# 安装 DeepSeek 大模型的 LangChain 适配器
npm install @langchain/deepseek
# 安装 LangChain 核心模块（包含提示词模板、链式调用等能力）
npm install @langchain/core
# 安装环境变量加载工具
npm install dotenv

依赖说明：

依赖名称	核心作用
@langchain/deepseek	DeepSeek 大模型的适配器，实现与 LangChain 核心接口的对接
@langchain/core	LangChain 核心模块，提供 PromptTemplate、RunnableSequence 等核心能力
dotenv	加载 .env 文件中的环境变量，用于存储大模型 API Key 等敏感信息

2.3 配置环境变量

为了避免将大模型 API Key 等敏感信息硬编码到代码中，需通过 .env 文件管理环境变量：

1. 在项目根目录创建 .env 文件：

   env

   # DeepSeek 大模型 API Key（需在 DeepSeek 官网申请）
   DEEPSEEK_API_KEY=your_deepseek_api_key_here
   

2. 在代码中加载环境变量：

   javascript

   运行

   import 'dotenv/config';
   // 之后可通过 process.env.DEEPSEEK_API_KEY 获取 API Key
   

3. 注意事项：务必将 .env 文件添加到 .gitignore 中，避免提交到代码仓库造成敏感信息泄露。

三、LangChain 核心特性与实践

3.1 统一 LLM 接口：屏蔽不同模型的差异

LangChain 的核心优势之一是为所有适配的 LLM 提供了标准化的调用接口，开发者无需关注不同模型的 API 格式差异。

核心接口能力：

• completion：适用于文本补全场景，输入一段文本，模型返回续写结果。
• chat：适用于对话场景，支持多轮上下文管理，输入聊天消息列表，模型返回回复内容。
• 统一调用方法：所有 LLM 适配器均实现了 invoke() 方法，用于触发模型调用，返回结构化的响应结果。

优势体现：

• 当需要切换大模型时，仅需更换适配器依赖和初始化参数，核心业务逻辑无需修改。例如，从 DeepSeek 切换到 OpenAI GPT，只需将 ChatDeepSeek 替换为 ChatOpenAI，并修改对应的 API Key 配置。

3.2 PromptTemplate：提示词的模板化与复用

提示词工程是 AI 应用开发的核心，而 LangChain 提供的 PromptTemplate 组件可以实现提示词的模板化、参数化和复用化，解决硬编码提示词导致的维护困难、灵活性差等问题。

3.2.1 核心功能

• 模板定义：通过 PromptTemplate.fromTemplate() 方法创建提示词模板，使用 {变量名} 作为占位符。
• 参数填充：通过 prompt.format() 方法传入参数对象，动态填充占位符，生成最终的提示词字符串。
• 复用性：同一个模板可以通过传入不同参数，生成适用于不同场景的提示词（如前端面试官、后端面试官、产品经理等不同角色的提问风格）。

3.2.2 关键优势

• 结构化管理：将提示词从代码中抽离为模板，便于统一维护和版本管理。
• 动态适配：通过参数动态调整提示词内容，避免重复编写相似的提示词。
• 团队协作：模板化的提示词可以在团队内共享，确保 AI 输出风格的一致性。

3.3 Chain：AI 业务的流程化编排

AI 应用的业务逻辑往往是复杂的多步骤流程，例如 “生成提示词 → 调用大模型 → 处理模型输出 → 生成总结报告”。LangChain 的 Chain 机制可以将这些步骤串联成可执行的工作流，实现步骤间的自动衔接和数据传递。

3.3.1 核心实现方式

1. pipe () 方法：简单链式调用

   • pipe() 是 LangChain 中最基础的链式调用方法，用于将两个节点按顺序连接，前一个节点的输出作为后一个节点的输入。
   • 典型场景：PromptTemplate → LLM，即提示词模板生成的字符串直接作为大模型的输入。

2. RunnableSequence：复杂多步骤链式调用

   • 当业务流程包含 3 个及以上步骤时，需使用 RunnableSequence.from() 方法组合多个节点，实现更复杂的工作流。
   • 支持自定义每个步骤的输入输出逻辑，灵活处理节点间的数据传递。

3.3.2 链式调用的核心价值

• 解耦与复用：每个步骤都是独立的节点，可以单独测试、修改和复用。
• 可追溯性：链式调用的执行过程清晰可控，便于排查问题。
• 扩展性：可以随时在链中添加、删除或替换节点，快速适配业务需求变更。

四、Demo 实战：从基础到复杂

4.1 Demo 1：基础 LLM 调用（解释 RAG 概念）

功能说明

直接调用 DeepSeek 大模型，生成对 RAG（检索增强生成）概念的一句话解释。

完整代码

javascript

运行

import 'dotenv/config'; // 加载.env文件中的环境变量
import { ChatDeepSeek } from '@langchain/deepseek';

// 初始化 DeepSeek 大模型
const model = new ChatDeepSeek({
    model: 'deepseek-reasoner', // 指定使用的 DeepSeek 模型版本
    temperature: 0, // 输出随机性：0 表示完全确定性输出，1 表示最大随机性
    apiKey: process.env.DEEPSEEK_API_KEY // 从环境变量获取 API Key
});

// 调用模型：传入提示词，获取响应结果
const res = await model.invoke('用一句话解释什么是RAG？');

// 输出模型返回的内容
console.log(res.content);

运行注意事项

1. API Key 申请：需在 DeepSeek 开发者平台 注册账号，创建应用并获取 API Key，替换 .env 文件中的占位符。

2. 模型参数说明：

   • model：DeepSeek 提供了多个模型版本，如 deepseek-reasoner（推理型）、deepseek-chat（对话型），需根据业务场景选择。
   • temperature：取值范围 0~1，值越低输出越稳定，适合需要精准答案的场景；值越高输出越灵活，适合创意生成场景。

3. 运行方式：确保 Node.js 版本 ≥ 18.0.0（支持顶层 await），在终端执行 node demo1.js 即可运行。

4. 错误处理：若运行时报错 “API Key 无效”，需检查 .env 文件是否配置正确，或 API Key 是否过期。

预期输出

plaintext

RAG 是检索增强生成技术，通过检索外部知识库信息辅助大模型生成更准确、可靠的回答。

4.2 Demo 2：PromptTemplate + LLM 基础组合（前端面试官风格问答）

功能说明

通过提示词模板生成 “前端面试官” 风格的问题，调用大模型回答 “什么是闭包”，并限制回答字数不超过 50 字。

完整代码

javascript

运行

import 'dotenv/config';
import { ChatDeepSeek } from '@langchain/deepseek';
import { PromptTemplate } from '@langchain/core/prompts';

// 1. 创建提示词模板
const prompt = PromptTemplate.fromTemplate(`
你是一个{role}。
请用不超过 {limit} 个字回答以下问题：
{question}    
`);

// 2. 填充模板参数，生成最终提示词
const promptStr = await prompt.format({
    role: '前端面试官',
    limit: '50',
    question: '什么是闭包'
});

// 3. 初始化大模型
const model = new ChatDeepSeek({
    model: 'deepseek-reasoner',
    temperature: 0.5, // 适度增加随机性，让回答更自然
});

// 4. 调用模型
const res = await model.invoke(promptStr);

// 输出结果
console.log(res.content);

运行注意事项

1. 模板语法规范：

   • 占位符必须使用 {变量名} 格式，且变量名需与 format() 方法传入的参数对象的属性名一致。
   • 模板字符串中的换行和空格会保留，需注意格式整洁，避免影响模型输出。

2. 参数校验：limit 参数需传入数字字符串，若传入非数字值，模型可能无法正确识别字数限制。

3. 复用性测试：可以尝试修改 format() 方法的参数，如将 role 改为 “后端面试官”，question 改为 “什么是 MVC”，验证模板的复用能力。

预期输出

plaintext

闭包是函数及其词法环境的组合，可访问外层函数变量，实现数据私有和持久化。

4.3 Demo 3：Pipe 实现简单 Chain（前端概念解释工作流）

功能说明

使用 pipe() 方法将 PromptTemplate 和 ChatDeepSeek 串联成一个简单的 Chain，实现 “输入前端概念 → 生成解释” 的自动化工作流。

完整代码

javascript

运行

import 'dotenv/config';
import { ChatDeepSeek } from '@langchain/deepseek';
import { PromptTemplate } from '@langchain/core/prompts';

// 初始化大模型
const model = new ChatDeepSeek({
    model: 'deepseek-reasoner',
    temperature: 0.7,
});

// 1. 创建提示词模板
const prompt = PromptTemplate.fromTemplate(`
    你是一个前端专家，用一句话解释{topic}
`);

// 2. 串联模板和模型，形成 Chain
// prompt 输出的字符串会作为 model 的输入
const chain = prompt.pipe(model);

// 3. 调用 Chain，传入参数
const response = await chain.invoke({
    topic: '闭包'
});

// 输出结果
console.log(response.text);

运行注意事项

1. Chain 执行逻辑：调用 chain.invoke() 时，LangChain 会自动执行以下步骤：

   • 用传入的 {topic: '闭包'} 填充模板，生成提示词字符串。
   • 将提示词字符串传入大模型，获取响应结果。
   • 返回最终的响应对象。

2. 响应对象属性：不同 LLM 适配器的响应对象属性可能略有差异，ChatDeepSeek 的响应对象包含 text（纯文本内容）和 content（结构化内容）两个常用属性。

3. 调试技巧：可以在串联 Chain 后，通过 console.log(chain) 查看 Chain 的结构，确认节点连接是否正确。

预期输出

plaintext

闭包是指有权访问另一个函数作用域中变量的函数，常用于实现数据封装和状态保持。

4.4 Demo 4：RunnableSequence 实现多步骤 Chain（解释 + 总结工作流）

功能说明

通过 RunnableSequence 组合两个 Chain，实现 “解释前端概念 → 总结核心要点” 的多步骤工作流：

1. 第一步：调用 explainChain 生成闭包的详细解释（不超过 300 字）。
2. 第二步：将第一步的解释结果传入 summaryChain，总结为三个核心要点（每点不超过 20 字）。

完整代码

javascript

运行

import 'dotenv/config';
import { ChatDeepSeek } from '@langchain/deepseek';
import { PromptTemplate } from '@langchain/core/prompts';
import { RunnableSequence } from '@langchain/core/runnables';

// 初始化大模型
const model = new ChatDeepSeek({
    model: 'deepseek-reasoner',
    temperature: 0.7,
});

// 1. 定义解释概念的提示词模板和 Chain
const explainPrompt = PromptTemplate.fromTemplate(`
    你是一个前端专家，用一句话解释以下概念：{topic}
    要求：覆盖定义、原理、使用方式。不超过300字。
`);
const explainChain = explainPrompt.pipe(model);

// 2. 定义总结要点的提示词模板和 Chain
const summaryPrompt = PromptTemplate.fromTemplate(`
    请将以下前端概念解释总结为三个核心要点（每点不超过二十个字）：
    {explanation}
`);
const summaryChain = summaryPrompt.pipe(model);

// 3. 组合为多步骤 Chain
const fullChain = RunnableSequence.from([
    // 第一步：执行解释 Chain，获取纯文本解释结果
    (input) => explainChain.invoke({ topic: input.topic }).then(res => res.text),
    // 第二步：将解释结果传入总结 Chain，生成最终输出
    (explanation) => summaryChain.invoke({ explanation }).then(res => `知识点：${explanation} \n总结：${res.text}`)
]);

// 4. 调用完整 Chain
const response = await fullChain.invoke({ topic: '闭包' });

// 输出结果
console.log(response);

运行注意事项

1. RunnableSequence 执行顺序：RunnableSequence.from() 接收一个数组，数组中的函数按顺序执行，前一个函数的输出作为后一个函数的输入。
2. 异步处理：由于每个 Chain 的 invoke() 方法都是异步的，需使用 .then() 处理 Promise 结果，确保数据正确传递。
3. 输入输出格式：需确保每个步骤的输出格式与下一个步骤的输入格式匹配，例如第一步输出纯文本 explanation，第二步需接收 {explanation: string} 格式的参数。
4. 复杂流程扩展：可以在 Chain 中添加更多步骤，例如 “解释 → 验证准确性 → 总结 → 翻译成英文”，实现更复杂的业务逻辑。

预期输出

plaintext

知识点：闭包是指有权访问另一个函数作用域中变量的函数，其原理基于词法作用域链，可实现数据私有、状态持久化，常用于防抖节流、模块化开发等场景。
总结：1. 可访问外层函数作用域变量
2. 基于词法作用域链实现
3. 用于数据私有与状态保持

五、LangChain 核心 API 速查表

为了方便前端开发者快速查阅和使用 LangChain 核心能力，以下整理了高频 API 的功能、参数和使用场景：

模块 / 类	核心方法	参数说明	使用场景
ChatDeepSeek	new ChatDeepSeek(options)	- model: 模型版本（如 deepseek-reasoner）- temperature: 随机性（0~1）- apiKey: 大模型 API Key	初始化 DeepSeek 大模型实例
	invoke(prompt)	prompt: 输入的提示词字符串	调用大模型，获取响应结果
PromptTemplate	fromTemplate(templateStr)	templateStr: 包含占位符的提示词模板字符串	创建提示词模板实例
	format(params)	params: 填充占位符的参数对象	生成最终的提示词字符串
RunnableSequence	from(steps)	steps: 包含多个步骤的函数数组，前一步输出作为后一步输入	组合多步骤 Chain，实现复杂工作流
通用 Chain	pipe(nextNode)	nextNode: 下一个要连接的节点（如 PromptTemplate → Model）	串联两个节点，实现简单链式调用

六、核心总结

1. LangChain 核心价值：通过统一 LLM 接口和链式工作流编排，将 AI 应用开发从 “黑盒调用” 转化为 “工程化、组件化开发”，降低前端开发者接入大模型的门槛。

2. 前端适配要点：基于 Node.js + ESM 规范开发，支持顶层 await，可无缝融入前端工程化体系，结合 Vue/React 等框架开发 AI 交互界面。

3. 核心能力三板斧：

   • 标准化 LLM 调用：通过适配器模式实现大模型可拔插。
   • 模板化提示词管理：通过 PromptTemplate 实现提示词的复用与动态适配。
   • 流程化链式调用：通过 Chain 和 RunnableSequence 实现复杂业务逻辑的拆解与重组。

4. 学习进阶方向：掌握 LangChain 基础后，可进一步学习 RAG（检索增强生成） 、Agent（智能代理） 、多模态交互等高级能力，开发更复杂的 AI 应用。

七、学习资源推荐

1. 官方文档：LangChain 官方文档（虽然以 Python 为主，但核心概念通用）
2. JavaScript 教程：LangChain.js 官方 GitHub（提供大量 JavaScript 示例）
3. 实战项目：尝试开发 “前端知识库问答机器人”“代码生成工具” 等小项目，巩固所学知识。

---

八、拓展学习建议

1. 尝试切换大模型：将 Demo 中的 DeepSeek 替换为 OpenAI GPT，对比不同模型的输出效果，理解 LangChain 适配器模式的优势。
2. 添加错误处理逻辑：在 Chain 中加入 try/catch 块，处理大模型调用失败、网络异常等情况，提升应用的健壮性。
3. 结合前端框架：使用 Vue/React 开发一个简单的交互界面，实现 “输入前端概念 → 生成解释 → 展示结果” 的完整流程。