Chat - Core examples

Demo-first patterns for building custom chat UIs with @mui/x-chat/headless and plain React markup.

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

Each demo includes explanatory prose, inline code snippets for the key patterns, and a runnable demo. For the concept-level reference behind these demos, see the dedicated documentation pages:

• State and store for ChatProvider props, controlled/uncontrolled state, and the error model
• Hooks for all nine hooks with signatures and when-to-use guidance
• Selectors for the full selector API and store subscription patterns
• Adapters for the adapter interface, writing guide, and backend patterns
• Streaming for the chunk protocol and stream construction
• Realtime for event types, subscription lifecycle, and store effects
• Type augmentation for the six registry interfaces and module augmentation

Start here

• 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

• 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
• Realtime covers provider-owned subscriptions, typing, presence, and read-state updates
• Realtime thread sync covers realtime add, update, and remove events for conversations and messages

Advanced extension points

• 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