Chat — Material UI examples

Build chat interfaces with @mui/x-chat using ready-made ChatBox demos.

Each demo shows a common product pattern with ChatBox and focuses on one aspect of the @mui/x-chat API.

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

Where to start

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

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

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 — display a structured agent execution plan with live step status via ChatTaskList and ChatTask.
Code block — display code with a language label and copy-to-clipboard via ChatCodeBlock.
Confirmation — human-in-the-loop checkpoints before irreversible actions via ChatConfirmation.

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