TypeScript AI SDK 指南 2026：用于 Next.js 应用的 Vercel AI SDK

Vercel AI SDK 已成为在 TypeScript/Next.js 中构建 AI 应用的标准库。它提供了跨 OpenAI、Claude、Gemini 等模型的统一接口，内置流式传输、React 钩子和 Server Actions 支持。本指南涵盖构建生产级 AI 功能所需的一切。

为什么选择 Vercel AI SDK？

设置

bash
npm install ai @ai-sdk/openai @ai-sdk/anthropic zod
或
bun add ai @ai-sdk/openai @ai-sdk/anthropic zod

基本文本生成

typescript
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
// 服务端生成
const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: '解释 Next.js 中 RSC 和 RSC 流式传输的区别',
});
console.log(text);
// 带系统提示词
const { text: review } = await generateText({
  model: openai('gpt-4o'),
  system: '你是一位资深 TypeScript 工程师，负责审查代码最佳实践。',
  prompt: 审查以下代码：${code},
});

使用 useChat 钩子实现流式聊天

typescript
// src/app/chat/page.tsx
'use client';
import { useChat } from '@ai-sdk/react';
export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
  });
  return (
    

      

        {messages.map((message) => (
          

            

              {message.content}
            
          
        ))}
      
      

        
        
          发送
        
      
    
  );
}

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'),
    system: '你是一个有帮助的助手。',
    messages,
  });
  return result.toDataStreamResponse();
}

使用 Zod 实现结构化输出

typescript
import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';
// 定义模式
const ProductSchema = z.object({
  name: z.string().describe('产品名称'),
  price: z.number().describe('价格（美元）'),
  category: z.enum(['electronics', 'clothing', 'food', 'other']),
  features: z.array(z.string()).describe('主要功能列表'),
  inStock: z.boolean(),
  rating: z.number().min(1).max(5).optional(),
});
// 从非结构化文本中提取结构化数据
const { object: product } = await generateObject({
  model: openai('gpt-4o'),
  schema: ProductSchema,
  prompt: `从以下内容中提取产品信息："Pro X 无线耳机具有 30 小时电池续航、主动降噪和优质音效，售价 299 美元。当前有货。用户评分 4.7/5。"
  类别：电子产品`,
});
console.log(product);
// { name: 'Pro X 无线耳机', price: 299, category: 'electronics', ... }

在 Next.js 中调用工具

typescript
// src/app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { streamText, tool } from 'ai';
import { z } from 'zod';
export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o'),
    system: '你是一个购物助手。',
    messages,
    tools: {
      searchProducts: tool({
        description: '搜索产品目录',
        parameters: z.object({
          query: z.string().describe('搜索查询'),
          category: z.enum(['electronics', 'clothing', 'all']).optional(),
          maxPrice: z.number().optional(),
        }),
        execute: async ({ query, category, maxPrice }) => {
          // 调用实际的产品搜索 API
          const results = await searchProductCatalog({ query, category, maxPrice });
          return results.slice(0, 5);
        },
      }),
      getOrderStatus: tool({
        description: '根据订单 ID 获取订单状态',
        parameters: z.object({
          orderId: z.string(),
        }),
        execute: async ({ orderId }) => {
          return await fetchOrderStatus(orderId);
        },
      }),
    },
    maxSteps: 5, // 允许最多 5 轮工具调用
  });
  return result.toDataStreamResponse();
}

流式对象生成

typescript
// 生成流式结构化数据 - 非常适合表单和报告
import { streamObject } from 'ai';
import { openai } from '@ai-sdk/openai';
const ReportSchema = z.object({
  title: z.string(),
  sections: z.array(z.object({
    heading: z.string(),
    content: z.string(),
  })),
  recommendations: z.array(z.string()),
});
// API 路由
export async function POST(req: Request) {
  const { topic } = await req.json();
  const result = streamObject({
    model: openai('gpt-4o'),
    schema: ReportSchema,
    prompt: 生成一份关于以下主题的商业报告：${topic},
  });
  return result.toTextStreamResponse();
}
// 客户端钩子
'use client';
import { experimental_useObject as useObject } from '@ai-sdk/react';
export function ReportGenerator() {
  const { object: report, submit, isLoading } = useObject({
    api: '/api/generate-report',
    schema: ReportSchema,
  });
  return (
    

       submit({ topic: 'Q3 绩效分析' })}>
        生成报告
      
      {report && (
        

          
{report.title}
          {report.sections?.map((section, i) => (
            

              
{section?.heading}
              
{section?.content}
            
          ))}
        
      )}
    
  );
}

在 Next.js 中实现多步骤智能体

typescript
import { openai } from '@ai-sdk/openai';
import { generateText, tool } from 'ai';
import { z } from 'zod';
export async function runResearchAgent(topic: string): Promise {
  const { text, steps } = await generateText({
    model: openai('gpt-4o'),
    system: `你是一个研究助手。使用可用工具深入研究主题。
    在回答之前务必搜索信息。
    综合多个来源形成全面回复。`,
    prompt: 研究并总结：${topic},
    tools: {
      webSearch: tool({
        description: '搜索网络信息',
        parameters: z.object({
          query: z.string().describe('搜索查询'),
        }),
        execute: async ({ query }) => {
          // 集成 Tavily、Serper 或其他搜索 API
          const results = await searchWeb(query);
          return results.map((r) => ({ title: r.title, snippet: r.snippet, url: r.url }));
        },
      }),
    },
    maxSteps: 10, // 允许多次研究迭代
  });
  // 记录智能体的操作
  for (const step of steps) {
    if (step.toolCalls) {
      for (const call of step.toolCalls) {
        console.log(工具：${call.toolName}, call.args);
      }
    }
  }
  return text;
}

切换模型

typescript
import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
import { google } from '@ai-sdk/google';
// 统一 API，轻松切换模型
const model = process.env.AI_PROVIDER === 'anthropic'
  ? anthropic('claude-3-5-sonnet-20241022')
  : process.env.AI_PROVIDER === 'google'
  ? google('gemini-2.0-flash-exp')
  : openai('gpt-4o');  // 默认
const { text } = await generateText({
  model,  // 无论提供商如何，工作方式完全相同
  prompt: '你的提示词',
});

生产模式

typescript
// 错误处理和回退
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
async function generateWithFallback(prompt: string): Promise {
  const models = [
    openai('gpt-4o'),
    anthropic('claude-3-5-sonnet-20241022'),
    openai('gpt-4o-mini'),  // 更便宜的回退
  ];
  for (const model of models) {
    try {
      const { text } = await generateText({ model, prompt });
      return text;
    } catch (error) {
      console.warn(模型失败，尝试下一个：, error);
    }
  }
  throw new Error('所有模型均失败');
}

结论

Vercel AI SDK 大幅减少了 TypeScript 中 AI 应用的样板代码。统一的 API 意味着你不会被锁定在单一提供商，而 React 钩子自动处理流式传输的复杂性。从 useChat 开始构建对话界面，用 generateObject 进行结构化数据提取——这两种模式覆盖了团队想要构建的 80% 的 AI 功能。