Skip to content

Chain of Thought

The reasoning steps behind one answer, with the sources each step searched. Done, in progress and not started each show an icon and say their status.

Sourcecomponents/chain-of-thought.tsx
Searched for date picker patterns, Done
3 results
base-ui.comw3.orgreact-day-picker.js.org
Read the pack’s Calendar and Popover, Done
Comparing a popover with a full-screen sheet on phones, In progress
Write the answer, Not started

Usage

Chain of Thought usage
import { Search } from "lucide-react";import { ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep } from "@/components/chain-of-thought";
export function ChainOfThoughtUsage() {  return (    <ChainOfThought defaultOpen>      <ChainOfThoughtHeader />      <ChainOfThoughtContent>        <ChainOfThoughtStep icon={Search} label="Searching the docs" status="complete">          <ChainOfThoughtSearchResults>            <ChainOfThoughtSearchResult>react.dev</ChainOfThoughtSearchResult>            <ChainOfThoughtSearchResult>developer.mozilla.org</ChainOfThoughtSearchResult>          </ChainOfThoughtSearchResults>        </ChainOfThoughtStep>        <ChainOfThoughtStep label="Comparing the options" status="active" />        <ChainOfThoughtStep label="Writing the answer" status="pending" />      </ChainOfThoughtContent>    </ChainOfThought>  );}

When to use

Use when

The reasoning steps behind one answer, each with a status and the sources it searched

Don’t use when

A log of actions with durations (use Trace); a single block of thinking text (use Reasoning)