ChainOfThought

The steps an AI agent takes — searching, reading, calling tools — each with its status, and optional collapsible detail

Category: display · WCAG 2.2-AA · ai, agent, steps, chain-of-thought, reasoning, progress, tools

States

pending
active
complete
error

Props

Prop	Type	Default	Description
`items`	`ChainOfThoughtItem[]`	—	The steps, in order. Each has `id`, `title`, optional `description`, `status` (`pending \| active \| complete \| error`, plus the `current` / `upcoming` aliases), optional `detail` (collapsible content that turns the title into a toggle) and optional `icon`.
`labels`	`{ pending?: string; active?: string; complete?: string; error?: string }`	—	Overrides for the component’s user-visible strings (i18n) — the status text a screen reader hears after each step title.

Design tokens

--cascivo-color-ai
--cascivo-color-text
--cascivo-color-text-muted
--cascivo-color-border
--cascivo-color-success
--cascivo-color-destructive
--cascivo-focus-ring
--cascivo-duration-loop-slow

When to use

Showing the discrete steps an AI agent is taking or took — searches, file reads, tool calls
Letting a reader expand a step to see what it found, without cluttering the answer

When not to use

A free-form reasoning trace — use Reasoning
A user-facing multi-step form or checkout — use Steps
A dated activity feed — use Timeline
One tool invocation with its input and output — use ToolCall

How to build an accessible ChainOfThought in React →

Examples

Agent steps

<ChainOfThought
  items={[
    { id: 'search', title: 'Searched the docs for "refund policy"', status: 'complete' },
    { id: 'read', title: 'Reading 3 pages', status: 'active' },
    { id: 'answer', title: 'Write the answer', status: 'pending' },
  ]}
/>

With collapsible detail

<ChainOfThought
  items={[
    {
      id: 'search',
      title: 'Searched the web',
      status: 'complete',
      detail: 'cascivo.com/docs · github.com/cascivo/cascivo · npmjs.com/package/@cascivo/react',
    },
    { id: 'fail', title: 'Fetch pricing page', description: 'The page returned 404.', status: 'error' },
  ]}
/>

Related components

Reasoning — Reasoning holds unstructured thinking text; ChainOfThought holds discrete steps
Timeline — Same status vocabulary, for dated events rather than agent steps
ToolCall — A step’s detail can contain the ToolCall for that step
AiStatus — AiStatus announces the overall phase; the chain itself is never a live region

← Back to docs