LangChain JS 入门指南：快速搭建前端 AI 开发环境

为什么前端需要掌握 LangChain JS？

近期协助团队做技术选型时，许多前端开发者都在反复斟酌：到底该不该引入 LangChain？

先给个明确结论：若从后端视角审视 AI 应用开发，LangChain 确实不是唯一选项；但从前端视角切入，这套框架值得深入评估。

咱们直接说干货——LangChain 当前已是 AI 应用开发领域最主流的框架之一，由 Harrison Chase 于 2022 年发起。它的核心定位并非让你重新训练或创造大模型，而是作为连接各类 LLM 与外部系统的“胶水层”。换句话说，它将 API 调用过程中繁琐的构造、解析等细节全部封装，你只需专注业务逻辑本身。

那么，针对前端开发者，LangChain 能具体化解哪些实际痛点？

第一步：安装 LangChain JS 环境

安装过程非常简洁，几步即可完成——

创建项目

# 创建项目文件夹
mkdir langchain-demo
cd langchain-demo
# 初始化 npm 项目
npm init -y
# 安装核心依赖
npm install langchain @langchain/core @langchain/openai dotenv
# 安装 TypeScript 支持（可选）
npm install -D typescript @types/node tsx

依赖包说明

创建 .env 文件

在项目根目录下创建 .env 文件，写入阿里云百炼的 API 配置：

# 阿里云百炼配置
DASHSCOPE_API_KEY=你的API Key
DASHSCOPE_API_URL=https://dashscope.aliyuncs.com/compatible-mode/v1

创建 .gitignore

.env
node_modules

第二步：一行代码接入阿里云百炼 API

编写基础调用代码

新建 src/basic.ts：

import { ChatOpenAI } from "@langchain/openai";
import dotenv from "dotenv";
dotenv.config();

async function basicCall() {
  // 初始化模型
  const model = new ChatOpenAI({
    apiKey: process.env.DASHSCOPE_API_KEY,
    configuration: {
      baseURL: process.env.DASHSCOPE_API_URL,
    },
    model: "qwen-turbo",
    temperature: 0.7,
  });
  // 调用模型
  const response = await model.invoke("你好，请介绍一下自己");
  console.log("AI 回复：");
  console.log(response.content);
}

basicCall();

运行代码

# 使用 tsx 直接运行 TS 文件
npx tsx src/basic.ts

若一切正常，你将看到 AI 的自我介绍——

AI 回复：你好！我是通义千问，由阿里巴巴集团旗下的阿里云研发的超大规模语言模型。我能够回答问题、创作文字、逻辑推理、编程等多种任务。你可以向我提问任何你感兴趣的问题，或者让我帮你完成一些任务。有什么我可以帮你的吗？

就这么简单！相比之前直接使用 fetch 等原生方式调用 API，LangChain 将请求构造、响应解析等重复操作全部封装掉了。

第三步：初识 LangChain 核心组件

LangChain 的设计理念是“组件化”。其核心组件包括以下几类：

1. LLM / ChatModel（模型层）

模型层是 LangChain 的核心抽象，统一了不同大模型的调用接口。

import { ChatOpenAI } from "@langchain/openai";

const model = new ChatOpenAI({
  apiKey: process.env.DASHSCOPE_API_KEY,
  configuration: {
    baseURL: process.env.DASHSCOPE_API_URL,
  },
  model: "qwen-turbo",
  temperature: 0.7,
  maxTokens: 1024 * 4,
});

2. PromptTemplate（提示词模板）

提示词模板用于动态构建 prompt，替代硬编码字符串拼接。

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

// 基础模板
const template = PromptTemplate.fromTemplate(
  "请将以下内容翻译成{target_lang}：{text}"
);
const formattedPrompt = await template.format({
  target_lang: "英文",
  text: "你好，世界！",
});
// 输出："请将以下内容翻译成英文：你好，世界！"

3. ChatPromptTemplate（对话模板）

专为对话模型设计，支持多角色设定。

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

const chatPrompt = ChatPromptTemplate.fromMessages([
  ["system", "你是一个专业的前端开发助手，回答要简洁"],
  ["human", "{user_input}"],
]);

