Chat - Headless examples
Demo-first patterns for building chat interfaces with @mui/x-chat/headless structural primitives.
These demos focus on end-to-end composition patterns rather than isolated component references.
Each demo stays inside the headless layer: the runtime comes from @mui/x-chat/headless, but the learning surface is the structural component model exposed by @mui/x-chat/headless.
The section is meant to answer real product questions, not just API questions. Each page shows where a pattern fits in an actual chat surface and why a team would choose it over a simpler or lower-level approach.
How to use this section
Use these demos when you want 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 inside dashboards and admin tools
- customer-facing assistants with custom branding
- collaboration panels with long-running conversation history
- internal tools that need strong structure and accessibility without adopting a full styled component set
Start here
- Minimal headless shell for the smallest complete chat surface
- Two-pane inbox for the default split-pane application layout
Message and thread patterns
- Grouped message timeline for author grouping and custom timeline presentation
- Indicators in context for typing, unread, and scroll affordances in a realistic thread
- Custom message part rendering for selective replacement of default part rendering
Composer and customization patterns
- Composer with attachments for the full draft toolbar pattern
- Slot customization for owner-state-driven slot replacement across multiple primitive groups
Recommended progression
- 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.