Agent workflow
Animated multi-agent workflow on a pixel canvas: a planner fans work out to four agents and a verifier merges the results.
Installation
pnpm dlx shadcn@latest add @lumesec/px-agentsFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-agents.jsonUsage
import { PxAgents } from "@/components/lumesec/px-agents";
export function Example() {
return (
<PxAgents />
);
}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.
runReact proponRunDetail{}Fires when a run starts, from the button or from run().
doneReact proponDoneDetail{ 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.
run()Starts the workflow. Ignored while a run is in progress.
Accessibility
- The canvas has
role="img"andaria-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.
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.
Related
Was this page helpful?