MUI X
MUI X Chat
Build chat experiences for AI assistants, customer support, and messaging apps with a single drop-in React component that connects to any backend.
Bring your own backend through a small adapter interface — see Backend connection — or start with a built-in adapter like the AI SDK adapter.
Drop-in ChatBox
import { ChatBox } from '@mui/x-chat';
const adapter = {
async sendMessage() {
return new ReadableStream();
},
};
export default function App() {
return <ChatBox adapter={adapter} sx={{ height: 500 }} />;
}Using MUI X Chat
Build powerful chat experiences
A fully styled, theme-aware chat interface with best-in-class developer experience.
Real-time streaming
Display assistant responses token-by-token as they are generated, for a smooth and interactive experience.
Multi-conversation
Manage multiple conversations with a sidebar, thread switching, and per-conversation message state.
Flexible and customizable
Connect to any backend, override slots, and apply theme overrides for full control of your chat UI.
Accessible by default
Roving focus keeps the message list a single Tab stop, with arrow keys, Enter drill-in, and Escape built in. Labeled landmarks and polite live regions announce streaming responses exactly once.
Accessible by default
Keyboard navigation, labeled landmarks, and screen reader announcements work out of the box: the message list is a single Tab stop with roving focus, and streaming responses are announced once at start and completion—never per token. Read the full model on the Accessibility page.
Community
Free and open source
Every MUI X Chat feature ships in the Community plan — there is no Pro or Premium tier, so you get the complete chat toolkit with no licensing costs.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.