Workflow Editor

Overview

The Workflow Editor is the main canvas for building AI workflows. It renders a full React Flow graph where you place blocks, draw connections between them, and configure each step of your automation pipeline. The widget runs inside its own socket connection and workflow store, so multiple editors can operate independently in the same workspace.

Features

• React Flow canvas with pan, zoom, and node selection built in
• Block toolbar in the header with searchable dropdown that lists blocks, tools, and triggers grouped by category; drag a block from the toolbar onto the canvas to add it
• Loop and parallel blocks available as special toolbar items for control-flow logic
• Floating controls for quick canvas actions (enabled by default in the widget configuration)
• Training controls toggle that lets you switch training-mode overlays on or off per widget
• Diff controls for reviewing version changes against a previous workflow state
• Trigger list showing all triggers attached to the workflow
• Viewport-aware positioning -- the widget tracks its own bounding rect so new blocks drop at the visible center of the canvas, even when the widget is embedded in a small panel
• Nested subflow validation with real-time error highlighting when a subflow reference is invalid
• Trigger warning dialog that fires when you add a duplicate trigger or hit another trigger constraint

Usage

Adding the widget

Open the widget picker in any workspace panel and select Workflow Editor. The widget loads the active workflow for the current workspace. If no workflows exist yet, it displays a placeholder message.

Header layout

The header is split into three sections:

• Left: the block toolbar -- a dropdown to browse and search available blocks, tools, and triggers, then add them to the canvas
• Center: a workflow selector dropdown that lets you switch between workflows in the workspace
• Right: the control bar with execution, save, and workflow-level actions

Key interactions

1. Add a block -- open the toolbar dropdown, search or browse, then click a block to place it at the viewport center
2. Connect blocks -- drag from an output handle to an input handle to create an edge
3. Select and configure -- click a node to select it; its settings appear in the paired Copilot or Variables widget
4. Delete -- select a node or edge and press Delete
5. Undo / Redo -- standard keyboard shortcuts

Pair color syncing

When assigned a pair color, the editor synchronizes its active workflow with other widgets sharing the same color. Changing the workflow in the header selector broadcasts the selection to all paired widgets. When the pair color is gray (unlinked), the widget manages its own selection independently via widget params.

Configuration

The canvas UI is controlled by WorkflowCanvasUIConfig:

These defaults are set at the widget level and merged with any layout-level overrides.

Related