人工智能 SDK

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

要了解有关如何使用人工智能 SDK 的更多信息，请查看我们的 API 参考 和 文档。

安装

您需要在本地开发机器上安装 Node.js 22 及 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', // or 'openai/gpt-5.4', 'google/gemini-3-flash', etc.
  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'), // or openai('gpt-5.4'), google('gemini-3-flash'), etc.
  prompt: 'Hello!',
});

使用

生成文本

import { generateText } from 'ai';

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

代理人

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 模块提供了一组钩子，帮助你构建聊天机器人和生成式用户界面。这些钩子与框架无关，因此可以在 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/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>Generating image...</div>;
    case 'output-available':
      return ;
  }
}

页面 @/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 团队成员创建，并得到 开源社区 的贡献。