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

📅 发布时间:2026/7/16 20:23:14 👁️ 浏览次数:
Vercel AI SDK 6 完整教程系列 - 第三部分:构建智能 Agent 与多模态应用
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我们来搞个能模拟搜索、记笔记、写总结的 Agentimport{ToolLoopAgent,tool,stepCountIs}fromai;import{openai}fromai-sdk/openai;import{z}fromzod;importdotenvfromdotenv;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};},}),};// 实例化 AgentconstresearcherAgentnewToolLoopAgent({model:openai(gpt-4o),system:你是一个严谨的研究员。遇到问题时先搜索信息然后记录关键点最后总结回答。,tools:tools,// 默认停止条件最多运行 10 步stopWhen:stepCountIs(10),});asyncfunctionmain(){// 使用 AgentconstresultawaitresearcherAgent.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}fromai;// 组合多个停止条件stopWhen:[stepCountIs(10),// 防止死循环(step){// 调用了 escalateToHuman 工具就立刻停returnstep.toolCalls.some(callcall.toolNameescalateToHuman);}]prepareStep在每一步执行前动态调整prepareStep这个钩子很有意思。它能让你在 Agent 每走一步之前偷偷修改请求参数。比如注入当前时间、用户位置这些动态信息或者根据前面的执行结果临时换一套工具constdynamicAgentnewToolLoopAgent({model:openai(gpt-4o),tools:myTools,prepareStep:async({messages,stepCount}){// 每一步执行前把当前时间塞进去consttimeContext当前系统时间:${newDate().toISOString()};return{system:你是一个时间感知的助手。${timeContext},// 跑了 3 步之后换一套简化的工具集tools:stepCount3?simplifiedTools:myTools,};},});3. 多模态让 AI 真的能“看”GPT-4o、Claude 3.5 Sonnet、Gemini 这些新模型都能看图了。AI SDK 6 把多模态输入的接口统一了发图片变得特别简单以前你得手动把图片转 Base64再拼到 Prompt 里麻烦得要死。现在content属性直接支持数组文本和图片混着传就行实战案例发票识别助手import{generateText}fromai;import{openai}fromai-sdk/openai;importfsfromnode:fs;asyncfunctionanalyzeInvoice(){constresultawaitgenerateText({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 而不是工具 BVercel 官方搞了个AI SDK DevTools基于 Web 的可视化调试工具专治这种疑难杂症怎么用装个依赖npminstallai-sdk/devtools用wrapLanguageModel把模型包一层让它能捕获所有输入输出import{wrapLanguageModel}fromai;import{experimental_createToolLoopAgent}fromai;import{devtools}fromai-sdk/devtools;constmodelwrapLanguageModel({model:openai(gpt-4o),middleware:devtools,});// 后面在 generateText 或者 Agent 里用这个包装过的 model// const agent new ToolLoopAgent({ model: model, ... });启动 DevTools:npx ai-sdk-devtools打开浏览器访问http://localhost:4983你会看到一条清晰的时间轴。每次 LLM 调用、完整的 Prompt、Token 消耗、工具调用的详细参数全都一目了然这玩意对优化 System Prompt 和排查 Agent “幻觉”问题太有用了。你能看到模型到底在哪一步开始胡说八道的写在最后到这里你已经从写简单脚本的阶段进化到能设计完整 Agent 系统的程度了ToolLoopAgent让你把智能体封装成可复用的模块Loop Control 给了你对执行流程的精准控制多模态能力让 AI 不再只会“听”还能“看”DevTools 则是你调试复杂 Agent 的透视镜这些东西组合起来基本上 Vercel AI SDK 6 的核心能力你都摸透了下一篇实战项目篇我们会把这些知识全部串起来做一个真正能上生产的 RAG 聊天机器人。它会有文档理解、记忆保持、专业问答这些能力。到时候你会发现前面学的这些东西是怎么在实际项目里配合工作的