@tanstack/ai-vue

Vue 3 composables for TanStack AI streaming chat, structured outputs, and media generation. Wraps the headless @tanstack/ai-client classes (ChatClient, GenerationClient, VideoGenerationClient) in reactive state.

• Version documented: 0.24.3 (source: package.json:3)
• Peer deps: vue >=3.5.0, @tanstack/ai ^0.58.0; runtime deps: @tanstack/ai-client ^0.33.2, @tanstack/markdown ^0.0.13 (source: package.json:55-62)
• Entry points: . (main), ./ui (headless chat UI factory), ./byok (bring-your-own-key) (source: package.json:23-36)
• Official docs: https://tanstack.com/ai/latest/docs/api/ai-vue and https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue
• Install: pnpm add @tanstack/ai @tanstack/ai-vue @tanstack/ai-openai (plus a provider adapter; server-side chat comes from @tanstack/ai)

Core rules

1. Every composable must run inside a component setup or effect scope. Cleanup is automatic via onScopeDispose; the scope owns the connection (source: src/use-chat.ts:259-269).
2. All reactive state is DeepReadonly<ShallowRef<T>>. Read with .value in script AND template. Never reassign; use the returned methods (setMessages, clear, reset) (source: src/use-chat.ts:425-457).
3. Pass a connection adapter (for example fetchServerSentEvents('/api/chat'), re-exported from this package) or a fetcher. Generation hooks throw useGeneration requires either a connection or fetcher option without one (source: src/use-generation.ts:272-274).
4. useChat builds one ChatClient per call. Changing connection (or other transport identity) requires a remount or a changed key prop; body, forwardedProps, context, and queue are watched and synced live (source: src/types.ts:77-79, src/use-chat.ts:212-230).
5. Callback options (onChunk, onFinish, onError, ...) are read through the options object at call time, so reactive or mutated options propagate without recreating the client (source: src/use-chat.ts:85-91).
6. Prefer forwardedProps over body; body is deprecated but still merged into the same wire payload (source: src/use-chat.ts:207-209).