Chat - Core examples

Build custom chat UIs with the headless runtime, hooks, selectors, and adapter contract.

These demos stay within the core layer. They use the runtime, hooks, selectors, callbacks, and adapter contract without relying on the headless components or Material UI primitives.

For background, see the dedicated documentation pages:

• State and store for ChatProvider props and controlled/uncontrolled state
• Hooks for hook signatures and when-to-use guidance
• Selectors for the selector API and store subscription patterns
• Adapters for the adapter interface and backend patterns
• Streaming for the chunk protocol and stream construction
• Real-time for event types and subscription lifecycle
• Type augmentation for registry interfaces and module augmentation

Start here

Begin with these three demos to learn the minimum surface area:

• Minimal core chat for the smallest working ChatProvider + useChat() setup
• Controlled state for the array-first controlled model pattern
• Selector-driven thread for row-level subscriptions with selector hooks

Runtime demos

These demos exercise the runtime hooks and adapter contract for typical chat features:

• Conversation history covers listConversations(), listMessages(), setActiveConversation(), and loadMoreHistory()
• Composer covers useChatComposer(), attachments, preview URLs, and IME-safe submit
• Message parts shows how to render reasoning, sources, files, and data-* parts with plain React
• Streaming lifecycle covers stopStreaming(), retry(), and the runtime callbacks
• Real-time covers provider-owned subscriptions, typing, presence, and read-state updates
• Real-time thread sync covers real-time add, update, and remove events for conversations and messages

Advanced extension points

These demos show how to extend the runtime with custom renderers, typed parts, and low-level store access:

• Tool call events covers onToolCall and callback-driven side effects outside the store
• Type augmentation covers module augmentation for metadata, typed tools, typed data-* parts, and custom message parts
• Tool approval and renderers covers addToolApprovalResponse(), partRenderers, and useChatPartRenderer()
• Advanced store access covers useChatStore(), chatSelectors, and low-level selector subscriptions

API

• ChatRoot