Chain Of Thought

Usage

Use ChainOfThought to show assistant reasoning, progress, tool discovery, or agent traces without coupling to an AI SDK.

Streaming

Set isStreaming to shimmer the trigger while reasoning is still in progress.

Agent Trace

Complex traces can be composed from multiple collapsible reasoning blocks and nested steps.

Agent Trace Streaming

Use the same trace structure with isStreaming when the agent is still working.

Anatomy

import {ChainOfThought} from "@heroui-pro/react";

<ChainOfThought defaultExpanded>
  <ChainOfThought.Trigger>Thought for 2s</ChainOfThought.Trigger>
  <ChainOfThought.Content>
    <ChainOfThought.Steps>
      <ChainOfThought.Step label="Explore">Read layout and globals.</ChainOfThought.Step>
    </ChainOfThought.Steps>
  </ChainOfThought.Content>
</ChainOfThought>

CSS Classes

• .chain-of-thought - Root disclosure wrapper
• .chain-of-thought__trigger - Collapsible trigger
• .chain-of-thought__content - Disclosure content panel
• .chain-of-thought__steps - Vertical step timeline
• .chain-of-thought__step - One step in the timeline
• .chain-of-thought__step-label - Optional step label
• .chain-of-thought__step-content - Step body content

API Reference

ChainOfThought

Extends HeroUI Disclosure props.

ChainOfThought.Trigger

Extends HeroUI Button props. Renders the disclosure trigger.

ChainOfThought.Content

Extends Disclosure.Content props. Wraps the expanded content body.

ChainOfThought.Steps

Renders the vertical timeline container. Also supports native div props.

ChainOfThought.Step

Renders one timeline step. Also supports native div props.