Search

Search components and blocks

Sign in

Agent Flow

Pro

A workflow canvas where an inbound ticket is classified by an agent, then branches to paging on-call (urgent) or drafting and sending a reply (routine). Nodes spring in, edges draw themselves as the run advances, status chips move idle → running → success, and a shared ring slides to whichever node you select. Run it twice to see both branches. Built on React Flow (@xyflow/react), so nodes drag and the canvas pans and zooms; sample copy is fictional. A floating toolbar adds select/pan modes, zoom, undo/redo and a canvas lock; it needs components/flow-controls.tsx and lib/flow-interaction.ts alongside this file.

pnpm dlx shadcn@latest add @ditherui/agent-flow

Support agent · 5 steps, 4 connections

Next run: routine ticket

Select a step to see its details

Props

className / ...div propsReact.ComponentProps<"div">—

When to use the agent flow

Use the agent flow to show how an agent routes work: a classified ticket branching to paging on-call or drafting a reply. Nodes spring in and edges draw themselves as the run advances.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components