用途
该技能面向使用 Vercel AI SDK v7 构建 React 聊天界面的场景,也可用于排查 AI SDK v7 聊天 UI 的相关问题。其作用范围限定在 @ai-sdk/react 的 useChat 以及来自 ai 包的 DefaultChatTransport。技能明确不覆盖后端生成部分,后端相关内容参见 ai-sdk-core。
主要能力与原则
- useChat 从 @ai-sdk/react 导入;DefaultChatTransport 从 ai 导入。
- 使用本地输入状态;通过 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。
- 聊天 HTTP 可能使用 Fastify;当 URL 不是 /api/chat 时需传入 transport。
使用方式与约束
必须(MUST):
- 当端点不是 /api/chat 时,使用 DefaultChatTransport({ api })。
- 当 status !== 'ready' 时禁用发送。
应避免(AVOID):
- import { useChat } from 'ai/react'。
- toDataStreamResponse / pipeDataStreamToResponse。
- v5 之前的 handleInputChange / handleSubmit / useAssistant。
适用场景
适用于实现 AI SDK v7 聊天 UI、排查相关问题的前端开发场景。技能假设 SDK 主版本为 ai ^7,@ai-sdk/react 为独立包主版本,文件夹遵循 ai。该技能与 fastify、next 互补使用。
模板
提供以下模板:
- use-chat-basic.tsx
- nextjs-api-route.ts
- nextjs-chat-app-router.tsx
限制
该技能不覆盖后端生成(见 ai-sdk-core)。关于收费、价格、平台、效果等具体信息,资料中暂未提供。