Flow Builder

Workflow
Block

Visual workflow designer for creating AI-powered automation pipelines with drag-and-drop node editing, conditional branching, and human-in-the-loop approval gates.

Preview

Drag nodes to reposition, click + to add nodes, click nodes to configure

AI Content Workflow

Draft
100%
Start
Starts the workflow
Workflow starts here
AI Assistant
AI-powered processing
Process with Claude
Check Response
Branches based on logic
Evaluate AI output
TRUE
FALSE
Manager Approval
Human approval gate
Human review required
Send Alert
Send notifications
Notify team
Complete
Workflow endpoint
Workflow ends

Node Types

Seven node types for building workflows

Trigger

Starts the workflow

Action

Executes an operation

Condition

Branches based on logic

AI Assistant

AI-powered processing

Approval

Human approval gate

Notification

Send alerts

End

Workflow endpoint

Props

FlowBuilder component API reference

PropTypeDefaultDescription
nodesFlowNode[]—Array of workflow nodes
connectionsFlowConnection[]—Node connections
positionsRecord<string, {x, y}>—Node positions on canvas
titlestring'AI Content Workflow'Workflow title
status'draft' | 'published' | 'archived''draft'Workflow status
onNodesChange(nodes: FlowNode[]) => void—Callback when nodes change
onConnectionsChange(connections: FlowConnection[]) => void—Callback when connections change
onPositionsChange(positions: Record<string, {x, y}>) => void—Callback when positions change
onPublish() => void—Callback when publish button is clicked
onTest() => void—Callback when test button is clicked

FlowNode Type

PropTypeDefaultDescription
id*string—Unique node identifier
type*NodeType—trigger | action | condition | ai | approval | notification | end
label*string—Display name
configobject—Node-specific configuration

FlowConnection Type

PropTypeDefaultDescription
from*string—Source node ID
to*string—Target node ID
branch'true' | 'false'—Branch type for conditional nodes

Usage

Import and implementation example

import { FlowBuilder } from '@/blocks/workflow/flow-builder'

export default function Example() {
  return (
    <FlowBuilder
      title="My Workflow"
      status="draft"
      nodes={[
        { id: '1', type: 'trigger', label: 'Start' },
        { id: '2', type: 'ai', label: 'Process' },
        { id: '3', type: 'end', label: 'Done' },
      ]}
      connections={[
        { from: '1', to: '2' },
        { from: '2', to: '3' },
      ]}
      positions={{
        '1': { x: 200, y: 50 },
        '2': { x: 200, y: 180 },
        '3': { x: 200, y: 310 },
      }}
      onNodesChange={(nodes) => console.log(nodes)}
      onPublish={() => publishWorkflow()}
      onTest={() => testWorkflow()}
    />
  )
}

Built With

4 components

This block uses the following UI components from the design system:

ButtonInputTextareaBadge

Features

Built-in functionality

  • Drag-and-drop: Reposition nodes by dragging
  • Node configuration: Click nodes to edit settings in sidebar
  • Seven node types: Triggers, actions, conditions, AI, approvals, notifications, endpoints
  • Conditional branching: TRUE/FALSE paths for condition nodes
  • Zoom controls: Scale the canvas from 50% to 150%
  • AI integration: Built-in support for AI assistant nodes
  • Human-in-the-loop: Approval gates for human oversight
  • Dark mode: Full dark theme support

Accessibility

Accessibility considerations

ARIA Attributes

Nodes are clickable elements with focus statesToolbar buttons are native button elementsConfiguration sidebar uses standard form controls

Keyboard Navigation

KeyAction
TabNavigate between toolbar buttons and nodes
Enter / SpaceActivate buttons or select nodes
EscapeClose configuration sidebar

Notes

  • Node types identified by icon and text label
  • Workflow status shown as badge
  • Zoom level displayed as percentage
  • Connection lines are decorative (not focusable)

Related Components

Multistage Approval Flow BuilderPolicy EditorApproval GateEscalation Tree