Next.js + AI SDK：30 分钟搭建一个支持流式输出的 AI 聊天应用

Next.js + AI SDK：30 分钟搭建一个支持流式输出的 AI 聊天应用

在 AI 应用开发中，"流式输出"（Streaming）几乎是标配。用户不想盯着加载圈看 5 秒，他们希望看到字一个一个蹦出来。

如果你用传统的 fetch + Response 手写流式处理，需要处理 ReadableStream、编解码、前端状态管理，繁琐且容易出错。

今天分享一个更优雅的方案：Next.js + Vercel AI SDK。只需 30 分钟，你就能拥有一个生产级、支持流式输出、带聊天历史的 AI 应用。

1. 初始化项目

首先，创建一个 Next.js 项目并安装 AI SDK：

npx create-next-app@latest my-ai-chat cd my-ai-chat npm install ai @ai-sdk/openai

2. 配置 API Key

在 .env.local 文件中添加你的 OpenAI API Key：

OPENAI_API_KEY=sk-your-api-key-here

3. 后端：实现流式接口

在 app/api/chat/route.ts 中，我们使用 AI SDK 的 streamText 工具。它会自动处理流式响应，无需手动操作 Stream。

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

// 允许运行 60 秒，防止长文本生成超时 export const maxDuration = 60;

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

const result = streamText({ model: openai('gpt-4o-mini'), // 使用快速且便宜的模型 messages, system: '你是一个乐于助人的 AI 助手。', });

// 直接返回流式响应 return result.toDataStreamResponse(); }

关键点：

• streamText 封装了复杂的流处理逻辑。 • toDataStreamResponse() 自动将结果转换为前端可识别的格式。

4. 前端：使用 useChat Hook

AI SDK 最强大的地方在于前端 Hook。在 app/page.tsx 中，我们使用 useChat 来处理状态、发送消息和接收流。

'use client';

import { useChat } from 'ai/react';

export default function Chat() { const { messages, input, handleInputChange, handleSubmit } = useChat();

return (

  <form onSubmit={handleSubmit}>
    <input
      className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
      value={input}
      placeholder="说点什么..."
      onChange={handleInputChange}
    />
  </form>
</div>