A single page application that allows operations teams to define the workflows required for LLM agents to make phone calls and collect information from insurers.
Nodes represent questions the LLM agent will ask during a call. Edges connect them in sequence, forming a visual workflow that can be built and extended in real time.
Clone the repo and install dependencies:
git clone https://github.com/huynhicode/workflow-builder.git
cd workflow-builder
pnpm install
pnpm devThe app will be available at http://localhost:5173
- Visual workflow canvas with question nodes and connecting edges
- "Add Node" button appends a new question node to the end of the sequence
- Predefined, domain-specific questions used for new nodes
- Disabled state with tooltip when all questions have been added
- Pan and scroll to navigate the canvas
React Flow: purpose-built for node/edge UIs and explicitly referenced in the role's stack preferences. Handles edge rendering, viewport management, and canvas interactivity out of the box, freeing time to focus on component design and UX.
shadcn/ui: accessible, unstyled components built on Radix UI primitives. Ensures WCAG compliance by default while allowing full control over styling. Used for Button, Card, Separator, and Tooltip.
CSS variables in index.css: single source of truth for design tokens. No hardcoded color values in components — all colors reference semantic tokens that map directly to the Figma spec. Semantic tokens reference primitive values, making retheming a one-line change rather than a find-and-replace across every component.
Semantic HTML and ARIA labels: accessibility built in from the start. Semantic elements, aria labels on interactive components, and lang attribute on the document root.
Disabled state with tooltip: the spec did not define behavior when all questions are exhausted. Rather than allowing silent failure or an error state, the Add Node button disables gracefully with a tooltip explaining why.
Viewport focus on Add Node: the initial implementation zoomed the canvas out with each new node. I reconsidered and implemented a focused pan instead, so each new node comes into view at the same zoom level while previous nodes remain accessible by scrolling up.
AI-assisted development: Claude was used as a thought partner throughout development, helping reason through technical decisions, debug issues, and validate approaches against the spec. All implementation decisions were made and reviewed by me.
These are questions the spec left open that would need to be answered before scaling this product:
- Are questions dependent on previous answers, or is the workflow always linear?
- What happens at runtime when the last question is asked — does the call end, transfer, or loop?
- Should workflows be saveable and shareable across teams?
- Who owns workflow creation — supervisors, operations, or clinicians?
Design System
- Formalize color, spacing, and typography tokens
- Document component variants and usage guidelines
- Build an icon component with consistent sizing
Node Types
- Decision nodes — branch the workflow based on insurer responses
- End node — explicitly terminate the workflow
- Wait node — pause for hold or transfer states
Workflow Editing
- Click to edit question text inline
- Drag to reorder nodes
- Delete nodes from the sequence
Persistence
- Save and load workflows via a backend API
- Workflow versioning and history
Data
- Replace static question array with API-driven content
- Support multiple workflow templates per call type
Accessibility
- Full keyboard navigation of the canvas
- Screen reader announcements when nodes are added