SuperAPI AI 工具集

vercel-ai-sdk-expert

编程与开发

查看项目

更新于 10-16 02:02

技能介绍

用途

该技能用于指导开发者使用 Vercel AI SDK 构建 AI 驱动的应用、聊天机器人和生成式 UI,主要面向 Next.js 与 React 技术栈。适用情形包括:为 React 或 Next.js 应用添加 AI 聊天或文本生成功能;将 LLM 响应流式传输到前端 UI;实现工具调用(函数调用);使用 generateObject 从 LLM 返回结构化数据(JSON);构建 AI 驱动的生成式 UI(流式 React 组件);从直接调用 OpenAI/Anthropic API 迁移到统一的 AI SDK;排查 useChat 或 streamText 的流式问题。

核心概念

Vercel AI SDK 是一个统一框架,抽象掉各家提供商的专有 API(OpenAI、Anthropic、Google Gemini、Mistral),提供两层结构:

  • AI SDK Core(包名 ai):服务端与 LLM 交互的函数,包括 generateText、streamText、generateObject。
  • AI SDK UI(包名 @ai-sdk/react):前端钩子,用于管理聊天状态与流式输出,包括 useChat、useCompletion。

主要能力

服务端生成(Core API)

基础文本生成:使用 generateText,在补全完成后返回完整字符串(非流式),可获取 text 与 usage(如 usage.totalTokens)。

流式文本:使用 streamText,在 Next.js App Router 的 API 路由中调用,并通过 result.toDataStreamResponse() 将流自动转换为可读的 Web 流返回;示例中通过 export const maxDuration = 30 允许最长 30 秒的流式响应。

结构化数据生成:使用 generateObject,结合 Zod schema(如 z.object 定义 storeName、totalAmount、items、date 等字段)强制输出结构,返回的 object 会按 schema 自动获得完整类型。示例建议使用擅长结构化输出的模型。

前端 UI 钩子

useChat 用于会话式 UI:在客户端组件中调用,传入 api 指向 streamText 路由,可获得 messages、input、handleInputChange、handleSubmit、isLoading,并支持 onFinish、onError 回调;示例中遍历 messages 渲染用户与助手消息。

工具调用(函数调用)

工具让 LLM 能够与代码交互,在回复用户前获取外部数据或执行动作。服务端通过 tool() 定义工具,包含 description、parameters(Zod 对象,如 location、unit 枚举)与 execute 异步函数。示例中 maxSteps: 5 允许 LLM 在循环中自动调用工具直至获得答案。

多步工具调用的 UI:在使用 maxSteps 时,若在 UI 中处理,useChat 会展示中间的工具调用。示例在 messages 遍历中对 assistant 消息的 toolInvocations 做映射,根据 state === 'result' 显示已获取结果,否则显示加载中。

使用方式与最佳实践

资料给出的实践建议包括:

  • 使用 openai('gpt-4o') 或 anthropic('claude-3-5-sonnet-20240620') 这类来自具体提供商包(如 @ai-sdk/openai)的写法,而非较早的 edge runtime 包装器。
  • 使用 generateObject() 时提供严格的 Zod schema 和清晰的系统提示词。
  • 使用 streamText 的 Next.js API 路由中设置 maxDuration = 30(或按套餐上限更高),因为 Vercel 默认超时为 10–15 秒。
  • 使用 tool() 时在 Zod 参数上写完整的 description,因为 LLM 完全依赖这些字符串理解何时以及如何调用工具。
  • 提供工具时启用 maxSteps: 5(或类似值),否则 LLM 在拿到工具结果后无法回复用户。
  • 在 Next.js App Router API 路由中使用 streamText 时,不要忘记返回 result.toDataStreamResponse(),标准 JSON 响应会破坏分块传输。
  • 不要盲目信任 generateObject 的输出,即使 Zod 强制了形状,也应用 try/catch 处理失败状态。

排查问题

  • 流式聊天在 10–15 秒后突然中断:原因是 serverless 函数超时,需在 Next.js API 路由文件中添加 export const maxDuration = 30;(或所用套餐的上限值)。
  • 出现“工具执行失败”或 LLM 使用工具后未返回回答:streamText 在工具调用完成后会立即停止,除非提供 maxSteps;设置 maxSteps: 2(或更高)让 LLM 看到工具结果并生成最终文本回复。

限制

仅在任务明确匹配上述范围时使用本技能。不应将输出视为特定环境验证、测试或专家评审的替代。若缺少必要输入、权限、安全边界或成功标准,应停止并请求澄清。