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.

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

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

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/chain-of-thought

Props

ChainOfThought

Name	Type	Default
`open`	`boolean`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`
`class`	`string`
`children`	`Snippet`
`...restProps`	`HTMLAttributes<HTMLDivElement>`

ChainOfThoughtHeader

Name	Type	Default
`class`	`string`
`children`	`Snippet`

ChainOfThoughtContent

Name	Type	Default
`class`	`string`
`children`	`Snippet`

ChainOfThoughtStep

Name	Type	Default
`label`	`string`
`icon`	`typeof Icon`
`description`	`string`
`status`	`'complete' \| 'active' \| 'pending'`	`'complete'`
`delay`	`number`
`class`	`string`
`children`	`Snippet`
`...restProps`	`HTMLAttributes<HTMLDivElement>`

ChainOfThoughtImage

Name	Type	Default
`caption`	`string`
`class`	`string`
`children`	`Snippet`
`...restProps`	`HTMLAttributes<HTMLDivElement>`

ChainOfThoughtSearchResults

Name	Type	Default
`class`	`string`
`children`	`Snippet`
`...restProps`	`HTMLAttributes<HTMLDivElement>`

ChainOfThoughtSearchResult

Name	Type	Default
`class`	`string`
`children`	`Snippet`
`...restProps`	`HTMLAttributes<HTMLElement>`