ChainOfThought
ProA compact, inspectable record of reasoning and agent work behind a response.
Installation
Add this component with the NateUI CLI.
Examples
Thinking and groups
Search
Execute
Read and edit
Custom renderer
Streaming
Controlled disclosure
API
ChainOfThought
| Prop | Description | Type | Default |
|---|---|---|---|
status | Lifecycle state for the complete trace; the running summary uses Shimmer. | 'pending' | 'running' | 'complete' | 'error' | 'complete' |
summary | Caller-owned trigger summary. | ReactNode | status-based summary |
toolCount | Explicit tool count shown beside the summary. | number | — |
icon | Root identity icon. | ReactNode | Lightbulb icon |
open | Controlled disclosure state. | boolean | — |
defaultOpen | Initial uncontrolled disclosure state. | boolean | false |
onOpenChange | Called when the root disclosure changes. | (open: boolean) => void | — |
collapseDelay | Settled auto-collapse delay in milliseconds. false disables it. | number | false | 1000 |
maxHeight | Opt-in maximum height for the whole trace; without it, all rows remain visible. | number | string | — |
children | Compound activity rows. | ReactNode | — |
ChainOfThought.Thinking
Thinking can also render by itself; the root is only needed when several activities share one trace lifecycle and summary.
| Prop | Description | Type | Default |
|---|---|---|---|
title | Thinking row title. | ReactNode | — |
status | Lifecycle state for the row; a running title uses Shimmer and a body-bearing row opens on entry. | ChainOfThoughtStatus | 'complete' |
icon | Optional identity icon; it remains visible while the row is running. | ReactNode | Lightbulb icon |
open | Controlled disclosure state; applies when body content is present. | boolean | — |
defaultOpen | Initial uncontrolled disclosure state; applies when body content is present. | boolean | false |
onOpenChange | Called when the body disclosure changes. | (open: boolean) => void | — |
autoOpen | Opens the body when the row enters running; set false to keep it folded until the user opens it. | boolean | true |
maxHeight | Maximum height for the Thinking body. false shows all content without internal scrolling. | number | string | false | 180 |
children | Supporting reasoning content. Present content creates an independent disclosure; without it, Thinking stays a plain row. | ReactNode | — |
ChainOfThought.Group
| Prop | Description | Type | Default |
|---|---|---|---|
label | Phase or step label. | ReactNode | — |
toolCount | Explicit number of tools in the group. | number | — |
open / defaultOpen | Group disclosure state. | boolean | false |
children | Nested thinking and tool rows. | ReactNode | — |
ChainOfThought.Tool
Tool is a discriminated union. The type value is explicit and selects one visual contract: search, execute, read, edit, or custom.
| Type | Required surface |
|---|---|
search | Query, structured results with a 180px default internal viewport, optional result count, domain, favicon, links, and error text. |
execute | Input code, optional language, output, and error text. |
read | File link or action sibling; read rows do not create a false disclosure. |
edit | File link or action sibling, bounded unified diff, language metadata, and addition/deletion counts. |
custom | Caller-owned icon, title, and optional rich children. |
All tool variants accept status, title, open, defaultOpen, onOpenChange, errorText, and className where a disclosure body exists. Running titles use Shimmer while the tool's type icon remains visible.
| Prop | Description | Type | Default |
|---|---|---|---|
autoOpen | Opens the body when the tool enters running; set false to keep it folded until the user opens it. | boolean | true |
Search tools also accept maxHeight (number | string | false) for the results list. false shows all results without internal scrolling.