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';

  await customElements.whenDefined('kai-reasoning');

  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
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
text	string	''	The reasoning text to display.
label	string	'Reasoning'	Trigger label.
open	boolean	—	Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute; the element still self-manages on trigger click + while streaming). Set `el.open = true`; listen for `kai-open-change`.
defaultOpen	boolean	—	Initial open state on mount (uncontrolled seed).
streaming	boolean	false	While true, auto-expands (and re-collapses when it flips false).
markdown	boolean	true	Render `text` as markdown.
disabled	boolean	—	Gate the disclosure trigger: programmatic `show()/hide()/toggle()` still work, but the trigger click no longer toggles.

Events

Event	Detail	Notes
kai-open-change	{ … }	The reasoning block expanded or collapsed (via the trigger, streaming auto-open, or a method).

Methods

Method	Signature	Notes
show	(): void	Open it programmatically (no-op while disabled).
hide	(): void	Close it programmatically.
toggle	(): void	Flip the open state (closes while disabled).

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