AI Docs
Chat & Streaming
Transports
Structured Outputs
Tools
Chat UI Recipes
Interrupts
MCP
Resumable Streams
Persistence
Persistence (Advanced)
Media
Embeddings
Reranking
Evaluate
Code Mode
Sandboxes
- Overview
- Quick Start
- Providers
- Harnesses
- Harness Auth
- Workspace
- Tools
- Policy
- Lifecycle & Snapshots
- Portable Snapshots
- Keep Files After Reload
- Save a Named Version
- Branch From a Version
- Send a Frozen File
- Let the Agent Save and Fork
- Pick Which Files to Keep
- What a Snapshot Stores
- Instance Durability
- Durable Runs
- Events
Sandboxes (Advanced)
Advanced
AI/LLM: This documentation page is available in plain markdown format at/ai/latest/docs/ui/custom-adapters.md
UI
Custom Chat UI Adapters
Import @tanstack/ai-client/ui. Do not import it from the main client entry.
The subpath gives you:
- selectChatUI to match tool results and split list vs inline interrupts
- partTypeToKey to turn tool-call into toolCall
- Option types for tools, generic interrupts, and outputSchema
Your adapter owns:
- Native components and context
- Native reactivity
- Render callbacks, slots, or snippets
- Development warnings for missing mapped keys
Do not add default markup. Do not add a new store. The app owns useAppChat from createChatHook, or useChat / createChat.
Call selectChatUI({ messages, interrupts, inlineToolNames }). Automatic traversal skips a tool-result only when matched is true. Keep unmatched results.
Warn once per missing runtime key in development. Each build tool detects development mode differently, so the adapter prints the warning.
See the React, Solid, Vue, Svelte, and Remix adapters for the public names to match: Chat, Provider, Messages, Message, Part, Interrupts, Interrupt, useChatContext, and createChatHookContexts.