# Agent workflow
> Animated multi-agent workflow on a pixel canvas: a planner fans work out to four agents and a verifier merges the results.
- Element: `<px-agents>`
- React: `import { PxAgents } from "@/components/lumesec/px-agents"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-agents.json
- Page: https://elements.lumesec.ai/components/pixel-lab/agents



Live preview: https://elements.lumesec.ai/view/px-agents

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-agents.js"></script>

<px-agents></px-agents>
```

## Installation

```bash
npx shadcn@latest add @lumesec/px-agents
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-agents.json
```

## Usage

React:

```tsx
import { PxAgents } from "@/components/lumesec/px-agents";

export function Example() {
  return (
    <PxAgents />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-agents.js"></script>

<px-agents></px-agents>
```

## Behaviour

Ultracode’s fan-out, drawn live. The planner charges up and bursts, four agent clusters bloom, packets stream along the wires, each agent fills its own pixel ring, and the verifier merges the results into a check.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event  | React prop | Detail                | Description                                                                                  |
| ------ | ---------- | --------------------- | -------------------------------------------------------------------------------------------- |
| `run`  | `onRun`    | `{}`                  | Fires when a run starts, from the button or from `run()`.                                    |
| `done` | `onDone`   | `{ seconds: number }` | Fires when the verifier finishes. `seconds` is the elapsed run time, rounded to one decimal. |

### Methods

Call them on the element, for example through a React ref.

| Method  | Description                                              |
| ------- | -------------------------------------------------------- |
| `run()` | Starts the workflow. Ignored while a run is in progress. |

## Accessibility

* The canvas has `role="img"` and `aria-label="Multi-agent workflow"`.
* The phase text below the canvas is an `aria-live="polite"` region that announces each step (planning, dispatching, agents done, verifying, done).
* The "Run workflow" control is a native button; it is disabled while a run is in progress and relabelled "Run again" afterwards.
* Reduced motion: spark bursts are skipped and the phase text swaps without the roll; node pulses and packets still animate.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--foreground`, `--lumesec` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-fg` and `--ui-muted`.

## Notes

* The workflow is fixed demo content: one planner, four agents (`explore`, `edit`, `test`, `docs`) and a verifier. Each agent takes a random 1.6 to 3.1 seconds per run.
* The canvas is 212px tall and takes the full width of the host; node positions are recomputed on resize.