Custom Chat UI Adapters

Build a chat UI adapter on @tanstack/ai-client/ui. That subpath exports the types and selectors. Your adapter adds the components.

What the core gives you#

Import from @tanstack/ai-client/ui, not from the main client entry:

• selectChatUI: matches tool results to tool calls, and splits list interrupts from inline interrupts.
• partTypeToKey: turns a part type such as tool-call into a map key such as toolCall.
• Option types for tools, generic interrupts, and outputSchema.

What your adapter owns#

• Native components and context.
• Native reactivity.
• Render callbacks, slots, or snippets.
• Development warnings for missing map keys.

Do not add default markup. Do not add a new store. The app owns the chat instance, from useAppChat in createChatHook, or from useChat or createChat.

Build it#

1. Call selectChatUI({ messages, interrupts, inlineToolNames }).
2. In automatic traversal, skip a tool-result part only when matched is true. Keep unmatched results.
3. Warn once for each missing runtime key in development. Each build tool detects development mode in a different way, so the adapter prints the warning.
4. Match the public names of the existing adapters: Chat, Provider, Messages, Message, Part, Interrupts, Interrupt, useChatContext, and createChatHookContexts.

The React, Solid, Vue, Svelte, and Remix adapters show those names in use.