Flow Studio
Port Types
Ports are the typed connection points on each node. Every port has a direction (input or output), a key that identifies it, and properties that control how it behaves during connection and execution.
Port Direction
| Direction | React Flow Term | Position | Purpose |
|---|---|---|---|
| Input | target | Left or Top of node | Receives data and control flow from upstream nodes |
| Output | source | Right or Bottom of node | Sends data and control flow to downstream nodes |
ProcessElementPort Model
interface ProcessElementPort {
portKey: string; // unique identifier on this node (e.g., "output", "true", "error")
portType: 'source' | 'target'; // direction
isMainPort: boolean; // the primary data in/out port
isErrorPort: boolean; // error routing port (renders red)
isRequired: boolean; // must be connected for the workflow to be valid
isMultiple: boolean; // can accept multiple incoming connections
label?: string; // display label shown on the canvas
dataType?: string; // optional type hint ('any', 'string', 'number', 'object', 'array')
}Standard Port Layout
Most nodes follow this standard layout:
- Main input — left side, blue,
isMainPort: true - Main output — right side, blue,
isMainPort: true - Error output — bottom-right or separate position, red,
isErrorPort: true
Dynamic Ports
Some nodes generate ports dynamically based on configuration:
- switch — creates one output port per case value you configure
- approval — always has approved, rejected, timeout (fixed dynamic set)
- parallel-fork — creates output ports equal to the branch count you configure
- ai-agent — has fixed main + optional tool and memory input ports
Port Hover Behaviour
When you hover over a node in Design Mode, all its ports become visible as small squares. Hovering directly over a port:
- The port enlarges and shows a connection cursor
- A tooltip shows the port key and label
- If the port
isRequiredand unconnected, an amber indicator appears