Agent Run, animated React component

A live view of an AI agent working through a task, where each step shows what it is doing and folds into a ticked line when it moves on. A clock runs in the corner, Stop is always there, and the run ends on a short report with the change to review.

Pro
AI Components
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Task

Fix the failing checkout test

0.0s

checkout.ts

Props

Prop	Type	Default	What it does
task	string	"Fix the failing checkout test"	The task the agent was given, shown at the top.
steps	AgentRunStep[]	AGENT_RUN_STEPS	The steps of the run: { label, ms, body(t) }. body gets the ms elapsed inside the step so it can reveal lines or files as it goes.
report	AgentRunReport	AGENT_RUN_REPORT	The report card shown at the end: { title, body, files, added, removed }.
onReview	() => void	undefined	Called when Review change is pressed.
width	number	520	Width of the card in px. It never grows past its container.
autoplay	boolean	false	Runs the whole task again 4.5 seconds after it finishes until someone touches the card. Only runs while the card is on screen and never under reduced motion.
className	string	""	Extra classes for the card.
enableSound	boolean	true	Plays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/agent-run
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
agent-run/
agent-run.tsx
index.ts
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { AgentRun } from "@/components/agent-run";

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

Agent Run questions

Does it make sound, and how do I turn it off?

Ticks quietly after every other step, chimes softly when the run finishes and switches off with a click when you press Stop; autoplay makes the tick and finish sounds once the visitor has used the page. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

Pro
NewSound
Streaming Answer
Pro
NewSound
Diff Review
Pro
NewSound
Ghost Autocomplete
Pro
New
Travelling Tooltip