Subagent
Work delegated to a sub-agent, nested with its live activity.
Subagent shows work the main agent handed off: the sub-agent's name and task, a live activity line while it runs, and its own transcript tucked inside on an indented rail, so it is always clear who did what.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/subagent.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/subagent.
Builds on: collapsible, motion, spinner, text-shimmer
Usage
import { Subagent } from "@/components/ui/subagent";
<Subagent name="research-agent" task="Find prior art" status="running" activity="Reading docs…" />Motion
The activity line shimmers while running.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Subagent
| Prop | Type | Default | Description |
|---|---|---|---|
| name · task | string · ReactNode | — | Who and what. |
| status | "running" | "done" | "error" | "running" | State. |
| activity | string | — | Live line. |
| duration | number | — | Seconds. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: subagent ui · multi agent ui react · agent delegation display · nested agent component · shadcn ai subagent