# Agent Run
Source: https://ui.spencerwueste.com/docs/blocks/agent-run/
Markdown: https://ui.spencerwueste.com/llm/blocks/agent-run.md

> Live agent plan with nested tool calls, a streaming log, and a human approval gate.

> Live preview: https://ui.spencerwueste.com/preview/agent-run

## What's inside

- **Steps** shows the plan with pending, running, completed, failed, and waiting states.
- **Tool** cards nest inside each step's collapsible details.
- **Reasoning** shows the agent's rationale on steps that have one.
- **Approval gate** pauses the run until you approve or deny, then continues or stops.

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/agent-run.json
```

Manual install dependencies: `@heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/agent-run.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import AgentRun from "@/components/blocks/agent-run/agent-run";

export default function Page() {
  return (
    <div className="h-dvh p-4">
      <AgentRun />
    </div>
  );
}
```

Give the parent a bounded height. The block fills it and scrolls internally.

## Going live

The `run` function is a script that mutates step state in order. Replace it with a consumer of your agent's event stream: map plan events to steps, tool events to the step's tools, and emit a `waiting` step when the agent requests permission.