Reasoning

Give users useful visibility into an assistant’s work without placing its trace ahead of the answer. Reasoning stays compact until someone chooses to inspect it.

Compared the incident timeline with the last five production deployments.

Filtered payment errors by issuer country and found the regression only affects non-US cards.

Matched the first failing request to the new address-verification rule shipped by the provider.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add reasoning

Usage

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

import * as Reasoning from '@sivir-ui/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>

Examples

Incident investigation

Compared the incident timeline with the last five production deployments.

Filtered payment errors by issuer country and found the regression only affects non-US cards.

Matched the first failing request to the new address-verification rule shipped by the provider.

Live reasoning

Anatomy

Reasoning.Root - Controls reasoning visibility.

Reasoning.Trigger - Toggles reasoning content.

Reasoning.Content - Contains reasoning content.