Vercel AI SDK 实战教程：Next.js 集成 AI 对话

为什么用 Vercel AI SDK？

直接调 OpenAI API 的问题：

Vercel AI SDK 解决了所有这些：统一接口支持 30+ 模型，内置 React hooks 管理对话状态，流式输出开箱即用。

安装

bash
npm install ai @ai-sdk/openai
或 Claude：npm install ai @ai-sdk/anthropic
或 Google：npm install ai @ai-sdk/google

最简流式聊天（10 行代码）

API Route

typescript
// src/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();
}

前端组件

typescript
// src/components/chat.tsx
'use client';
import { useChat } from 'ai/react';
export function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
  return (
    

      {messages.map((m) => (
        

          {m.role === 'user' ? '你' : 'AI'}：
          {m.content}
        
      ))}
      

        
        
          {isLoading ? '生成中...' : '发送'}
        
      
    
  );
}

工具调用（Tool Calling）

typescript
import { streamText, tool } from 'ai';
import { z } from 'zod';
const result = streamText({
  model: openai('gpt-4o'),
  messages,
  tools: {
    getWeather: tool({
      description: '获取指定城市的当前天气',
      parameters: z.object({ city: z.string() }),
      execute: async ({ city }) => {
        const weather = await fetchWeatherAPI(city);
        return { city, temperature: weather.temp };
      },
    }),
    queryOrders: tool({
      description: '查询用户订单列表',
      parameters: z.object({
        userId: z.string(),
        status: z.enum(['pending', 'completed']).optional(),
      }),
      execute: async ({ userId, status }) => {
        return { orders: await db.orders.findMany({ where: { userId, status } }) };
      },
    }),
  },
  maxSteps: 5,
});

多模型切换

typescript
import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
import { google } from '@ai-sdk/google';
function selectModel(taskType: string) {
  const models: Record = {
    code: anthropic('claude-3-5-sonnet-20241022'),
    analysis: openai('gpt-4o'),
    fast: openai('gpt-4o-mini'),
    multimodal: google('gemini-2.5-pro'),
  };
  return models[taskType] ?? openai('gpt-4o-mini');
}

结构化 JSON 输出

typescript
import { generateObject } from 'ai';
import { z } from 'zod';
const { object } = await generateObject({
  model: openai('gpt-4o'),
  schema: z.object({
    name: z.string(),
    category: z.enum(['electronics', 'clothing', 'food']),
    price: z.number().positive(),
    tags: z.array(z.string()).max(5),
  }),
  prompt: '根据以下信息生成商品数据：' + productInfo,
});
// object 有完整 TypeScript 类型推断

聊天历史持久化

typescript
const result = streamText({
  model: openai('gpt-4o'),
  messages: [...historicalMessages, ...newMessages],
  onFinish: async ({ text }) => {
    await db.messages.create({
      data: { conversationId, role: 'assistant', content: text },
    });
  },
});

生产环境：限流 + 认证

typescript
import { auth } from '@clerk/nextjs/server';
export async function POST(req: Request) {
  const { userId } = await auth();
  if (!userId) return new Response('Unauthorized', { status: 401 });
  const { success } = await ratelimit.limit(userId);
  if (!success) return new Response('Too many requests', { status: 429 });
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    maxTokens: 1000,  // 控制单次回复长度
  });
  return result.toDataStreamResponse();
}

延伸阅读