gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements/docs/components/chain-of-thought.md

Chain of Thought

URL: /components/chain-of-thought

---

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. path: elements/components/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

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

<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', }, }} />

<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', }, }} />

<ChainOfThoughtContent />

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

<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">', }, }} />