ChainOfThought

pro

A compact, inspectable record of reasoning and agent work behind a response.

Compare the official guide with practical examples, then verify the component checks.

Installation

Add this component with the NateUI CLI.

npx nateui@latest add ChainOfThought

pnpm dlx nateui@latest add ChainOfThought

yarn dlx nateui@latest add ChainOfThought

Examples

Thinking and groups

Get the code

Tool activity belongs inside the same chronological trace.

Read README.md

Input:

pnpm test chain-of-thought

Output:

18 tests passed

Search

Get the code

extended thinking tool use

Waiting for results…

Extended thinking - Claude Platform Docsplatform.claude.com Claude on Xx.com

The search provider did not respond.

Execute

Get the code

Input:

pnpm test chain-of-thought

Output:

18 tests passed

Input:

pnpm coverage

Output:

Statements: 96%
Branches: 91%

Input:

pnpm test integration

The fixture service is unavailable.

Read and edit

Get the code

Read README.md

README.md

+1·−1

README.md · markdown

+1−1

--- a/README.md
+++ b/README.md
@@ -1 +1 @@
1		Removed	Extended thinking examples
	1	Added	Extended thinking examples and implementation notes

Custom renderer

Get the code

Period	Conversion
Current	6.4%
Previous	5.9%

Streaming

Get the code

Controlled disclosure

Get the code

Parent state controls this 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.

Types

type ChainOfThoughtStatus = 'pending' | 'running' | 'complete' | 'error'