Chain of Thought

A composable component for displaying AI's step-by-step reasoning process. Features collapsible steps with custom icons, content items, and visual connectors to show the thinking flow.

Installation

Copy and paste the following code into your project.

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/p/chain-of-thought.json

Examples

Basic Usage

A simple chain of thought showing the AI's reasoning process for selecting a sorting algorithm. Each step is collapsible and shows the progression of thought.

Advanced with Icons and Code

A more complex example showing database optimization reasoning with custom icons for each step and embedded code blocks. Demonstrates the full power of the component with rich content.

Step 1: Add composite indexes for common query patterns

CREATE INDEX CONCURRENTLY idx_products_search
ON products (category_id, price, rating DESC)
WHERE active = true;

Step 2: Optimize ORM queries with eager loading

// Before: N+1 queries
products.map(p => p.category.name)

// After: Single query with joins
Product.findAll({
  include: [{ model: Category, as: 'category' }]
})

Step 3: Implement query result caching for popular searches

Component API

ChainOfThought

Prop	Type	Default	Description
`children`	`Snippet`	-	The ChainOfThoughtStep components to display
`class`	`string`	-	Additional CSS classes

ChainOfThoughtStep

Prop	Type	Default	Description
`children`	`Snippet`	-	The trigger and content components
`class`	`string`	-	Additional CSS classes
`isLast`	`boolean`	`false`	Whether this is the last step (hides connector line)
`open`	`boolean`	-	Control the open state (makes component controlled)
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`...props`	`CollapsibleRootProps`	-	Additional Collapsible component props from bits-ui

ChainOfThoughtTrigger

Prop	Type	Default	Description
`children`	`Snippet`	-	The trigger text content
`class`	`string`	-	Additional CSS classes
`leftIcon`	`Snippet`	-	Optional icon to display on the left side
`swapIconOnHover`	`boolean`	`true`	Whether to swap the left icon with chevron on hover
`...props`	`CollapsibleTriggerProps`	-	Additional Collapsible trigger props from bits-ui

ChainOfThoughtContent

Prop	Type	Default	Description
`children`	`Snippet`	-	The content items to display
`class`	`string`	-	Additional CSS classes
`...props`	`CollapsibleContentProps`	-	Additional Collapsible content props from bits-ui

ChainOfThoughtItem

Prop	Type	Default	Description
`children`	`Snippet`	-	The item content
`class`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	Additional HTML div props

Usage Notes

Component Structure

The Chain of Thought component follows a composable pattern. Wrap your steps in ChainOfThought, then use ChainOfThoughtStep for each reasoning step. Each step contains a ChainOfThoughtTrigger and ChainOfThoughtContent.

Custom Icons

Use the leftIcon snippet prop on the trigger to add custom icons from @lucide/svelte. By default, the icon swaps with a chevron on hover, but you can disable this with swapIconOnHover={false}.

Visual Connectors

The component automatically adds visual connector lines between steps. Set isLast={true} on the final step to hide the connector line after it.

Rich Content

You can embed any content inside ChainOfThoughtItem, including code blocks, images, or other components. This makes it perfect for showing complex reasoning with examples.