Vercel AI SDK 详解：构建 AI 应用的 TypeScript 工具箱

前端小小栈
470 阅读5分钟

概述

Vercel AI SDK 是一个现代化的 TypeScript 工具包，旨在简化 AI 驱动应用程序的开发。它为开发者提供了一套统一的 API，用于与多种模型提供商交互，同时支持主流前端框架如 Next.js、React、Svelte、Vue，以及 Node.js 等运行时。

今年 AI SDK 受到广泛关注，主要是因为它解决了 AI 应用开发中的核心痛点：模型提供商碎片化、流式处理复杂性、UI 状态管理难度，以及工具调用和 Agent 构建的高门槛。

核心架构

AI SDK 采用模块化设计，主要由以下几个核心部分组成：

1. AI SDK Core（核心功能）

  • generateText：文本生成（非流式）
  • streamText：流式文本生成
  • generateObject：结构化对象生成
  • streamObject：流式对象生成
  • generateSpeech：语音生成
  • transcribe：语音转录
  • embed：向量嵌入
  • Agent：AI Agent 构建

2. AI SDK UI（前端集成）

  • useChat：聊天机器人构建
  • useCompletion：文本补全
  • useObject：对象生成

3. Provider 系统

支持 30+ 模型提供商，包括 OpenAI、Anthropic、Google、Azure、Groq、DeepSeek 等。每个提供商都是独立的包，如 @ai-sdk/openai、@ai-sdk/anthropic。

核心功能详解

文本生成与流式处理

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

// 非流式文本生成
const { text } = await generateText({
  model: openai('gpt-4o'),
  system: 'You are a friendly assistant!',
  prompt: 'Why is the sky blue?',
});

// 流式文本生成
const result = await streamText({
  model: openai('gpt-4o'),
  prompt: 'Tell me a story about AI',
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

结构化数据生成

AI SDK 强大的地方在于能够生成符合 TypeScript 类型定义的结构化数据：

import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const schema = z.object({
  name: z.string(),
  price: z.number(),
  categories: z.array(z.string()),
});

const { object } = await generateObject({
  model: openai('gpt-4o'),
  schema,
  prompt: 'Generate a product for an online store',
});

工具调用与多步交互

AI SDK 内置了强大的工具调用系统，支持多步交互和 Agent 构建：

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

const tools = {
  weather: {
    description: 'Get weather information',
    parameters: z.object({
      city: z.string(),
    }),
    execute: async ({ city }) => {
      return `The weather in ${city} is sunny`;
    },
  },
};

const result = await generateText({
  model: openai('gpt-4o'),
  tools,
  prompt: 'What is the weather like in Tokyo?',
});

React UI 集成

'use client';

import { useChat } from '@ai-sdk/react';

export default function ChatBot() {
  const { messages, input, handleSubmit, handleInputChange } = useChat();

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          <strong>{message.role}: </strong>
          {message.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Type a message..."
        />
      </form>
    </div>
  );
}

高级特性

1. 流式对象生成

AI SDK 支持流式生成复杂的嵌套对象，这在构建实时数据展示界面时非常有用：

import { streamObject } from 'ai';

const result = await streamObject({
  model: openai('gpt-4o'),
  schema: z.object({
    products: z.array(z.object({
      name: z.string(),
      price: z.number(),
      description: z.string(),
    })),
  }),
  prompt: 'Generate 3 product ideas',
});

for await (const partialObject of result.partialObjectStream) {
  console.log('Partial:', partialObject);
}

2. AI Agents

AI SDK 提供实验性的 Agent 功能，用于构建能够执行复杂任务的 AI 系统：

import { Agent } from 'ai';

const agent = new Agent({
  model: openai('gpt-4o'),
  tools: { /* your tools */ },
  maxSteps: 5,
});

const result = await agent.generate({
  prompt: 'Help me plan a trip to Japan',
});

3. 多模态支持

除了文本，AI SDK 还支持：

  • 图像生成：通过 DALL-E、Stable Diffusion 等模型
  • 语音生成：使用 ElevenLabs、OpenAI TTS 等
  • 语音转录：使用 Deepgram、OpenAI Whisper 等

4. 中间件与拦截器

支持自定义中间件来修改请求和响应：

import { experimental_wrapLanguageModel } from 'ai';

const wrappedModel = experimental_wrapLanguageModel({
  model: openai('gpt-4o'),
  middleware: {
    onRequest: async (params) => {
      console.log('Request:', params);
      return params;
    },
    onResponse: async (response) => {
      console.log('Response:', response);
      return response;
    },
  },
});

为什么选择 Vercel AI SDK？

1. 统一的 API

无论使用 OpenAI、Anthropic 还是其他提供商，API 完全一致。切换提供商只需一行代码：

// 从 OpenAI 切换到 Anthropic
import { anthropic } from '@ai-sdk/anthropic';

const result = await generateText({
  model: anthropic('claude-3-opus'), // 只需改这里
  prompt: 'Hello',
});

2. 类型安全

深度集成 TypeScript 和 Zod，提供完整的类型推导和验证：

const schema = z.object({
  title: z.string(),
  tags: z.array(z.string()),
});

const result = await generateObject({
  model: openai('gpt-4o'),
  schema, // 类型自动推导
  prompt: '...',
});

// result.object 的类型为 { title: string, tags: string[] }

3. 流式优先

从设计之初就支持流式处理，为用户提供实时反馈：

  • 文本流式生成
  • 对象流式生成
  • 工具调用流式结果

4. 框架无关但框架友好

虽然核心不依赖任何框架，但提供了专门的 React、Svelte、Vue 集成包，让前端开发更简单。

5. 生产就绪

  • 完善的错误处理和重试机制
  • 内置遥测和监控支持
  • 性能优化和背压处理
  • 速率限制支持

实际应用场景

1. 聊天机器人

使用 useChat Hook 快速构建 ChatGPT 风格的聊天界面，支持多轮对话、工具调用、文件上传等。

2. 内容生成平台

利用 generateText 和 streamText 构建博客文章生成、代码补全、营销文案创建等工具。

3. 数据提取和分析

使用 generateObject 从非结构化文本中提取结构化数据，如发票解析、简历信息提取等。

4. AI Agents

构建能够执行复杂任务的智能助手，如旅行规划、代码审查、数据分析等。

5. 多模态应用

结合图像、语音、文本能力，构建如 AI 图像编辑器、语音助手、视频内容生成等应用。

生态系统

AI SDK 拥有丰富的生态系统：

  • LangChain 集成：@ai-sdk/langchain
  • LlamaIndex 集成：@ai-sdk/llamaindex
  • Valibot 支持：@ai-sdk/valibot
  • Vercel AI Gateway：用于监控和管理 AI API 调用

未来展望

Vercel AI SDK 正在快速发展，未来的重点包括：

  1. 更强的 Agent 能力：更复杂的多步推理和规划
  2. 更好的多模态支持：统一处理文本、图像、音频、视频
  3. 性能优化：更低的延迟和更高的吞吐量
  4. 开发者体验：更好的调试工具和错误提示
  5. 更多提供商：持续集成新的模型提供商

总结

Vercel AI SDK 通过提供统一的 API、类型安全的集成、流式优先的设计，极大地简化了 AI 应用的开发。无论你是想构建简单的聊天机器人，还是复杂的 AI Agent 系统，AI SDK 都能为你提供强大的支持。

avatar
文章
阅读
粉丝