Chat - Material UI examples

Demo-first examples for building chat interfaces with @mui/x-chat.

These demos show common product patterns using the ChatBox component. Each demo is self-contained and demonstrates one aspect of the @mui/x-chat API.

All examples use a local echo adapter that streams responses back. Replace it with your real adapter to connect to a backend.

Start here

• Basic AI chat for the smallest working ChatBox setup
• Thread-only for a single-pane copilot with no sidebar
• Multi-conversation for the two-pane inbox layout
• No conversation history for when the adapter has no listConversations and no conversations state is provided

Composable parts

• Message feed for a display-only embed with no input — trigger messages via useChat().sendMessage()
• Split layout for placing ChatMessageList and ChatComposer in separate DOM zones, connected only by ChatRoot

Agentic

• Agentic code assistant — streaming tool calls (Bash, Read, Edit, Write, Glob), reasoning parts, step boundaries, and an interactive tool-approval flow — all via the adapter API
• Plan & task for displaying a structured agent execution plan with live step status via ChatTaskList and ChatTask
• Code Block for displaying code with language label and copy-to-clipboard via ChatCodeBlock
• Confirmation for human-in-the-loop checkpoints before irreversible actions via ChatConfirmation

Theming and customization

• Compact variant for a messenger-style layout with no bubbles, left-aligned messages, and author names as group headers
• Custom theme for changing palette, shape, and typography via ThemeProvider
• Slot overrides for replacing inner subcomponents with custom implementations
• Model selector for adding a model picker to the conversation header via slots.conversationHeaderActions

Recommended progression

1. Start with Basic AI chat to understand the minimal surface.
2. Try Thread-only for a copilot with no conversation sidebar.
3. Move to Multi-conversation to see the two-pane inbox pattern.
4. Explore Custom theme to retheme the component from the ThemeProvider.
5. Finish with Slot overrides when the default structure needs modification.

API

• ChatRoot