Thought Chain

AI chats 88

About

An animated step-by-step reasoning display for AI agents, with collapsible steps and done/active/pending status indicators.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Thought Chain to your project and fits it to your theme.

Code

How Thought Chain is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  ThoughtChain,
  ThoughtChainStep,
  ThoughtChainTrigger,
  ThoughtChainContent,
  ThoughtChainItem,
} from "@/components/ui/components-ai-thought-chain";

export default function ThoughtChainDemo() {
  return (
    <ThoughtChain>
      <ThoughtChainStep status="done">
        <ThoughtChainTrigger>Understanding the codebase</ThoughtChainTrigger>

        <ThoughtChainContent>
          <ThoughtChainItem>
            Scanned 47 files across src/ and packages/
          </ThoughtChainItem>

          <ThoughtChainItem>
            Identified React 18 with TypeScript and Tailwind CSS
          </ThoughtChainItem>

          <ThoughtChainItem>No existing auth layer detected</ThoughtChainItem>
        </ThoughtChainContent>
      </ThoughtChainStep>

      <ThoughtChainStep status="active">
        <ThoughtChainTrigger>Planning the implementation</ThoughtChainTrigger>

        <ThoughtChainContent>
          <ThoughtChainItem>
            Choosing NextAuth.js for session management
          </ThoughtChainItem>

          <ThoughtChainItem>
            Designing protected route middleware
          </ThoughtChainItem>
        </ThoughtChainContent>
      </ThoughtChainStep>

      <ThoughtChainStep status="pending">
        <ThoughtChainTrigger>Writing the code</ThoughtChainTrigger>

        <ThoughtChainContent>
          <ThoughtChainItem>auth.ts — provider config</ThoughtChainItem>

          <ThoughtChainItem>middleware.ts — route protection</ThoughtChainItem>

          <ThoughtChainItem>SessionProvider wrapper</ThoughtChainItem>
        </ThoughtChainContent>
      </ThoughtChainStep>
    </ThoughtChain>
  );
}