Builder Interface

The visual workflow builder lets you design automation pipelines with a drag-and-drop interface.

Builder Interface

The workflow builder consists of several key areas:

┌─────────────────────────────────────────────────────────────────┐
│  Toolbar                                            [Save] [Run]│
├────────────┬────────────────────────────────────────────────────┤
│            │                                                    │
│  Node      │              Canvas                                │
│  Palette   │                                                    │
│            │    ┌─────────┐      ┌─────────┐      ┌─────────┐  │
│  Triggers  │    │ Trigger │─────▶│ Action  │─────▶│ Action  │  │
│  Actions   │    └─────────┘      └─────────┘      └─────────┘  │
│  Logic     │                                                    │
│            │                                                    │
├────────────┴────────────────────────────────────────────────────┤
│  Node Configuration Panel                                       │
└─────────────────────────────────────────────────────────────────┘

Canvas Navigation

Zoom Controls

• Zoom In: Scroll up or click +
• Zoom Out: Scroll down or click -
• Fit to Screen: Double-click canvas or click fit button
• Reset Zoom: Press 0 or click reset

Panning

• Pan: Click and drag on empty canvas
• Pan with Keyboard: Arrow keys

Keyboard Shortcuts

Adding Nodes

From Node Palette

1. Find the node type in the left palette
2. Drag it onto the canvas
3. Drop where you want it placed

Quick Add

1. Click the + button on any node's output
2. Select a node type from the menu
3. Node is automatically connected

Copy & Paste

1. Select a node (click on it)
2. Press Ctrl/Cmd + C to copy
3. Press Ctrl/Cmd + V to paste

Connecting Nodes

Creating Connections

1. Click on a node's output port (right side)
2. Drag to another node's input port (left side)
3. Release to create the connection

Connection Rules

• Each output can connect to multiple inputs
• Each input can receive from one output only
• Connections cannot create cycles
• Incompatible types show validation errors

Removing Connections

1. Click on the connection line
2. Press Delete or Backspace

Or:

1. Right-click on the connection
2. Select "Delete connection"

Node Configuration

Opening Configuration

• Double-click on a node
• Or click the settings icon on hover
• Or select node and view right panel

Configuration Panel

Each node has specific settings:

┌─────────────────────────────────────┐
│  HTTP Request                    ✕  │
├─────────────────────────────────────┤
│  Name: [Get User Data         ]     │
│                                     │
│  Method: [GET              ▼]       │
│  URL:    [https://api.example.com]  │
│                                     │
│  Headers                            │
│  ┌─────────────┬────────────────┐   │
│  │ Authorization│ Bearer {{token}}│  │
│  └─────────────┴────────────────┘   │
│  [+ Add Header]                     │
│                                     │
│  [Test] [Apply]                     │
└─────────────────────────────────────┘

Required vs Optional Fields

• Bold labels: Required fields
• Regular labels: Optional fields
• Red border: Validation error

Node Types

Triggers (Green)

Start your workflow:

Actions (Blue)

Perform operations:

Logic (Orange)

Control flow:

Working with Data

Variable References

Reference data from previous nodes:

javascriptCopy
// Input data from trigger
{{ input.email }}
{{ input.data.name }}

// Previous node output
{{ nodes.http_request_1.response.body }}
{{ nodes.ai_agent.response.content }}

Variable Picker

1. Click in any input field
2. Click the {{}} button
3. Browse available variables
4. Click to insert

Data Preview

• Hover over variables to see sample data
• Run in debug mode to see actual values

Testing Workflows

Quick Test

1. Click Test in the toolbar
2. Provide test input if required
3. View execution results

Debug Mode

1. Click Debug in the toolbar
2. Set breakpoints by clicking node badges
3. Click Run Debug
4. Step through execution

Saving & Publishing

Save Draft

• Auto-saves every 30 seconds
• Manual save: Ctrl/Cmd + S
• Draft status shown in toolbar

Publish

1. Ensure no validation errors
2. Click Publish button
3. Workflow becomes active

Version History

1. Click the version dropdown
2. View previous versions
3. Restore if needed

Tips & Best Practices

Organization

• Use descriptive node names
• Group related nodes together
• Add notes for complex logic
• Keep workflows focused

Performance

• Minimize unnecessary nodes
• Use parallel execution when possible
• Set appropriate timeouts
• Cache repeated operations

Error Handling

• Add error handling branches
• Configure retry policies
• Log important events
• Set up alerting

Next Steps

• Triggers - Learn about trigger types
• Actions - Explore action nodes
• Logic & Control - Master control flow
• Debugging - Debug like a pro