Chat - Minimal headless shell

Start with the smallest complete chat surface built from headless primitives.

This is the entry-point demo for @mui/x-chat/headless. It shows the smallest surface that still feels like a real chat UI: a root, a pane layout, a conversation list, a thread container, a message log, and a composer.

It is intentionally simple so the structural responsibilities are easy to see before any advanced customization is introduced.

Chat.Root
Chat.Layout
ConversationList.Root
Conversation.Root
MessageList.Root
Composer.Root

Starter thread

Smallest complete shell

MUI Guide

This shell is intentionally small so the primitive boundaries stay obvious.

You

Show me the smallest headless chat surface.

Sent

Why start here

Use this demo to understand:

which primitives are structural containers
which parts are optional enhancements versus baseline building blocks
where core runtime props enter the headless tree

This page should be the canonical answer to, "What is the smallest complete headless chat surface I can compose?"

Real-world use cases

This pattern is a good fit for:

early product prototypes that need a believable chat shell quickly
internal tools where correctness matters more than polished visual design
embedded assistants that need a compact, low-ceremony chat surface
documentation, demos, and sandbox pages that should teach the headless stack clearly

Key primitives

Chat.Root wires the runtime and owns the outer shell.
Chat.Layout splits the surface into conversation and thread panes.
ConversationList.Root renders the selectable list of conversations.
Conversation.Root holds the active conversation surface.
MessageList.Root renders the thread log.
Composer.Root holds the draft surface and submit flow.

Implementation notes

Keep this demo visually simple so the structural roles are obvious.
Use namespaced imports to teach the component family model.
Avoid advanced slot replacement here. The point is to teach the default composition stack first.
Prefer a small but realistic data set so the shell feels genuine without distracting from the primitive boundaries.

What to pay attention to

Chat.Root is where core runtime props enter the headless tree.
Chat.Layout is already enough to produce a recognizable application shell.
Most richer demos keep the same baseline structure and only add behavior or customization on top.

API

ChatRoot