Agent Flow

With autoPlay, the graph plays as one continuous light: each node traces its border on — growing from the left-edge centre out to both sides — then its icon lights and the beam flows down the outgoing edge to the next node, which traces in turn. The lit border stays; the flowing line is transient. Root nodes (no incoming edge) start the sequence. Drag any node to rearrange it — the edges follow live — or drag the dotted backdrop to pan.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/agent-flow.json"

Usage

import {
  AgentFlow,
  type AgentFlowEdge,
  type AgentFlowNode,
} from "@/components/godui/agent-flow";

<AgentFlow
  nodes={[
    { id: "a", label: "Trigger", status: "done", x: 80, y: 120 },
    { id: "b", label: "Planner", sublabel: "opus-4.8", status: "running", x: 320, y: 120 },
  ]}
  edges={[{ id: "a-b", from: "a", to: "b" }]}
  className="h-[360px] w-full"
/>

Give the canvas an explicit height (and width) — it is an absolutely-positioned graph, so it fills its container. With fitView (default) the graph scales and centers itself so the whole graph is visible on mount.

Auto-play

Pass autoPlay and the component runs the whole choreography for you — trace border → light icon → flow to the next node — starting from the root(s). Add continuous to loop it. One flowSpeed (px/second) drives everything: each card's border and every beam derive their duration from their own length, so the light holds a constant pace — bigger cards trace longer, longer edges flow longer, and the speed never changes at the card→line seam. (flowDuration sets packet speed only when you drive the edges yourself, without autoPlay.)

<AgentFlow nodes={nodes} edges={edges} autoPlay continuous />

Persistent edges

Mark an edge persist and its line draws on as the packet travels and then stays lit — the same behaviour as a card's traced border. A completed path reads as an established connection, so the whole traversed route glows once the flow reaches the end.

Driving it yourself

Without autoPlay, you control the graph: node.status drives each card (a node traces its border on the first time it becomes running/done) and edge.animated drives the packets. For a manual once-through, mark edges loop: false and listen for onEdgeArrive to advance the sequence yourself.

const [arrived, setArrived] = useState(new Set<string>());

<AgentFlow
  nodes={nodes}          // status derived from `arrived`
  edges={edges.map((e) => ({ ...e, loop: false }))}
  onEdgeArrive={(id) => setArrived((s) => new Set(s).add(id))}
/>;

Props

AgentFlow

AgentFlowNode

AgentFlowEdge