AI SDK

AI SDK 是一个与供应商无关的 TypeScript 工具包，旨在帮助你使用流行的 UI 框架（如 Next.js、React、Svelte、Vue、Angular）以及运行时环境（如 Node.js）构建 AI 驱动的应用程序和 Agent。

想要进一步了解如何使用 AI SDK，请查看我们的 API 参考手册 和 文档。

安装

你需要在本地开发环境中安装 Node.js 22+ 和 npm（或其他包管理器）。

npm install ai

为 Coding Agent 提供支持

如果你正在使用 Claude Code 或 Cursor 等编码助手，我们强烈建议将 AI SDK 技能添加到你的代码库中：

npx skills add vercel/ai

统一的供应商架构

AI SDK 提供了一个统一的 API，用于与 OpenAI、Anthropic、Google 等众多模型供应商进行交互。

默认情况下，AI SDK 使用 Vercel AI Gateway，让你能够直接开箱即用地调用所有主流供应商。只需传入模型字符串即可使用任何受支持的模型：

const result = await generateText({
  model: 'anthropic/claude-opus-4.6', // 或 'openai/gpt-5.4', 'google/gemini-3-flash' 等
  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-4-6'), // 或 openai('gpt-5.4'), google('gemini-3-flash') 等
  prompt: 'Hello!',
});

用法

生成文本

import { generateText } from 'ai';

const { text } = await generateText({
  model: 'openai/gpt-5.4', // 使用 Vercel AI Gateway
  prompt: 'What is an agent?',
});

生成结构化数据

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

const { output } = await generateText({
  model: 'openai/gpt-5.4',
  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.',
});

Agents

import { ToolLoopAgent } from 'ai';

const sandboxAgent = new ToolLoopAgent({
  model: 'openai/gpt-5.4',
  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(); // Vercel Sandbox
        const command = await sandbox.runCommand({ cmd, args });
        return { output: await command.stdout() };
      },
    }),
  },
});

UI 集成

AI SDK UI 模块提供了一系列 Hooks，可帮助你构建聊天机器人和生成式用户界面。这些 Hooks 与框架无关，因此可以在 Next.js、React、Svelte 和 Vue 中使用。

你需要为你的框架安装相应的包，例如：

npm install @ai-sdk/react

Agent @/agent/image-generation-agent.ts

import { openai } from '@ai-sdk/openai';
import { ToolLoopAgent, InferAgentUIMessage } from 'ai';

export const imageGenerationAgent = new ToolLoopAgent({
  model: 'openai/gpt-5.4',
  tools: {
    generateImage: openai.tools.imageGeneration({
      partialImages: 3,
    }),
  },
});

export type ImageGenerationAgentMessage = InferAgentUIMessage;

Route (Next.js App Router) @/app/api/chat/route.ts

import { imageGenerationAgent } from '@/agent/image-generation-agent';
import { createAgentUIStreamResponse } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  return createAgentUIStreamResponse({
    agent: imageGenerationAgent,
    messages,
  });
}

Tool 的 UI 组件 @/component/image-generation-view.tsx

import { openai } from '@ai-sdk/openai';
import { UIToolInvocation } from 'ai';

export default function ImageGenerationView({
  invocation,
}: {
  invocation: UIToolInvocation;
}) {
  switch (invocation.state) {
    case 'input-available':
      return <div>Generating image...</div>;
    case 'output-available':
      return <img src={invocation.result.url} />;
  }
}

页面 @/app/page.tsx

'use client';

import { ImageGenerationAgentMessage } from '@/agent/image-generation-agent';
import ImageGenerationView from '@/component/image-generation-view';
import { useChat } from '@ai-sdk/react';

export default function Page() {
  // ...
}