const formatted = await chatPrompt.format({
  user_input: "什么是虚拟DOM？",
});

4. Chain（链）

Chain 用于将多个组件串联起来，形成完整的处理流程。

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

// 创建 prompt 模板
const prompt = ChatPromptTemplate.fromMessages([
  ["system", "你是一个{role}，回答要简洁"],
  ["human", "{question}"],
]);
// 创建模型
const model = new ChatOpenAI({ model: "qwen-turbo" });
// 组合成 Chain
const chain = prompt.pipe(model);
// 执行
const response = await chain.invoke({
  role: "前端开发专家",
  question: "解释一下闭包",
});
console.log(response.content);

第四步：完整入门 Demo

功能实现：智能翻译助手

创建 src/translator.ts：

import { ChatOpenAI } from "@langchain/openai";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import dotenv from "dotenv";
dotenv.config();

async function translatorDemo() {
  // 1. 定义对话模板
  const prompt = ChatPromptTemplate.fromMessages([
    ["system", "你是一个专业的翻译助手，只返回翻译结果，不要有其他解释。"],
    ["human", "请将以下内容翻译成{target_lang}：\n{text}"],
  ]);
  // 2. 初始化模型
  const model = new ChatOpenAI({
    openai_api_key: process.env.BAILIAN_API_KEY,
    configuration: {
      baseURL: process.env.BAILIAN_BASE_URL,
    },
    model: "qwen-turbo",
    temperature: 0.3,  // 翻译任务需要更精准，降低随机性
  });
  // 3. 构建 Chain
  const chain = prompt.pipe(model);
  // 4. 执行翻译任务
  const translations = [
    { target_lang: "英文", text: "人工智能正在改变世界" },
    { target_lang: "日语", text: "今天天气真好" },
    { target_lang: "法语", text: "欢迎来到我的博客" },
  ];
  for (const task of translations) {
    console.log(`\n???? 原文：${task.text}`);
    console.log(`???? 目标语言：${task.target_lang}`);
    const response = await chain.invoke(task);
    console.log(`✅ 翻译结果：${response.content}`);
    console.log("─".repeat(40));
  }
}

translatorDemo();

运行 Demo

npx tsx src/translator.ts

预期输出：

???? 原文：人工智能正在改变世界
???? 目标语言：英文
✅ 翻译结果：Artificial intelligence is changing the world.
────────────────────────────────────────
???? 原文：今天天气真好
???? 目标语言：日语
✅ 翻译结果：今日は天気がとても良いです。
────────────────────────────────────────
???? 原文：欢迎阅读我的博客
???? 目标语言：法语
✅ 翻译结果：Bienvenue sur mon blog
────────────────────────────────────────

环境配置常见问题

问题 1：依赖版本冲突

现象：安装时出现 ERESOLVE unable to resolve dependency tree

解决方案：添加 --legacy-peer-deps 标志

npm install --legacy-peer-deps

问题 2：401 Unauthorized 鉴权错误

现象：调用 API 返回 401 状态码

解决方案：

• 核对 .env 中的 API Key 是否准确
• 确认 BAILIAN_BASE_URL 的值为 https://dashscope.aliyuncs.com/compatible-mode/v1

问题 3：model not found 错误

现象：返回 400 错误，提示模型不存在

解决方案：检查模型名称是否正确，推荐使用 qwen-turbo（性价比最优）或 qwen-plus（效果更佳）

问题 4：LangSmith 相关报错

现象：控制台输出 LangSmith 相关的警告或错误

解决方案：关闭 LangSmith 追踪

process.env.LANGCHAIN_TRACING_V2 = "false";

结语

通过本篇教程，我们不仅完成了 LangChain JS 开发环境的搭建，还成功运行了首个对接阿里云百炼的 AI 应用。这个 Demo 虽小，但“组件化”的核心思想已经体现得淋漓尽致。接下来，你可以基于这个基础，逐步构建更复杂的 AI 功能——例如多轮对话、文件问答、知识库检索等。记住，关键在于灵活组合，而非重复造轮子。

若文中存在错误之处或你有任何疑问，欢迎在评论区留言交流！