Chain Of Thought
A collapsible reasoning timeline for assistant thinking, progress, and agent traces.
Usage
"use client";
import { ChainOfThought } from "@thenamespace/uikit";
export const DemoDefaultExample = () => (Use ChainOfThought to show assistant reasoning, progress, tool discovery, or agent traces without coupling to an AI SDK.
Streaming
"use client";
import { ChainOfThought } from "@thenamespace/uikit";
export const DemoStreamingExample = () => (Set isStreaming to shimmer the trigger while reasoning is still in progress.
Agent Trace
The user wants a simple login page. This is a straightforward UI task - I should create a clean login form. Let me generate some design inspiration first to ensure it looks good, then build the page.
Now let me check the existing UI components available:
Scanning 56 files
I have all the components I need. Let me read the button, input, card, and label components to understand their APIs:
Now I have all the information I need. Let me create a clean, simple login page using the existing design system components:
"use client";
import { useState, type ReactNode } from "react";
import { ChainOfThought } from "@thenamespace/uikit";Complex traces can be composed from multiple collapsible reasoning blocks and nested steps.
Agent Trace Streaming
The user wants a simple login page. This is a straightforward UI task - I should create a clean login form. Let me generate some design inspiration first to ensure it looks good, then build the page.
Now let me check the existing UI components available:
Scanning 56 files
I have all the components I need. Let me read the button, input, card, and label components to understand their APIs:
Now I have all the information I need. Let me create a clean, simple login page using the existing design system components:
"use client";
import { useState, type ReactNode } from "react";
import { ChainOfThought } from "@thenamespace/uikit";Use the same trace structure with isStreaming when the agent is still working.
Anatomy
import { ChainOfThought } from "@thenamespace/uikit";
<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 Namespace UIKit Disclosure props.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Trigger and content |
isStreaming | boolean | false | Applies streaming shimmer styling to the trigger |
defaultExpanded | boolean | - | Open by default for uncontrolled usage |
isExpanded | boolean | - | Controlled expanded state |
ChainOfThought.Trigger
Extends Namespace UIKit 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.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | - | Optional label rendered above the step content |
children | ReactNode | - | Step body content |