前端视角下认识 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 代码

ts 复制代码

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 后：

ts 复制代码

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 包。

ts 复制代码

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 的解决方案	实际应用场景
信息过时	实时数据检索	新闻查询、股票价格、天气信息
无法联网	网络搜索工具	最新资讯、实时数据获取
私有知识盲区	文档加载与向量检索	企业内部知识库、专业文档问答
不能调用 API	工具调用集成	订票、支付、查询等实际业务

统一的多模型支持

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直接返回答案。示意图如下：

ts 复制代码

// 纯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 大部分就是上面四种类型 + 在可视化平台拖拉拽的方式。

前端视角下认识 AI Agent 和 LangChain

AI Agent 和 传统应用的区别

AI Agent 的构成

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

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

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

前端开发者的福音

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

1. 信息过时问题

2. 无法联网

3. 私有知识盲区

4. 无法调用外部服务

LangChain 如何解决这些问题？

解决方案矩阵

统一的多模型支持

关于可视化平台的思考

AI Agent 开发常见的 4 个场景

场景一：纯Prompt场景

场景二：Agent + Function Call

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

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

AI Agent 和传统应用的区别