Chain Of Thought

kai-chain-of-thought

A vertically connected list of reasoning steps — each step shows its label at all times and reveals optional detail on expand.

• Shadow DOM
• Property-driven API
• Declarative kai-step children
• Expandable detail per step
• Prop + child steps merge

Preview

When to use

Place <kai-chain-of-thought> above or below an assistant message to show the model’s step-by-step plan or reasoning trace. It is display: block and sizes to content height — no fixed height needed. In SolidJS, compose ChainOfThought, ChainOfThoughtStep, ChainOfThoughtTrigger, and ChainOfThoughtContent directly for finer animation control.

Usage

Set steps in JavaScript — it’s an array, so it can’t be an HTML attribute:

<kai-chain-of-thought id="cot"></kai-chain-of-thought>

<script type="module">
  import '@kitn.ai/ui/elements';
  document.getElementById('cot').steps = [
    { label: 'Understand the request', content: 'The user wants composable web components.' },
    { label: 'Design the API', content: 'Route 1: variant + flags; rich data via properties.' },
    { label: 'Build & verify' },
  ];
</script>

• Each item needs a label string; add content to make the step expandable.
• Declarative alternative — author steps as <kai-step> children; label becomes the heading, textContent becomes the collapsible detail. Mix both: property items render first, then <kai-step> children append after.

<kai-chain-of-thought>
  <kai-step label="Understand the request">The user wants composable web components.</kai-step>
  <kai-step label="Design the API">Route 1: variant + flags; rich data via properties.</kai-step>
  <kai-step label="Build &amp; verify"></kai-step>
</kai-chain-of-thought>

Examples

Default

Code

Agent Plan

A five-step trace covering a realistic code-review workflow.

Code

Two-Step Query Trace

Every step has expandable detail — no label-only summary.

Code

Props

Property	Type	Default	Notes
steps	Step[]	[]	The reasoning steps. Set as a JS property. Compound sub-parts collapse to this one data model (Route 1).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ChainOfThoughtChainOfThoughtStepChainOfThoughtTriggerChainOfThoughtContentChainOfThoughtItem

---

Need a hand? Report a bug Ask for help