# AI reasoning

> A collapsible thinking trace that folds into a summary when done.

Component · Pro · https://lodeui.com/components/ai-reasoning

## When to use

- Showing a model's steps while it works, then folding them away.

## When not to use

- The final answer itself.

## Installation

```bash
npx shadcn@latest add @lode/ai-reasoning
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AiReasoning } from "@/components/ui/ai-reasoning";

export function Trace({ steps, thinking }: { steps: string[]; thinking: boolean }) {
  return <AiReasoning steps={steps} thinking={thinking} seconds={4} />;
}
```

Built from: Shimmer text

## API reference

### AiReasoning

Open while streaming; folds into a summary when done.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| steps | `string[]` | – | Steps as they arrive. |
| thinking | `boolean` | – | True while working. |
| seconds | `number` | – | Shown when done. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Expand or collapse |

## Accessibility

- The toggle uses aria-expanded.

## Motion

- Steps slide in; the header shimmers while thinking; folds on completion.

## Responsive behavior

- Full width.

## Performance

- Append steps; don't replace the array each token.

## Notes for AI

- Set thinking=false when the answer starts streaming.

## Related

- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.
- [Citation list](https://lodeui.com/components/citation-list) — Numbered sources and inline citation marks for AI answers.