Reasoning

kai-reasoning

Opens while the model is thinking and closes when it finishes, on its own.

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

Preview

When to use

Between the assistant message content and any tool calls, wherever the model produces a chain-of-thought trace. Expand and collapse are automatic.

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

  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, and the block auto-expands; clear it and the block collapses.
• open: leave unset for uncontrolled behaviour; set it explicitly when a parent drives the open state.
• label overrides the default trigger text ("Reasoning"), e.g. "Thinking".

Examples

Default

Click the trigger to expand and collapse.

Code

Streaming

Auto-expands, as it would while a model generates its chain-of-thought.

Code

Custom Label

Code

Markdown Rendering

The text renders as styled markdown by default: headings, bold, code spans, paragraphs.

Code

Markdown Disabled

markdown="false" renders plain pre-formatted content, for raw log output or 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 the open state: `el.open = true` or the bare `open` attribute. 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