AI SDK：TypeScript 多 Provider 接入与 Agent 集成要点

const result = await generateText({
  model: 'anthropic/claude-opus-4.6',
  prompt: 'Hello!',
});

import { anthropic } from '@ai-sdk/anthropic';

const result = await generateText({
  model: anthropic('claude-opus-4-6'),
  prompt: 'Hello!',
});

这两段代码在 AI SDK 的 README 中并列出现，调用函数相同，差别只在 model 参数：一个是字符串 'anthropic/claude-opus-4.6'，一个是 Provider 包导出的函数调用结果 anthropic('claude-opus-4-6')。README 把前者标注为「use Vercel AI Gateway」，后者标注为直连 Provider SDK。理解这两条路径的分工，基本就理解了这个库在多 Provider 场景下的接入形态。

运行前提与安装入口

README 明确给出的环境要求是 Node.js 22+ 与 npm（或其他包管理器）。安装命令只有一条：

npm install ai

另外 README 专门提到，如果使用 Claude Code、Cursor 这类编码 agent，建议把 AI SDK 的 skill 加入仓库：

npx skills add vercel/ai

这一条与运行时无关，属于给编码 agent 补充项目上下文的做法。README 没有展开该 skill 的具体内容，实际效果需要自行确认。

两条接入路径的边界

第一条路径是默认路径。README 的表述是：AI SDK 默认使用 Vercel AI Gateway，从而「out of the box」获得所有主要 Provider 的访问能力，调用时只传一个模型字符串即可，例如 'anthropic/claude-opus-4.6'、'openai/gpt-5.4'、'google/gemini-3-flash'。

第二条路径是直连。需要额外安装 Provider 包：

npm install @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google

然后从对应包导入 Provider 函数，把 anthropic('claude-opus-4-6') 这样的结果传给 model。README 提到支持的 Provider 包括 OpenAI、Anthropic、Google，并注明「and more」，指向 providers 文档页，但 README 本身没有列出完整清单。

从工程角度看，这两条路径的差异不在于调用函数，而在于请求链路和凭据归属：字符串路径下，模型路由与访问由 Gateway 承担；直连路径下，各家 API 的凭据与配置由项目自己管理。README 没有说明两者在计费、限流、故障转移或超时行为上的区别，这些属于需要在实际环境中验证的部分，不能从 README 直接推出。

结构化输出与类型约束

README 给出了 Output.object 的用法，配合 zod schema 使用：

import { generateText, Output } from 'ai';
import { z } from 'zod';

const { output } = await generateText({
  model: 'openai/gpt-5.4',
  output: Output.object({
    schema: z.object({ /* ... */ }),
  }),
  prompt: 'Generate a lasagna recipe.',
});

注意这里返回值从 text 变成了 output。这是 README 中唯一展示的结构化输出示例，且绑定在 generateText 上。其他函数是否同样接受 output 参数，README 没有说明，需要查 API Reference。

Agent 与工具调用

README 中 Agent 的载体是 ToolLoopAgent，构造参数包含 model、system 和 tools 三部分。两个工具示例值得注意：

沙箱示例使用 openai.tools.localShell，在 execute 中把命令交给 Vercel Sandbox 执行并取回 stdout；
图像生成示例使用 openai.tools.imageGeneration，参数为 partialImages: 3。

这两个工具都挂在 openai.tools 命名空间下，即工具能力与 Provider 绑定，而不是跨 Provider 的通用工具。README 没有说明其他 Provider 是否提供对等工具，这一点在选型时需要按 Provider 逐个确认。

UI 层的接入形式

README 把 UI 能力单独列为 AI SDK UI 模块，核心是 hooks。README 明确说明这些 hooks 是 framework agnostic，可用于 Next.js、React、Svelte 和 Vue，并按框架分别安装，例如 npm install @ai-sdk/react。

Next.js App Router 的接入由一个 route handler 承接：

export async function POST(req: Request) {
  const { messages } = await req.json();
  return createAgentUIStreamResponse({
    agent: imageGenerationAgent,
    messages,
  });
}

前端用 useChat 消费消息，返回 messages、status、sendMessage。渲染时按 message.parts 的 part.type 分支，文本走 'text'，工具结果走 'tool-generateImage' 之类的前缀形式，并把 part 作为 invocation 传给工具视图组件。

工具视图内部按 invocation.state 区分状态，README 展示的是 'input-available' 与 'output-available' 两个分支，分别渲染加载态和图片结果。

类型串联依赖两个导出：InferAgentUIMessage 从 agent 定义推导出前端消息类型，UIToolInvocation> 推导出工具调用类型。这条链路把 agent、路由、组件和 hook 的类型连成一体，是 README 中信息密度最高的一段。

落地时需要自行确认的部分

README 属于入口文档，以下几点没有覆盖，但会影响实际项目：

错误与流式中断：useChat 的 status 取值只出现 'ready'，其余状态未列出，前端交互需要自行查文档补全。
Provider 能力矩阵：工具调用、结构化输出、图像生成在哪些模型上可用，README 未给出对照。
Gateway 与直连的运维差异：凭据轮换、限流、可观测性在两条路径下的表现，需要实测。
框架覆盖范围：README 标题层面列出了 Angular，但 UI hooks 段落只点名 Next.js、React、Svelte、Vue，Angular 的 UI 层接入方式未在 README 中说明。

工程判断

对 TypeScript 项目而言，这个库的接入决策不适合简化成「支不支持某家 Provider」，因为 README 已经表明 Provider 是可替换的。真正需要先定的三件事是：模型访问走 Gateway 还是直连、目标模型对结构化输出与工具调用的支持程度、以及 UI 层 hooks 与当前框架的匹配度。前两项决定后端调用形态，第三项决定前端改造量。

README 同时提示了 templates 与 Vercel Community 两个入口，前者适合快速起项目，后者用于提问与交流。在把任何一条路径写进生产代码之前，按上面四点做一轮验证，比直接照搬示例更稳妥。