Vercel AI SDK 入门指南

什么是 Vercel AI SDK

Vercel AI SDK 是 Vercel 推出的 AI 应用开发工具包，专为构建 AI 驱动的 Web 应用设计。

核心优势

• 流式优先：原生支持流式响应
• 多框架支持：Next.js、React、Vue、Svelte
• 多模型支持：OpenAI、Anthropic、Google
• TypeScript 优先：完整的类型支持

安装配置

npm install ai @ai-sdk/openai

快速开始（Next.js）

1. 创建 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();
}

2. 前端组件

'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = 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="输入消息..."
        />
        <button type="submit">发送</button>
      </form>
    </div>
  );
}

核心 API

streamText - 流式文本生成

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

const result = streamText({
  model: openai('gpt-4o'),
  prompt: '写一首关于编程的诗',
});

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

generateObject - 结构化输出

import { generateObject } from 'ai';
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-4o'),
  schema: z.object({
    name: z.string(),
    ingredients: z.array(z.string()),
  }),
  prompt: '生成一个食谱',
});

useChat Hook

import { useChat } from 'ai/react';

function Chat() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    isLoading,
    stop,
  } = useChat();
  // ...
}

工具调用

import { tool } from 'ai';
import { z } from 'zod';

const result = streamText({
  model: openai('gpt-4o'),
  messages,
  tools: {
    weather: tool({
      description: '获取天气',
      parameters: z.object({
        city: z.string(),
      }),
      execute: async ({ city }) => {
        return { city, temperature: 25 };
      },
    }),
  },
});

下一步

• LangChain 教程
• Next.js AI 应用实战