Chat — Headless examples
Build chat interfaces from end-to-end composition patterns using @mui/x-chat/headless primitives.
Each demo composes the @mui/x-chat/headless runtime with its structural component model to show how a pattern fits in a real chat surface and why to choose it over a lower-level approach.
When to use these demos
Use these demos to answer practical composition questions such as:
- What the smallest complete headless shell looks like
- How the default split-pane inbox is assembled
- Where grouping, date dividers, and indicators belong in the render tree
- How far slot replacement can go before a surface should drop down to headless primitives
Start with the smallest shell, then move deeper into the areas you need to customize.
Real-world applicability
These demos map well to common product surfaces such as:
- Support and operations inboxes
- Embedded copilots in dashboards and admin tools
- Customer-facing assistants with custom branding
- Collaboration panels with long-running conversation history
- Internal tools that need structure and accessibility without a full styled component set
Start here
- Minimal headless shell — the smallest complete chat surface.
- Two-pane inbox — the default split-pane application layout.
Message and thread patterns
- Grouped message timeline — author grouping and custom timeline presentation.
- Indicators in context — typing, unread, and scroll affordances in a realistic thread.
- Custom message part rendering — selective replacement of default part rendering.
Composer and customization patterns
- Composer with attachments — the full draft toolbar pattern.
- Slot customization — owner-state-driven slot replacement across multiple primitive groups.
Suggested learning order
- Start with Minimal headless shell to learn the canonical component stack.
- Move to Two-pane inbox to understand the most common application layout.
- Choose a specialization:
- Grouped message timeline for message presentation
- Composer with attachments for draft interactions
- Indicators in context for unread and typing affordances
- Finish with Custom message part rendering and Slot customization when the default structure is no longer enough.