Chat - Composer

Compose and send chat messages with attachments, toolbar actions, and helper text.

The composer is the input region at the bottom of the chat surface. ChatComposer provides Material UI styling—border, padding, and theme tokens are applied automatically.

Import

import {
  ChatComposer,
  ChatComposerLabel,
  ChatComposerTextArea,
  ChatComposerSendButton,
  ChatComposerAttachButton,
  ChatComposerToolbar,
  ChatComposerHelperText,
} from '@mui/x-chat';

Component anatomy

Inside ChatBox, the composer renders the following structure:

ChatComposer                  ← <form> element, border-top divider
  ChatComposerLabel           ← optional <label> for accessibility
  ChatComposerTextArea        ← auto-resizing textarea
  ChatComposerToolbar         ← button row
    ChatComposerAttachButton  ← file attach trigger
    ChatComposerSendButton    ← submit button (disabled when empty with no attachments/streaming)
  ChatComposerHelperText      ← disclaimer or character count

Text area

ChatComposerTextArea is an auto-resizing <textarea> that grows with content. It submits on Enter and inserts a newline on Shift+Enter.

Customizing the placeholder

Customize the placeholder through slotProps:

IME composition

The composer handles IME (Input Method Editor) composition for CJK languages. While the user is composing characters (for example, selecting Kanji), pressing Enter confirms the character selection instead of submitting the message. Submission is blocked until composition ends.

Send button

The send button is automatically disabled when:

• The text area is empty and there are no queued attachments.
• A response is currently streaming.
• The composer is explicitly disabled.

Attach button

The attach button opens the browser file picker. Selected files are queued as draft attachments and previewed in the composer area.

Set features={{ attachments: false }} to hide the attach button:

Helper text

A helper text line appears below the composer. Use it for legal disclaimers, character counts, or contextual hints.

{
  /* Hide the helper text */
}
<ChatBox adapter={adapter} features={{ helperText: false }} />;

Controlling the composer value

Control the composer value externally through ChatProvider, or through the equivalent ChatBox props that forward to it. The demo below mirrors the current composer value above the chat surface:

Accessing composer state with a hook

For deeper control, the useChatComposer() hook provides direct access to the composer state:

import { useChatComposer } from '@mui/x-chat/headless';

function ComposerInfo() {
  const composer = useChatComposer();
  return (
    <div>
      <p>Current value: {composer.value}.</p>
      <p>Attachments: {composer.attachments.length}.</p>
      <p>Submitting: {composer.isSubmitting ? 'Yes' : 'No'}.</p>
      <button onClick={() => composer.clear()}>Clear</button>
    </div>
  );
}

The hook returns:

ChatDraftAttachment

The attachment type used by the composer:

Compact composer variants

The demo below shows five design ideas for the compact composer variant—click into the text area to see the focus state.

Disabling the composer

Pass disabled to prevent all interaction. When disabled, the text area is read-only and the send button is inert. The owner state exposes disabled so custom styles can react to the state.

Localization

The composer uses these locale text keys (customizable via localeText on ChatBox or ChatRoot):

Slots

The following slots are available for customization through ChatBox:

API

• ComposerRoot
• ComposerTextArea
• ComposerSendButton
• ComposerAttachButton
• ComposerToolbar
• ComposerHelperText

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <ChatComposerAttachButton />
• <ChatComposerHelperText />
• <ChatComposerSendButton />
• <ChatComposerTextArea />
• <ChatComposerToolbar />