前端初步使用LangChain前端开发程序员版前言前端人为什么要学 LangChain很多前端开发者对 LangChain 的第一印象是后端大模型框架、Python 专属、和前端无关。这是最大的误区随着 AI 沉浸式交互、智能问答、AI 改写内容、前端动态生成组件等场景普及前端已经不再只是做页面渲染而是需要承接 AI 交互层的开发。LangChain 推出的LangChain.js完整适配浏览器、Vite、Vue、React、Node 前端工程化环境专门解决前端 AI 开发的核心痛点告别零散的 AI 接口裸调用统一规范 AI 业务逻辑快速实现流式打字机效果、上下文记忆、对话管理封装提示词模板、输出解析器告别硬编码 Prompt轻松搭建可复用的 AI 工作流适配各类前端业务场景本文全程前端技术栈JS/TS零 Python、零后端依赖手把手带前端程序员从零入门 LangChain落地可直接用于项目的实战案例。## 一、前置认知前端视角的 LangChain 核心概念不用死记复杂理论前端人只需要搞懂 5 个核心模块就能玩转 LangChain1.1 大模型LLM/ChatModelAI 能力的核心载体前端常用 Chat 对话模型GPT、DeepSeek、通义千问等负责接收指令、生成回答。1.2 提示词模板PromptTemplate前端的「AI 模板组件」把固定话术、动态变量封装起来避免代码里写死长串 Prompt可复用、可维护。1.3 输出解析器OutputParser解决大模型返回文本混乱的问题强制格式化输出JSON/字符串/数组完美适配前端数据渲染。1.4 链路ChainLangChain 的核心把「提示词 → 模型调用 → 结果解析」串联成一条流水线前端直接调用即可无需重复写冗余逻辑。1.5 流式输出Stream前端 AI 交互的灵魂实现用户感知极强的打字机实时输出效果替代传统的等待全部返回再渲染的卡顿体验。## 二、前端专属环境搭建ViteTS 通用方案LangChain.js 完全适配前端工程化项目支持 Vite、Vue3、React、Node 环境下面以最通用的ViteTS为例搭建环境。2.1 初始化前端项目如果已有项目可直接跳过初始化直接安装依赖# 初始化 vite 项目 npm create vitelatest langchain-frontend-demo -- --template vanilla-ts # 进入项目 cd langchain-frontend-demo # 安装核心依赖 npm install langchain/core langchain/openai dotenv npm install -D vite-plugin-env2.2 关键配置前端必看避坑LangChain.js 基于 ESM 规范开发需要在package.json开启模块支持否则会报语法错误{ type: module, scripts: { dev: vite, build: tsc vite build } }2.3 配置模型密钥项目根目录新建.env文件配置大模型 Key本文以 OpenAI 兼容接口为例可替换 DeepSeek、讯飞等模型VITE_OPENAI_API_KEY你的模型密钥 VITE_OPENAI_BASE_URL模型接口地址## 三、第一个 LangChain 程序基础对话调用我们先实现最简单的 AI 对话能力验证环境是否正常代码极简、完全前端化。新建src/main.ts写入核心代码import { ChatOpenAI } from langchain/openai; import dotenv/config; // 1. 初始化前端可用的对话大模型 const llm new ChatOpenAI({ apiKey: import.meta.env.VITE_OPENAI_API_KEY, baseURL: import.meta.env.VITE_OPENAI_BASE_URL, model: gpt-3.5-turbo, temperature: 0.7, // 随机性 0-1越低回答越严谨 }); // 2. 基础对话调用 const chat async () { const res await llm.invoke(请用前端通俗易懂的话解释什么是虚拟DOM); console.log(AI回答, res.content); }; chat();运行npm run dev打开浏览器控制台即可看到 AI 输出结果。前端优势全程无后端服务、无 Python 环境纯前端代码直接运行和我们日常调用接口逻辑完全一致。## 四、前端核心实战封装可复用 AI 链路Chain裸调用模型无法适配业务接下来我们用 LangChain 核心能力封装提示词模板 链路 输出解析的完整业务能力这是项目中最常用的写法。4.1 场景前端技术问题智能解答需求固定 AI 角色为「资深前端面试官」根据用户输入的技术问题输出简洁、专业的前端解答。import { ChatOpenAI } from langchain/openai; import { ChatPromptTemplate } from langchain/core/prompts; import { StringOutputParser } from langchain/core/output_parsers; // 1. 初始化模型 const llm new ChatOpenAI({ apiKey: import.meta.env.VITE_OPENAI_API_KEY, baseURL: import.meta.env.VITE_OPENAI_BASE_URL, model: gpt-3.5-turbo, }); // 2. 定义可复用提示词模板前端组件化思维 const prompt ChatPromptTemplate.fromMessages([ [system, 你是一名资深前端技术专家擅长用通俗易懂的语言解答前端问题回答简洁精炼贴合实际开发场景], [user, 请解答这个前端问题{question}] ]); // 3. 定义输出解析器 const parser new StringOutputParser(); // 4. 组装 Chain 链路核心流水线组合 const chain prompt.pipe(llm).pipe(parser); // 5. 调用链路 const getFrontendAnswer async (question: string) { return await chain.invoke({ question }); }; // 测试调用 getFrontendAnswer(Vue3 和 React 核心区别是什么).then(res console.log(res));4.2 代码解析前端视角PromptTemplate相当于 AI 业务的「配置组件」统一角色和输出规范可全局复用pipe 管道类似前端链式调用把模板、模型、解析器串联逻辑清晰OutputParser过滤模型返回的冗余参数只返回业务需要的文本内容## 五、前端必备技能实现流式打字机效果所有 AI 聊天产品的核心体验都是流式输出如果等待接口全部返回再渲染用户体验极差。LangChain 一行代码即可实现前端打字机效果适配 Vue/React 状态渲染。5.1 流式输出实战代码// 基于上面的 chain 链路改造为流式调用 const getStreamAnswer async (question: string, onUpdate: (text: string) void) { // 开启流式输出 const stream await chain.stream({ question }); let fullText ; // 逐段接收数据 for await (const chunk of stream) { fullText chunk; // 实时回调更新前端视图 onUpdate(fullText); } }; // 模拟前端页面渲染更新 getStreamAnswer(如何优化前端首屏加载速度, (text) { // 此处可替换为 Vue/React 状态更新 console.log(实时输出, text); });5.2 前端业务适配说明在 React/Vue 项目中只需将onUpdate回调替换为组件状态更新即可实现页面实时打字效果完全适配现有前端状态管理逻辑无侵入、易维护。## 六、进阶实战结构化 JSON 输出适配前端渲染前端业务中我们经常需要 AI 返回JSON 结构化数据比如列表、表单配置、题目数组等普通文本输出无法直接渲染此时需要用到 LangChain 的JsonOutputParser。6.1 场景AI 生成前端面试题列表import { JsonOutputParser } from langchain/core/output_parsers; // 定义JSON输出格式规范 interface InterviewQuestion { title: string; answer: string; difficulty: 简单 | 中等 | 困难; } // 初始化JSON解析器 const jsonParser new JsonOutputParserInterviewQuestion[](); // 自定义提示词强制输出JSON格式 const jsonPrompt ChatPromptTemplate.fromMessages([ [system, 你是前端面试官请根据技术栈生成3道面试题严格按照JSON数组格式输出包含title、answer、difficulty字段不要返回多余文字], [user, 技术栈{techStack}], ]); // 组装链路 const jsonChain jsonPrompt.pipe(llm).pipe(jsonParser); // 调用获取结构化数据 const getInterviewQuestions async (techStack: string) { return await jsonChain.invoke({ techStack }); }; // 直接获取可渲染的JSON数据 getInterviewQuestions(Vue3).then(list { console.log(面试题列表, list); // 可直接用于前端列表渲染 });该能力可广泛用于AI 生成表单配置、生成组件配置、生成文案列表、生成题目题库等前端业务场景。## 七、前端项目落地避坑指南结合前端工程化特性整理 5 个高频踩坑点帮你快速落地生产级项目7.1 跨域问题前端直接请求大模型接口会触发跨域解决方案本地开发配置 Vite 代理生产环境通过后端中转接口禁止前端直接暴露密钥上线。7.2 环境适配问题必须开启 ESM 模块package.json配置type: module否则顶层 await、模块导入会报错。7.3 密钥安全问题前端环境变量VITE_开头变量会暴露在浏览器生产环境必须通过后端代理转发请求杜绝密钥泄露。7.4 流式渲染卡顿大段流式数据渲染时避免频繁更新 DOM可做节流处理优化页面性能。7.5 上下文记忆丢失多轮对话需要手动维护消息数组通过ChatPromptTemplate传入历史消息实现对话记忆。## 八、前端常用 LangChain 业务场景总结学完以上内容可直接落地这些主流 AI 前端场景智能问答机器人官网客服、文档问答、业务咨询AI 内容生成自动生成文案、注释、前端代码、面试题智能编辑功能AI 改写文本、优化文案、纠错润色结构化数据生成自动生成表单、列表、配置文件沉浸式流式交互所有 AI 聊天、问答类页面优化用户体验## 结尾对前端开发者来说LangChain 不是复杂的后端框架而是前端 AI 业务的工程化工具。它帮我们解决了 AI 开发中最繁琐的 Prompt 管理、数据解析、流式交互、工作流编排问题让前端可以快速独立开发高质量 AI 交互应用。从基础调用、流式效果到结构化输出本文的所有代码均可直接复制运行适配 Vue、React、原生前端项目。掌握这套能力就能快速承接公司 AI 前端业务完成技术升级。
前端初步使用LangChain（前端开发程序员版）
前端初步使用LangChain前端开发程序员版前言前端人为什么要学 LangChain很多前端开发者对 LangChain 的第一印象是后端大模型框架、Python 专属、和前端无关。这是最大的误区随着 AI 沉浸式交互、智能问答、AI 改写内容、前端动态生成组件等场景普及前端已经不再只是做页面渲染而是需要承接 AI 交互层的开发。LangChain 推出的LangChain.js完整适配浏览器、Vite、Vue、React、Node 前端工程化环境专门解决前端 AI 开发的核心痛点告别零散的 AI 接口裸调用统一规范 AI 业务逻辑快速实现流式打字机效果、上下文记忆、对话管理封装提示词模板、输出解析器告别硬编码 Prompt轻松搭建可复用的 AI 工作流适配各类前端业务场景本文全程前端技术栈JS/TS零 Python、零后端依赖手把手带前端程序员从零入门 LangChain落地可直接用于项目的实战案例。## 一、前置认知前端视角的 LangChain 核心概念不用死记复杂理论前端人只需要搞懂 5 个核心模块就能玩转 LangChain1.1 大模型LLM/ChatModelAI 能力的核心载体前端常用 Chat 对话模型GPT、DeepSeek、通义千问等负责接收指令、生成回答。1.2 提示词模板PromptTemplate前端的「AI 模板组件」把固定话术、动态变量封装起来避免代码里写死长串 Prompt可复用、可维护。1.3 输出解析器OutputParser解决大模型返回文本混乱的问题强制格式化输出JSON/字符串/数组完美适配前端数据渲染。1.4 链路ChainLangChain 的核心把「提示词 → 模型调用 → 结果解析」串联成一条流水线前端直接调用即可无需重复写冗余逻辑。1.5 流式输出Stream前端 AI 交互的灵魂实现用户感知极强的打字机实时输出效果替代传统的等待全部返回再渲染的卡顿体验。## 二、前端专属环境搭建ViteTS 通用方案LangChain.js 完全适配前端工程化项目支持 Vite、Vue3、React、Node 环境下面以最通用的ViteTS为例搭建环境。2.1 初始化前端项目如果已有项目可直接跳过初始化直接安装依赖# 初始化 vite 项目 npm create vitelatest langchain-frontend-demo -- --template vanilla-ts # 进入项目 cd langchain-frontend-demo # 安装核心依赖 npm install langchain/core langchain/openai dotenv npm install -D vite-plugin-env2.2 关键配置前端必看避坑LangChain.js 基于 ESM 规范开发需要在package.json开启模块支持否则会报语法错误{ type: module, scripts: { dev: vite, build: tsc vite build } }2.3 配置模型密钥项目根目录新建.env文件配置大模型 Key本文以 OpenAI 兼容接口为例可替换 DeepSeek、讯飞等模型VITE_OPENAI_API_KEY你的模型密钥 VITE_OPENAI_BASE_URL模型接口地址## 三、第一个 LangChain 程序基础对话调用我们先实现最简单的 AI 对话能力验证环境是否正常代码极简、完全前端化。新建src/main.ts写入核心代码import { ChatOpenAI } from langchain/openai; import dotenv/config; // 1. 初始化前端可用的对话大模型 const llm new ChatOpenAI({ apiKey: import.meta.env.VITE_OPENAI_API_KEY, baseURL: import.meta.env.VITE_OPENAI_BASE_URL, model: gpt-3.5-turbo, temperature: 0.7, // 随机性 0-1越低回答越严谨 }); // 2. 基础对话调用 const chat async () { const res await llm.invoke(请用前端通俗易懂的话解释什么是虚拟DOM); console.log(AI回答, res.content); }; chat();运行npm run dev打开浏览器控制台即可看到 AI 输出结果。前端优势全程无后端服务、无 Python 环境纯前端代码直接运行和我们日常调用接口逻辑完全一致。## 四、前端核心实战封装可复用 AI 链路Chain裸调用模型无法适配业务接下来我们用 LangChain 核心能力封装提示词模板 链路 输出解析的完整业务能力这是项目中最常用的写法。4.1 场景前端技术问题智能解答需求固定 AI 角色为「资深前端面试官」根据用户输入的技术问题输出简洁、专业的前端解答。import { ChatOpenAI } from langchain/openai; import { ChatPromptTemplate } from langchain/core/prompts; import { StringOutputParser } from langchain/core/output_parsers; // 1. 初始化模型 const llm new ChatOpenAI({ apiKey: import.meta.env.VITE_OPENAI_API_KEY, baseURL: import.meta.env.VITE_OPENAI_BASE_URL, model: gpt-3.5-turbo, }); // 2. 定义可复用提示词模板前端组件化思维 const prompt ChatPromptTemplate.fromMessages([ [system, 你是一名资深前端技术专家擅长用通俗易懂的语言解答前端问题回答简洁精炼贴合实际开发场景], [user, 请解答这个前端问题{question}] ]); // 3. 定义输出解析器 const parser new StringOutputParser(); // 4. 组装 Chain 链路核心流水线组合 const chain prompt.pipe(llm).pipe(parser); // 5. 调用链路 const getFrontendAnswer async (question: string) { return await chain.invoke({ question }); }; // 测试调用 getFrontendAnswer(Vue3 和 React 核心区别是什么).then(res console.log(res));4.2 代码解析前端视角PromptTemplate相当于 AI 业务的「配置组件」统一角色和输出规范可全局复用pipe 管道类似前端链式调用把模板、模型、解析器串联逻辑清晰OutputParser过滤模型返回的冗余参数只返回业务需要的文本内容## 五、前端必备技能实现流式打字机效果所有 AI 聊天产品的核心体验都是流式输出如果等待接口全部返回再渲染用户体验极差。LangChain 一行代码即可实现前端打字机效果适配 Vue/React 状态渲染。5.1 流式输出实战代码// 基于上面的 chain 链路改造为流式调用 const getStreamAnswer async (question: string, onUpdate: (text: string) void) { // 开启流式输出 const stream await chain.stream({ question }); let fullText ; // 逐段接收数据 for await (const chunk of stream) { fullText chunk; // 实时回调更新前端视图 onUpdate(fullText); } }; // 模拟前端页面渲染更新 getStreamAnswer(如何优化前端首屏加载速度, (text) { // 此处可替换为 Vue/React 状态更新 console.log(实时输出, text); });5.2 前端业务适配说明在 React/Vue 项目中只需将onUpdate回调替换为组件状态更新即可实现页面实时打字效果完全适配现有前端状态管理逻辑无侵入、易维护。## 六、进阶实战结构化 JSON 输出适配前端渲染前端业务中我们经常需要 AI 返回JSON 结构化数据比如列表、表单配置、题目数组等普通文本输出无法直接渲染此时需要用到 LangChain 的JsonOutputParser。6.1 场景AI 生成前端面试题列表import { JsonOutputParser } from langchain/core/output_parsers; // 定义JSON输出格式规范 interface InterviewQuestion { title: string; answer: string; difficulty: 简单 | 中等 | 困难; } // 初始化JSON解析器 const jsonParser new JsonOutputParserInterviewQuestion[](); // 自定义提示词强制输出JSON格式 const jsonPrompt ChatPromptTemplate.fromMessages([ [system, 你是前端面试官请根据技术栈生成3道面试题严格按照JSON数组格式输出包含title、answer、difficulty字段不要返回多余文字], [user, 技术栈{techStack}], ]); // 组装链路 const jsonChain jsonPrompt.pipe(llm).pipe(jsonParser); // 调用获取结构化数据 const getInterviewQuestions async (techStack: string) { return await jsonChain.invoke({ techStack }); }; // 直接获取可渲染的JSON数据 getInterviewQuestions(Vue3).then(list { console.log(面试题列表, list); // 可直接用于前端列表渲染 });该能力可广泛用于AI 生成表单配置、生成组件配置、生成文案列表、生成题目题库等前端业务场景。## 七、前端项目落地避坑指南结合前端工程化特性整理 5 个高频踩坑点帮你快速落地生产级项目7.1 跨域问题前端直接请求大模型接口会触发跨域解决方案本地开发配置 Vite 代理生产环境通过后端中转接口禁止前端直接暴露密钥上线。7.2 环境适配问题必须开启 ESM 模块package.json配置type: module否则顶层 await、模块导入会报错。7.3 密钥安全问题前端环境变量VITE_开头变量会暴露在浏览器生产环境必须通过后端代理转发请求杜绝密钥泄露。7.4 流式渲染卡顿大段流式数据渲染时避免频繁更新 DOM可做节流处理优化页面性能。7.5 上下文记忆丢失多轮对话需要手动维护消息数组通过ChatPromptTemplate传入历史消息实现对话记忆。## 八、前端常用 LangChain 业务场景总结学完以上内容可直接落地这些主流 AI 前端场景智能问答机器人官网客服、文档问答、业务咨询AI 内容生成自动生成文案、注释、前端代码、面试题智能编辑功能AI 改写文本、优化文案、纠错润色结构化数据生成自动生成表单、列表、配置文件沉浸式流式交互所有 AI 聊天、问答类页面优化用户体验## 结尾对前端开发者来说LangChain 不是复杂的后端框架而是前端 AI 业务的工程化工具。它帮我们解决了 AI 开发中最繁琐的 Prompt 管理、数据解析、流式交互、工作流编排问题让前端可以快速独立开发高质量 AI 交互应用。从基础调用、流式效果到结构化输出本文的所有代码均可直接复制运行适配 Vue、React、原生前端项目。掌握这套能力就能快速承接公司 AI 前端业务完成技术升级。
