---
title: Chain of Thought
description: A collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step progress indicators.
---

# 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.

<Preview path="chain-of-thought" />

## Installation

<ElementsInstaller path="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 />`

<TypeTable
  type={{
  open: {
    description: "Controlled open state of the collapsible.",
    type: "boolean",
  },
  defaultOpen: {
    description: "Default open state when uncontrolled.",
    type: "boolean",
    default: "false",
  },
  onOpenChange: {
    description: "Callback when the open state changes.",
    type: "(open: boolean) => void",
  },
  "...props": {
    description: "Any other props are spread to the root div element.",
    type: 'React.ComponentProps<"div">',
  },
}}
/>

### `<ChainOfThoughtHeader />`

<TypeTable
  type={{
  children: {
    description: "Custom header text.",
    type: "React.ReactNode",
    default: '"Chain of Thought"',
  },
  "...props": {
    description:
      "Any other props are spread to the CollapsibleTrigger component.",
    type: "React.ComponentProps<typeof CollapsibleTrigger>",
  },
}}
/>

### `<ChainOfThoughtStep />`

<TypeTable
  type={{
  icon: {
    description: "Icon to display for the step.",
    type: "LucideIcon",
    default: "DotIcon",
  },
  label: {
    description: "The main text label for the step.",
    type: "string",
  },
  description: {
    description: "Optional description text shown below the label.",
    type: "string",
  },
  status: {
    description: "Visual status of the step.",
    type: '"complete" | "active" | "pending"',
    default: '"complete"',
  },
  "...props": {
    description: "Any other props are spread to the root div element.",
    type: 'React.ComponentProps<"div">',
  },
}}
/>

### `<ChainOfThoughtSearchResults />`

<TypeTable
  type={{
  "...props": {
    description: "Any props are spread to the container div element.",
    type: 'React.ComponentProps<"div">',
  },
}}
/>

### `<ChainOfThoughtSearchResult />`

<TypeTable
  type={{
  "...props": {
    description: "Any props are spread to the Badge component.",
    type: "React.ComponentProps<typeof Badge>",
  },
}}
/>

### `<ChainOfThoughtContent />`

<TypeTable
  type={{
  "...props": {
    description: "Any props are spread to the CollapsibleContent component.",
    type: "React.ComponentProps<typeof CollapsibleContent>",
  },
}}
/>

### `<ChainOfThoughtImage />`

<TypeTable
  type={{
  caption: {
    description: "Optional caption text displayed below the image.",
    type: "string",
  },
  "...props": {
    description: "Any other props are spread to the container div element.",
    type: 'React.ComponentProps<"div">',
  },
}}
/>