AI SDK

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

要深入了解如何使用 AI SDK，请查看我们的 API 参考文档 和 文档。

安装

您需要在本地开发机器上安装 Node.js 18 或更高版本以及 npm（或其他包管理器）。

npm install ai

面向编码智能体的技能

如果您使用 Claude Code 或 Cursor 等编码智能体，我们强烈建议将 AI SDK 技能添加到您的代码库中：

npx skills add vercel/ai

统一的提供商架构

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

默认情况下，AI SDK 使用 Vercel AI 网关 让您开箱即用地访问所有主要提供商。只需为任何受支持的模型传递一个模型字符串即可：

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 网关
  prompt: '什么是智能体？',
});

生成结构化数据

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: '生成一份千层面食谱。',
});

智能体

import { ToolLoopAgent } from 'ai';

const sandboxAgent = new ToolLoopAgent({
  model: 'openai/gpt-5.4',
  system: '你是一个可以访问 shell 环境的智能体。',
  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 模块提供了一组钩子，可以帮助您构建聊天机器人和生成式用户界面。这些钩子与框架无关，因此可以在 Next.js、React、Svelte 和 Vue 中使用。

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

npm install @ai-sdk/react

智能体 @/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<
  typeof imageGenerationAgent
>;

路由（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,
  });
}

工具 UI 组件 @/component/image-generation-view.tsx

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

export default function ImageGenerationView({
  invocation,
}: {
  invocation: UIToolInvocation<ReturnType<typeof openai.tools.imageGeneration>>;
}) {
  switch (invocation.state) {
    case 'input-available':
      return <div>正在生成图像...</div>;
    case 'output-available':
      return <img src={`data:image/png;base64,${invocation.output.result}`} />;
  }
}

页面 @/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() {
  const { messages, status, sendMessage } =
    useChat<ImageGenerationAgentMessage>();

  const [input, setInput] = useState('');
  const handleSubmit = e => {
    e.preventDefault();
    sendMessage({ text: input });
    setInput('');
  };

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          <strong>{`${message.role}: `}</strong>
          {message.parts.map((part, index) => {
            switch (part.type) {
              case 'text':
                return <div key={index}>{part.text}</div>;
              case 'tool-generateImage':
                return <ImageGenerationView key={index} invocation={part} />;
            }
          })}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          disabled={status !== 'ready'}
        />
      </form>
    </div>
  );
}

模板

我们已经构建了 模板，其中包含了针对不同用例、提供商和框架的 AI SDK 集成。您可以使用这些模板来快速启动您的 AI 驱动应用。

社区

AI SDK 社区位于 Vercel 社区，您可以在那里提问、分享想法，并与其他开发者交流项目。

贡献

欢迎并非常感谢对 AI SDK 的贡献。不过，在开始之前，我们建议您先阅读我们的 贡献指南，以确保您能够顺利地为 AI SDK 做出贡献。

作者

本库由 Vercel 和 Next.js 团队成员创建，并得到了 开源社区 的贡献。

AI SDK 快速上手指南

AI SDK 是一个与提供商无关的 TypeScript 工具包，旨在帮助开发者使用 Next.js、React、Svelte、Vue、Angular 等主流 UI 框架以及 Node.js 运行时构建 AI 驱动的应用程序和智能体（Agents）。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows, macOS, 或 Linux
• Node.js：版本 18 或更高
• 包管理器：npm, yarn, pnpm 或 bun

安装步骤

1. 安装核心库

在项目目录中运行以下命令安装 ai 包：

npm install ai

国内加速建议：如果下载速度较慢，可配置淘宝镜像源：

npm config set registry https://registry.npmmirror.com

2. (可选) 安装特定提供商 SDK

虽然 AI SDK 默认支持通过 Vercel AI Gateway 统一调用各大模型，您也可以直接安装特定提供商的 SDK 以获得更细粒度的控制：

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

3. (可选) 为编程智能体添加技能

如果您使用 Claude Code 或 Cursor 等编程智能体，建议将 AI SDK 技能添加到您的仓库中：

npx skills add vercel/ai

4. (可选) 安装 UI 集成包

若需构建聊天界面或生成式 UI，请根据您使用的框架安装对应的包（以 React 为例）：

npm install @ai-sdk/react

基本使用

1. 生成文本 (Generate Text)

这是最简单的用法，通过统一的 API 调用大模型生成文本。

import { generateText } from 'ai';

const { text } = await generateText({
  model: 'openai/gpt-5.4', // 使用 Vercel AI Gateway，也可替换为 'anthropic/...' 等
  prompt: 'What is an agent?',
});

console.log(text);

2. 生成结构化数据 (Generate Structured Data)

利用 Zod 定义 Schema，让模型直接返回符合格式的对象（如 JSON），无需后续解析。

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.',
});

console.log(output.recipe.name);

3. 构建智能体 (Agents)

创建一个具备工具调用能力的智能体（例如拥有 Shell 执行权限）。

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(); 
        const command = await sandbox.runCommand({ cmd, args });
        return { output: await command.stdout() };
      },
    }),
  },
});

4. UI 集成示例 (React + Next.js)

结合 @ai-sdk/react 和 Next.js App Router 快速构建带工具调用的聊天界面。

定义智能体 (@/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<
  typeof imageGenerationAgent
>;

创建 API 路由 (@/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,
  });
}

前端页面组件 (@/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';
import { useState } from 'react';

export default function Page() {
  const { messages, status, sendMessage } =
    useChat<ImageGenerationAgentMessage>();

  const [input, setInput] = useState('');
  const handleSubmit = e => {
    e.preventDefault();
    sendMessage({ text: input });
    setInput('');
  };

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          <strong>{`${message.role}: `}</strong>
          {message.parts.map((part, index) => {
            switch (part.type) {
              case 'text':
                return <div key={index}>{part.text}</div>;
              case 'tool-generateImage':
                return <ImageGenerationView key={index} invocation={part} />;
            }
          })}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          disabled={status !== 'ready'}
        />
      </form>
    </div>
  );
}