React AI Chain Of Thought

Ever noticed how some AI apps show you the thinking process—like "searching the web", "analyzing results", "forming response"? That's what this component does. It's a collapsible panel that breaks down the AI's reasoning into visible steps, so users aren't just staring at a spinner wondering what's happening. Each step can have its own status (complete, active, pending), custom icons, and even nested content like search results or images. Super useful for research assistants, agents that browse the web, or anywhere you want to build trust by showing your work. The whole thing collapses down to a single line when users don't care about the details. Built on Radix primitives so the animations and accessibility are solid out of the box.

Chain Of Thought preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/chain-of-thought.json

npx shadcn@latest add https://www.shadcn.io/registry/chain-of-thought.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/chain-of-thought.json

bunx shadcn@latest add https://www.shadcn.io/registry/chain-of-thought.json

Related Components

FAQ