Agent swarm

Pro

Many agents, one picture. Each agent is a node whose ring fills as it works, work moves along the links, and a link settles once the agent after it has finished. An agent that needs a decision pulses and the island at the top opens into the question. Choose any agent and its detail opens from where it sits.

Installs components/ui/agent-swarm.tsxDepends on @radix-ui/react-slot, lucide-reactMotion honours reduced motion

pnpm dlx shadcn@latest add @caliper/agent-swarm

Ship HAL-482

Show the region on every order · seven agents

Live0 working · 0 of 7 done

When to use #

Use it for

Orchestrators and multi-agent products where people need to see who is doing what.
Long agent runs that sometimes stop for a human decision.

Skip it when

A single agent run; use the agent run screen.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/agent-swarm

Adds its 11 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { AgentSwarm } from "@/components/ui/agent-swarm"

The worked example comes with Pro

The 95-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

AgentSwarm

component

PropTypeDefaultDescription

titlestring"Agents"

descriptionstring—

agents *readonly SwarmAgent[]—

links *readonly SwarmLink[]—

approvalSwarmApproval | null—A decision an agent is waiting on.

events *readonly SwarmEvent[]—

actionsReactNode—

onApprove((agentId: string) => void)—

onDeny((agentId: string) => void)—

classNamestring—

Motion #

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.