12.3.2 官方工具包——Vercel AI SDK：安装配置与基础使用

一句话破题

Vercel AI SDK 提供了统一的接口来调用各种 AI 模型，几行代码就能搭建起一个具备流式对话能力的 AI 应用。

快速上手

1. 安装依赖

pnpm add ai @ai-sdk/openai

SDK 采用模块化设计，不同的模型提供商需要安装对应的包：

提供商	包名
OpenAI	@ai-sdk/openai
Anthropic	@ai-sdk/anthropic
Google	@ai-sdk/google
Azure	@ai-sdk/azure

2. 配置环境变量

# .env.local
OPENAI_API_KEY=sk-xxxxxxxxxxxxx

3. 创建 API 路由

// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

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

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });

  return result.toDataStreamResponse();
}

4. 前端调用

'use client';

import { useChat } from 'ai/react';

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

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

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="输入消息..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>
          发送
        </button>
      </form>
    </div>
  );
}

核心 API 概览

API	用途	返回类型
streamText	流式文本生成	StreamTextResult
generateText	一次性文本生成	GenerateTextResult
streamObject	流式结构化输出	StreamObjectResult
generateObject	一次性结构化输出	GenerateObjectResult

切换模型提供商

SDK 的优势在于统一接口，切换模型只需更改一行代码：

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

// 使用 OpenAI
const result = streamText({
  model: openai('gpt-4o'),
  messages,
});

// 使用 Anthropic
const result = streamText({
  model: anthropic('claude-3-5-sonnet-20241022'),
  messages,
});

// 使用 Google
const result = streamText({
  model: google('gemini-1.5-pro'),
  messages,
});

AI 协作指南

• 核心意图：让 AI 帮你快速搭建 AI 对话功能。
• 需求定义公式："请帮我在 Next.js 项目中集成 Vercel AI SDK，实现一个基础的聊天界面，使用 OpenAI 的 gpt-4o 模型。"
• 关键术语：streamText、useChat、ai/react、toDataStreamResponse

避坑指南

• API Key 不要暴露到前端：环境变量只在服务端可用，这是设计使然。
• 注意 Token 限制：不同模型的上下文窗口大小不同。
• 处理速率限制：API 调用可能会遇到速率限制，需要添加重试逻辑。