用 Vercel AI SDK 搭第一个项目

这一章带你从零开始，用 Next.js App Router + AI SDK 搭一个能流式输出的聊天应用。完成后你会理解 AI SDK 的核心用法。

第一步：初始化项目 + 安装依赖

npx create-next-app@latest my-ai-chat --typescript --app --tailwind
cd my-ai-chat
核心包 + React Hook + Provider
npm install ai @ai-sdk/react @ai-sdk/openai

ai 是核心库，@ai-sdk/react 提供 useChat 等 Hook，@ai-sdk/openai 是 OpenAI 的适配器。你也可以装 @ai-sdk/anthropic 或 @ai-sdk/google 来用 Claude 或 Gemini。

第二步：配置 API Key

在项目根目录创建 .env.local：

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxx

Provider 包会自动读取对应的环境变量，不需要手动传入。

第三步：写后端 API Route

创建 app/api/chat/route.ts：

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
export const maxDuration = 30;
export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });
  return result.toDataStreamResponse();
}

就这几行。streamText 调用模型生成流式文本，toDataStreamResponse 把流转成前端能消费的 Response。

第四步：写前端聊天页面

编辑 app/page.tsx：

'use client';
import { useChat } from '@ai-sdk/react';
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <div className="flex flex-col w-full max-w-md mx-auto py-24">
      {messages.map((m) => (
        <div key={m.id} className="mb-4 whitespace-pre-wrap">
          <strong>{m.role === 'user' ? '你：' : 'AI：'}</strong>
          {m.parts?.map((part, i) =>
            part.type === 'text' ? <span key={i}>{part.text}</span> : null
          )}
        </div>
      ))}
      <form onSubmit={handleSubmit} className="fixed bottom-0 w-full max-w-md p-4">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="输入消息..."
          className="w-full border rounded p-2"
        />
      </form>
    </div>
  );
}

useChat() 默认请求 /api/chat，自动管理消息列表、输入框状态和流式渲染。你不需要手动处理 SSE 或 fetch stream——Hook 全包了。

第五步：跑起来

npm run dev

打开 http://localhost:3000，输入消息，你会看到 AI 的回答像打字一样逐字流出来。

一行代码切换模型

想试 Claude？装 Anthropic Provider，改一行：

// route.ts 改这两行就行
import { anthropic } from '@ai-sdk/anthropic';
const result = streamText({
  model: anthropic('claude-sonnet-4-20250514'),
  messages,
});

Google Gemini 也一样，而且 Gemini 有免费额度（每天 1500 次请求），很适合开发测试：

import { google } from '@ai-sdk/google';
const result = streamText({
  model: google('gemini-2.5-flash-preview-04-17'),
  messages,
});

前端代码一个字都不用改。这就是统一 Provider 接口的好处——后端换模型，前端无感知。

本地模型也行

用 Ollama 跑本地模型，完全免费：

# 先装 Ollama 并拉模型
ollama pull llama3
装社区 Provider
npm install ollama-ai-provider

import { createOllama } from 'ollama-ai-provider';
const ollama = createOllama({ baseURL: 'http://localhost:11434/api' });
const result = streamText({
  model: ollama('llama3'),
  messages,
});

下一章我们深入 AI SDK 的三大核心能力：结构化输出、Tool Calling、流式 UI。