Building Cross-Platform AI Node Editors with React Flow and Prompts
Node-based visual editors are the new paradigm for AI workflow building. Tools like n8n, LangFlow, ComfyUI, and Dify have popularized the concept of building AI pipelines by connecting nodes on a canvas. The underlying technology powering most of these tools in the React ecosystem is React Flow — the leading library for node-based UIs.
Building a React Flow-powered AI workflow editor from scratch involves managing complex state (node positions, edge connections, node data), custom node types, keyboard shortcuts, undo/redo, minimap navigation, and serialization/deserialization of the graph. The AI prompts in this guide generate all of these components precisely.
React Flow Core Concepts You Must Understand
- Nodes: The units of the graph. Each node has an id, type, position (x/y), and data payload. Custom node types are React components you register with React Flow.
- Edges: Connections between node handles. Edges have a source node + handle and a target node + handle. Handles define where connections can be made on the node.
- Handles: The connection points on nodes. A node can have multiple source handles (outputs) and multiple target handles (inputs). Each handle has a unique id within its node.
- The Store: React Flow manages its own internal state using Zustand. You interact with this store via the useReactFlow() hook and the onNodesChange/onEdgesChange callbacks.
Prompt 1: Custom AI Model Node
"Act as a Senior React Flow Engineer. Create a custom React Flow node component in TypeScript named 'AIModelNode' that represents an AI language model in a workflow builder. Requirements: (1) The node accepts NodeProps from @xyflow/react. Its data type: { label: string, model: 'gpt-4o' | 'claude-3-5' | 'gemini-2-0', temperature: number, maxTokens: number, systemPrompt: string }. (2) Render: a header with model icon and selector dropdown, an inline system prompt textarea that updates node data on change, temperature/maxTokens sliders with live value labels. (3) Source handle (output): positioned at the right side, id='output'. (4) Target handles (inputs): positioned at the left, ids='input-text' and 'input-context'. (5) Connection validation: only accept connections from nodes with data.outputType === 'text'. (6) Use Tailwind CSS for styling with a dark card theme (bg-gray-900, border-gray-700). Hovering the node highlights the border. (7) Export the node and its NodeTypes registration object."Prompt 2: Complete Workflow Editor with Zustand
"Build a complete React Flow AI Workflow Editor in TypeScript with Zustand state management. Requirements: (1) A WorkflowStore (Zustand) managing: nodes (Node[]), edges (Edge[]), selectedNodeId, and executionState ('idle' | 'running' | 'success' | 'error'). (2) The ReactFlow canvas with: onNodesChange and onEdgesChange wired to the Zustand store, a node types registry including AIModelNode, PromptTemplateNode, OutputNode, and WebhookNode. (3) A left sidebar with draggable node types that can be dropped onto the canvas using onDrop and onDragOver. (4) A right panel that shows the selected node's properties, updated in real-time. (5) A toolbar with: Run Workflow button, Clear Canvas, Export JSON, Import JSON, and fit-view. (6) Keyboard shortcuts: Delete key removes selected nodes, Ctrl+Z undo (via Zustand temporal middleware), Ctrl+A selects all. (7) Export the graph as { nodes: Node[], edges: Edge[] } JSON via a download button."Prompt 3: Workflow Execution Engine
"Write a TypeScript workflow execution engine for a React Flow graph. The engine takes the serialized { nodes, edges } graph and executes the nodes in topological order. Requirements: (1) Implement Kahn's algorithm to compute execution order (handle cycles with early detection and error reporting). (2) For each node, call an async executeNode(node, inputs) function that dispatches based on node.type (AIModelNode calls OpenAI API, PromptTemplateNode interpolates variables, WebhookNode makes HTTP POST). (3) Pass outputs from source nodes as inputs to connected target nodes, using edge source/target handle IDs to correctly route multi-output nodes. (4) Track execution state per node: 'pending', 'running', 'success', 'error'. Store this in Zustand so the React Flow canvas can show real-time execution status on each node. (5) Support cancellation using AbortController. (6) Return final outputs from all sink nodes (nodes with no outgoing edges)."Pro Tips for React Flow
💡 @xyflow/react vs. reactflow Package
React Flow v12 was renamed to @xyflow/react. If you're starting a new project, always install @xyflow/react. The old reactflow package is maintained for backward compatibility but won't receive new features. The API in v12 changed significantly — AI prompts trained on pre-v12 examples will generate broken code. Always specify "React Flow v12 / @xyflow/react" in your prompts.
⚠️ Performance with 100+ Nodes
React Flow renders all nodes as DOM elements. For graphs with 100+ nodes, enable nodesDraggable= on nodes outside the viewport (using an onNodesChange filter), and use the nodeExtent prop to limit the canvas space. For 1,000+ nodes, consider using WebGL-based rendering with their enterprise package.
Frequently Asked Questions
Q: Is React Flow free for commercial use?
A: React Flow (@xyflow/react) is MIT licensed and completely free for commercial use. The team offers a paid React Flow Pro subscription that provides premium support, pro examples, and a component library — but these are optional. The core library is open source and used in production by companies like Stripe, Typeform, and Shopify.
Q: How do I persist the graph to a database?
A: Serialize the graph using useReactFlow().getNodes() and getEdges(), then store the resulting arrays in your database as JSON. When loading, initialize React Flow with the stored nodes and edges via the defaultNodes and defaultEdges props. For real-time collaboration, use a CRDT library (like Yjs) to sync graph mutations between multiple users without conflicts.
Q: Can React Flow work with Next.js App Router?
A: Yes, but React Flow requires the DOM and must be a Client Component. Mark any file containing ReactFlow with "use client". You may also need to disable SSR for the component using next/dynamic with { ssr: false } to avoid hydration mismatches, since React Flow calculates viewport dimensions on mount.
Naveen Teja Palle
Frontend Architect · AI Tools Builder
Has built visual AI workflow editors using React Flow for enterprise SaaS products. Specializes in complex graph-based UIs with real-time execution engines.
300+ React Flow & Canvas Editor Prompts
Custom nodes, edge animations, subflows, and execution engines — build your AI workflow editor faster.
Explore Web Component Prompts →