Vercel AI SDK：一站式TypeScript AI开发工具包，轻松构建智能应用

简介

Vercel AI SDK 是一个提供商无关的 TypeScript 工具包，专为帮助开发者构建 AI 驱动的应用程序和智能代理而设计。它完美支持流行的 UI 框架，如 Next.js、React、Svelte、Vue、Angular，以及 Node.js 等运行时环境。

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

安装要求

• Node.js 18+ 版本
• npm 或其他包管理器

npm install ai

统一提供商架构

AI SDK 提供统一的 API 接口，支持与多种模型提供商交互，包括 OpenAI、Anthropic、Google 等。

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

或者，您也可以使用 Vercel AI Gateway。

使用示例

文本生成

import { generateText } from 'ai';

const { text } = await generateText({
  model: 'openai/gpt-5', // 使用 Vercel AI Gateway
  prompt: '什么是智能代理？',
});

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

const { text } = await generateText({
  model: openai('gpt-5'), // 使用 OpenAI Responses API
  prompt: '什么是智能代理？',
});

生成结构化数据

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

const { output } = await generateText({
  model: 'openai/gpt-5',
  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',
  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'),
  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 的贡献。在开始贡献之前，请先阅读我们的 贡献指南，以确保您有顺畅的贡献体验。

作者信息

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