How I Run Agents Off a React Flow Canvas, Not a Diagram

[ EXECUTIVE TEARDOWN // TL;DR ] React Flow can be the control plane for a running agent system, not just a diagram of one. Reframe nodes as capabilities (trigger, agent, tool, output) and edges as typed contracts between them. Typed ports let the canvas reject invalid graphs at draw time, eliminating a class of runtime errors. Keep the render graph (React Flow state) separate from the derived run graph the executor consumes. On IntegrateX I stopped treating the React Flow canvas as a place to sketch workflows and started running the agents directly off it — as the control plane for a running agent system . The same graph a PM drags to say "when a ticket comes in, search the docs, then either answer or escalate" is the exact spec the runtime executes — no shadow YAML, no parallel DSL. The moment you wire it this way, the diagram stops being decoration and becomes the program. Nodes are capabilities, edges are contracts Treat the canvas like a system, not clip art. A node is a capability: trigger, agent, tool, output. An edge is a typed contract that says one capability's output is valid input to the next. React Flow already gives you the primitives you need: custom node components and typed handles (ports). You're not fighting the library; you're finally using the part most demos skip. Nodes are agents and tools; typed ports are the contract; the lit edge is the run actually executing. Typed ports are the whole trick The gap between a pretty drawing and a real orchestrator is whether connections carry meaning. Put a type on each handle — document stream, tool result, terminal "done" — and reject bad edges while the user is drawing. Entire categories of runtime bugs disappear, and your on-call future self stops diffing logs to learn someone piped a string into a tool port. If the port doesn't accept the edge, it can't ship broken. ports.ts // a handle carries a type; the canvas refuses incompatible edges type PortType = " trigger " | " tool " | " text " | " done " ; f