前端视角下认识 AI Agent 和 LangChain

AI Agent 和 传统应用的区别

我们假设要开发一个对话机器人的应用。

对于传统对话机器人开发：核心在于后端业务逻辑、数据库设计、API 接口等技术栈。

而对于 AI Agent 对话机器人开发：核心变成了如何与大模型对话、如何优化提示词、如何管理对话流程。

核心在于 AI Agent 中，大模型是驱动这个程序核心，这也是为什么说 AI 改变了传统应用的开发模式。

AI Agent 的构成

现在大家常用一个经典公式来概括它的核心构成：

AI Agent = LLM(大脑) + Memory(记忆) + Planning(规划) + Tools(工具)

让我们来逐一拆解这四个核心组件：

• LLM (大语言模型): Agent 的核心引擎，充当"大脑"的角色。它负责理解用户意图，进行推理、分析和决策。所有复杂的逻辑判断和语言理解，都由它来完成。
• Planning (规划): Agent 的"思考框架"。当面对复杂任务时（比如"规划旅行"），Agent 需要将其分解成一系列可执行的小步骤（1. 查天气 → 2. 查酒店 → 3. 查景点 → 4. 规划行程）。这种任务分解和规划能力是 Agent 自主性的关键。
• Memory (记忆): Agent 的"笔记本"。它能记住之前的交互历史、任务的中间结果，甚至过去的成功经验和失败教训。这使得 Agent 在多轮对话和长期任务中能保持上下文连贯，而不是只有"七秒钟记忆的金鱼脑袋"。
• Tools (工具): Agent 的"双手"，是它与现实世界交互的桥梁。无论是 API 调用（如查询天气）、数据库查询，还是近期热门的 MCP Server 概念，这些都属于工具的范畴。

为什么你需要一个 AI 开发框架

在传统开发中，不同的编程语言都有自己的“神器”：

• Java 开发者会用 Spring 框架
• Go 程序员会选择 Gin 框架
• Python 开发者青睐 Django/Flask

那么在 AI 应用开发领域，什么是我们的“趁手兵器”呢？

目前 AI Agent 开发框架中最耀眼的一颗星，毫无疑问就是 LangChain。今天，就让我们一起来揭开它的神秘面纱！

 LangChain 是什么？一个生动比喻告诉你答案

我们使用一个例子，来说明 LangChain 为什么是 AI Agent 开发中必不可少的内容。

没有 LangChain 时，调用不同的大模型可能需要这样：

以下是调用 OpenAI 的 Nodejs 代码

import OpenAI from 'openai';

// 初始化客户端
const openai = new OpenAI({
  apiKey: 'your-openai-api-key',
});

// 调用 ChatGPT
async function callOpenAI() {
  try {
    const completion = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      messages: [
        { role: "system", content: "You are a helpful assistant." },
        { role: "user", content: "Hello!" }
      ],
      temperature: 0.7,
    });

    console.log(completion.choices[0].message.content);
    return completion;
  } catch (error) {
    console.error('Error calling OpenAI:', error);
  }
}


// 调用 Claude
import Anthropic from '@anthropic-ai/sdk';

// 初始化客户端
const anthropic = new Anthropic({
  apiKey: 'your-anthropic-api-key',
});

async function callClaude() {xxx}

// 调用函数
callClaude();

而你使用 LangChain 后：

import { ChatOpenAI } from "@langchain/openai";
import { ChatAnthropic } from "@langchain/anthropic";
import 'dotenv/config';

// 注：import 'dotenv/config';作用是自动从项目根目录的 `.env` 文件中读取环境变量
// 例如 .env 文件中有配置 OPENAI_API_KEY = xxx, 那么我们就可以用 process.env.OPENAI_API_KEY 获取到值

// 统一的使用方式
const openai_llm = new ChatOpenAI({
  modelName: "gpt-4",
  temperature: 0.7,
  apiKey: process.env.OPENAI_API_KEY, // 从环境变量读取
});

const claude_llm = new ChatAnthropic({
  modelName: "claude-3-opus-20240229", // Claude 需要具体版本
  temperature: 0.7,
  apiKey: process.env.ANTHROPIC_API_KEY, // 从环境变量读取
});

// 调用方式完全一致！
async function callModels() {
  try {
    // 单个调用
    const response1 = await openai_llm.invoke("你好");
    const response2 = await claude_llm.invoke("Hello");
    
    console.log("GPT-4 回复:", response1.content);
    console.log("Claude 3 回复:", response2.content);
    
    return { response1, response2 };
  } catch (error) {
    console.error("调用模型时出错:", error);
    throw error;
  }
}

// 调用函数
callModels();

看到区别了吗？LangChain 就像是一个万能翻译器，无论底层用的是哪个大模型，都为你提供统一的 API 接口。

展示一下deepseek用langchain的调用方式：

js 版本, 注意下载 @langchain/core，@langchain/openai 包。

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

const apiKey = "sk-xx";

