LLM Kit Chain of Thought
When an agent takes multiple steps to answer a question—searching the web, analyzing documents, or querying a database—a single reasoning block cannot show how the work is structured in detail. Use the ChainOfThought component to make each operation visible in sequence.
The ChainOfThought component renders each operation as a named row under one collapsible header. This format helps users follow the sequence of the agent's work and gives you control over how each step appears.
The following example demonstrates the ChainOfThought component displaying a step-by-step sequence of operations.
Rendering Thought Rows
The thoughts prop accepts an ordered array of Thought objects. Add a new thought when its operation starts, then update its label and completed values as the operation progresses.
Each thought can include supporting context through secondaryLabel, detailed output through content, and an operation icon through svgIcon.
<ChainOfThought
svgIcon={brainIcon}
label="Thought"
secondaryLabel="for 6.0s"
thoughts={thoughts}
expandable
/>The component-level label and secondaryLabel props describe the chain as a whole. Use them for a concise summary that remains visible when the thought rows are collapsed.
Showing Chain Progress
After the final operation completes, set completed to true. The header then replaces its in-progress shimmering effect with the completed presentation.
For coding workflows, linesAdded and linesRemoved expose diff counters directly in the header so reviewers can see the scope of a change at a glance. Leave these props unset for workflows that do not report line changes.
Use expanded with onExpandedChange when application state needs to control the disclosure of the chain.
<ChainOfThought
thoughts={thoughts}
completed={isComplete}
linesAdded={12}
linesRemoved={3}
expanded={isExpanded}
onExpandedChange={(event) => setIsExpanded(event.expanded)}
/>Customizing the Thoughts
If the default row layout does not suit your needs, you can provide a custom template for each Thought item. The thoughtTemplate prop accepts a React component that receives each thought's data via ThoughtTemplateProps, giving you full control over the presentation of the reasoning process.
The following example demonstrates a custom template that includes a color-coded kind pill, the tool name, and the execution duration for each step in the chain of thought.