Search

Search components and blocks

Sign in

Ticket Agent Builder

Pro

An editable agent flow for a support-ticket pipeline. Add step opens a dialog where you pick a step type, name it and choose what it connects after (needs components/add-step-dialog.tsx); the new step springs in wired to it; select a step for a toolbar to duplicate or delete it, drag handles to connect steps yourself, and press Run flow to watch edges draw through whatever graph you built. Built on React Flow; 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/ticket-flow-builder

Ticket agent · 4 steps, 3 connections

Select a step to branch from it · drag handles to connect · Backspace deletes

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