用途
该技能面向使用 Vercel AI SDK v7 构建 React 聊天界面的场景,主要处理前端聊天 UI 的实现与问题排查。其范围限定为 @ai-sdk/react 的 useChat 以及来自 ai 包的 DefaultChatTransport。后端生成相关内容不在本技能范围内,需参考 ai-sdk-core。
主要能力与原则
- 使用来自 @ai-sdk/react 的 useChat,以及来自 ai 的 DefaultChatTransport。
- 采用本地输入状态管理,通过 sendMessage({ text }) 发送消息。
- 使用 status 判断状态,而非 isLoading。
- 渲染 message.parts。
- 服务端部分参见 ai-sdk-core;处理程序使用 createUIMessageStreamResponse 与 toUIMessageStream({ stream: result.stream })。仅在任务与流式传输或 SDK 无关时,才保留已弃用的 toUIMessageStreamResponse()。
使用方式与约束
- 不要凭记忆编写 useChat。应先检索 node_modules/@ai-sdk/react/docs/ 和 node_modules/ai/docs/,否则查阅 https://ai-sdk.dev/docs/ai-sdk-ui/chatbot。
- 当端点不是 /api/chat 时,必须使用 DefaultChatTransport({ api })。
- 当 status !== 'ready' 时,必须禁用发送。
- 避免使用 import { useChat } from 'ai/react'。
- 避免使用 toDataStreamResponse / pipeDataStreamToResponse。
- 避免使用 v5 之前的 handleInputChange / handleSubmit / useAssistant。
假设与交互
- 假设 SDK 主版本为 ai ^7;@ai-sdk/react 是独立包,主版本单独管理。文件夹遵循 ai。
- 聊天 HTTP 可能使用 Fastify;当 URL 不是 /api/chat 时需传入 transport。
- 与 ai-sdk-core 配合使用,并与 fastify、next 互补。
模板
提供以下模板:use-chat-basic.tsx、nextjs-api-route.ts、nextjs-chat-app-router.tsx。
适用场景与限制
适用于实现 AI SDK v7 聊天 UI 或排查相关问题。不覆盖后端生成。关于收费、价格、平台、效果等具体信息,资料中暂未提供。