Tools & reasoningThinkingBlock
Thinking Block
Collapsible reasoning trace for models that expose chain-of-thought summaries.
ThinkingBlock ships with a full API table, a copyable example, and accessibility notes.
tsx
Thinking
Checked the request, then drafted a grounded answer.
Installation
Install the package once, then import ThinkingBlock from its direct entry point or from the root.
bash
pnpm add @agent-ui/reacttsx
import { ThinkingBlock } from "@agent-ui/react/thinking-block";Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.
Usage
The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.
tsx
import { ThinkingBlock } from "@agent-ui/react"; <ThinkingBlock>Checked the docs, then drafted an answer...</ThinkingBlock>API reference
Every prop ThinkingBlock accepts, its type, default, and behaviour.
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Reasoning content. |
| open | boolean | — | Native details open state. |
| className | string | — | Merged onto the details element. |
Accessibility
Uses native details/summary keyboard behaviour and an explicit summary label.
Use it with the rest of the library
ThinkingBlock composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.
3 lines · copy-ready