initial boilerplate

src/App.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import ReactFlow, {
+  Controls,
+  Background,
+  MiniMap,
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+  useNodesState,
+  useEdgesState,
+  Node,
+  Edge,
+  Connection,
+  NodeChange,
+  EdgeChange,
+} from 'reactflow'
+import CustomNode from './components/CustomNode'
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    position: { x: 250, y: 5 },
+    data: { label: 'Node A' },
+    type: 'custom',
+  },
+  {
+    id: '2',
+    position: { x: 100, y: 200 },
+    data: { label: 'Node B' },
+    type: 'custom',
+  },
+]
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2' },
+]
+
+export default function App() {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+
+  const nodeTypes = React.useMemo(() => ({ custom: CustomNode }), [])
+
+  const onConnect = React.useCallback(
+    (params: Connection) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges]
+  )
+
+  return (
+    <div className="reactflow-wrapper">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        fitView
+      >
+        <Background />
+        <Controls />
+        <MiniMap />
+      </ReactFlow>
+    </div>
+  )
+}

src/components/CustomNode.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Handle, Position } from 'reactflow'
+
+export default function CustomNode({ data }: any) {
+  return (
+    <div className="p-3 rounded-lg bg-white shadow-md border border-gray-200 w-48">
+      <div className="text-sm font-medium mb-2">{data.label}</div>
+      <div className="text-xs text-gray-500">Custom content</div>
+
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="a"
+        style={{ background: '#10B981', width: 10, height: 10 }}
+      />
+
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="b"
+        style={{ background: '#3B82F6', width: 10, height: 10 }}
+      />
+    </div>
+  )
+}

src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './styles.css'
+import 'reactflow/dist/style.css'
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

src/styles.css

@@ -0,0 +1,20 @@
+@import "/node_modules/shadcn/dist/tailwind.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body,
+#root {
+    height: 100%;
+}
+
+body {
+    @apply bg-gray-50 text-gray-900;
+}
+
+.reactflow-wrapper {
+    width: 100%;
+    height: 100vh;
+}