第 1 章：为什么前端也要学 LangChain.js
本章目标
这一章解决一个问题：前端开发者为什么值得学习 LangChain.js，而不是只停留在“调一下大模型接口”。
学完这一章，你应该能判断：
- 普通 Chat API 和 AI 应用框架的区别
- 前端在 AI 应用中的位置
- LangChain.js 能帮我们抽象哪些复杂度
- 这本小册最终要做出什么项目
前端岗位正在变化
过去很多前端项目的核心工作是页面、组件、路由、状态管理和接口联调。AI 应用出现后，前端面对的不再只是 REST API 或 GraphQL API，而是一个不稳定、概率化、上下文敏感的智能系统。
传统接口一般是这样的：
const user = await getUserById(id);
console.log(user.name);
AI 接口更像这样：
const answer = await model.invoke([
{ role: "system", content: "你是一个企业知识库助手。" },
{ role: "user", content: "这个报销规则怎么理解？" }
]);
问题在于，模型不是数据库。它可能答非所问，可能缺上下文，可能需要调用工具，可能需要检索知识库，可能还要记录多轮会话。只会调用一次模型接口，很难做出可靠的 AI 应用。
LangChain.js 解决什么问题
LangChain.js 的价值不是“让你少写几行请求代码”，而是帮你把 AI 应用里常见的模块标准化：
- 模型调用：统一不同模型供应商的调用方式
- Prompt：组织系统提示词、用户输入和上下文
- Tool Calling：让模型决定何时调用函数
- Agent：让模型在推理和工具调用之间循环
- RAG：从知识库检索材料，再交给模型生成答案
- Memory：处理多轮对话状态
- Streaming：把模型输出实时推给前端
- Observability：通过 LangSmith 追踪调用链路
对前端开发者来说，这些能力会把你从“页面开发者”推向“AI 应用开发者”。
本小册的主线项目
我们最终要做的是一个 AI 企业知识库助手。它不是简单聊天页面，而是一个完整应用：
- 用户上传文档
- 系统切分文档并生成向量
- 用户提问时检索相关片段
- 模型基于片段生成答案
- 前端流式显示结果
- 答案带引用来源
- Agent 可以调用业务工具
- 后台记录调用日志和成本
这个项目可以改造成很多真实场景：
- 企业内部知识库
- 售前问答助手
- 软件文档助手
- 客服机器人
- 私有资料问答
- 教程搜索助手
前端开发者的优势
前端并不是 AI 应用的边缘角色。相反，AI 应用的体验很大程度由前端决定：
- 输入框怎么设计
- 流式输出怎么展示
- 工具调用状态怎么反馈
- 引用来源怎么呈现
- 多轮对话怎么管理
- 错误和超时怎么处理
- 成本和等待感怎么平衡
AI 产品不是只有模型。它需要界面、状态、交互、数据流、部署和工程质量。这里正是前端开发者能发挥价值的地方。
实战任务
在开始写代码前，先明确本项目的产品形态：
产品名称：AI 企业知识库助手
目标用户：需要查询内部文档的员工
核心动作：上传资料、提问、查看答案和引用来源
技术路线：Next.js + TypeScript + LangChain.js + 向量库
最终交付：可部署 Demo + 源码 + 项目说明
常见坑
第一个坑是把 LangChain.js 当成“更复杂的 fetch”。如果只是发一条消息给模型，不一定需要 LangChain.js。
第二个坑是把 Agent 神化。Agent 不等于万能自动化。越靠近生产环境，越要限制工具权限、控制执行步骤、保存日志。
第三个坑是只看模型回答，不看上下文来源。知识库问答一定要考虑引用来源，否则用户很难判断答案是否可信。
本章小结
前端学习 LangChain.js 的核心原因，是 AI 应用已经从“调用接口”变成了“组织模型、工具、知识库和交互体验”。这本小册会用一个完整知识库 Agent 项目，把这些能力串起来。
