Reasoning

kai-reasoning

A collapsible thinking block that auto-expands while the model’s thought streams in and collapses when streaming stops — no wiring required.

• Shadow DOM
• 1 event
• Auto-expands while streaming
• Markdown rendering
• Controlled or uncontrolled

Preview

When to use

Place <kai-reasoning> between the assistant message content and any tool calls whenever the model produces a chain-of-thought trace. Set streaming while the thought arrives and clear it when the stream ends — the element handles expand/collapse automatically. Use open for programmatic control, for instance to re-open a block from a parent UI button.

Usage

Set text in JavaScript; toggle streaming to drive the auto-expand/collapse behaviour:

<kai-reasoning id="reason" label="Reasoning"></kai-reasoning>

<script type="module">
  import '@kitn.ai/ui/elements';

  const reason = document.getElementById('reason');
  reason.text = 'First I parse the request, then I plan the steps, then I execute.';

  // Set while thought arrives; clear when stream ends.
  // reason.streaming = true;

  reason.addEventListener('kai-open-change', (e) => {
    console.log('open:', e.detail.open);
  });
</script>

• text — assign it with el.text = '...'.
• streaming — set true while the thought arrives; the block auto-expands. Clear it when done; the block collapses.
• open — leave unset for uncontrolled behaviour; set explicitly when a parent needs to drive the open state.
• label overrides the default trigger text ("Reasoning") — e.g. "Thinking" or "Chain of thought".

Examples

Default

A collapsed block with uncontrolled open state. Click the trigger to expand and collapse.

Code

Streaming

streaming set to true auto-expands the block immediately, as it would while a model generates its chain-of-thought.

Code

Custom Label

Override the trigger label with the label attribute to match your product’s terminology.

Code

Markdown Rendering

With markdown enabled (default), the text renders as styled markdown — headings, bold, code spans, and paragraphs.

Code

Markdown Disabled

markdown="false" renders the text as plain pre-formatted content — useful for raw log output or content with literal backticks.

Code

Props

Property	Type	Default	Notes
text	string	''	The reasoning text to display.
label	string	'Reasoning'	Trigger label.
open	boolean	—	Controlled open state — set as a property (`el.open = true`). Omit for uncontrolled (the trigger toggles it).
streaming	boolean	false	While true, auto-expands (and re-collapses when it flips false).
markdown	boolean	true	Render `text` as markdown.

Events

Event	Detail	Notes
kai-open-change	{ … }	Open state changed (via the trigger or streaming auto-open).

Composed from

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

ReasoningReasoningTriggerReasoningContent

---

Need a hand? Report a bug Ask for help