Skip to main content
The Flow Canvas is the primary workspace for designing your voice agent’s conversation logic. Using a drag-and-drop interface powered by React Flow, you can visually create complex conversation flows without writing code.

​
Canvas Overview

The Flow Builder interface consists of four main areas: 
┌──────────┬─────────────────────────────────┬──────────────┐
│  Node    │                                 │   Property   │
│ Palette  │        Flow Canvas              │    Panel     │
│          │                                 │              │
│ [Start]  │    ┌─────┐      ┌─────┐        │  Node Config │
│ [Conv]   │    │Start│ ───► │Conv │        │  Settings    │
│ [Data]   │    └─────┘      └─────┘        │              │
│ [If/Else]│                                 │              │
│ [End]    │                                 │              │
│   ...    │                                 │              │
├──────────┴─────────────────────────────────┴──────────────┤
│                    Bottom Toolbar                         │
└───────────────────────────────────────────────────────────┘

​
Node Palette (Left Sidebar)

The node palette contains all available stage types organized by category:
CategoryStages
ConversationConversation, Data Extraction
LogicIf/Else
ActionsHuman Transfer, Calendar Booking
Call ControlEnd Call
The Start node is automatically created when you create a new flow agent. Each flow must have exactly one Start node.

​
Canvas Area (Center)

The main workspace where you build your flow:
  • Drag & Drop: Drag nodes from the palette onto the canvas
  • Pan: Click and drag on empty space to move around
  • Zoom: Use scroll wheel or pinch to zoom in/out
  • Select: Click nodes or edges to select them
  • Multi-select: Hold Shift and drag to select multiple items

​
Property Panel (Right Sidebar)

When you select a node, the property panel shows its configuration options:
  • Stage-specific settings
  • Transitions configuration
  • Knowledge base attachment
  • Advanced options

​
Toolbar

The top toolbar provides quick actions:
ButtonAction
SaveManually save the current flow
UndoUndo last change (Ctrl/Cmd+Z)
RedoRedo undone change (Ctrl/Cmd+Shift+Z)
TestOpen the test panel
ActiveToggle agent activation status
SettingsOpen global settings

​
Working with Nodes

​
Adding Nodes

  1. Locate the desired stage type in the left palette
  2. Click and drag the node onto the canvas
  3. Release to place the node at the desired position

​
Connecting Nodes

Nodes have handles (small circles) for creating connections:
  • Source handle (bottom): Where connections originate
  • Target handle (top): Where connections arrive
To connect nodes:
  1. Click on a source handle
  2. Drag to the target handle of another node
  3. Release to create the connection

​
Selecting Nodes

  • Single select: Click on a node
  • Multi-select: Shift+drag to create a selection box
  • Deselect: Click on empty canvas space or press Escape

​
Deleting Nodes

  • Select the node and press Delete or Backspace
  • Or right-click and select “Delete”
Deleting a node also removes all connections to and from that node.

​
Working with Edges (Connections)

​
Edge Types

Edges represent transitions between stages. They can be:
  • Unconditional: Always follows this path (solid line)
  • Conditional: Follows when condition is met (dashed line)

​
Edge Labels

Edges display their transition condition as a label. Click the label to edit the condition.

​
Deleting Edges

  • Click on an edge to select it
  • Press Delete or Backspace

​
Canvas Controls

​
Keyboard Shortcuts

ShortcutAction
Ctrl/Cmd + ZUndo
Ctrl/Cmd + Shift + ZRedo
Ctrl/Cmd + SSave
Delete / BackspaceDelete selected
EscapeDeselect all

​
Zoom Controls

  • Scroll wheel: Zoom in/out
  • Pinch gesture: Zoom on trackpad
  • Fit view: Double-click on empty space to fit all nodes in view

​
Auto-Layout

Click the Auto Layout button to automatically arrange nodes in a clean left-to-right flow. This is useful when your flow becomes complex.

​
Node States

Nodes display different visual states:
StateAppearance
DefaultNormal node with type-specific color
SelectedHighlighted border
Active (Testing)Purple glow animation
InvalidRed border with warning icon

​
Auto-Save

The canvas automatically saves your changes:
  • Changes are debounced (2-second delay after last edit)
  • Manual save is always available via toolbar or Ctrl/Cmd+S
  • Save status indicator shows: Saved, Saving, or Error
  • Local backup stored in browser for recovery

​
Best Practices

  • Use descriptive node names
  • Arrange nodes left-to-right or top-to-bottom
  • Use Auto Layout for complex flows
  • Group related stages together
  • Begin with the main conversation path
  • Add edge cases and branches after the happy path works
  • Test incrementally as you build
  • Write clear, specific conditions
  • Test each transition path
  • Always have a default path for unexpected inputs

​
Next Steps

Start Stage

Configure the entry point of your flow

Conversation Stage

Build AI-powered conversation handling

Transitions

Learn about routing between stages

Stage Builder

Use AI assistance to build flows