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

为什么前端需要 LangChain？

框架核心价值

LangChain 是当前 AI 应用开发领域最流行的框架之一，由 Harrison Chase 于 2022 年创立。它的核心定位并非开发新的大模型，而是作为连接各种 LLM 与外部组件的"粘合剂"。

对于前端开发者来说，LangChain 的价值体现在：

价值点	说明
模块化设计	像搭积木一样组合功能，灵活应对问答、摘要、对话等不同场景
模型无关	无缝切换不同大模型（通义千问、DeepSeek、GPT 等），避免被单一厂商锁定
降低门槛	封装了 API 调用细节，开发者只需关注业务逻辑
TypeScript 支持	原生 TS 类型定义，开发体验优秀

第一步：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

依赖包说明

包名	作用
langchain	LangChain 核心框架
@langchain/core	核心抽象（PromptTemplate、Chain 等）
@langchain/openai	OpenAI 兼容接口适配器（用于对接阿里云百炼）
dotenv	环境变量管理

创建 .env 文件

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

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

注意 ：compatible-mode 是阿里云百炼的 OpenAI 兼容模式入口，LangChain 的 ChatOpenAI 可以通过这个地址无缝对接。

创建 .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 应用。

对于文章中错误的地方或有任何疑问，欢迎在评论区留言讨论！