Built-In Node Examples

CustomNode — Rectangle (Most Common)

File: packages/flow-studio-designer/src/components/Nodes/CustomNode.tsx

The default rectangular node used by HTTP Request, Send Email, JSON Transform, and most integration nodes. Features:

• Coloured header bar with icon and label
• One main input handle (left) and one main output handle (right)
• Optional error output handle (right, lower position)
• Execution status border overlay in execution mode

CircleNode — Circle

File: packages/flow-studio-designer/src/components/Nodes/CircleNode.tsx

Used for trigger nodes and terminal nodes. A circle with centred icon and label below. Has one source handle at the bottom (for triggers). Demonstrates how to render without a header/body split.

DiamondNode — Diamond

Used for if-condition and switch gateway nodes. The diamond shape is achieved with a rotated square div. Handles are placed at the four compass points — each output arm represents a conditional branch. The label is centred inside the diamond.

AIAgentNode — Multi-Handle Rectangle

File: packages/flow-studio-designer/src/components/Nodes/AIAgentNode.tsx

The most complex built-in renderer. Features multiple dynamically-rendered handle groups on the right side — one per tool/capability connection. Each handle group is labelled. Demonstrates how to render handles from data.ports dynamically:

// Dynamic handle rendering from port data
{this.props.data.ports
  .filter(p => p.portType === 'source')
  .map(port => (
    <CustomHandle
      key={port.portKey}
      type="source"
      position={Position.Right}
      id={port.portKey}
      isErrorPort={port.isErrorPort}
      label={port.label}
    />
  ))
}