前端转 AI Agent 工程师进阶指南

主题

专题 09 前端 AI 工具链与生态 ​

本专题面向"知道要做 AI Agent，但不确定该用哪些工具"的前端工程师。它不做大而全的工具清单，而是围绕本指南的学习主线，把前端生态里最值得关注的 AI 工具按用途梳理清楚，帮你在不同阶段做出合理选型。

1. 为什么需要这个专题 ​

前端 AI 工具链正在快速膨胀。npm 上与 AI 相关的包每月都在增长，但多数前端工程师面对的困境不是"没工具"，而是：

  • 同一件事有多个库可选，不知道选哪个。
  • 有些工具看起来很强，但实际场景用不到。
  • Python 社区的工具很成熟，Node/TS 社区的对应物在哪里。
  • 学了一个库，不确定它在真实项目里怎么跟其他部分衔接。

本专题的目标是：给每类工具一个清晰的定位，说明它适合什么场景，并标注它对应本指南的哪些章节和示例，让你的学习路径和工具选型同步推进。

2. Vercel AI SDK ​

定位 ​

Vercel AI SDK（ai 包）是目前前端生态中最贴近"开箱即用"的 LLM 应用层框架。它把流式响应、工具调用、多模型切换等常见需求封装成统一 API，让你不必直接处理各家模型的 HTTP 细节。

适用场景 ​

  • 快速搭建流式聊天界面。
  • 需要在同一代码中切换 OpenAI、Anthropic、Google 等多个模型提供商。
  • 需要在前端或 API 路由中实现 tool calling。
  • 需要结构化输出（generateObject / streamObject）。

与主线章节的关系 ​

  • 第 02 章（LLM 应用基础）：generateText 和 streamText 对应基础调用与流式响应。
  • 第 03 章（工具调用与单 Agent）：tool 定义和 maxSteps 循环对应 ReAct 模式。
  • 示例 01（api-ts）：直接使用 AI SDK 构建 tool calling Agent。

代码示例 ​

