Vercel AI SDK 6 完整教程系列 - 第三部分:构建智能 Agent 与多模态应用

本文介绍了Vercel AI SDK 6的高级特性，包括如何构建智能Agent和多模态应用。主要内容包括：使用ToolLoopAgent封装智能体，使其成为可复用的模块，并演示了一个研究员Agent的实例。 Loop Control机制，通过stopWhen和prepareStep精确控制Agent的执行流程。多模态能力，让AI能够处理图像输入，以发票识别为例展示实现方法。 DevTools调

泯泷

455人浏览 · 2026-02-18 17:05:30

泯泷 · 2026-02-18 17:05:30 发布

Vercel AI SDK 6 高级特性：构建智能 Agent 与多模态应用

前两篇教程里，我们把文本生成、结构化输出和基础工具调用都摸了一遍。用 maxSteps 搞出来一个多步推理的小 demo，看着挺像那么回事

但说实话，真要做一个能自己思考、自己决策的 AI Agent，光靠那些基础循环是不够的。你会发现逻辑越写越乱，代码越堆越多，到最后自己都不知道 AI 在第几步干了什么

这篇文章我们聊点更实战的东西。ToolLoopAgent 怎么把智能体封装得更优雅，Loop Control 如何让你精准控制每一步执行，多模态能力怎么让 AI 真的“看懂”图片，还有 DevTools 这个神器——专治各种 Agent 调试头疼的问题

1. 用 ToolLoopAgent 把 Agent 封装起来

还记得上一章的汇率助手吗？我们把工具和 maxSteps 直接塞进 generateText 里。写个 demo 没问题，但你要是真的做业务，这代码很快就会变成一坨意大利面

你想想，每次都要重新配置工具、重新写循环逻辑，改个参数还得全局搜索。更要命的是，你没法把“这个会搜索的 AI”当成一个独立模块复用

ToolLoopAgent 就是来解决这个痛点的。它把模型、工具、循环规则全打包成一个对象，你可以像调函数一样调用它。想要多个不同能力的 Agent？实例化几个就行

实战案例：做一个会搜资料的研究员 Agent

我们来搞个能模拟搜索、记笔记、写总结的 Agent

import { ToolLoopAgent, tool, stepCountIs } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';
import dotenv from 'dotenv';

dotenv.config();

// 定义工具集
const tools = {
  searchWiki: tool({
    description: '搜索维基百科摘要',
    parameters: z.object({ query: z.string() }),
    execute: async ({ query }) => {
      console.log(`[Agent 操作] 正在搜索: ${query}...`);
      // 模拟搜索结果
      return { 
        title: query, 
        summary: `${query} 是一种强大的技术...（模拟数据）` 
      };
    },
  }),
  saveNote: tool({
    description: '保存关键信息到笔记',
    parameters: z.object({ content: z.string() }),
    execute: async ({ content }) => {
      console.log(`[Agent 操作] 记录笔记: ${content}`);
      return { success: true };
    },
  }),
};

// 实例化 Agent
const researcherAgent = new ToolLoopAgent({
  model: openai('gpt-4o'),
  system: '你是一个严谨的研究员。遇到问题时，先搜索信息，然后记录关键点，最后总结回答。',
  tools: tools,
  // 默认停止条件：最多运行 10 步
  stopWhen: stepCountIs(10),
});

async function main() {
  // 使用 Agent
  const result = await researcherAgent.generate({
    prompt: '请研究一下 Vercel AI SDK 的主要功能，并做简要总结。',
  });

  console.log('
--- 最终报告 ---
', result.text);
}

main().catch(console.error);

看到没，ToolLoopAgent 把所有配置都收拢在一起了。你想在别的地方用这个研究员？直接 researcherAgent.generate() 就完事。想搞个编码 Agent、审核 Agent？照着这个模式再实例化几个，让它们互相配合干活

这才是工程化的写法

2. Loop Control：掌控 Agent 的每一步

Agent 跑起来就是个循环：思考→行动→观察→再思考。AI SDK 6 给了你一套 Loop Control 机制，让你能插手这个循环的任何环节

stopWhen：自己定义什么时候停

默认情况下，Agent 会一直跑到模型觉得任务完成了，或者达到最大步数。但有些场景你得强制控制，比如“调用了某个工具就立刻停”，或者“置信度太低了别继续瞎搞了”

import { stepCountIs } from 'ai';

// 组合多个停止条件
stopWhen: [
  stepCountIs(10), // 防止死循环
  (step) => {
    // 调用了 'escalateToHuman' 工具就立刻停
    return step.toolCalls.some(call => call.toolName === 'escalateToHuman');
  }
]

prepareStep：在每一步执行前动态调整

prepareStep 这个钩子很有意思。它能让你在 Agent 每走一步之前，偷偷修改请求参数。比如注入当前时间、用户位置这些动态信息，或者根据前面的执行结果临时换一套工具

const dynamicAgent = new ToolLoopAgent({
  model: openai('gpt-4o'),
  tools: myTools,
  prepareStep: async ({ messages, stepCount }) => {
    // 每一步执行前，把当前时间塞进去
    const timeContext = `当前系统时间: ${new Date().toISOString()}`;
    
    return {
      system: `你是一个时间感知的助手。${timeContext}`,
      // 跑了 3 步之后，换一套简化的工具集
      tools: stepCount > 3 ? simplifiedTools : myTools, 
    };
  },
});

3. 多模态：让 AI 真的能“看”

GPT-4o、Claude 3.5 Sonnet、Gemini 这些新模型都能看图了。AI SDK 6 把多模态输入的接口统一了，发图片变得特别简单

以前你得手动把图片转 Base64，再拼到 Prompt 里，麻烦得要死。现在 content 属性直接支持数组，文本和图片混着传就行

实战案例：发票识别助手

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
import fs from 'node:fs';

async function analyzeInvoice() {
  const result = await generateText({
    model: openai('gpt-4o'),
    messages: [
      {
        role: 'user',
        content: [
          { type: 'text', text: '帮我看看这张发票，把总金额和日期提取出来' },
          { 
            type: 'image', 
            // URL 或者本地文件都行
            image: fs.readFileSync('./invoice.jpg'), 
          },
        ],
      },
    ],
  });

  console.log('识别结果:', result.text);
}

这个多模态能力可以跟结构化输出配合使用。你传一张网页截图进去，让 AI 用 generateObject 生成对应的 HTML 和 Tailwind 代码——Vercel v0 就是这么玩的

4. DevTools：给复杂 Agent 拍个 X 光片

Agent 逻辑一复杂，光靠 console.log 调试真的会疯。你根本看不清模型在第 3 步到底收到了啥参数，为啥它选择调工具 A 而不是工具 B

Vercel 官方搞了个 AI SDK DevTools，基于 Web 的可视化调试工具，专治这种疑难杂症

怎么用：

装个依赖：

npm install @ai-sdk/devtools

用 wrapLanguageModel 把模型包一层，让它能捕获所有输入输出：

import { wrapLanguageModel } from 'ai';
import { experimental_createToolLoopAgent } from 'ai';
import { devtools } from '@ai-sdk/devtools';

const model = wrapLanguageModel({
  model: openai('gpt-4o'),
  middleware: devtools,
});

// 后面在 generateText 或者 Agent 里用这个包装过的 model
// const agent = new ToolLoopAgent({ model: model, ... });