用途:面向 React/Next.js 的 AI 前端开发技能,聚焦 Vercel AI SDK v5 的客户端 Hook,用于构建聊天界面、单次补全与结构化数据流式渲染。
主要能力:提供 useChat(多轮聊天、消息历史、sendMessage、reload、stop、onFinish/onError、headers/body 等配置)、useCompletion(单提示补全,返回 completion、complete、isLoading)、useObject(配合 Zod 流式输出结构化 JSON)。附 Next.js App/Pages Router 集成示例、流式最佳实践(加载态、停止按钮、自动滚动、输入禁用)、工具调用 UI、文件附件、localStorage 消息持久化,以及 v4 到 v5 的破坏性变更说明与常见 UI 错误排查。
安装:bun add ai @ai-sdk/openai(或同样命令)。主要依赖版本:ai ^5.0.116、@ai-sdk/openai ^2.0.88、react ^18.2.0、zod ^3.23.8、isomorphic-dompurify ^2.16.0;Next.js 推荐 14+(13.4+ 可用)。
使用方式:客户端组件加 'use client',从 ai/react 引入 useChat,自行用 useState 管理输入(v5 不再内置 input/handleInputChange/handleSubmit,改用 sendMessage),服务端 API 路由用 streamText 并返回 result.toDataStreamResponse()(App Router)或 pipeDataStreamToResponse(res)(Pages Router)。
适用场景:React 聊天界面、AI 补全、流式响应、Next.js AI 应用、消息状态与工具调用展示、附件管理、v4 迁移与 useChat/useCompletion 报错排查。
限制:不适用于后端 AI 能力(应使用 ai-sdk-core)、非 React 前端、RSC 生成式 UI 及原生应用。常见问题包括流解析失败、无响应、部署后不流式、body 值过期、React 更新深度超限。价格与更多细节暂未提供。