Chat - Basic AI chat

The smallest working ChatBox setup: an adapter, a conversation, and an initial message.

This demo shows the minimum required props to render a styled, interactive chat surface using @mui/x-chat.

• ChatBox rendering a single conversation without a conversation list
• initialConversations and initialMessages for initial state
• initialActiveConversationId to open the conversation immediately
• sx for sizing the container

Why start here

This demo answers: "What is the smallest working @mui/x-chat surface?"

The answer is three things:

1. An adapter that implements sendMessage
2. A initialConversations array with at least one conversation
3. A initialActiveConversationId that matches one of those conversations

Every other prop is optional.

The adapter

The demo uses a local echo adapter that echoes the user message back as a streaming response. In a real application, replace it with an adapter that calls your backend:

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

Implementation notes

• Keep the container height explicit so the message list and composer render correctly.
• Omitting initialConversations renders an empty surface without a thread.
• Omitting initialActiveConversationId shows the conversation list pane without an active thread.

See also

• Multi-conversation to add a conversation sidebar
• Customization for theme overrides, slots, and slotProps

API

• ChatRoot