Chat - Quickstart

Install the MUI X Chat package and start building your React chat interface.

Installation

Install the package using your preferred package manager:

Peer dependencies

Material UI

The Chat package has a peer dependency on @mui/material. If it is not already in your project, install it now:

React

react and react-dom are also peer dependencies:

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

Rendering a ChatBox

Import ChatBox and wire it to an adapter. The adapter implements sendMessage and returns a streaming response:

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

const adapter = {
  async sendMessage({ message, signal }) {
    const res = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message }),
      signal,
    });
    return res.body; // ReadableStream<ChatMessageChunk>
  },
};

export default function App() {
  return (
    <ChatBox
      adapter={adapter}
      initialConversations={[{ id: 'main', title: 'Assistant' }]}
      initialActiveConversationId="main"
      sx={{ height: 500 }}
    />
  );
}

ChatBox renders a full chat surface — conversation list, thread header, message log, and composer — in a single component. All visual styles are derived from your active Material UI theme.

Only adapter is required — it must implement sendMessage. initialConversations and initialActiveConversationId are optional conveniences that pre-populate the conversation list on first render. Every other prop is optional.

Theme integration

ChatBox reads palette, typography, shape, and spacing from the closest ThemeProvider. No additional configuration is needed.

• User message bubbles use palette.primary.main as the background color
• Assistant bubbles use palette.grey[100] in light mode and palette.grey[800] in dark mode
• typography.body2 governs message text
• shape.borderRadius controls bubble rounding
• palette.divider is used for borders and separators

Wrapping ChatBox in a ThemeProvider with custom values is enough to retheme the entire surface. See Custom theme for a working demo.

TypeScript theme augmentation

To get autocomplete for style overrides in createTheme, import the augmentation side-effect:

import { createTheme } from '@mui/material/styles';
import type {} from '@mui/x-chat/themeAugmentation';

const theme = createTheme({
  components: {
    MuiChatBox: {
      styleOverrides: {
        root: {
          // your overrides
        },
      },
    },
  },
});

Using this documentation

Feature availability

Throughout the documentation, Pro- and Premium-only features are denoted with the and icons, respectively.

All documentation for Community components and features also applies to their Pro and Premium counterparts.

Next steps

• ChatBox — learn about the ChatBox component, its props, and architecture
• Customization — theme overrides, sx, slots, and CSS class names
• Demos — end-to-end patterns
• Slots & Composition — structural composition primitives and slot overrides

API

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

• <ChatBox />