# Agent run

> An AI coding agent's run: steps stream in with search results, code and a diff.

Block · Pro · https://lodeui.com/blocks/agent-run

## When to use

- Showing what an agent or background job is doing step by step.

## When not to use

- A plain chat: use the AI chat block.

## Installation

```bash
npx shadcn@latest add @lode/agent-run
```

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 { AgentRun } from "@/components/blocks/agent-run";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <AgentRun />
    </main>
  );
}
```

Built from: Avatar group, Button

## API reference

### AgentRun

An AI coding agent's run: steps stream in with timers, each expandable to show search results, code and a diff, with pause, resume and replay. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between steps and controls |
| Enter / Space | Expand a step or pause and resume |

## Accessibility

- Steps are buttons with aria-expanded.
- Status is text (Running, Done), not only icons.

## Motion

- Steps enter one by one; the running step shows a live timer.

## Responsive behavior

- Code and diffs scroll horizontally on phones.

## Performance

- One timeout schedules the next step and one interval the timer; both stop when paused or unmounted.

## Notes for AI

- Feed real events into the steps array from your agent's stream.

## Related

- [AI chat](https://lodeui.com/blocks/ai-chat) — A chat with streamed answers, model picker, suggestions and stop.
- [AI playground](https://lodeui.com/blocks/ai-playground) — Compare two models on one prompt with parameters, reasoning, streaming, tokens and cost.
- [Avatar group](https://lodeui.com/components/avatar-group) — Overlapping avatars that spread apart on hover.
