Chain Of Thought

kai-chain-of-thought

Shows the plan behind an answer, with the detail hidden until the reader asks for it.

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

Preview

When to use

Above or below an assistant message, to show the model’s plan or reasoning trace. It is display: block and sizes to content height, so it needs no fixed height.

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/web-components';
  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

Code

Two-Step Query Trace

Every step has expandable detail, with 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. JS property (array); omit to pass `<kai-step>` light-DOM children instead.
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): a string in `single` mode, a string array in `multiple`. 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