用途:为 Vue 3 项目接入 TanStack AI 的流式聊天、结构化输出与媒体生成能力,封装 @tanstack/ai-client 中的 ChatClient、GenerationClient、VideoGenerationClient 为响应式状态。文档版本 0.24.3,对等依赖 vue >=3.5.0、@tanstack/ai ^0.58.0。
主要能力:useChat 支持流式聊天、客户端工具、中断与队列;createChatHook 在模块作用域绑定选项并返回 useChat 组合式函数;六个生成类 composable 覆盖图像(useGenerateImage)、音频(useGenerateAudio)、语音(useGenerateSpeech)、转录(useTranscription)、摘要(useSummarize)与视频(useGenerateVideo,含 jobId、videoStatus);/ui 子路径提供无渲染聊天 UI 组件,/byok 子路径支持自带密钥,useWebMCPTools 注册客户端工具。
使用方式:安装 pnpm add @tanstack/ai @tanstack/ai-vue @tanstack/ai-openai 及提供方适配器;每个 composable 必须在组件 setup 或 effect scope 内调用,清理通过 onScopeDispose 自动完成;需传入 connection(如 fetchServerSentEvents('/api/chat'))或 fetcher;响应式状态为 DeepReadonly<ShallowRef<T>>,脚本与模板中均需用 .value 读取,不可直接重新赋值,改用 setMessages、clear、reset 等方法。
适用场景:需要为 Vue 3 应用构建 AI 聊天界面、接入多模态生成、结构化输出、自带密钥或 WebMCP 工具集成时。
限制:生成类 hook 缺少 connection 或 fetcher 会抛出异常;useChat 每次调用构建一个 ChatClient,更改 connection 等传输标识需重挂载或更换 key;stop() 仅中止本地流,不停止提供方任务,需用 runId 配合自有端点取消或轮询;持久化需要稳定 threadId,否则会话为临时状态;body 已弃用,优先使用 forwardedProps。完整 API、迁移与排查细节参见官方文档与仓库 references 目录。