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>

Child element	Attributes	Text content	Notes
<kai-step>	labelstep-id	Yes	Parse a single light-DOM `<kai-step>` element into a `Step` descriptor. Attribute mapping: - `label` → Step.label (the always-visible heading) - `step-id` → Step.id (optional stable open-set key) - textContent → Step.content (optional expandable detail)

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
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
steps	ChainOfThoughtStepData[]	[]	The reasoning steps. Set as a JS property. Compound sub-parts collapse to this one data model (Route 1). Each `{ label, content?, id? }`. Omit to supply the steps as `<kai-step>` light-DOM children instead; when both are present the property's steps come first.
type	"single" | "multiple"	—	Open mode: `'multiple'` (default, any number of steps open at once) or `'single'` (at most one open; opening a step closes the others).
value	string | string[]	—	Controlled open step key(s). When set, it WINS over user interaction (the consumer owns the open set). String in `single` mode, string[] in `multiple` mode. Set as a JS property.
defaultValue	string | string[]	—	Uncontrolled INITIAL open step key(s), seeding which steps render expanded. Ignored once `value` is provided. Set as a JS property.

Methods

Method	Signature	Notes
expand	(index?: number): void	Open one step's detail by index, or ALL steps when called with no arg. In `single` mode opening one step closes the others (expand-all keeps the last).
collapse	(index?: number): void	Close one step's detail by index, or ALL steps when called with no arg.
toggle	(index?: number): void	Flip one step's open state by index.

Composed from

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

ChainOfThoughtAccordion

---

Need a hand? Report a bug Ask for help