# Assistant Loops

> Close-up assistant moments: thinking, calling a tool and streaming a reply, each on a calm loop.

- Collection: Illustrations
- Tier: pro
- Docs: https://geturui.com/docs/assistant-loops
- Install: `npx shadcn@latest add @geturui-pro/assistant-loops`
- Dependencies: motion

## Variants

### Thinking

A shimmering status pill and reasoning lines fold away into the final reply.

Install: `npx shadcn@latest add @geturui-pro/assistant-loops-thinking`

```tsx
import { AssistantLoopThinking } from "@/components/illustrations/assistant-loops/thinking";

export function ThinkingIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <AssistantLoopThinking className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (eight seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Tool call

A tool call card spins, resolves with ranked results and the reply cites them.

Install: `npx shadcn@latest add @geturui-pro/assistant-loops-tool-call`

```tsx
import { AssistantLoopToolCall } from "@/components/illustrations/assistant-loops/tool-call";

export function ToolCallIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <AssistantLoopToolCall tool="search_orders" className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| tool | `string` | "search_docs" | Name shown on the tool call card; keep it short. |
| speed | `number` | 1 | Speed multiplier for the loop (eight seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Streaming

A reply streams in word by word behind a moving cursor, then actions and sources settle in.

Install: `npx shadcn@latest add @geturui-pro/assistant-loops-streaming`

```tsx
import { AssistantLoopStreaming } from "@/components/illustrations/assistant-loops/streaming";

export function StreamingIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <AssistantLoopStreaming className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (seven seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

## Accessibility

- Rendered as a single SVG with role="img" and an aria-label you can override with `title`; nothing inside is focusable.
- Under prefers-reduced-motion the scene renders one meaningful still frame: no loops, no timers.
- Colours come from the GetUrUI tokens only, so the scene follows light and dark themes automatically.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.