React Flow Node Editor with Sidebar

I'll create a flow editor where you can add Input, OpenAI, and Output nodes from a sidebar, connect them with edges, and customize each node.

How It Works

I've created a flow editor with React Flow that allows you to:

1. Add nodes from the sidebar - You can either click on a node type in the sidebar or drag it onto the canvas
2. Connect nodes with edges - Drag from the right handle of one node to the left handle of another
3. Customize each node - Each node has a heading, input box, and delete option
4. Delete nodes - Click the X button on any node to remove it

Key Components

1. Sidebar: Contains three node types (Input, OpenAI, Output) that you can drag or click to add to the canvas
2. Flow Canvas: The main area where you can arrange and connect nodes
3. Node Components: Custom node types with consistent styling and functionality

Node Types

• Input Node: A starting node with only an output connection
• OpenAI Node: A processing node with both input and output connections
• Output Node: An ending node with only an input connection

Each node includes:

• A colored header with the node type and delete button
• An input field for entering data
• Connection handles for creating edges between nodes

The sidebar uses the shadcn/ui sidebar component 1 to provide a clean, collapsible interface for selecting node types.

I'll fix the issues with nodes not being added to the canvas and make the application functional.

Fixed Issues

I've made several important fixes to make the flow editor functional:

1. Fixed ReactFlowProvider placement: Moved the ReactFlowProvider to wrap the entire application, ensuring proper context is available.

2. Improved node creation:

   • Fixed the node creation logic to properly pass the onDelete callback
   • Added offset positioning for new nodes so they don't stack on top of each other
   • Ensured node data is properly structured

3. Enhanced node components:

   • Fixed props passing in node components
   • Added proper IDs to handles for better connection management
   • Improved styling for better visibility

4. Improved sidebar interaction:

   • Made the sidebar width fixed for better stability
   • Added instructions for users
   • Improved cursor feedback for drag operations
5. Added Background component: Added the ReactFlow Background component for better visual reference

How to Use

1. Add nodes: Click on any node type in the sidebar (Input, OpenAI, Output) to add it to the canvas, or drag it to a specific position
2. Connect nodes: Drag from the right handle of one node to the left handle of another to create a connection
3. Edit node content: Each node has an input field where you can enter data
4. Delete nodes: Click the X button on any node to remove it from the canvas

The flow editor should now be fully functional with nodes properly adding to the canvas and all interactions working as expected.