在 Next.js 中构建流式 AI 界面

体感速度本身就是一项功能

如果 UI 感觉是活的，用户就会原谅一个慢模型。流式输出把 6 秒的等待，变成一段实时 可读的回应。

技术栈

• 服务端路由 用 Web Streams API 从模型流式读取。
• 客户端 读取流，并在 token 到达时逐个追加。
• Suspense + 乐观 UI 处理工具调用与引用。

export async function POST(req: Request) {
  const stream = await llm.stream(await req.json());
  return new Response(stream.toReadableStream(), {
    headers: { "Content-Type": "text/event-stream" },
  });
}

那些重要的细节

• 增量渲染 markdown，且不产生布局跳动。
• 提供一个停止按钮——用户想要掌控感。
• 持久化最终消息，别让一次刷新丢掉整段对话。

好的 AI 体验，50% 是模型，50% 是你为等待省下的那些毫秒。