Chain of Thought

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.

Installation

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

Usage

import {
  ChainOfThought,
  ChainOfThoughtContent,
  ChainOfThoughtHeader,
  ChainOfThoughtImage,
  ChainOfThoughtSearchResult,
  ChainOfThoughtSearchResults,
  ChainOfThoughtStep,
} from '@/components/ai-elements/chain-of-thought';

<ChainOfThought defaultOpen>
  <ChainOfThoughtHeader />
  <ChainOfThoughtContent>
    <ChainOfThoughtStep
      icon={SearchIcon}
      label="Searching for information"
      status="complete"
    >
      <ChainOfThoughtSearchResults>
        <ChainOfThoughtSearchResult>
          Result 1
        </ChainOfThoughtSearchResult>
      </ChainOfThoughtSearchResults>
    </ChainOfThoughtStep>
  </ChainOfThoughtContent>
</ChainOfThought>

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 />`

open?:

boolean

Controlled open state of the collapsible.

defaultOpen?:

boolean

Default open state when uncontrolled. Defaults to false.

onOpenChange?:

(open: boolean) => void

Callback when the open state changes.

[...props]?:

React.ComponentProps<"div">

Any other props are spread to the root div element.

`<ChainOfThoughtHeader />`

children?:

React.ReactNode

Custom header text. Defaults to "Chain of Thought".

[...props]?:

React.ComponentProps<typeof CollapsibleTrigger>

Any other props are spread to the CollapsibleTrigger component.

`<ChainOfThoughtStep />`

icon?:

LucideIcon

Icon to display for the step. Defaults to DotIcon.

label:

string

The main text label for the step.

description?:

string

Optional description text shown below the label.

status?:

"complete" | "active" | "pending"

Visual status of the step. Defaults to "complete".

[...props]?:

React.ComponentProps<"div">

Any other props are spread to the root div element.

`<ChainOfThoughtSearchResults />`

[...props]?:

React.ComponentProps<"div">

Any props are spread to the container div element.

`<ChainOfThoughtSearchResult />`

[...props]?:

React.ComponentProps<typeof Badge>

Any props are spread to the Badge component.

`<ChainOfThoughtContent />`

[...props]?:

React.ComponentProps<typeof CollapsibleContent>

Any props are spread to the CollapsibleContent component.

`<ChainOfThoughtImage />`

caption?:

string

Optional caption text displayed below the image.

[...props]?:

React.ComponentProps<"div">

Any other props are spread to the container div element.