# Chain of Thought

Chain of Thought [#chain-of-thought]

The **ChainOfThought** primitives render a structured step-by-step reasoning timeline (distinct from free-text `Reasoning`): discrete labeled steps with per-step status (complete / active / pending), custom icons, and nested content slots for embedded retrieved sources (`ChainOfThoughtSearchResults`) and images (`ChainOfThoughtImage`). It collapses to a single line on completion. It is presentational — you build the labeled steps and pass them in. A common producer is reasoning-mode generation (`<think>` content parsed from `useGenerateText`'s `text`) plus local RAG retrieval.

Preview [#preview]

```tsx
'use client';

/**
 * @file chain-of-thought-demo.tsx
 * @description Docs preview for `ChainOfThought`. Streams itemized reasoning
 * steps with per-step status and a nested search-result slot, then collapses to
 * a single line on completion.
 */
import * as React from 'react';
import {
  ChainOfThought,
  ChainOfThoughtContent,
  ChainOfThoughtHeader,
  ChainOfThoughtSearchResult,
  ChainOfThoughtSearchResults,
  ChainOfThoughtStep,
} from '@/components/chain-of-thought';

export default function ChainOfThoughtDemo() {
  const [active, setActive] = React.useState(0);
  const done = active >= 3;

  React.useEffect(() => {
    if (done) return;
    const id = window.setTimeout(() => setActive((a) => a + 1), 1200);
    return () => window.clearTimeout(id);
  }, [active, done]);

  const status = (i: number) =>
    i < active ? 'complete' : i === active ? 'active' : 'pending';

  return (
    <div className="w-full max-w-xl">
      <ChainOfThought done={done}>
        <ChainOfThoughtHeader />
        <ChainOfThoughtContent>
          <ChainOfThoughtStep label="Parse the question" status={status(0)} />
          <ChainOfThoughtStep label="Search local documents" status={status(1)}>
            <ChainOfThoughtSearchResults>
              <ChainOfThoughtSearchResult>handbook.pdf</ChainOfThoughtSearchResult>
              <ChainOfThoughtSearchResult>faq.md</ChainOfThoughtSearchResult>
            </ChainOfThoughtSearchResults>
          </ChainOfThoughtStep>
          <ChainOfThoughtStep label="Synthesize the answer" status={status(2)} />
        </ChainOfThoughtContent>
      </ChainOfThought>
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/conversation/chain-of-thought
```

Data source & dependencies [#data-source--dependencies]

**Data source:** renders the labeled steps you pass — works with any backend. Recommended producer: reasoning-mode `<think>` content parsed from `useGenerateText`'s `text` in `@localmode/react`, mapped into steps yourself (on-device, optional).

* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `chain-of-thought.tsx` — `ChainOfThought`, `ChainOfThoughtHeader`, `ChainOfThoughtContent`, `ChainOfThoughtStep`, `ChainOfThoughtSearchResults`, `ChainOfThoughtSearchResult`, `ChainOfThoughtImage`
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**ChainOfThoughtStep**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | **Required.** Step label. |
| `status` | `"complete" \| "active" \| "pending"` | `"complete"` | Per-step status. |
| `icon` | `ReactNode` | — | Optional custom leading icon (overrides the status icon). |

Examples [#examples]

Itemized reasoning with sources [#itemized-reasoning-with-sources]

```tsx
import {
  ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader,
  ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep,
} from '@/components/chain-of-thought';

<ChainOfThought done={!isStreaming}>
  <ChainOfThoughtHeader />
  <ChainOfThoughtContent>
    <ChainOfThoughtStep label="Search local docs" status="complete">
      <ChainOfThoughtSearchResults>
        <ChainOfThoughtSearchResult>handbook.pdf</ChainOfThoughtSearchResult>
      </ChainOfThoughtSearchResults>
    </ChainOfThoughtStep>
    <ChainOfThoughtStep label="Synthesize answer" status="active" />
  </ChainOfThoughtContent>
</ChainOfThought>
```

Customization [#customization]

Pass a custom `icon` per step to override the status glyph. Use `ChainOfThoughtImage` to embed a local image (e.g. a retrieved figure) inside a step. For free-text think tokens, use [Reasoning](/docs/conversation/reasoning) instead.

These primitives are presentational and hook-driven: they render props and emit callbacks, holding only local view state. The orchestration state (e.g. `useGenerateText`) lives in your app. Every surface uses shadcn/ui CSS-variable utilities, so it inherits your theme — restyle the copied file freely.