typescript
import { generateText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const result = await generateText({
  model: openai('gpt-4o'),
  prompt: '北京今天天气怎么样？',
  tools: {
    getWeather: tool({
      description: '查询指定城市的天气',
      parameters: z.object({ city: z.string() }),
      execute: async ({ city }) => fetchWeather(city),
    }),
  },
  maxSteps: 3,
});

3. LangChain.js ​

定位 ​

LangChain.js 是 LangChain Python 框架的 TypeScript 版本。它提供了 Chain、Agent、Memory、Retriever 等一整套抽象，适合需要组合多个步骤完成复杂任务的场景。

适用场景 ​

  • 构建 RAG 管道：文档加载、切分、向量化、检索、生成。
  • 需要多步骤 Chain 编排。
  • 需要使用 Agent 框架（ReAct、Plan-and-Execute 等）。
  • 团队中 Python 和 Node 需要概念对齐。

与主线章节的关系 ​

  • 第 04 章（RAG 入门）：RecursiveCharacterTextSplitter、VectorStoreRetriever 对应文档切分与检索。
  • 第 05 章（RAG 进阶）：MultiQueryRetriever、Reranker 集成对应高级检索策略。
  • 第 06 章（工作流编排）：RunnableSequence 和 LCEL 对应链式调用。
  • 第 07 章（多 Agent 协作）：AgentExecutor、createReactAgent 对应 Agent 模式。

概念对齐说明 ​

LangChain.js 与 Python 版共享同一套核心概念（Chain、Agent、Tool、Retriever、Memory），API 命名高度一致。如果你读到 Python 社区的教程或论文，可以直接在 JS 版中找到对应实现。主要差异在于：JS 版的社区集成数量较少，部分高级功能发布会晚几周。

代码示例 ​

typescript
import { ChatOpenAI } from '@langchain/openai';
import { createReactAgent } from '@langchain/langgraph/prebuilt';

const agent = createReactAgent({
  llm: new ChatOpenAI({ model: 'gpt-4o' }),
  tools: [searchTool, calculatorTool],
});

const result = await agent.invoke({
  messages: [{ role: 'user', content: '帮我查一下苹果最新市值' }],
});

4. Mastra ​

定位 ​

Mastra 是一个面向 TypeScript 的多 Agent 编排框架。它的核心价值在于让你用声明式的方式定义 Agent 角色、协作关系和工作流，而不是手动拼接消息传递逻辑。

适用场景 ​

  • 需要多个 Agent 协作完成复杂任务。
  • 希望用 TypeScript 原生方式定义 Agent 编排，而不是依赖 Python 服务。
  • 需要 Agent 之间的状态共享和任务委派。

与主线章节的关系 ​

  • 第 07 章（多 Agent 协作）：对应 Supervisor、分层委派等多 Agent 模式。

说明 ​

Mastra 在 TS 多 Agent 编排领域是一个值得关注的新选项。如果你的项目以 TypeScript 为主且需要多 Agent 协作，可以评估是否适合引入。对于单 Agent 场景，AI SDK 或 LangChain.js 通常已经足够。

5. AI 编码助手 ​

定位 ​

Cursor、GitHub Copilot 等 AI 编码助手本身不是你要构建的 Agent，而是你构建 Agent 时的效率工具。理解它们的工作方式，也有助于理解 Agent 的核心机制。

适用场景 ​

  • 加速 Agent 代码的编写、调试和重构。
  • 利用 Cursor 的 Agent 模式直接执行多步骤开发任务。
  • 通过 Copilot 的代码补全降低 API 调用代码的记忆负担。

与 Agent 开发的关系 ​

AI 编码助手本身就是 Agent 模式的应用实例：

  • Cursor Agent 模式使用了 tool calling（文件读写、终端执行、搜索），对应第 03 章。
  • Cursor 的 Rules 机制本质上是上下文工程，对应专题 01。
  • Copilot 的内联补全是最轻量的 LLM 集成模式，对应第 02 章。

理解这些工具的工作原理，等于在日常使用中不断强化对 Agent 架构的直觉。

6. 浏览器与自动化 ​

定位 ​

Playwright、Puppeteer 等浏览器自动化工具与 AI 结合后，可以让 Agent 像人一样操作网页。MCP 浏览器端工具进一步将这种能力标准化。

适用场景 ​

  • Agent 需要在网页上执行操作（填表、点击、截图、提取内容）。
  • 需要构建端到端的自动化测试流程。
  • 需要用 AI 做网页内容理解和信息提取。

与主线章节的关系 ​

  • 实战项目 B（浏览器自动化 Agent）：直接对应 Playwright + AI 的实战。
  • 专题 02（MCP 与外部工具生态）：MCP 浏览器端工具是工具接入标准化的典型案例。

代码示例 ​

typescript
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');

const content = await page.textContent('main');
// 将 content 作为上下文传给 LLM 进行理解和决策

工具选型 ​

  • Playwright：推荐首选，API 设计现代，支持多浏览器，社区活跃。
  • Puppeteer：Chrome 专用，适合已有 Puppeteer 经验的团队。
  • MCP 浏览器工具：如果你的 Agent 通过 MCP 协议接入，浏览器操作可以作为标准 MCP 工具暴露。

7. 嵌入式向量与轻量检索 ​

定位 ​

不是所有 RAG 场景都需要部署独立的向量数据库。前端和 Node 生态有一些轻量级检索方案，适合中小规模数据集或本地/边缘场景。

适用场景 ​

  • 文档量在几千到几万条，不需要分布式向量数据库。
  • 希望在 Node 进程内完成检索，减少外部依赖。
  • 需要快速原型验证 RAG 效果。
  • 边缘计算或离线场景。

与主线章节的关系 ​

  • 第 04 章（RAG 入门）：对应向量存储与检索环节。

代表工具 ​

  • Orama：纯 TypeScript 实现的全文搜索与向量搜索引擎，零外部依赖，支持浏览器和 Node。适合嵌入式场景和快速原型。
  • Vectra：基于本地文件的轻量向量索引，适合 Node 端小规模 RAG。

使用建议 ​

轻量检索方案适合学习和原型阶段。当数据量超过十万条或需要多副本、高可用时，应迁移到 Pinecone、Weaviate、Qdrant 等专用向量数据库。

8. MCP 客户端 ​

定位 ​

MCP（Model Context Protocol）客户端库让你的前端或 Node 应用能够发现并调用 MCP 服务端暴露的工具和资源。

适用场景 ​

  • 你的 Agent 需要接入多个外部工具，且这些工具以 MCP Server 方式提供。
  • 需要统一的工具发现、调用和权限管理机制。
  • 构建可扩展的 Agent 工具生态。

与主线章节的关系 ​

  • 专题 02（MCP 与外部工具生态）：直接对应 MCP 架构中的客户端角色。

接入方式 ​

typescript
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';

const transport = new StdioClientTransport({
  command: 'node',
  args: ['path/to/mcp-server.js'],
});

const client = new Client({ name: 'my-agent', version: '1.0.0' });
await client.connect(transport);

const tools = await client.listTools();
const result = await client.callTool({ name: 'search', arguments: { query: '...' } });

说明 ​

MCP SDK 提供了 TypeScript 原生支持。如果你已经在用 AI SDK，Vercel 也提供了 MCP 适配器，可以直接将 MCP 工具转换为 AI SDK 的 tool 格式。

9. Eval 工具 ​

定位 ​

评测工具用于衡量 Agent 输出的质量，包括正确性、一致性、安全性和延迟等维度。没有评测，优化就只能靠直觉。

适用场景 ​

  • 需要系统化验证 RAG 检索和生成质量。
  • 需要对比不同 Prompt 版本或模型的效果。
  • 需要在 CI/CD 中集成自动化质量门禁。

与主线章节的关系 ​

  • 第 08 章（评测体系）：直接对应评测方法论和工具选型。

前端 / Node 可用的评测方案 ​

  • 自建评测脚本：用 TypeScript 编写评测用例，调用模型做 LLM-as-Judge 评估，最灵活。
  • Promptfoo：开源的 Prompt 评测工具，支持 CLI 和 Node API，可以对比多模型、多 Prompt 的输出质量。
  • Braintrust：提供评测 SDK 和可视化面板，支持 TypeScript。
  • LangSmith：LangChain 生态的评测平台，如果已用 LangChain.js 可直接集成。

代码示例（自建评测） ​

typescript
interface EvalCase {
  input: string;
  expectedOutput: string;
  tags: string[];
}

async function evaluate(cases: EvalCase[], agentFn: (input: string) => Promise<string>) {
  const results = await Promise.all(
    cases.map(async (c) => {
      const output = await agentFn(c.input);
      const score = await llmJudge(c.expectedOutput, output);
      return { input: c.input, output, score };
    }),
  );
  return results;
}

10. 如何选择：按学习阶段的建议 ​

入门阶段 ​

优先掌握 Vercel AI SDK。它上手成本最低，覆盖了模型调用、流式响应、工具调用和结构化输出等核心场景。配合 Cursor 等 AI 编码助手加速开发。

这个阶段对应第 01–03 章，目标是能独立构建一个带 tool calling 的单 Agent。

进阶阶段 ​

引入 LangChain.js 构建 RAG 管道，用 轻量检索工具（如 Orama）做向量存储实验。开始关注 MCP 协议，理解工具标准化接入的价值。用 Playwright 尝试浏览器自动化 Agent。

这个阶段对应第 04–07 章和专题 02，目标是能构建包含检索、多工具、多步骤的完整 Agent 系统。

生产阶段 ​

建立 评测体系，用 Promptfoo 或自建脚本做持续质量监控。按需引入 Mastra 或其他多 Agent 编排方案处理复杂工作流。将工具接入统一到 MCP 架构下，做好权限、日志和可观测性。

这个阶段对应第 08–09 章和专题 05–06，目标是让 Agent 系统在真实业务中稳定运行。

一句话总结 ​

入门用 AI SDK 打通全链路，进阶用 LangChain.js + RAG 补足知识能力，生产用评测 + MCP + 可观测性保证质量。工具永远是手段，理解背后的模式比记住 API 更重要。