const llm = new ChatOpenAI({
  model: "deepseek-chat",
  temperature: 0,
  apiKey,
  configuration: {
    baseURL: "https://api.deepseek.com",
  },
  // other params...
});

const run = async () => {
  try {
    const response = await llm.invoke([
      {
        role: "user",
        content: "I love programming.",
      },
    ]);
    console.log("response:", response);
  } catch (error) {
    console.error("Error:", error);
  }
};

run();

拆解 LangChain：名字里藏着什么秘密？

Lang + Chain = 语言模型 + 链式调用

这个名字精准地描述了它的核心思想：

• Lang：代表大语言模型（Large Language Model）
• Chain：代表将不同组件像链条一样连接起来

合起来就是：通过链式架构将大模型能力连接到实际应用中。

前端开发者的福音

好消息是，LangChain 原生支持 TypeScript！这意味着前端开发者可以用自己熟悉的 JavaScript/TypeScript 来构建 AI 应用。

LangChain 还解决了哪些大模型的问题

大模型虽然强大，但也有一些“与生俱来”的局限性：

1. 信息过时问题

大模型很可能会告诉你它不知道，因为它的训练数据截止到某个特定日期。这种时效性强的问题，单纯的大模型很难给出准确答案。

2. 无法联网

大模型不能实时访问互联网（虽然有些模型后期增加了联网功能，但这通常是基于 LangChain 等技术实现的扩展）。

3. 私有知识盲区

大模型没有学习过你公司的内部文档，自然无法回答这类问题。

4. 无法调用外部服务

大模型本身没有订票能力，它需要调用第三方的机票预订 API。

LangChain 如何解决这些问题？

针对上述问题，LangChain 提供了完整的解决方案：

解决方案矩阵

统一的多模型支持

LangChain 支持几乎所有主流大模型：

• OpenAI GPT 系列
• Anthropic Claude 系列
• Google Gemini
• 开源模型（Llama、Qwen等）

而且调用方式完全统一，让你可以轻松切换或同时使用多个模型。

关于可视化平台的思考

有些同学可能会问：“现在不是有 Coze、Dify 这类可视化 AI 应用搭建平台吗？为什么还要学编程去做大模型应用？”

这个问题问得很好！作为前端开发者，你一定很清楚低代码/无代码平台的优缺点：

可视化平台的优势

• 上手快，无需编码
• 快速原型验证
• 适合简单场景

可视化平台的局限

• 定制化能力有限
• 复杂逻辑实现困难
• 难以集成到现有系统
• 性能和扩展性受限

就像你不会只用低代码平台来做复杂的前端项目一样，在需要深度定制和复杂集成的 AI 应用场景中，掌握 LangChain 这样的编程框架是必不可少的。

讲完 Langchain 是什么了，接下来我们了解下 AI Agent 开发我们常见遇到的 4 个场景，帮助我们了解到后续开发 AI Agent 可能遇到的架构是什么。

AI Agent 开发常见的 4 个场景

场景一：纯Prompt场景

纯Prompt场景是最基础、最直接的AI应用方式，就像使用搜索引擎一样简单：你输入问题（Prompt），AI直接返回答案。示意图如下：

// 纯Prompt场景的简单实现
import { ChatOpenAI } from "@langchain/openai";

const llm = new ChatOpenAI({
  modelName: "gpt-4",
  temperature: 0.7,
});

// 直接调用
const response = await llm.invoke("帮我写一首关于春天的诗");
console.log(response.content);

场景二：Agent + Function Call

什么是Agent + Function Call？

Agent是能够自主规划、决策和执行的智能体，Function Call让AI能够调用外部工具和API，真正"动手做事"。

简单举例，我们查询天气时，ai 肯定不知道当天天气是什么，此时，ai 可以调用一个函数，这个函数是我们后端自己写的，当问及查询天气的时候，就让大模型调我们的查询天气 api，然后将结果给大模型，最后大模型返回给用户。

场景三：RAG（检索增强生成）

简单来说，比如你们要做一个公司内部文档的 AI Agent，当你问这个 AI Agent 问题的时候，很多问题都是跟公司内部信息有关，这个大模型肯定是不知道的，所以我们提前把公司各种资料转化为大模型认识的格式（向量），保存在数据库中，当大模型回答有关公司问题的时候，先去我们的数据库查相关内容，然后找到相关信息，再把之前用户提问的问题增强一下。

增强是指，把从向量数据库搜索的一些资料也附带在问题中，最终大模型基于这些资料和用户的问题回答。

场景四：Fine-tuning（微调训练）

微调也很好理解，之前 RAG 是把我们公司数据库里的信息附带着给大模型，让大模型知道一些背景信息，而微调，是直接把数据库里的资料给大模型训练，让大模型学习到。

最后用户问问题的时候，就不需要 RAG 的模式，还去我们本地的数据库搜索了，直接就能回答跟公司相关的问题了。这就是微调！

其实目前实现 AI Agent 大部分就是上面四种类型 + 在可视化平台拖拉拽的方式。