frontdeskos-automation-builder

Visual drag-and-drop workflow builder for FrontDeskOS. Build automation workflows with triggers, actions, conditions, delays, and branching logic — powered by React Flow.

Install

npm install frontdeskos-automation-builder react react-dom

Quick Start

import { AutomationBuilder } from 'frontdeskos-automation-builder';
import 'frontdeskos-automation-builder/styles.css';

const triggers = [
  {
    type: 'call.missed',
    description: 'Fires when an inbound call is missed',
    category: 'call',
    availableFields: ['callerPhone', 'callerName', 'direction'],
  },
];

const actions = [
  {
    type: 'send_sms',
    label: 'Send SMS',
    description: 'Send an SMS message',
    category: 'communication',
    fields: [
      { name: 'to', label: 'To', type: 'text', required: true, supportsVariables: true },
      { name: 'message', label: 'Message', type: 'textarea', required: true, supportsVariables: true },
    ],
  },
];

function App() {
  return (
    <AutomationBuilder
      availableTriggers={triggers}
      availableActions={actions}
      onSave={(workflow) => console.log(workflow)}
    />
  );
}

Features

• Drag-and-drop canvas — visually connect triggers, actions, conditions, delays, and branches
• Trigger registry — define available triggers (calls, appointments, leads, schedules, webhooks) with typed fields
• Action registry — define actions (SMS, email, CRM updates, HTTP requests, AI generation) with configurable form fields
• Template support — load pre-built workflow templates
• Validation — built-in workflow validation with error/warning reporting
• Test mode — simulate step-by-step workflow execution
• Theming — light and dark mode support
• Read-only mode — display workflows without editing

Node Types

| Node | Description | |------|-------------| | Trigger | Entry point — the event that starts the workflow | | Action | Performs an operation (send SMS, create lead, HTTP request, etc.) | | Condition | Filters execution based on field comparisons | | Delay | Pauses execution for a specified duration | | Branch | If/else split based on conditions |

Props

interface AutomationBuilderProps {
  automation?: Workflow | null;        // Existing workflow to load
  availableTriggers: TriggerDefinition[];  // Trigger registry
  availableActions: ActionDefinition[];    // Action registry
  templates?: WorkflowTemplate[];      // Pre-built templates
  onSave?: (workflow: Workflow) => void | Promise<void>;
  onTest?: (workflow: Workflow) => void | Promise<void>;
  theme?: 'light' | 'dark';
  readOnly?: boolean;
}

Exports

// Components
import { AutomationBuilder } from 'frontdeskos-automation-builder';

// State hook
import { useWorkflowState } from 'frontdeskos-automation-builder';

// Utilities
import { autoLayout, validateWorkflow, hasBlockingErrors } from 'frontdeskos-automation-builder';

// Types
import type {
  Workflow,
  TriggerConfig,
  TriggerDefinition,
  ActionDefinition,
  ActionStep,
  WorkflowTemplate,
  BuilderNode,
  BuilderEdge,
  ValidationError,
  AutomationBuilderProps,
} from 'frontdeskos-automation-builder';

Workflow JSON

The builder produces and consumes a Workflow object:

{
  "name": "Missed Call Follow-Up",
  "triggerConfig": {
    "eventType": "call.missed",
    "conditions": []
  },
  "actions": [
    {
      "id": "delay_1",
      "type": "delay",
      "config": { "minutes": 2 }
    },
    {
      "id": "sms_1",
      "type": "send_sms",
      "config": {
        "to": "{{trigger.callerPhone}}",
        "message": "Hi {{trigger.callerName}}, we missed your call!"
      }
    }
  ]
}

Variable Interpolation

Action fields that support variables use {{trigger.fieldName}} syntax to reference trigger event data:

Hi {{trigger.callerName}}, we missed your call at {{trigger.callerPhone}}.

Peer Dependencies

• react ^18.0.0
• react-dom ^18.0.0

License

MIT