Overview
The workflow editor is a visual, drag-and-drop interface for building automated workflows using AI agents. You can create multi-step processes where agents execute in sequence, with dependencies and conditional logic. This guide explains how to use the editor interface effectively.
Page Layout
The workflow editor is divided into these sections:
Left Panel
- Available agents list
- Search and filter tools
- Logic blocks (when available)
Center Panel
- Workflow canvas (kanban-style board)
- Visual representation of workflow steps
- Drag and drop area for building workflows
Right Pane
- Configuration panel (when editing agents)
- Getting started guide (when no agent selected)
- Agent settings and options
Header
- Workflow name and description
- Action buttons (Run, Schedule, Files, etc.)
- Save status indicator
Header Section
Workflow Information
Name and Description
- Workflow name displayed prominently
- Description shown below name
- Click pencil icon to edit name/description
- Changes save automatically
Save Status
- Shows "Saving…" while changes are being saved
- Displays "Saved" with timestamp when complete
- Shows error indicator if save fails
- Auto-saves as you make changes
Action Buttons
Files Button
- Opens workflow files management modal
- View files created by workflow runs
- Manage workflow-related documents
Schedule Button
- Opens schedule configuration modal
- Set up automated workflow execution
- Configure frequency (daily, weekly, monthly)
- Set time and enable/disable schedule
Last Run Button
- Appears when workflow has been run
- Click to view the most recent execution
- Quick access to run details and results
Run Workflow Button
- Starts workflow execution immediately
- Disabled if workflow has no agents
- Shows "Starting..." while launching
- Navigates to run view after starting
Validation Warning
- Appears if workflow steps need instructions
- Shows count of steps missing configuration
- Click to see validation checklist
- Helps ensure workflow is properly configured
Left Panel: Available Agents
Agents List
What it shows:
- All agents available in your workspace
- Agent avatars and names
- Model provider badges
- Tools and capabilities
How to use:
- Click agent: Adds to workflow and opens config panel
- Drag agent: Drag to workflow canvas to add
- Search: Use search box to find specific agents
- Filter: Filter by model provider
Search and Filter
Search:
- Type agent name to filter list
- Real-time filtering as you type
- Clear search to show all agents
Filter Dropdown:
- Filter by AI model provider
- Shows only agents using selected model
- "All models" to show everything
- Active filter highlighted
Sections
Agents Section:
- Expandable/collapsible section
- Shows all available agents
- Click caret to toggle visibility
Logic Section:
- Logic blocks for workflow control
- Loop blocks for iteration
- When blocks for conditional logic
Empty State:
- Shows message if no agents available
- Link to create new agents
- Encourages agent creation
Center Panel: Workflow Canvas
Canvas Overview
Visual Layout:
- Kanban-style board showing workflow steps
- Agents displayed as cards
- Visual hierarchy shows dependencies
- Indentation indicates parent-child relationships
Card Display:
- Each workflow step shown as a card
- Agent avatars and names visible
- Provider logos and tool indicators
- Status indicators (when running)
- Connection lines show dependencies
Adding Agents to Workflow
Method 1: Click to Add
1. Click an agent in the left panel
2. Configuration panel opens
3. Configure agent settings
4. Save to add to workflow
Method 2: Drag and Drop
1. Drag agent from left panel
2. Drop onto workflow canvas
3. Drop between cards to insert at position
4. Drop on card to make it a dependent step
Visual Feedback:
- Drop zones highlight when dragging
- Insertion indicators show where agent will be placed
- Cards become semi-transparent while dragging
Drag and Drop
How Drag and Drop Works
Dragging Agents:
- Click and hold agent card
- Drag to desired location
- Release to drop
Drop Zones:
- Between cards: Inserts at that position
- On card: Makes agent a dependent (child) of that card
- Canvas area: Adds to end of workflow
Visual Indicators:
- Highlighted drop zones
- Insertion lines between cards
- Card opacity changes while dragging
Reordering Steps
How to reorder:
1. Drag a workflow step card
2. Drop at new position
3. Workflow automatically updates
4. Dependencies adjust if needed
What happens:
- Step moves to new position
- Other steps shift accordingly
- Dependencies preserved or updated
- Changes save automatically
Creating Dependencies
Making a step dependent:
1. Drag agent card onto another card
2. Drop when "on card" indicator appears
3. Agent becomes child of parent card
4. Executes after parent completes
Visual representation:
- Child cards indented under parent
- Connection lines show relationships
- Color-coded relationship indicators
- Nested structure shows hierarchy
Agent Cards in Workflow
Card Information
Displayed details:
- Agent avatar/image
- Agent name
- Model provider badge
- Tools and capabilities
- Custom instructions preview (if set)
Visual indicators:
- Relationship colors (for dependent agents)
- Parent connector lines
- Child count badges
- Status indicators
Card Actions
Click card:
- Opens configuration panel
- Edit agent settings for this step
- Modify instructions and behavior
Menu button (three dots):
- Edit: Open configuration panel
- Add Dependent: Add child step
- Delete: Remove from workflow
Add Dependent button:
- Quick way to add child steps
- Opens configuration panel
- Creates dependent relationship
Right Panel
Configuration Panel
When it appears:
- When adding new agent to workflow
- When editing existing workflow step
- When adding dependent agent
What it shows:
- Agent selection (if adding)
- Custom instructions field
- Agent settings and options
- Advanced configuration options
Actions:
- Save: Add or update workflow step
- Cancel: Close without saving
Getting Started Panel
When it appears:
- When no agent is selected
- Default view when panel is closed
What it shows:
- Quick tips for building workflows
- Instructions for using the editor
- Total agents count in workflow
- Helpful guidance
Dependencies and Relationships
Understanding Dependencies
Parent-Child Relationships:
- Parent steps execute first
- Child steps execute after parent completes
- Multiple children can depend on one parent
- Visual indentation shows hierarchy
Sequential Execution:
- Steps without dependencies run in order
- Steps with dependencies wait for parents
- Parallel execution possible for independent steps
Visual Representation:
- Indented cards show children
- Connection lines indicate relationships
- Color-coded relationship badges
- Nested structure displays flow
Managing Dependencies
Creating dependencies:
- Drag card onto parent card
- Use "Add Dependent" button
- Configure in agent settings
Removing dependencies:
- Drag child card away from parent
- Drop between other cards
- Dependencies update automatically
Reordering with dependencies:
- Drag entire parent-child groups together
- Children move with parent
- Dependencies preserved
Workflow Actions
Running Workflows
How to run:
1. Click "Run Workflow" button in header
2. Workflow starts executing
3. Navigate to run view automatically
4. Monitor execution progress
Requirements:
- Workflow must have at least one agent
- All steps should be configured
- Validation warnings should be addressed
What happens:
- Workflow executes step by step
- Each agent runs in sequence
- Dependencies respected
- Results available in run view
Scheduling Workflows
How to schedule:
1. Click "Schedule" button
2. Configure frequency (daily, weekly, monthly)
3. Set time (hour and minute)
4. Enable or disable schedule
5. Save schedule
Schedule options:
- Daily: Runs every day at specified time
- Weekly: Runs on specific day of week
- Monthly: Runs on specific day of month
- Input JSON: Optional input data for scheduled runs
Managing schedules:
- Edit existing schedule
- Disable without deleting
- Delete schedule completely
Code View
Accessing code view:
- Click code icon in workflow canvas
- Opens modal with workflow JSON
- View workflow structure as code
Code view features:
- Export: Copy workflow configuration
- Import: Import workflow from JSON
- Validation: Check for errors before import
- Format: Pretty-printed JSON
Use cases:
- Backup workflow configuration
- Share workflows between workspaces
- Version control workflows
- Advanced workflow management
Files Management
Accessing files:
- Click "Files" button in header
- Opens workflow files modal
- View all files created by workflow runs
File features:
- Browse files by workflow run
- Preview file contents
- Download files
- Reference files in agent instructions
Agent Configuration
Configuring Workflow Steps
When configuring:
- Adding new agent to workflow
- Editing existing workflow step
- Adding dependent agent
Configuration options:
- Custom Instructions: Step-specific instructions
- Agent Settings: Override agent defaults
- Human Input: Require human approval
- File Embedding: Auto-embed generated files
Settings inheritance:
- Can inherit from agent defaults
- Can override with step-specific settings
- Flexible configuration per step
Best Practices
Building Effective Workflows
1. Plan your flow: Think about step order before building
2. Use dependencies: Create logical parent-child relationships
3. Configure instructions: Add step-specific instructions when needed
4. Test incrementally: Add steps one at a time and test
5. Use clear names: Name workflow and steps descriptively
Organizing Workflows
1. Logical grouping: Group related steps together
2. Clear dependencies: Make parent-child relationships obvious
3. Minimize nesting: Avoid overly deep dependency trees
4. Document purpose: Use descriptions to explain workflow goals
Managing Complex Workflows
1. Break into sections: Use logic blocks to organize flow
2. Test components: Test individual steps before full workflow
3. Use validation: Check validation warnings before running
4. Monitor runs: Review execution results to improve workflow
Troubleshooting
Common Issues
Agents not appearing:
- Check search/filter settings
- Verify agents exist in workspace
- Refresh page if needed
Drag and drop not working:
- Ensure you're dragging from correct area
- Check that drop zone is highlighted
- Try clicking to add instead
Dependencies not saving:
- Check save status indicator
- Wait for save to complete
- Refresh page if issues persist
Workflow won't run:
- Ensure at least one agent is added
- Check validation warnings
- Verify all steps are configured
Save errors:
- Check internet connection
- Verify workflow name is set
- Try saving again
- Check error message for details
Summary
The workflow editor provides an intuitive interface for building complex, multi-step automated processes with AI agents.
Key features:
- Visual editor: Drag-and-drop workflow builder
- Agent management: Add, configure, and reorder steps
- Dependencies: Create parent-child relationships
- Execution: Run workflows manually or on schedule
- Code view: Export/import workflow configurations
- File management: Access workflow-generated files
Main sections:
- Left panel: Available agents and tools
- Center panel: Workflow canvas for building
- Right panel: Configuration and guidance
- Header: Workflow info and actions
Workflow building:
- Drag agents to canvas to add steps
- Drop on cards to create dependencies
- Configure each step as needed
- Run when ready or schedule for automation