1. 引言
随着大语言模型（LLM）的普及，越来越多的前端开发者希望在自己的 Web 应用中集成 AI 能力。LangChain 作为最流行的 LLM 应用开发框架之一，最初以 Python 为主，而 LangChain.js 则为 JavaScript/TypeScript 开发者提供了同样的能力，让你可以在 Node.js 环境、浏览器端以及 Edge Functions 中快速构建 AI 应用。
本教程将带你从零开始，快速搭建基于 LangChain.js 的前端 AI 开发环境，并完成第一个可运行的对话示例。
2. 环境准备
在开始之前，请确保你的开发机满足以下条件：
- Node.js：18.x 或更高版本（推荐 20.x LTS）
- 包管理器：npm、yarn 或 pnpm（本文以 npm 为例）
- 代码编辑器：VS Code 或其他你熟悉的编辑器
- API Key：一个支持 OpenAI 兼容接口的模型服务商密钥（如 OpenAI、DeepSeek、Moonshot 等）
提示：如果你还没有 API Key，可以先使用本地模型（如 Ollama）或模拟响应来完成本教程的学习。
3. 初始化项目
打开终端，创建一个新的项目目录并初始化：
bash
mkdir langchain-js-demo
cd langchain-js-demo
npm init -y然后安装 LangChain.js 核心包：
bash
npm install langchain @langchain/openai dotenvlangchain：LangChain.js 核心库@langchain/openai：OpenAI 兼容接口的集成包dotenv：用于加载.env环境变量文件
4. 配置环境变量
在项目根目录创建 .env 文件：
bash
touch .env编辑 .env 文件，填入你的 API Key 和模型配置：
env
OPENAI_API_KEY=你的_API_Key
OPENAI_API_BASE=https://api.openai.com/v1
OPENAI_MODEL=gpt-4o-mini如果你使用的是其他兼容 OpenAI 接口的服务商，只需修改
OPENAI_API_BASE为对应的地址即可。
5. 编写第一个对话示例
在项目根目录创建 index.mjs 文件：
javascript
import { ChatOpenAI } from "@langchain/openai";
import "dotenv/config";
// 初始化模型
const model = new ChatOpenAI({
model: process.env.OPENAI_MODEL,
apiKey: process.env.OPENAI_API_KEY,
configuration: {
baseURL: process.env.OPENAI_API_BASE,
},
});
// 发送对话
const response = await model.invoke("用一句话介绍 LangChain.js");
console.log(response.content);在终端运行：
bash
node index.mjs如果一切正常，你将在终端看到模型返回的回复。
6. 构建流式响应
在实际的前端应用中，流式输出能显著提升用户体验。LangChain.js 原生支持流式调用：
javascript
import { ChatOpenAI } from "@langchain/openai";
import "dotenv/config";
const model = new ChatOpenAI({
model: process.env.OPENAI_MODEL,
apiKey: process.env.OPENAI_API_KEY,
configuration: {
baseURL: process.env.OPENAI_API_BASE,
},
});
const stream = await model.stream("讲一个关于程序员的笑话");
for await (const chunk of stream) {
process.stdout.write(chunk.content);
}运行后，你会看到文字像打字机一样逐字输出。
7. 接入前端项目
LangChain.js 不仅能在 Node.js 中运行，也可以直接在前端浏览器中使用。下面是一个基于 Vite + React 的最小示例：
bash
npm create vite@latest langchain-react-demo -- --template react
cd langchain-react-demo
npm install langchain @langchain/openai在 src/App.jsx 中编写：
jsx
import { useState } from "react";
import { ChatOpenAI } from "@langchain/openai";
function App() {
const [input, setInput] = useState("");
const [reply, setReply] = useState("");
const handleSend = async () => {
const model = new ChatOpenAI({
model: "gpt-4o-mini",
apiKey: import.meta.env.VITE_OPENAI_API_KEY,
configuration: {
baseURL: import.meta.env.VITE_OPENAI_API_BASE,
},
});
const response = await model.invoke(input);
setReply(response.content);
};
return (
<div style={{ padding: 24 }}>
<h1>LangChain.js 前端 Demo</h1>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="输入你的问题"
style={{ width: 300, marginRight: 8 }}
/>
<button onClick={handleSend}>发送</button>
<p style={{ marginTop: 16 }}>{reply}</p>
</div>
);
}
export default App;在项目根目录创建 .env 文件：
env
VITE_OPENAI_API_KEY=你的_API_Key
VITE_OPENAI_API_BASE=https://api.openai.com/v1注意：在浏览器端直接暴露 API Key 存在安全风险，生产环境建议通过后端代理转发请求。
8. 常见问题与排查
Q1：提示 401 Unauthorized
检查 .env 中的 API Key 是否正确，以及 OPENAI_API_BASE 是否指向正确的服务地址。
Q2：提示 Model not found
确认 OPENAI_MODEL 填写的模型名称在你的服务商账户中可用。
Q3：浏览器端跨域报错
部分模型服务商不允许浏览器直接跨域调用，此时需要搭建一个简单的后端代理：
javascript
// server.mjs（Node.js 代理示例）
import express from "express";
import { ChatOpenAI } from "@langchain/openai";
import cors from "cors";
const app = express();
app.use(cors());
app.use(express.json());
app.post("/api/chat", async (req, res) => {
const model = new ChatOpenAI({
model: process.env.OPENAI_MODEL,
apiKey: process.env.OPENAI_API_KEY,
});
const response = await model.invoke(req.body.message);
res.json({ reply: response.content });
});
app.listen(3000, () => console.log("代理服务已启动：http://localhost:3000"));9. 总结
通过本教程，你已经完成了 LangChain.js 开发环境的搭建，并实现了 Node.js 与前端 React 两个场景下的 AI 对话示例。LangChain.js 还支持 Prompt 模板、链式调用、记忆管理、工具调用等高级特性，后续可以在此基础上继续深入探索。