Components

Reasoning

The model’s reasoning: open while it thinks, then one line, "Thought for 3.2s".

Example

Interactive, and the same on the components page. Try the keyboard below on it.

Installation

npm i @dgesteves/agent-ui-kit ai

import { Reasoning } from '@dgesteves/agent-ui-kit';
// Once per app (with Tailwind v4: @import '@dgesteves/agent-ui-kit/tailwind.css'; in your CSS)
import '@dgesteves/agent-ui-kit/styles.css';

npx shadcn@latest add @agent-ui-kit/reasoning

import { Reasoning } from '@/components/agent-ui/reasoning';

The styles are once per app; Getting started has the Tailwind v4 and plain CSS options.

Usage

<Reasoning text={part.text} streaming={part.state === 'streaming'} />

API reference

Generated from the types the package ships, so it matches the version you install.

Reasoning

Collapsible model reasoning. Opens automatically while the model thinks and collapses to a one-line "Thought for 3.2s" summary when it finishes, unless the user has toggled it.

Props

textrequired: string
streaming: booleanDefault false
The model is still reasoning. The panel opens while streaming and closes when done.
durationMs: number
Known reasoning duration in ms. Measured client-side when omitted.
defaultOpen: boolean
open: boolean
onOpenChange: (open: boolean) => void
allowedImageHosts: readonly string[]
Where images in the reasoning may load from: host names, 'self' or '*'. See MarkdownProps.allowedImageHosts.

Other props go to the root <div>: className (merged with tailwind-merge), id, aria-*, data-* and event handlers.

Accessibility

Keyboard
Keys	Action
`EnterSpace`	Show or hide the reasoning

A disclosure: the summary is a button with aria-expanded, and the text is the region it controls.
It opens on its own while the model thinks and closes when it finishes, unless the reader opened or closed it themselves.
The open and close animation runs only without prefers-reduced-motion.

Theming

Every color, radius and font is a CSS variable, so the overrides in Theming apply, on :root or scoped to any element. These hooks are read from the component's markup.

Slots (data-slot): reasoning
State attributes: data-streamingon reasoningset while the model is thinking
Tokens it uses: --aui-accent--aui-border-strong--aui-fg--aui-fg-muted--aui-font-sans--aui-ring

app/globals.css

/* Only this component, and only inside .settings-panel */
.settings-panel [data-slot='reasoning'] {
  --aui-radius: 4px;
}