垦荒学园
  • 中文

      • 快速上手

      本章用 AI SDK Core 打通一次非 UI 生成，再用 Next.js App Router 接上 useChat。默认模型字符串是 Gateway 的 openai/gpt-4.1-mini。官方 Quickstart 页面目前示例是 xai/grok-4.6；ID 会变，换成你账号里能用的即可。

      先完成 安装与环境：Node 22+、pnpm add ai @ai-sdk/react zod、.env.local 里的 AI_GATEWAY_API_KEY。

      1. 无 UI：generateText

      适合脚本、定时任务、服务端一次性摘要。不需要 React。

      import { generateText } from 'ai';

const { text } = await generateText({
  model: 'openai/gpt-4.1-mini',
  instructions: 'Reply in one short sentence.',
  prompt: 'What is the Vercel AI SDK?',
});

console.log(text);

      直连 OpenAI 时改成：

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

const { text } = await generateText({
  model: openai('gpt-5.1'), // 文档示例；以控制台为准
  prompt: 'What is the Vercel AI SDK?',
});

      generateText 还会给出 usage、finishReason、toolCalls 等字段，调试时先看这些。

      2. 流式聊天：Route Handler

      在 app/api/chat/route.ts：

      import {
  streamText,
  UIMessage,
  convertToModelMessages,
  createUIMessageStreamResponse,
  toUIMessageStream,
} from 'ai';

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

  const result = streamText({
    model: 'openai/gpt-4.1-mini',
    messages: await convertToModelMessages(messages),
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

      发生了什么：

      1. 客户端送来 UIMessage[]（含时间戳等 UI 元数据）。
      2. convertToModelMessages（async）去掉 UI 字段，变成模型要的 ModelMessage[]。
      3. streamText 立刻开始流；必须消费 result.stream，否则生成不会跑完。
      4. toUIMessageStream + createUIMessageStreamResponse 把流包装成 useChat 认识的 SSE。

      不要用旧博客里的 toDataStreamResponse()。

      3. 页面：useChat

      app/page.tsx 必须是客户端组件（React hooks）：

      'use client';

import { useChat } from '@ai-sdk/react';
import { useState } from 'react';

export default function Chat() {
  const [input, setInput] = useState('');
  const { messages, sendMessage } = useChat();

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, i) =>
            part.type === 'text' ? <span key={i}>{part.text}</span> : null,
          )}
        </div>
      ))}
      <form
        onSubmit={(e) => {
          e.preventDefault();
          sendMessage({ text: input });
          setInput('');
        }}
      >
        <input value={input} onChange={(e) => setInput(e.currentTarget.value)} />
      </form>
    </div>
  );
}

      默认 POST 到 /api/chat。用 sendMessage({ text }) 发消息；自己用 useState 管输入框。渲染走 message.parts，不要假设有单一 content 字符串。

      pnpm run dev

      打开 http://localhost:3000，输入一句话，应看到逐 token 出现的回复。

      第一个任务清单

      1. pnpm create next-app → pnpm add ai @ai-sdk/react zod
      2. 配置 AI_GATEWAY_API_KEY
      3. 先跑通上面的 generateText（可写在临时 .mts 里）
      4. 加上 route.ts + page.tsx，确认流式聊天
      5. 把 model 改成 gateway('anthropic/claude-sonnet-4.5') 或 openai('gpt-5.1')，观察仍能工作

      下一步把天气工具和 status 接上，见 useChat 与 工具调用。Next.js 超时与部署见 Next.js 集成。

      下一步

      评论