Studio
2

Reasoning

Installation

pnpm dlx @mielui/svelte add reasoning

Usage

Reasoning starts expanded. Set open to false for an initially collapsed summary. Bind open to control expansion from the parent.

Use streaming while the model is thinking; use duration when it completes.

import * as Reasoning from '@mielui/svelte/components/reasoning';

<Reasoning.Root>
  <Reasoning.Trigger title="Searched the release history" duration="2.4s" />
  <Reasoning.Content>
    <p>Compared the incident timestamp with the last five deployments.</p>
  </Reasoning.Content>
</Reasoning.Root>

End a live trace

Set streaming only while content is arriving, then clear it when delivery finishes. The live example uses ResponseStream completion to update the trigger. Use a short, user-facing account of the work performed rather than exposing private model reasoning.

Examples

Live reasoning

API reference

Reasoning.Root

Controls reasoning visibility.

Prop Type Default
streaming boolean | undefined false
open Bindable boolean | undefined

Whether the reasoning content is visible.

 true
onOpenChange ((open: boolean) => void) | undefined —
onOpenChangeComplete ((open: boolean) => void) | undefined —
children Snippet<[]> | undefined —
class (string & (ClassValue | null)) | undefined —

Reasoning.Content

Contains reasoning content.

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Reasoning.Trigger

Toggles reasoning content.

Prop Type Default
title string | undefined 'Draft'
duration string | undefined

A compact summary of the completed reasoning time, such as 2.4s.

 —
children Snippet<[Readonly<{ open: boolean; streaming: boolean; }>]> | undefined —
class (string & (ClassValue | null)) | undefined —