All components
Browse the components that make up the MUI X Chat UI, grouped by the part of the surface they build.
Start with ChatBox for a complete drop-in surface, or compose ChatConversation, ChatMessageList, and ChatComposer yourself; everything below the compound level is a slot you can replace. New to the package? Read the Overview and Quickstart, then see Structure for slots and composition. All components implement the shared keyboard-navigation and screen-reader model—see Accessibility.
Each card carries a role chip:
- Core — the single top-level entry point (
ChatBox). - Compound — self-sufficient building blocks that render a full region and accept slots.
- Slot — replaceable child parts of a compound component; override via the parent's
slotsprop or compose directly. - State — components that surface runtime state (typing, unread, errors, scroll position).
- Presentational — stateless display pieces you can use anywhere, even outside a Chat surface.
Chat surfaces
The top-level building blocks you assemble a chat from: ChatBox for a batteries-included drop-in, ChatConversation to pair a message list with a composer, ChatConversationList for the inbox sidebar, and ChatConversationHeader for the conversation title bar:
Messages
The message stack from list to group to message, plus the content, meta, and actions slots inside each bubble; reach for a slot when restyling a single part instead of replacing the whole message:
Composer
The prompt form—ChatComposer is the shell, with a toolbar and attachment list you can swap to restyle a single part without rebuilding the form:
States
Transient runtime affordances for when the conversation is loading, someone is typing, or the user has scrolled away from the latest message:
AI and rich content
Presentational renderers for AI output—citations, code blocks, approval prompts, and other building blocks you can drop into custom message content without tying them to the runtime: