# Agent run

A shadcn/ui block for AI chat apps: an agent's run in one line, its verb rolling per tool call, the live call streaming, then every step's JSON.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** AI chat apps showing an agent's work inline; Research, sales and support agents running tools; Copilots built on function calling or MCP; Landing pages for AI agent products
- **Category:** AI · **Type:** Cards · **Style:** Motion, Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/blocks/agent-run) · [Screenshot](https://www.craftui.space/llms.md/preview/agent-run.d224758a.jpg)

![Agent run](https://www.craftui.space/llms.md/preview/agent-run.d224758a.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/agent-run.json
```

This is a paid item (BLK-M6V1KF): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

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

export default function Page() {
  return <AgentRun />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | — | What the agent is doing, e.g. "Research Acme Inc.". |
| `doneTitle` | `string` | — | The same, done: "Researched Acme Inc.". Defaults to `title`. |
| `steps` | `AgentStep[]` | — | The run's steps. Leave out to show the built-in demo. |
| `running` | `boolean` | — | Whether the agent is working. Read from the steps when left out. |
| `onRun` | `() => void` | — | Starts the run. The Run button only shows when this is set. |
| `defaultExpanded` | `boolean` | `false` | Opens the steps list at first. |

It also accepts every `<div>` attribute (`className`, `id`, `aria-*` and so on).

### `AgentStep`

| Field | Type | Description |
| --- | --- | --- |
| `toolCallId` (required) | `string` | A stable id for the call; the AI SDK's `toolCallId` fits. |
| `tool` (required) | `string` | The tool's name, e.g. "search_web". |
| `state` (required) | `AgentStepState` | Where the call is. |
| `label` | `string` | What it's doing, shown while it runs: "Searching the web". |
| `doneLabel` | `string` | What it did, shown once it's done: "Searched the web". |
| `result` | `string` | Its result in a few words, for the steps list: "8 results". |
| `input` | `unknown` | The arguments, whole or still streaming in. |
| `output` | `unknown` | What the tool returned. |
| `errorText` | `string` | Why the call failed, for `output-error`. |
| `durationMs` | `number` | How long the call took, in ms. Measured for you when left out. |

## Files

The install adds:

- `components/blocks/agent-run.tsx`
- `components/blocks/generative-ui.tsx`

npm dependencies (installed for you): `motion`.

shadcn/ui components it uses (the shadcn CLI adds any that are missing): `button`, `card`.