第十四章 · 开源库

14.3 AI 功能增强：大模型工具库

本节最后更新：2026-05-13
验证环境：Node.js v22.x, Vercel AI SDK v3.x, LangChain v0.2.x

当 AI 遇到 AI

前面的章节中，你通过 Claude Code 与 AI 交互来写代码。但如果你在你自己构建的应用中也想接入 AI 能力呢？

这就是本节的内容：用开源工具库给你的应用添加 AI 功能——聊天、文本生成、语义搜索、Agent 循环。

两个推荐库各有侧重：Vercel AI SDK 更轻量、更现代；LangChain 更全面、更生态。一个很有趣的事实是——Vercel AI SDK 是专为"在应用中加入 AI"设计的，而 LangChain 是专为"用 AI 构建应用"设计的。前者更贴近前端开发者的思维，后者更贴近 AI 开发者的思维。

Vercel AI SDK（轻量首选）

简介：Vercel 出品的 AI 集成 SDK，支持流式响应、统一的多模型接口、前端友好的 hook。

为什么 AI 友好：

useChat hook 三行代码实现一个聊天界面（没错，三行）
流式响应开箱即用——AI 生成文字的同时前端实时显示
支持 Claude、GPT、Gemini 等主流模型——切换模型只需要改一个字符串

快速体验指令：

帮我用 Vercel AI SDK 创建一个聊天页面：
- 使用 Claude API
- 消息列表 + 输入框
- 流式响应（AI 打字效果）
- 空状态时显示欢迎语

AI 会安装 ai 包、创建 API 路由、写前端组件——整个聊天应用不超过 50 行代码。

核心模式的完整代码：

后端 API 路由（app/api/chat/route.ts）：

import { streamText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

export async function POST(req) {
  const { messages } = await req.json();
  const result = streamText({
    model: anthropic('claude-sonnet-4-20250514'),
    messages,
  });
  return result.toDataStreamResponse();
}

前端组件（app/page.tsx）：

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (/* 消息列表 + 输入框 */);
}

streamText 是后端 API——它接收消息数组，返回流式响应。useChat 是前端 hook——它管理消息状态，自动处理流式数据的渲染。两段代码加起来不到 20 行，一个完整的 AI 聊天功能就完成了。

为什么 useChat 这么简洁： 它封装了几乎所有聊天 UI 需要的状态管理——消息数组、输入框内容、提交处理、加载状态、错误处理。你用三行代码就获得了这些。"AI 集成应该像调用一个函数一样简单"——Vercel AI SDK 的设计哲学。

Tool Calling 示例：

让 AI 能调用你定义的工具（如查询数据库）：

在聊天中添加 Tool Calling 功能：
- 添加一个 getWeather 工具，接收城市名，返回模拟天气数据
- AI 在回答中自动调用这个工具
- 前端显示工具调用的结果

AI 会用 tools 参数扩展 streamText 调用，在 API 路由中定义工具函数，前端自动显示工具调用结果。整个改动约 20 行代码。

进阶用法：

Multi-modal：支持图片输入——让 AI 能"看到"用户上传的图片
Guardrails：添加内容过滤规则——阻止 AI 生成特定类型的内容
Streaming 自定义：控制流式响应的渲染方式——逐字、逐句、或按段落

LangChain（生态最全面）

简介：LangChain 是大模型应用开发的事实标准框架。它的组件覆盖了几乎所有 AI 集成场景。

为什么 AI 熟悉：

它是 AI 应用开发中最流行的框架，AI 的训练数据中充满了 LangChain 代码
提供了完整的 RAG 工具链（文档加载、分割、向量化、检索）
Agent 系统成熟——让 AI 自主决策、多步推理、调用工具

Vibe Coding 用法：

用 LangChain 实现一个文档问答系统：
1. 加载一个 PDF 文件
2. 分割成段落
3. 用 OpenAI 的 embedding 模型向量化
4. 用户提问时，检索最相关的 3 个段落
5. 将段落作为上下文发送给 Claude，生成回答

AI 会安装 langchain、langchain-community、chromadb 等包，搭出完整的 RAG 流水线。

什么时候选 LangChain：

你需要完整的 RAG 系统（文档→向量→检索→生成）
你的业务逻辑包含复杂的多步流程（需要 Agent）
你需要接入多种模型和多种数据源

