Source: https://ai-sdk.dev/elements/components/chain-of-thought

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

Chatbot

Chain of Thought

A collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step progress indicators.

The ChainOfThought component provides a visual representation of an AI's reasoning process, showing step-by-step thinking with support for search results, images, and progress indicators. It helps users understand how AI arrives at conclusions.

Preview

Code

Chain of Thought

Searching for profiles for Hayden Bleasel

www.x.comwww.instagram.comwww.github.com

Found the profile photo for Hayden Bleasel

Hayden Bleasel's profile photo from x.com, showing a Ghibli-style man.

Hayden Bleasel is an Australian product designer, software engineer, and founder. He is currently based in the United States working for Vercel, an American cloud application company.

Searching for recent work...

www.github.comwww.dribbble.com

Installation

---

AI Elements

shadcn CLI

Manual

npx ai-elements@latest add chain-of-thought

Features

---

• Collapsible interface with smooth animations powered by Radix UI
• Step-by-step visualization of AI reasoning process
• Support for different step statuses (complete, active, pending)
• Built-in search results display with badge styling
• Image support with captions for visual content
• Custom icons for different step types
• Context-aware components using React Context API
• Fully typed with TypeScript
• Accessible with keyboard navigation support
• Responsive design that adapts to different screen sizes
• Smooth fade and slide animations for content transitions
• Composable architecture for flexible customization

Props

---

<ChainOfThought />

Prop

Type

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) => void

...props?React.ComponentProps<"div">

<ChainOfThoughtHeader />

Prop

Type

children?React.ReactNode

...props?React.ComponentProps<typeof CollapsibleTrigger>

<ChainOfThoughtStep />

Prop

Type

icon?LucideIcon

label?string

description?string

status?"complete" | "active" | "pending"

...props?React.ComponentProps<"div">

<ChainOfThoughtSearchResults />

Prop

Type

...props?React.ComponentProps<"div">

<ChainOfThoughtSearchResult />

Prop

Type

...props?React.ComponentProps<typeof Badge>

<ChainOfThoughtContent />

Prop

Type

...props?React.ComponentProps<typeof CollapsibleContent>

<ChainOfThoughtImage />

Prop

Type

caption?string

...props?React.ComponentProps<"div">

Workflow

An example of how to use the AI Elements to build a workflow visualization. Checkpoint

A simple component for marking conversation history points and restoring the chat to a previous state.

On this page

Installation Features Props <ChainOfThought /> <ChainOfThoughtHeader /> <ChainOfThoughtStep /> <ChainOfThoughtSearchResults /> <ChainOfThoughtSearchResult /> <ChainOfThoughtContent /> <ChainOfThoughtImage />

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat