Workflow Editor¶

The visual workflow editor provides an interactive, graph-based interface for viewing, editing, and managing your automation workflows. It offers a modern, node-based editing experience similar to popular automation tools.

Overview of the Interface¶

The workflow editor is part of the Agent Builder interface. The screen is divided into two main areas:

• Left Panel (Chat): Where you describe workflows in natural language
• Right Panel (Workflow Editor): The visual graph representation of your workflow

When a workflow is generated from your natural language description, it appears automatically in the visual editor.

Understanding the Workflow Graph¶

Nodes Represent Steps¶

Each step in your workflow is displayed as a node in the graph:

Each action node displays: - App icon/emoji: Visual indicator of the service (e.g., Slack, Gmail) - Action name: What the step does (e.g., "Send Message") - App name: The service being used - Status indicator: Small colored dot showing connection status

Authentication Status Colors¶

Nodes are color-coded based on their OAuth connection status:

A key icon appears on nodes that require OAuth but aren't yet connected. Click it to initiate the connection process.

Edges Show Data Flow and Dependencies¶

Edges (the lines connecting nodes) represent data flow between steps:

• Sequential edges: One step leads directly to the next
• Fan-out edges: One step triggers multiple parallel steps
• Fan-in edges: Multiple parallel steps merge back to a single step

Edges are also color-coded based on the authentication status of the connected nodes.

Parallel Execution¶

When the system detects steps that can run in parallel (e.g., posting to multiple social media platforms), it displays them side-by-side rather than sequentially. This is automatic based on: - Same action type (both are "post" actions) - Same category (both are social media apps) - Explicit parallel grouping

Editing Workflows¶

Clicking Nodes to Edit¶

Click any node to open the Node Drawer on the right side. This provides detailed information and editing capabilities for that step.

The Side Drawer¶

The drawer slides in from the right and contains multiple tabs:

Config Tab¶

• View and edit the step's parameters
• Dynamic form fields based on the action type
• Supports template variables like {{trigger.data}} or {{steps[0].output}}

Prompt Tab¶

• Edit the natural language description of the step
• Click Regenerate from Prompt to update the step's configuration based on your changes
• Shows available context variables
• May show a change preview before applying regenerated updates

Code Tab¶

• Write custom code for the step
• Syntax highlighting and line numbers
• Test button to run code in sandbox
• Supports quick mock inputs for testing
• Variable chips for quick insertion
• Pre-built templates for common operations

JSON Tab¶

• View and edit the raw JSON configuration
• Validate button to check syntax
• Format button for pretty-printing
• Copy and Import functionality

Chat Tab¶

• Chat with AI about this specific step
• Ask questions or request modifications
• Contextual help for the current node
• When available, apply suggestions directly back to the node configuration

Navigation Between Nodes¶

Use the Previous (◀) and Next (▶) buttons in the drawer header to navigate between steps without closing the drawer.

Keyboard shortcuts: - Ctrl+[ or Cmd+[: Previous node - Ctrl+] or Cmd+]: Next node

Saving Changes¶

In edit mode, the drawer footer shows: - Cancel: Discard changes - Save Changes: Apply your edits to the workflow

View Modes¶

Graph View (Visual)¶

The default visual representation where you can: - See the overall workflow structure - Drag to pan around the canvas - Use toolbar buttons to zoom and navigate

JSON View (Raw)¶

Access the JSON view through the JSON tab in the node drawer for individual nodes, or through the workflow's raw data. This shows: - Step ID and ordering - Action and app configuration - Parameters and their values - Dependencies and connections

Workflow Actions¶

The workflow command center (below the chat input) provides these actions:

Refinement Actions¶

Execution Actions¶

Workflow Manager¶

Access the Workflow Manager (/workflows) to see all your saved workflows:

• Run: Manually trigger workflow execution
• Enable/Disable: Toggle whether scheduled/webhook workflows are active
• Delete: Permanently remove a workflow

UI Controls¶

Zoom Controls¶

The toolbar in the top-right of the editor provides:

You can also zoom with: - Ctrl+Scroll or Cmd+Scroll on mouse

Layout Lock¶

By default, node positions are locked to prevent accidental movement:

Click the lock button to toggle. When unlocked, an orange dashed border appears around the canvas as a visual indicator.

Reset Layout¶

When unlocked, a Reset (↺) button appears to restore nodes to their original positions.

Grid and Snap¶

The editor displays a dotted grid background. When layout is unlocked, nodes snap to the grid for clean alignment.

Theme¶

The editor follows your system/app theme preference: - Dark theme: Dark background with light text (default) - Light theme: Light background with dark text

Theme can be configured in Settings.

Mobile Experience¶

On mobile devices: - Swipe between Chat and Workflow views - Tap nodes to view details - Long-press for context menu - Minimap is hidden to save space - Touch-optimized button sizes (minimum 44px targets)

Tips and Best Practices¶

1. Review before deploying: Always use Simulate to preview what will happen before running for real

2. Connect apps first: Amber nodes indicate pending connections. Click the key icon to connect before running

3. Use the drawer tabs: Different tabs are useful for different editing needs—Config for parameters, Prompt for AI regeneration, Code for custom logic

4. Save checkpoints: Use the save button frequently when making complex changes

5. Zoom to fit: After significant changes, use the Fit button to see your entire workflow

6. Lock layout: Keep layout locked unless you specifically need to rearrange nodes to avoid accidental changes