Chat - Thread-only
Embed a focused single-thread chat surface without a conversation sidebar.
ChatBox renders a thread-only surface by default.
The built-in conversation list appears only when you opt in with features={{ conversationList: true }}.
- Thread-only layout—no conversation list pane
- Minimal props: an
adapterand a container size - No extra feature flags needed for a focused single-thread surface
'use client';
import * as React from 'react';
import { ChatBox } from '@mui/x-chat';
import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils';
import { demoUsers } from 'docs/data/chat/core/examples/shared/demoData';
const demoMembers = [demoUsers.you, demoUsers.agent];
const adapter = createEchoAdapter({
respond: (text) =>
`Got your message: "${text}". No conversation list is needed for a single-thread copilot.`,
});
export default function ThreadOnly() {
return (
<ChatBox
adapter={adapter}
members={demoMembers}
sx={{
height: 460,
border: '1px solid',
borderColor: 'divider',
borderRadius: 1,
}}
/>
);
}
When to use this layout
Use the thread-only mode when:
- Building an embedded copilot or AI assistant inside a dashboard or panel
- The product has a single chat thread per user (no inbox)
- You want a compact, focused chat surface without a sidebar
Use the two-pane layout (Multi-conversation) when users need to switch between multiple conversations.
How it works
ChatBox leaves the built-in conversation list off unless features.conversationList is true.
The thread fills the available width whether or not conversation data exists in state.
To restore the sidebar at any time, opt into the feature and provide conversation data:
<ChatBox
adapter={adapter}
features={{ conversationList: true }}
initialConversations={[{ id: 'main', title: 'Support' }]}
initialActiveConversationId="main"
/>
See also
- See Basic AI chat for details on the smallest working setup with a single conversation.
- See Multi-conversation for details on the full two-pane inbox layout.