Vercel AI SDK：TypeScript 开发者的 LLM 应用工具箱选型分析

项目定位：从 Next.js 团队走出的 TypeScript AI 工具箱

vercel/ai 的官方描述非常直接：The AI Toolkit for TypeScript。它由 Vercel 与 Next.js 团队成员创建，并接受开源社区贡献，定位是一个免费的开源库，用于构建 AI 驱动的应用和 agent。

从仓库 topics 可以看到它的覆盖面：openai、anthropic、gemini、generative-ai、generative-ui、llm、language-model、nextjs、react、svelte、vue、typescript、vercel。这不是一个只绑定单一模型厂商的 SDK，而是一个面向多前端框架、多模型提供商的工具层。

对 TypeScript 开发者而言，这个定位意味着两件事：第一，类型系统是它的一等公民，而不是事后补上的类型声明；第二，它试图把“调用大模型”这件事从框架细节中抽离出来，让同一套 API 能落在 Next.js、React、Svelte、Vue、Angular 以及 Node.js 运行时上。

统一 Provider 架构：一个 API 对接多家模型

官方 README 明确说明 AI SDK 是 provider-agnostic 的，提供统一 API 来对接 OpenAI、Anthropic、Google 等模型提供商。

默认情况下，AI SDK 使用 Vercel AI Gateway，让开发者开箱即用地访问主流提供商。使用方式是把模型写成字符串：

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

如果希望直连提供商，则安装对应的 SDK 包：

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

然后以函数形式传入模型：

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

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

这里有一个值得注意的工程取舍：Gateway 模式降低接入成本，直连模式保留控制权。前者适合快速验证和多模型对比，后者适合需要自行管理密钥、配额或网络链路的场景。README 只给出了这两种接入方式，并未展开说明内部抽象层、调用链或缓存机制，这些需要结合源码或官方文档进一步确认。

从文本到结构化数据：Output 与 Zod

AI SDK 不只做纯文本生成。官方示例展示了结构化数据生成能力，通过 Output.object 配合 Zod schema 约束输出：

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

const { output } = await generateText({
  model: 'openai/gpt-6-astra',
  output: Output.object({
    schema: z.object({
      recipe: z.object({
        name: z.string(),
        ingredients: z.array(
          z.object({ name: z.string(), amount: z.string() })
        ),
        steps: z.array(z.string()),
      }),
    }),
  }),
  prompt: 'Generate a lasagna recipe.',
});

对 TypeScript 项目来说，这种设计的价值在于：模型返回的不再是需要手动解析和校验的字符串，而是经过 schema 约束的结构化对象。Zod 本身就是 TypeScript 生态中常见的校验库，把它放进生成流程，等于把“运行时校验”和“编译期类型”接在了一起。

Agent 能力：ToolLoopAgent 与工具调用

README 中给出了 agent 的构建方式，核心是 ToolLoopAgent：

import { ToolLoopAgent } from 'ai';

const sandboxAgent = new ToolLoopAgent({
  model: 'openai/gpt-6-astra',
  system: 'You are an agent with access to a shell environment.',
  tools: {
    shell: openai.tools.localShell({
      execute: async ({ action }) => {
        const [cmd, ...args] = action.command;
        const sandbox = await getSandbox();
        const command = await sandbox.runCommand({ cmd, args });
        return { output: await command.stdout() };
      },
    }),
  },
});

从这段示例可以确认的事实是：AI SDK 提供了 agent 抽象，支持把工具（tools）挂载到 agent 上，工具的执行逻辑由开发者自己实现。示例中工具执行调用了 Vercel Sandbox 来运行 shell 命令。

需要明确边界的是：README 没有说明 ToolLoopAgent 内部如何调度多轮工具调用、如何终止循环、如何处理错误重试。这些属于实现机制，必须回到源码或官方文档确认，不能凭示例推断。

Generative UI：把工具调用结果渲染成界面

AI SDK UI 模块提供了一组 hooks，用于构建聊天机器人和生成式用户界面。官方强调这些 hooks 是 framework agnostic 的，可用于 Next.js、React、Svelte 和 Vue。使用时需要安装对应框架的包，例如 @ai-sdk/react。

一个完整的 generative UI 链路在 README 中被拆成四部分：

Agent 定义：用 ToolLoopAgent 定义带 generateImage 工具的 agent，并通过 InferAgentUIMessage 导出消息类型。
路由：在 Next.js App Router 中，用 createAgentUIStreamResponse 把 agent 和 messages 转成流式响应。
工具视图组件：用 UIToolInvocation 类型接收工具调用，根据 invocation.state 分支渲染，例如 input-available 时显示“Generating image...”，output-available 时渲染图片。
页面：用 useChat 获取 messages、status、sendMessage，遍历 message.parts，按 part.type 分发到文本或工具视图。

这套模式的关键点在于：工具调用的中间状态被显式建模。input-available 和 output-available 是不同状态，UI 可以据此给出加载态和结果态。对构建 agent 类产品的团队来说，这比只拿到最终文本更接近真实交互需求。

项目活跃度与边界：从元数据看选型

仓库当前元数据：27.1k Stars、5.2k Forks、147 Watching、8,845 Commits。编辑角度中提到的 1415 Open Issues 在本次资料中未直接出现，因此不作为事实引用。

从这些数字可以做出有限判断：Stars 和 Forks 规模说明项目有较广泛的关注度和二次开发基础；8,845 次提交说明代码库经历了长期迭代。但活跃度不能只看总量，还需要结合 release 节奏、issue 响应和 changelog 判断，这些在本次资料中未展开。

选型时还需要注意几个边界：

运行时要求：官方要求 Node.js 22+ 和 npm（或其他包管理器）。
框架覆盖：README 提到 Next.js、React、Svelte、Vue、Angular 以及 Node.js 运行时，但具体每个框架的集成深度需要看对应文档。
Provider 差异：OpenAI、Anthropic、Google 的接入方式在 README 中只展示了统一调用形态，各家能力差异需要从源码验证。
Coding Agent 支持：官方推荐使用 Claude Code 或 Cursor 的开发者通过 npx skills add vercel/ai 添加 AI SDK skill。

选型建议

如果你的团队使用 TypeScript，并且需要在 Next.js、React、Svelte 或 Vue 中构建带 UI 的 AI 应用，AI SDK 的吸引力在于：统一 Provider 接口减少厂商锁定、Zod 结构化输出贴合类型系统、useChat 与工具视图组件把流式交互和 generative UI 的样板代码收敛到框架无关的 hooks 中。

如果需求只是单次文本调用，或者团队已经深度绑定某一家厂商的 SDK 并依赖其独有能力，那么引入这一层的收益需要重新评估。Agent 的循环控制、错误处理和可观测性等机制，建议在选型前直接查阅官方文档和源码，而不是仅凭 README 示例做判断。