Chain of thought primitives for rendering assistant reasoning, step lists, and collapsible disclosure UI in message content.
For examples and usage patterns, see ChainOfThought.
API Reference
Root
The root container for chain of thought components. This component provides a wrapper for chain of thought content, including reasoning and tool-call parts that can be collapsed in an accordion.This primitive renders a <div> element unless asChild is set.
ChainOfThoughtPrimitiveRootPropsasChild: boolean= falseChange the default rendered element for the one passed as a child, merging their props and behavior.
Read the Composition guide for more details.
render?: ReactElementAccordionTrigger
A button component that toggles the collapsed state of the chain of thought accordion. This component automatically handles the toggle functionality, expanding or collapsing the chain of thought parts when clicked.This primitive renders a <button> element unless asChild is set.
ChainOfThoughtPrimitiveAccordionTriggerPropsasChild: boolean= falseChange the default rendered element for the one passed as a child, merging their props and behavior.
Read the Composition guide for more details.
render?: ReactElementParts
Renders the parts within a chain of thought, with support for collapsed/expanded states. When collapsed, no parts are shown. When expanded, all parts are rendered using the provided component configuration through the part scope mechanism.ChainOfThoughtPrimitivePartsPropscomponentsdeprecated?: ChainOfThoughtPartsComponentConfigDeprecated: Use the children render function instead.
Reasoning?: ReasoningMessagePartComponentComponent for rendering reasoning parts
tools?: ChainOfThoughtPartsComponentConfig["tools"]Fallback component for tool-call parts
Fallback?: ToolCallMessagePartComponentLayout?: ComponentType<PropsWithChildren>Layout component to wrap the rendered parts when expanded
children?: (value: { part: PartState }) => ReactNodeRender function called for each part. Receives the part.