Designing a Drag-and-Drop Neural Builder with React Flow
A deep dive into the architecture canvas implementation in Agentic Assistants and how drag-and-drop model composition was wired in the WebUI.
Why Build This UI
Many architecture design tools jump straight to code. That is efficient for experts, but it hides design mistakes until late.
The WebUI in agentic_assistants adds a visual architecture layer system through:
webui/src/components/model-architectures/ArchitectureCanvas.tsxwebui/src/components/model-architectures/ArchitectureNodePalette.tsxwebui/src/components/model-architectures/ArchitecturePropertiesPanel.tsx
This makes architecture design inspectable before export.
The Core Interaction Pattern
The palette sends node type data via drag payload:
event.dataTransfer.setData("application/reactflow/architecture-node", nodeType);
The canvas receives that payload in onDrop, resolves a node definition, and inserts a graph node with defaults.
That split keeps palette concerns and graph concerns separate, which makes future node categories easier to add.
Why React Flow Was A Good Fit
@xyflow/react gave us the right primitives out of the box:
- node/edge state transitions
- minimap and controls
- grid snapping
- connection handling
The important part is not visual polish. It is consistency: pipelines and model architecture tools can share interaction patterns.
Lessons From The Implementation
Three details made the canvas feel stable:
- Snap grid enabled to prevent visual drift
- Node selection state propagated into the properties panel
- Deterministic node defaults sourced from typed definitions
Without those, graph editing quickly becomes frustrating.
What I Would Add Next
My next improvements would be:
- multi-select edits for repeated blocks
- subgraph templates for common transformer stacks
- architecture diff view between revisions
The current foundation supports all three.
Practical Takeaway
If your toolchain includes both model experimentation and deployment workflows, a visual builder can reduce iteration cost, but only if the underlying node schema is strict and exportable.