Chat - Slot overrides

Replace individual subcomponents inside ChatBox using the slots prop.

The slots prop lets you swap any internal component in ChatBox with your own implementation. This demo replaces the message bubble with a Paper-based component that uses MUI elevation and border styles.

• slots.messageContent accepting a custom component that wraps the default ChatMessageContent
• The inner bubble slot of ChatMessageContent replaced with a MUI Paper component
• ownerState.role used to differentiate user and assistant bubble styling
• sx on Paper using theme tokens (primary.main, background.paper, divider) for consistent colors

The wrapping pattern

The recommended way to override a slot is to wrap the default component and replace only its inner slots:

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

const CustomMessageContent = React.forwardRef(
  function CustomMessageContent(props, ref) {
    return (
      <ChatMessageContent
        ref={ref}
        {...props}
        slots={{ ...props.slots, bubble: MyBubble }}
      />
    );
  },
);

<ChatBox slots={{ messageContent: CustomMessageContent }} />;

This keeps the default rendering behavior — part iteration, reasoning blocks, source citations, tool invocations — and only changes the visual container.

ownerState

Slot components receive an ownerState prop from the MUI styled system. For message-related slots, ownerState.role is 'user' or 'assistant':

function MyBubble({ ownerState, children, ...props }) {
  const isUser = ownerState?.role === 'user';
  return (
    <div style={{ background: isUser ? 'blue' : 'white' }} {...props}>
      {children}
    </div>
  );
}

Forward ownerState destructuring to avoid passing it to DOM elements that don't support it.

Implementation notes

• Custom slot components must accept a ref if the default component uses one.
• Spread ...props after destructuring ownerState to forward all remaining props correctly.
• Use the slots prop on ChatBox rather than on individual subcomponents when wiring from the top level.

See also

• Customization for the full table of available slot keys and their default components
• Custom theme for rethemeing without replacing components

API

• ChatRoot