LangChain 的 Agent 系统：

Agent 是 LangChain 最强大的功能之一——它让 AI 不只是"回答问题"，而是"执行多步任务"。

创建一个 LangChain Agent：
- 连接 SQLite 数据库
- 当用户问"上个月的销售额是多少"时，Agent 自动生成 SQL 查询并执行
- 返回查询结果的文字总结
- 如果查询报错，Agent 自动修复 SQL 并重试

AI 会创建一个 Agent，配置数据库工具，定义执行逻辑。这个 Agent 的流程是：用户提问 → AI 理解 → 生成 SQL → 执行 → 如果出错则修复 → 返回结果。

Agent 和普通 Chat 的区别： 普通 Chat 只做"输入文本 → 输出文本"。Agent 可以做"输入文本 → 决定要做什么 → 执行工具 → 观察结果 → 再决定下一步 → 输出文本"。它是循环的、主动的、有工具使用能力的。

其他值得关注的库

LlamaIndex： 和 LangChain 类似但更专注于"数据索引和检索"。如果你的核心需求是 RAG，LlamaIndex 在某些方面比 LangChain 更高效。AI 对 LlamaIndex 的熟悉度中等。

Transformers（Hugging Face）： 如果你需要运行本地模型（如 BGE Embedding、Llama 等），Transformers 是标准库。AI 非常熟悉它的 API。

Ollama： 如果你想在本地运行开源模型（如 Llama、Mistral、Qwen），Ollama 是最简单的方案——一行命令安装，AI 可以帮你配置 API 调用。

对比总结

特性	Vercel AI SDK	LangChain
定位	轻量 AI 集成	全功能 AI 应用框架
安装大小	极小（几个核心函数）	大（百+ 集成包）
学习曲线	低（3 个核心 API）	高（概念多、抽象层级多）
适用场景	聊天、生成、工具调用	RAG、Agent、复杂工作流
前端集成	原生支持 React hook	需额外封装
模型切换	改一个字符串	需修改 Chain 配置
RAG 支持	需自己实现	完整工具链
Agent 支持	基础 Tool Calling	完整 Agent 框架

最佳实践：从小开始

一个被反复验证的策略：先用 Vercel AI SDK 快速实现 AI 功能，复杂度上来后在需要的地方引入 LangChain。

具体来说：

第一版：用 Vercel AI SDK 的 useChat 实现聊天界面——20 行代码、10 分钟搞定
第二版：添加 Tool Calling，让 AI 能查询数据库——让 AI 有"动手能力"
第三版：如果需要处理文档，引入 LangChain 的文档加载器和 RAG 工具
第四版：用 LangChain 的 Agent 实现多步推理——让 AI 能自主完成复杂任务

每一版都只增加必要的复杂度，不提前引入。这条原则叫做 YAGNI（You Aren't Gonna Need It，你不会需要它）——在你真正需要之前，不要为它写代码。AI 生成的代码也一样，先做最简单的版本，复杂度在需要时自然增加。

本节要点

Vercel AI SDK 适合"快速给应用添加 AI 功能"——三行代码实现聊天界面。Tool Calling 让 AI 能调用外部工具。
LangChain 适合需要 RAG、Agent 和复杂工作流的场景——生态最全面。Agent 系统是它最强大的功能。
Vercel AI SDK 设计哲学是"AI 集成像调用一个函数一样简单"；LangChain 设计哲学是"构建复杂的 AI 应用流水线"。
Tool Calling 是给 AI 添加"动手能力"的最实用方式——让 AI 能查询数据库、发邮件、操作文件。
最佳实践：用 Vercel AI SDK 快速起步（20 行代码、10 分钟），复杂度上来后在需要的地方引入 LangChain。YAGNI 原则——不提前为不需要的复杂度买单。

Vibe 练习

对 Claude Code 说：

"用 Vercel AI SDK 在 Next.js 项目中创建一个 AI 聊天助手。要求：1）使用 Claude API；2）流式响应；3）支持 Markdown 渲染（代码块高亮）。先初始化项目。"

进阶练习：

完成基础聊天后，让 AI "添加一个 Tool Calling 工具：get_weather(city: string)，返回模拟天气数据（温度、天气状况、湿度）。让 AI 在用户询问天气时自动调用这个工具并返回结果。前端显示工具调用的状态（正在查询天气……）。"