# Chain Of Thought

A connected step list that surfaces an agent's reasoning trace — each step has an always-visible label and optional collapsible detail.

<p class="kai-tag-sub">kai-chain-of-thought</p>

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

## Preview

> **tip:** 
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:

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

<script type="module">

  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.

```html
<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

### Agent Plan

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

### Two-Step Query Trace

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

## Props

## Methods

## Composed from