MUI X
ChatDrive the public chat models from React state while the runtime keeps normalized internals.
This demo demonstrates the controlled state model — the major public design choice of the core package. All four public state models are owned by the parent component while the runtime still streams, normalizes, and derives selectors internally.
Key conceptsThe four controlled modelsEach model has a controlled prop, a change callback, and an uncontrolled default:
Model Controlled prop Change callback Messages messages onMessagesChange Conversations conversations onConversationsChange Active conversation activeConversationId onActiveConversationChange Composer value composerValue onComposerValueChange Wiring controlled statePass your React state directly to ChatProvider:
ChatProvider
adapter={adapter}
conversations={conversations}
onConversationsChange={setConversations}
activeConversationId={activeConversationId}
onActiveConversationChange={setActiveConversationId}
messages={messages}
onMessagesChange={setMessages}
composerValue={composerValue}
onComposerValueChange={setComposerValue}
>
ControlledStateChat />
ChatProvider>
CopyCopied(or $keyC)
When to use controlled stateUse controlled state when you need to:
sync chat state with a global store (Redux, Zustand, etc.) persist messages across navigation or page reloads drive the conversation list from an external data source coordinate the composer value with external UI (for example, slash commands)Start with default* props for prototyping and switch to controlled when the need arises — no other changes are required.
Controlled headless stateproductSupportProductMessages2
Conversations2
Activeproduct
ComposerDocument the controlled models.
MUI AgentThe controlled API keeps public state array-first.
SamThat is the behavior we want to document.
Was this page helpful?
•
Blog•
StoreContents
Key conceptsThe four controlled modelsWiring controlled stateWhen to use controlled stateKey takeawaysSee alsoAPIBecome a Diamond sponsorMUI stands in solidarity with Ukraine.Chat - Controlled state - MUI X,AI智能索引,全网链接索引,智能导航,网页索引
- Drive the public chat models from React state while the runtime keeps normalized internals.