Skip to content

🚀 Influence MUI's 2026 roadmap! Take our latest Developer Survey

Chat - Split layout

Place ChatMessageList and ChatComposer in separate DOM zones. Only ChatRoot is needed to connect them.

MUI Assistant

The message list (left) and the composer (right) are siblings in the DOM — neither is nested inside the other.

You

What connects them?

MUI Assistant

Only ChatRoot. Both components read from the same ChatProvider context, so they stay in sync regardless of where they live in the layout.

ComposerSeparate DOM zone — connected only via ChatRoot

How it works

ChatRoot sets up a ChatProvider context. Any descendant can read from that context via hooks — regardless of where it sits in the DOM tree.

This means ChatMessageList and ChatComposer don't need to be siblings or share a parent component. Place them wherever your layout requires:

<ChatRoot adapter={adapter}>
  {/* Could be in main content, a drawer, or a modal */}
  <MessagePane /> {/* calls useMessageIds() */}
  {/* Could be in a toolbar, sidebar, or page footer */}
  <InputPane /> {/* ChatComposer uses useChatComposer() */}
</ChatRoot>

Both components stay in sync automatically because they share the same store.

When to use this pattern

Use split layout when ChatBox's default two-pane structure doesn't fit your product:

Chat input lives in the app toolbar or page footer
Message history is displayed in one panel while the send area is in another
You are embedding chat into an existing layout that already manages its own structure

See also

API

ChatRoot