@og-mcp/reactflow-mcp 1.0.5 → 1.0.6

package/dist/data/components.js

@@ -64,65 +64,65 @@ const reactFlowComponent = {
         { name: "autoPanOnConnect", type: "boolean", description: "Pan viewport when creating connections near edge.", default: "true" },
         { name: "autoPanOnNodeDrag", type: "boolean", description: "Pan viewport when dragging nodes near edge.", default: "true" },
     ],
-    usage: `import { ReactFlow, Background, Controls } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-
-const nodes = [
-  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
-  { id: '2', position: { x: 200, y: 100 }, data: { label: 'Node 2' } },
-];
-const edges = [{ id: 'e1-2', source: '1', target: '2' }];
-
-export default function Flow() {
-  return (
-    <div style={{ width: '100%', height: '100vh' }}>
-      <ReactFlow nodes={nodes} edges={edges} fitView>
-        <Background />
-        <Controls />
-      </ReactFlow>
-    </div>
-  );
+    usage: `import { ReactFlow, Background, Controls } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+const nodes = [
+  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
+  { id: '2', position: { x: 200, y: 100 }, data: { label: 'Node 2' } },
+];
+const edges = [{ id: 'e1-2', source: '1', target: '2' }];
+
+export default function Flow() {
+  return (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <ReactFlow nodes={nodes} edges={edges} fitView>
+        <Background />
+        <Controls />
+      </ReactFlow>
+    </div>
+  );
 }`,
     examples: [
         {
             title: "Controlled flow with Zustand",
             category: "state-management",
-            code: `import { ReactFlow } from '@xyflow/react';
-import useFlowStore from './store';
-
-const selector = (s) => ({
-  nodes: s.nodes, edges: s.edges,
-  onNodesChange: s.onNodesChange,
-  onEdgesChange: s.onEdgesChange,
-  onConnect: s.onConnect,
-});
-
-export default function Flow() {
-  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useFlowStore(selector);
-  return (
-    <ReactFlow
-      nodes={nodes} edges={edges}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onConnect={onConnect}
-      fitView
-    />
-  );
+            code: `import { ReactFlow } from '@xyflow/react';
+import useFlowStore from './store';
+
+const selector = (s) => ({
+  nodes: s.nodes, edges: s.edges,
+  onNodesChange: s.onNodesChange,
+  onEdgesChange: s.onEdgesChange,
+  onConnect: s.onConnect,
+});
+
+export default function Flow() {
+  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useFlowStore(selector);
+  return (
+    <ReactFlow
+      nodes={nodes} edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      fitView
+    />
+  );
 }`,
         },
         {
             title: "Uncontrolled flow",
             category: "quickstart",
-            code: `import { ReactFlow } from '@xyflow/react';
-
-const defaultNodes = [
-  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Hello' } },
-  { id: '2', position: { x: 200, y: 100 }, data: { label: 'World' } },
-];
-const defaultEdges = [{ id: 'e1-2', source: '1', target: '2' }];
-
-export default function Flow() {
-  return <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} fitView />;
+            code: `import { ReactFlow } from '@xyflow/react';
+
+const defaultNodes = [
+  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Hello' } },
+  { id: '2', position: { x: 200, y: 100 }, data: { label: 'World' } },
+];
+const defaultEdges = [{ id: 'e1-2', source: '1', target: '2' }];
+
+export default function Flow() {
+  return <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} fitView />;
 }`,
         },
     ],
@@ -147,15 +147,15 @@ const backgroundComponent = {
         { name: "color", type: "string", description: "Pattern color." },
         { name: "lineWidth", type: "number", description: "Stroke width for lines/cross variant.", default: "1" },
     ],
-    usage: `<ReactFlow nodes={nodes} edges={edges}>
-  <Background variant={BackgroundVariant.Dots} gap={20} size={1} />
+    usage: `<ReactFlow nodes={nodes} edges={edges}>
+  <Background variant={BackgroundVariant.Dots} gap={20} size={1} />
 </ReactFlow>`,
     examples: [
         {
             title: "Cross pattern background",
             category: "styling",
-            code: `import { Background, BackgroundVariant } from '@xyflow/react';
-
+            code: `import { Background, BackgroundVariant } from '@xyflow/react';
+
 <Background variant={BackgroundVariant.Cross} gap={24} size={2} color="#ddd" />`,
         },
     ],
@@ -173,19 +173,19 @@ const controlsComponent = {
         { name: "position", type: "PanelPosition", description: "Corner position.", default: "'bottom-left'" },
         { name: "orientation", type: "'horizontal' | 'vertical'", description: "Layout direction.", default: "'vertical'" },
     ],
-    usage: `<ReactFlow nodes={nodes} edges={edges}>
-  <Controls position="bottom-left" />
+    usage: `<ReactFlow nodes={nodes} edges={edges}>
+  <Controls position="bottom-left" />
 </ReactFlow>`,
     examples: [
         {
             title: "Custom control button",
             category: "interaction",
-            code: `import { Controls, ControlButton } from '@xyflow/react';
-
-<Controls>
-  <ControlButton onClick={() => console.log('custom action')}>
-    <Icon />
-  </ControlButton>
+            code: `import { Controls, ControlButton } from '@xyflow/react';
+
+<Controls>
+  <ControlButton onClick={() => console.log('custom action')}>
+    <Icon />
+  </ControlButton>
 </Controls>`,
         },
     ],
@@ -205,8 +205,8 @@ const miniMapComponent = {
         { name: "pannable", type: "boolean", description: "Allow panning via minimap.", default: "false" },
         { name: "zoomable", type: "boolean", description: "Allow zooming via minimap.", default: "false" },
     ],
-    usage: `<ReactFlow nodes={nodes} edges={edges}>
-  <MiniMap nodeColor={(n) => n.type === 'input' ? '#6366f1' : '#94a3b8'} pannable zoomable />
+    usage: `<ReactFlow nodes={nodes} edges={edges}>
+  <MiniMap nodeColor={(n) => n.type === 'input' ? '#6366f1' : '#94a3b8'} pannable zoomable />
 </ReactFlow>`,
     examples: [],
     relatedApis: ["ReactFlow", "Background", "Controls"],
@@ -219,10 +219,10 @@ const panelComponent = {
     props: [
         { name: "position", type: "PanelPosition", description: "Corner or side position. E.g. 'top-left', 'top-right', 'bottom-left', 'bottom-right'." },
     ],
-    usage: `<ReactFlow nodes={nodes} edges={edges}>
-  <Panel position="top-left">
-    <h3>Flow Title</h3>
-  </Panel>
+    usage: `<ReactFlow nodes={nodes} edges={edges}>
+  <Panel position="top-left">
+    <h3>Flow Title</h3>
+  </Panel>
 </ReactFlow>`,
     examples: [],
     relatedApis: ["ReactFlow", "Controls", "MiniMap"],
@@ -242,31 +242,31 @@ const handleComponent = {
         { name: "isValidConnection", type: "IsValidConnection", description: "Custom validation logic for connections to this handle." },
         { name: "onConnect", type: "OnConnect", description: "Callback when connection is made to this handle." },
     ],
-    usage: `import { Handle, Position } from '@xyflow/react';
-
-function CustomNode({ data }) {
-  return (
-    <>
-      <Handle type="target" position={Position.Left} />
-      <div>{data.label}</div>
-      <Handle type="source" position={Position.Right} />
-    </>
-  );
+    usage: `import { Handle, Position } from '@xyflow/react';
+
+function CustomNode({ data }) {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} />
+      <div>{data.label}</div>
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
 }`,
     examples: [
         {
             title: "Multiple handles",
             category: "custom-nodes",
-            code: `function MultiHandleNode({ data }) {
-  return (
-    <div className="p-4 border rounded bg-white">
-      <Handle type="target" position={Position.Top} id="a" />
-      <Handle type="target" position={Position.Left} id="b" />
-      <div>{data.label}</div>
-      <Handle type="source" position={Position.Bottom} id="c" />
-      <Handle type="source" position={Position.Right} id="d" />
-    </div>
-  );
+            code: `function MultiHandleNode({ data }) {
+  return (
+    <div className="p-4 border rounded bg-white">
+      <Handle type="target" position={Position.Top} id="a" />
+      <Handle type="target" position={Position.Left} id="b" />
+      <div>{data.label}</div>
+      <Handle type="source" position={Position.Bottom} id="c" />
+      <Handle type="source" position={Position.Right} id="d" />
+    </div>
+  );
 }`,
         },
     ],
@@ -293,29 +293,29 @@ const nodeResizerComponent = {
         { name: "lineStyle", type: "CSSProperties", description: "Style the resize border lines." },
         { name: "keepAspectRatio", type: "boolean", description: "Maintain aspect ratio when resizing.", default: "false" },
     ],
-    usage: `import { NodeResizer } from '@xyflow/react';
-
-function ResizableNode({ data, selected }) {
-  return (
-    <>
-      <NodeResizer isVisible={selected} minWidth={100} minHeight={50} />
-      <div className="p-4">{data.label}</div>
-    </>
-  );
+    usage: `import { NodeResizer } from '@xyflow/react';
+
+function ResizableNode({ data, selected }) {
+  return (
+    <>
+      <NodeResizer isVisible={selected} minWidth={100} minHeight={50} />
+      <div className="p-4">{data.label}</div>
+    </>
+  );
 }`,
     examples: [
         {
             title: "Resizable node with handles",
             category: "custom-nodes",
-            code: `function ResizableNode({ data, selected }) {
-  return (
-    <>
-      <NodeResizer isVisible={selected} minWidth={150} minHeight={80} />
-      <Handle type="target" position={Position.Left} />
-      <div className="p-4 h-full flex items-center justify-center">{data.label}</div>
-      <Handle type="source" position={Position.Right} />
-    </>
-  );
+            code: `function ResizableNode({ data, selected }) {
+  return (
+    <>
+      <NodeResizer isVisible={selected} minWidth={150} minHeight={80} />
+      <Handle type="target" position={Position.Left} />
+      <div className="p-4 h-full flex items-center justify-center">{data.label}</div>
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
 }`,
         },
     ],
@@ -333,18 +333,18 @@ const nodeToolbarComponent = {
         { name: "offset", type: "number", description: "Distance from node.", default: "10" },
         { name: "nodeId", type: "string | string[]", description: "Attach to specific node(s)." },
     ],
-    usage: `import { NodeToolbar, Position } from '@xyflow/react';
-
-function ToolbarNode({ data }) {
-  return (
-    <>
-      <NodeToolbar position={Position.Top}>
-        <button>Edit</button>
-        <button>Delete</button>
-      </NodeToolbar>
-      <div className="p-4">{data.label}</div>
-    </>
-  );
+    usage: `import { NodeToolbar, Position } from '@xyflow/react';
+
+function ToolbarNode({ data }) {
+  return (
+    <>
+      <NodeToolbar position={Position.Top}>
+        <button>Edit</button>
+        <button>Delete</button>
+      </NodeToolbar>
+      <div className="p-4">{data.label}</div>
+    </>
+  );
 }`,
     examples: [],
     relatedApis: ["EdgeToolbar", "Handle"],
@@ -354,49 +354,49 @@ const edgeLabelRendererComponent = {
     kind: "component",
     description: "Portal for rendering complex HTML labels on edges. Since edges are SVG, this provides a div-based renderer positioned on top of edges.",
     importPath: "import { EdgeLabelRenderer } from '@xyflow/react'",
-    usage: `import { EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
-
-function CustomEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
-  const [edgePath, labelX, labelY] = getBezierPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
-
-  return (
-    <>
-      <path id={id} className="react-flow__edge-path" d={edgePath} />
-      <EdgeLabelRenderer>
-        <div style={{ position: 'absolute', transform: \`translate(-50%, -50%) translate(\${labelX}px,\${labelY}px)\`, pointerEvents: 'all' }}
-             className="nodrag nopan">
-          <button onClick={() => console.log('delete', id)}>x</button>
-        </div>
-      </EdgeLabelRenderer>
-    </>
-  );
+    usage: `import { EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
+
+function CustomEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+  const [edgePath, labelX, labelY] = getBezierPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
+
+  return (
+    <>
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
+      <EdgeLabelRenderer>
+        <div style={{ position: 'absolute', transform: \`translate(-50%, -50%) translate(\${labelX}px,\${labelY}px)\`, pointerEvents: 'all' }}
+             className="nodrag nopan">
+          <button onClick={() => console.log('delete', id)}>x</button>
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
 }`,
     examples: [
         {
             title: "Edge with delete button",
             category: "custom-edges",
-            code: `function ButtonEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
-  const [edgePath, labelX, labelY] = getBezierPath({
-    sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition,
-  });
-  const { setEdges } = useReactFlow();
-
-  return (
-    <>
-      <BaseEdge path={edgePath} />
-      <EdgeLabelRenderer>
-        <div style={{
-          position: 'absolute',
-          transform: \`translate(-50%, -50%) translate(\${labelX}px,\${labelY}px)\`,
-          pointerEvents: 'all',
-        }} className="nodrag nopan">
-          <button onClick={() => setEdges((es) => es.filter((e) => e.id !== id))}>
-            Delete
-          </button>
-        </div>
-      </EdgeLabelRenderer>
-    </>
-  );
+            code: `function ButtonEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition,
+  });
+  const { setEdges } = useReactFlow();
+
+  return (
+    <>
+      <BaseEdge path={edgePath} />
+      <EdgeLabelRenderer>
+        <div style={{
+          position: 'absolute',
+          transform: \`translate(-50%, -50%) translate(\${labelX}px,\${labelY}px)\`,
+          pointerEvents: 'all',
+        }} className="nodrag nopan">
+          <button onClick={() => setEdges((es) => es.filter((e) => e.id !== id))}>
+            Delete
+          </button>
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
 }`,
         },
     ],
@@ -414,11 +414,11 @@ const baseEdgeComponent = {
         { name: "label", type: "ReactNode", description: "Edge label content." },
         { name: "interactionWidth", type: "number", description: "Width of invisible click target.", default: "20" },
     ],
-    usage: `import { BaseEdge, getStraightPath } from '@xyflow/react';
-
-function CustomEdge({ sourceX, sourceY, targetX, targetY }) {
-  const [edgePath] = getStraightPath({ sourceX, sourceY, targetX, targetY });
-  return <BaseEdge path={edgePath} />;
+    usage: `import { BaseEdge, getStraightPath } from '@xyflow/react';
+
+function CustomEdge({ sourceX, sourceY, targetX, targetY }) {
+  const [edgePath] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+  return <BaseEdge path={edgePath} />;
 }`,
     examples: [],
     relatedApis: ["EdgeLabelRenderer", "getBezierPath", "getSmoothStepPath"],
@@ -428,12 +428,12 @@ const viewportPortalComponent = {
     kind: "component",
     description: "Renders components in the same viewport coordinate system as nodes and edges. Content zooms and pans with the flow.",
     importPath: "import { ViewportPortal } from '@xyflow/react'",
-    usage: `<ReactFlow nodes={nodes} edges={edges}>
-  <ViewportPortal>
-    <div style={{ position: 'absolute', transform: 'translate(100px, 100px)' }}>
-      I move with the flow!
-    </div>
-  </ViewportPortal>
+    usage: `<ReactFlow nodes={nodes} edges={edges}>
+  <ViewportPortal>
+    <div style={{ position: 'absolute', transform: 'translate(100px, 100px)' }}>
+      I move with the flow!
+    </div>
+  </ViewportPortal>
 </ReactFlow>`,
     examples: [],
     relatedApis: ["ReactFlow", "Panel"],
@@ -446,17 +446,17 @@ const edgeToolbarComponent = {
     props: [
         { name: "position", type: "Position", description: "Side of edge.", default: "Position.Top" },
     ],
-    usage: `import { EdgeToolbar } from '@xyflow/react';
-
-function CustomEdge(props) {
-  return (
-    <>
-      <BaseEdge path={edgePath} />
-      <EdgeToolbar>
-        <button>Edit</button>
-      </EdgeToolbar>
-    </>
-  );
+    usage: `import { EdgeToolbar } from '@xyflow/react';
+
+function CustomEdge(props) {
+  return (
+    <>
+      <BaseEdge path={edgePath} />
+      <EdgeToolbar>
+        <button>Edit</button>
+      </EdgeToolbar>
+    </>
+  );
 }`,
     examples: [],
     relatedApis: ["NodeToolbar", "EdgeLabelRenderer"],
@@ -483,18 +483,18 @@ const nodeResizeControlComponent = {
         { name: "autoScale", type: "boolean", description: "Scale controls with zoom level.", default: "true" },
         { name: "resizeDirection", type: "'horizontal' | 'vertical'", description: "Constrain resize direction." },
     ],
-    usage: `import { NodeResizeControl } from '@xyflow/react';
-import { GripVertical } from 'lucide-react';
-
-function ResizableNode({ data, selected }) {
-  return (
-    <>
-      <NodeResizeControl minWidth={100} minHeight={50}>
-        <GripVertical className="w-3 h-3" />
-      </NodeResizeControl>
-      <div className="p-4">{data.label}</div>
-    </>
-  );
+    usage: `import { NodeResizeControl } from '@xyflow/react';
+import { GripVertical } from 'lucide-react';
+
+function ResizableNode({ data, selected }) {
+  return (
+    <>
+      <NodeResizeControl minWidth={100} minHeight={50}>
+        <GripVertical className="w-3 h-3" />
+      </NodeResizeControl>
+      <div className="p-4">{data.label}</div>
+    </>
+  );
 }`,
     examples: [],
     tips: [
@@ -511,30 +511,30 @@ const controlButtonComponent = {
     props: [
         { name: "...props", type: "ButtonHTMLAttributes<HTMLButtonElement>", description: "Any valid HTML button props." },
     ],
-    usage: `import { Controls, ControlButton } from '@xyflow/react';
-
-<Controls>
-  <ControlButton onClick={() => alert('Magic!')} title="Do magic">
-    <span>✨</span>
-  </ControlButton>
+    usage: `import { Controls, ControlButton } from '@xyflow/react';
+
+<Controls>
+  <ControlButton onClick={() => alert('Magic!')} title="Do magic">
+    <span>✨</span>
+  </ControlButton>
 </Controls>`,
     examples: [
         {
             title: "Custom control with layout button",
             category: "interaction",
-            code: `import { Controls, ControlButton } from '@xyflow/react';
-
-function FlowControls({ onLayout }) {
-  return (
-    <Controls>
-      <ControlButton onClick={() => onLayout('TB')} title="Vertical layout">
-        ↕
-      </ControlButton>
-      <ControlButton onClick={() => onLayout('LR')} title="Horizontal layout">
-        ↔
-      </ControlButton>
-    </Controls>
-  );
+            code: `import { Controls, ControlButton } from '@xyflow/react';
+
+function FlowControls({ onLayout }) {
+  return (
+    <Controls>
+      <ControlButton onClick={() => onLayout('TB')} title="Vertical layout">
+        ↕
+      </ControlButton>
+      <ControlButton onClick={() => onLayout('LR')} title="Horizontal layout">
+        ↔
+      </ControlButton>
+    </Controls>
+  );
 }`,
         },
     ],
@@ -545,15 +545,15 @@ const reactFlowProviderComponent = {
     kind: "component",
     description: "Provides the React Flow context to child components. Required when using hooks like useReactFlow outside of the ReactFlow component.",
     importPath: "import { ReactFlowProvider } from '@xyflow/react'",
-    usage: `import { ReactFlowProvider } from '@xyflow/react';
-
-function App() {
-  return (
-    <ReactFlowProvider>
-      <Flow />
-      <Sidebar />  {/* Can use useReactFlow() here */}
-    </ReactFlowProvider>
-  );
+    usage: `import { ReactFlowProvider } from '@xyflow/react';
+
+function App() {
+  return (
+    <ReactFlowProvider>
+      <Flow />
+      <Sidebar />  {/* Can use useReactFlow() here */}
+    </ReactFlowProvider>
+  );
 }`,
     examples: [],
     tips: [