用途
ai-streaming 用于在 Next.js 应用中实现从模型到浏览器的端到端 AI 响应流式传输。它基于 Vercel AI SDK 构建，资料称其是 Next.js AI 应用「正确的抽象」。该技能会先读取项目结构，再接入既有的认证与模型配置，适合在构建聊天或文本生成功能时使用。
主要能力
该技能指导实现的链路包含服务端路由处理器与客户端 Hook 两部分。服务端使用 streamText 发起流式请求并返回数据流响应；客户端使用 useChat（多轮对话）或 useCompletion（单轮生成）消费流。方案覆盖了流式场景下的鉴权前置校验、用量统计回调、中止信号传递、错误展示以及分阶段的加载状态渲染。
资料特别指出「四种会静默破坏 AI 流式传输」的情况：
- 路由处理器运行时配置错误：流式需要 Edge 运行时，或配置正确的 Node.js 运行时响应处理。若未导出
export const runtime = 'edge'或未做正确的流式配置，响应会被完整缓冲，最后一次性「流式」输出。 - 缺少中止处理：用户在生成中途离开页面时，模型仍会继续运行并消耗 token。应传入来自 AbortController 的 abortSignal，并在组件卸载时清理。
- 流开始后才做鉴权：一旦调用 streamText，响应头就已发送，无法再返回 401。鉴权必须在调用任何 SDK 方法之前完成并校验。
- 客户端缺少错误边界：若流在响应中途出错，useChat 会将其暴露在 error 状态中；若不渲染该状态，界面会带着部分输出静默卡住。
使用方式
资料将实施过程分为六个阶段。
阶段一：检测项目。通过 cat package.json | grep -E "ai|anthropic|openai|@ai-sdk" 判断：若已有 ai 包则说明已安装 Vercel AI SDK，直接进入阶段三；若仅有 @anthropic-ai/sdk 或仅有 openai，则在此之上补充 Vercel AI SDK；若没有，则从零安装。此外使用 find . -name "*.ts" -path "*/api/*" | xargs grep -l "streamText\|createOpenAI\|anthropic" 2>/dev/null 检查是否已有 AI 路由。
阶段二：安装。执行 npm install ai @ai-sdk/anthropic，或对 OpenAI 执行 npm install ai @ai-sdk/openai。并在 .env.example 中加入 ANTHROPIC_API_KEY= 或 OPENAI_API_KEY=。
阶段三：编写路由处理器。资料给出聊天路由示例 app/api/chat/route.ts 与单轮生成路由示例 app/api/generate/route.ts，均导出 runtime = 'edge'，并在调用 streamText 之前先做鉴权检查；聊天路由还包含积分或速率限制检查（如 credits 不足返回 402 及升级链接）、请求解析、传入 abortSignal: req.signal，以及在 onFinish 中扣减积分。数据通过 result.toDataStreamResponse() 返回。示例模型为 anthropic('claude-sonnet-4-6')，并设置 system 提示与 maxTokens。
阶段四：客户端 Hook。多轮聊天使用 useChat({ api: '/api/chat', onError })，消费 messages、input、handleInputChange、handleSubmit、isLoading、error 与 stop；渲染消息列表、加载提示、错误提示，并在加载时显示 Stop 按钮调用 stop。单轮生成使用 useCompletion({ api: '/api/generate' })，消费 completion、input、handleInputChange、handleSubmit、isLoading、error 与 stop，并使用 whitespace-pre-wrap 保留格式渲染输出。
阶段五：流式加载状态。资料强调需处理三种互不相同的状态：未开始（显示输入框）、加载中（模型思考、尚无 token，显示加载动画）、流式中（token 到达，渲染部分文本）。示例组件 StreamingOutput 根据 isLoading 与 completion 组合渲染点状动画或带脉冲光标的文本。
阶段六：将积分接入流。若项目使用积分系统，应在流结束后而非开始前扣减。示例在 onFinish 回调中根据 finishReason 与 usage.totalTokens 计算成本并更新数据库，并强调绝不能在流开始前扣减，否则模型在第一个 token 就出错时用户会白白损失积分。
适用场景
该技能适用于使用 Next.js 与 Vercel AI SDK 构建聊天或多轮生成功能、需要将模型输出逐 token 推送到浏览器的项目，也适用于需要在这一链路上处理鉴权、积分、中止与错误的场景。
限制
资料为实施指南与代码示例，未提供该技能自身的运行环境要求、依赖版本锁定、定价或托管方式等信息。示例中出现的具体模型名称、积分计算方式与数据库调用均需依据实际项目调整。资料附带的验证清单包括：路由处理器导出 runtime = 'edge'、任何 streamText 调用前完成鉴权、将 req.signal 作为 abortSignal 传入、useChat/useCompletion 渲染 error 状态、加载时显示 Stop 按钮、积分在 onFinish 而非流前扣减、流过程中渲染部分文本，以及两项测试（生成中途离开页面确认服务端日志中调用被中止；触发错误确认渲染错误状态而非界面卡死）。