Chain of Thought

Step-by-step reasoning visualizer with status icons, nested search results and inline image evidence.

Overview

Chain of Thought is the structured cousin of Reasoning. Use it when you can break the model's work into discrete steps (pending, active, complete) and want each step to carry its own label, description and nested evidence (badges of search hits, screenshots, intermediate outputs).

It is collapsible by default so the answer stays the focus, but expanding reveals the trail.

Preview

Default

Searching docs

Reading 3 registry entries

Drafting response

With search context

Querying for 'rx-tool'

Found 4 candidate entries

Installation

bash npx gremorie@latest add rx-chain-of-thought

bash pnpm dlx gremorie@latest add rx-chain-of-thought

bash yarn dlx gremorie@latest add rx-chain-of-thought

bash bunx --bun gremorie@latest add rx-chain-of-thought

Usage

import {
  ChainOfThought,
  ChainOfThoughtHeader,
  ChainOfThoughtContent,
  ChainOfThoughtStep,
} from "@gremorie/rx-ai";

export function Example() {
  return (
    <ChainOfThought>
      <ChainOfThoughtHeader />
      <ChainOfThoughtContent>
        <ChainOfThoughtStep status="complete" label="Inspected files" />
        <ChainOfThoughtStep status="active" label="Running tests" />
      </ChainOfThoughtContent>
    </ChainOfThought>
  );
}

import { Component } from "@angular/core";
import {
  ChainOfThought,
  ChainOfThoughtHeader,
  ChainOfThoughtContent,
  ChainOfThoughtStep,
} from "@gremorie/ng-ai";

@Component({
selector: "app-example",
standalone: true,
imports: [
ChainOfThought,
ChainOfThoughtHeader,
ChainOfThoughtContent,
ChainOfThoughtStep,
],
template: `     <chain-of-thought [open]="true">
      <chain-of-thought-header>Searching the docs</chain-of-thought-header>
      <chain-of-thought-content>
        <chain-of-thought-step status="complete" label="Inspected files" />
        <chain-of-thought-step status="active" label="Running tests" />
      </chain-of-thought-content>
    </chain-of-thought>
  `,
})
export class ExampleComponent {}

API

`<ChainOfThought>`

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	-	Notification when the user expands or collapses.

Extends ComponentProps<"div">.

`<ChainOfThoughtHeader>`

Renders the brain icon + label + chevron and toggles the panel. Children (string or node) replace the default "Chain of Thought" label.

`<ChainOfThoughtContent>`

The collapsible body. Children render only when expanded (no animation when closed).

`<ChainOfThoughtStep>`

Prop	Type	Default	Description
`icon`	`LucideIcon`	`DotIcon`	Leading icon for the step.
`label`	`ReactNode`	-	Required step title.
`description`	`ReactNode`	-	Optional sub-line in muted text.
`status`	`"complete" \| "active" \| "pending"`	`"complete"`	Drives text color (muted, foreground, muted/50).
`children`	`ReactNode`	-	Nested evidence (search results, image, code block).

`<ChainOfThoughtSearchResults>` / `<ChainOfThoughtSearchResult>`

Wrap a row of Badge-styled hit chips. ChainOfThoughtSearchResult extends Badge props.

`<ChainOfThoughtImage>`

Prop	Type	Default	Description
`caption`	`string`	-	Caption rendered below the image.
`children`	`ReactNode`	-	The image element (or any visual).

Composition

<ChainOfThought> owns open state and the outer space.
<ChainOfThoughtHeader> is the toggle handle at the top.
<ChainOfThoughtContent> is the expandable body containing steps.
<ChainOfThoughtStep> is one bullet with an icon + label + optional description and children for evidence.
<ChainOfThoughtSearchResults> + <ChainOfThoughtSearchResult> group related hits inside a step.
<ChainOfThoughtImage> embeds a screenshot or chart inside a step.

Variations

Discrete progress

Each step represents an action the agent took. The "active" step lights up in foreground color while the others sit in muted.

<ChainOfThought defaultOpen>
  <ChainOfThoughtHeader />
  <ChainOfThoughtContent>
    <ChainOfThoughtStep
      status="complete"
      icon={CheckIcon}
      label="Inspected files"
      description="Read 12 TypeScript modules"
    />
    <ChainOfThoughtStep
      status="active"
      icon={SearchIcon}
      label="Running tests"
      description="vitest --run"
    />
    <ChainOfThoughtStep status="pending" label="Summarising findings" />
  </ChainOfThoughtContent>
</ChainOfThought>

Step with search hits

When a step represents a search, nest the citations as SearchResult chips.

<ChainOfThoughtStep
  status="complete"
  label="Searched the web for 'shadcn registry'"
>
  <ChainOfThoughtSearchResults>
    <ChainOfThoughtSearchResult>ui.shadcn.com</ChainOfThoughtSearchResult>
    <ChainOfThoughtSearchResult>vercel.com</ChainOfThoughtSearchResult>
    <ChainOfThoughtSearchResult>github.com</ChainOfThoughtSearchResult>
  </ChainOfThoughtSearchResults>
</ChainOfThoughtStep>

Step with image evidence

Useful for vision agents reporting back what they saw.

<ChainOfThoughtStep status="complete" label="Took screenshot">
  <ChainOfThoughtImage caption="Landing page above the fold">
    <img src="/screenshots/landing.png" alt="" />
  </ChainOfThoughtImage>
</ChainOfThoughtStep>

Accessibility

Keyboard: the header is a CollapsibleTrigger and toggles on Enter / Space.
ARIA: Radix Collapsible wires aria-expanded and aria-controls on the header and data-state on the content. Status differences on steps are conveyed by text color plus the icon shape, never by color alone.
Screen readers: step labels and descriptions live in plain text so they read in order; nested search results announce as text content, not as decorative chips.
Reduced motion: open / close animations are data-state driven and respect prefers-reduced-motion.

Reasoning - free-form chain-of-thought when you have no discrete steps
Task - explicit task list with nested files / actions
Plan - higher-level execution plan with phases
Sources - render the citations referenced inside the steps

Chain of Thought

On this page