当前位置：首页 > news >正文

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

news 2026/5/12 7:40:36

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';importdotenvfrom'dotenv';dotenv.config();// 定义工具集consttools={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};},}),};// 实例化 AgentconstresearcherAgent=newToolLoopAgent({model:openai('gpt-4o'),system:'你是一个严谨的研究员。遇到问题时，先搜索信息，然后记录关键点，最后总结回答。',tools:tools,// 默认停止条件：最多运行 10 步stopWhen:stepCountIs(10),});asyncfunctionmain(){// 使用 Agentconstresult=awaitresearcherAgent.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' 工具就立刻停returnstep.toolCalls.some(call=>call.toolName==='escalateToHuman');}]

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

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

constdynamicAgent=newToolLoopAgent({model:openai('gpt-4o'),tools:myTools,prepareStep:async({messages,stepCount})=>{// 每一步执行前，把当前时间塞进去consttimeContext=`当前系统时间:${newDate().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';importfsfrom'node:fs';asyncfunctionanalyzeInvoice(){constresult=awaitgenerateText({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 的可视化调试工具，专治这种疑难杂症

怎么用：

装个依赖：

npminstall@ai-sdk/devtools

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

import{wrapLanguageModel}from'ai';import{experimental_createToolLoopAgent}from'ai';import{devtools}from'@ai-sdk/devtools';constmodel=wrapLanguageModel({model:openai('gpt-4o'),middleware:devtools,});// 后面在 generateText 或者 Agent 里用这个包装过的 model// const agent = new ToolLoopAgent({ model: model, ... });