@og-mcp/reactflow-mcp 1.0.4 → 1.0.6

package/dist/data/hooks.js

@@ -7,37 +7,37 @@ const useReactFlowHook = {
     description: "Returns a ReactFlowInstance to update nodes/edges, manipulate the viewport, or query flow state. Does NOT cause re-renders on state changes.",
     importPath: "import { useReactFlow } from '@xyflow/react'",
     returns: "ReactFlowInstance",
-    usage: `const { getNodes, setNodes, addNodes, getEdges, setEdges, addEdges,
-  fitView, zoomIn, zoomOut, getViewport, setViewport,
-  screenToFlowPosition, deleteElements, updateNode, updateNodeData,
+    usage: `const { getNodes, setNodes, addNodes, getEdges, setEdges, addEdges,
+  fitView, zoomIn, zoomOut, getViewport, setViewport,
+  screenToFlowPosition, deleteElements, updateNode, updateNodeData,
   getIntersectingNodes, toObject } = useReactFlow();`,
     examples: [
         {
             title: "Add node on button click",
             category: "interaction",
-            code: `function AddNodeButton() {
-  const { addNodes, screenToFlowPosition } = useReactFlow();
-  const onClick = () => {
-    addNodes({
-      id: crypto.randomUUID(),
-      position: screenToFlowPosition({ x: 200, y: 200 }),
-      data: { label: 'New Node' },
-    });
-  };
-  return <button onClick={onClick}>Add Node</button>;
+            code: `function AddNodeButton() {
+  const { addNodes, screenToFlowPosition } = useReactFlow();
+  const onClick = () => {
+    addNodes({
+      id: crypto.randomUUID(),
+      position: screenToFlowPosition({ x: 200, y: 200 }),
+      data: { label: 'New Node' },
+    });
+  };
+  return <button onClick={onClick}>Add Node</button>;
 }`,
         },
         {
             title: "Delete selected elements",
             category: "interaction",
-            code: `function DeleteButton() {
-  const { deleteElements, getNodes, getEdges } = useReactFlow();
-  const onClick = async () => {
-    const selectedNodes = getNodes().filter((n) => n.selected);
-    const selectedEdges = getEdges().filter((e) => e.selected);
-    await deleteElements({ nodes: selectedNodes, edges: selectedEdges });
-  };
-  return <button onClick={onClick}>Delete Selected</button>;
+            code: `function DeleteButton() {
+  const { deleteElements, getNodes, getEdges } = useReactFlow();
+  const onClick = async () => {
+    const selectedNodes = getNodes().filter((n) => n.selected);
+    const selectedEdges = getEdges().filter((e) => e.selected);
+    await deleteElements({ nodes: selectedNodes, edges: selectedEdges });
+  };
+  return <button onClick={onClick}>Delete Selected</button>;
 }`,
         },
     ],
@@ -54,33 +54,33 @@ const useNodesStateHook = {
     description: "Like React's useState but with a built-in change handler for nodes. Quick prototyping of controlled flows without Zustand.",
     importPath: "import { useNodesState } from '@xyflow/react'",
     returns: "[Node[], setNodes, onNodesChange]",
-    usage: `const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-
+    usage: `const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+
 <ReactFlow nodes={nodes} onNodesChange={onNodesChange} />`,
     examples: [
         {
             title: "Minimal controlled flow",
             category: "quickstart",
-            code: `import { ReactFlow, useNodesState, useEdgesState, addEdge } from '@xyflow/react';
-
-const initialNodes = [
-  { id: '1', position: { x: 0, y: 0 }, data: { label: 'A' } },
-  { id: '2', position: { x: 200, y: 100 }, data: { label: 'B' } },
-];
-const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
-
-export default function Flow() {
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback((connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
-
-  return (
-    <ReactFlow
-      nodes={nodes} edges={edges}
-      onNodesChange={onNodesChange} onEdgesChange={onEdgesChange}
-      onConnect={onConnect} fitView
-    />
-  );
+            code: `import { ReactFlow, useNodesState, useEdgesState, addEdge } from '@xyflow/react';
+
+const initialNodes = [
+  { id: '1', position: { x: 0, y: 0 }, data: { label: 'A' } },
+  { id: '2', position: { x: 200, y: 100 }, data: { label: 'B' } },
+];
+const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
+
+export default function Flow() {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = useCallback((connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes} edges={edges}
+      onNodesChange={onNodesChange} onEdgesChange={onEdgesChange}
+      onConnect={onConnect} fitView
+    />
+  );
 }`,
         },
     ],
@@ -125,24 +125,24 @@ const useNodesDataHook = {
     description: "Subscribe to data changes of specific nodes by ID. More efficient than useNodes when you only need certain nodes' data.",
     importPath: "import { useNodesData } from '@xyflow/react'",
     returns: "Pick<Node, 'id' | 'data' | 'type'>[]",
-    usage: `const nodesData = useNodesData(['node-1', 'node-2']);
-// or single node:
+    usage: `const nodesData = useNodesData(['node-1', 'node-2']);
+// or single node:
 const nodeData = useNodesData('node-1');`,
     examples: [
         {
             title: "Display connected node data",
             category: "custom-nodes",
-            code: `function DisplayNode({ id }) {
-  const connections = useHandleConnections({ type: 'target' });
-  const sourceIds = connections.map((c) => c.source);
-  const sourcesData = useNodesData(sourceIds);
-
-  return (
-    <div>
-      <Handle type="target" position={Position.Left} />
-      <div>Connected sources: {sourcesData.map((d) => d.data.label).join(', ')}</div>
-    </div>
-  );
+            code: `function DisplayNode({ id }) {
+  const connections = useHandleConnections({ type: 'target' });
+  const sourceIds = connections.map((c) => c.source);
+  const sourcesData = useNodesData(sourceIds);
+
+  return (
+    <div>
+      <Handle type="target" position={Position.Left} />
+      <div>Connected sources: {sourcesData.map((d) => d.data.label).join(', ')}</div>
+    </div>
+  );
 }`,
         },
     ],
@@ -154,9 +154,9 @@ const useNodeIdHook = {
     description: "Returns the ID of the node it is used inside. Useful deep in the render tree without prop drilling.",
     importPath: "import { useNodeId } from '@xyflow/react'",
     returns: "string | null",
-    usage: `function DeepChildComponent() {
-  const nodeId = useNodeId();
-  return <span>Node: {nodeId}</span>;
+    usage: `function DeepChildComponent() {
+  const nodeId = useNodeId();
+  return <span>Node: {nodeId}</span>;
 }`,
     examples: [],
     relatedApis: ["useInternalNode", "useNodesData"],
@@ -167,24 +167,24 @@ const useConnectionHook = {
     description: "Returns the current connection state during an active connection interaction. Returns null properties when no connection is active. Useful for colorizing handles based on validity.",
     importPath: "import { useConnection } from '@xyflow/react'",
     returns: "ConnectionState",
-    usage: `const connection = useConnection();
+    usage: `const connection = useConnection();
 // connection.inProgress, connection.fromNode, connection.fromHandle, etc.`,
     examples: [
         {
             title: "Colorize handle during connection",
             category: "connections",
-            code: `function CustomHandle({ type, position, id }) {
-  const connection = useConnection();
-  const isTarget = connection.inProgress && connection.fromNode?.id !== useNodeId();
-
-  return (
-    <Handle
-      type={type}
-      position={position}
-      id={id}
-      style={{ background: isTarget ? '#22c55e' : '#6b7280' }}
-    />
-  );
+            code: `function CustomHandle({ type, position, id }) {
+  const connection = useConnection();
+  const isTarget = connection.inProgress && connection.fromNode?.id !== useNodeId();
+
+  return (
+    <Handle
+      type={type}
+      position={position}
+      id={id}
+      style={{ background: isTarget ? '#22c55e' : '#6b7280' }}
+    />
+  );
 }`,
         },
     ],
@@ -215,11 +215,11 @@ const useOnSelectionChangeHook = {
     kind: "hook",
     description: "Listen for changes to both node and edge selection.",
     importPath: "import { useOnSelectionChange } from '@xyflow/react'",
-    usage: `useOnSelectionChange({
-  onChange: ({ nodes, edges }) => {
-    console.log('Selected nodes:', nodes);
-    console.log('Selected edges:', edges);
-  },
+    usage: `useOnSelectionChange({
+  onChange: ({ nodes, edges }) => {
+    console.log('Selected nodes:', nodes);
+    console.log('Selected edges:', edges);
+  },
 });`,
     examples: [],
     relatedApis: ["useReactFlow", "ReactFlow"],
@@ -229,10 +229,10 @@ const useOnViewportChangeHook = {
     kind: "hook",
     description: "Listen for viewport changes (pan, zoom). Provides callbacks for start, change, and end phases.",
     importPath: "import { useOnViewportChange } from '@xyflow/react'",
-    usage: `useOnViewportChange({
-  onStart: (viewport) => console.log('move start', viewport),
-  onChange: (viewport) => console.log('moving', viewport),
-  onEnd: (viewport) => console.log('move end', viewport),
+    usage: `useOnViewportChange({
+  onStart: (viewport) => console.log('move start', viewport),
+  onChange: (viewport) => console.log('moving', viewport),
+  onEnd: (viewport) => console.log('move end', viewport),
 });`,
     examples: [],
     relatedApis: ["useViewport", "useReactFlow"],
@@ -253,7 +253,7 @@ const useStoreHook = {
     kind: "hook",
     description: "Subscribe to internal React Flow Zustand store. Re-exported from Zustand. Use selectors to minimize re-renders.",
     importPath: "import { useStore } from '@xyflow/react'",
-    usage: `const nodes = useStore((state) => state.nodes);
+    usage: `const nodes = useStore((state) => state.nodes);
 const zoom = useStore((state) => state.transform[2]);`,
     examples: [],
     tips: ["Always use a selector function to avoid re-rendering on every state change.", "For most use cases, prefer useReactFlow, useNodes, or useEdges instead."],
@@ -265,8 +265,8 @@ const useStoreApiHook = {
     description: "Returns the Zustand store object directly for on-demand state access without causing re-renders.",
     importPath: "import { useStoreApi } from '@xyflow/react'",
     returns: "StoreApi",
-    usage: `const store = useStoreApi();
-// Access state on demand:
+    usage: `const store = useStoreApi();
+// Access state on demand:
 const nodes = store.getState().nodes;`,
     examples: [],
     relatedApis: ["useStore", "useReactFlow"],
@@ -277,29 +277,29 @@ const useNodesInitializedHook = {
     description: "Returns whether all nodes have been measured and given width/height. Returns false when new nodes are added, then true once measured.",
     importPath: "import { useNodesInitialized } from '@xyflow/react'",
     returns: "boolean",
-    usage: `const initialized = useNodesInitialized();
-
-useEffect(() => {
-  if (initialized) {
-    // Safe to run layout algorithms or fitView
-  }
+    usage: `const initialized = useNodesInitialized();
+
+useEffect(() => {
+  if (initialized) {
+    // Safe to run layout algorithms or fitView
+  }
 }, [initialized]);`,
     examples: [
         {
             title: "Auto-layout on mount",
             category: "layout",
-            code: `function LayoutFlow() {
-  const { fitView } = useReactFlow();
-  const initialized = useNodesInitialized();
-
-  useEffect(() => {
-    if (initialized) {
-      // Run Dagre/ELK layout here, then fitView
-      fitView({ duration: 300 });
-    }
-  }, [initialized, fitView]);
-
-  return <ReactFlow nodes={nodes} edges={edges} />;
+            code: `function LayoutFlow() {
+  const { fitView } = useReactFlow();
+  const initialized = useNodesInitialized();
+
+  useEffect(() => {
+    if (initialized) {
+      // Run Dagre/ELK layout here, then fitView
+      fitView({ duration: 300 });
+    }
+  }, [initialized, fitView]);
+
+  return <ReactFlow nodes={nodes} edges={edges} />;
 }`,
         },
     ],
@@ -311,8 +311,8 @@ const useUpdateNodeInternalsHook = {
     description: "Notify React Flow when you programmatically add/remove handles or change handle positions on a node.",
     importPath: "import { useUpdateNodeInternals } from '@xyflow/react'",
     returns: "(nodeId: string | string[]) => void",
-    usage: `const updateNodeInternals = useUpdateNodeInternals();
-// After modifying handles:
+    usage: `const updateNodeInternals = useUpdateNodeInternals();
+// After modifying handles:
 updateNodeInternals('node-1');`,
     examples: [],
     tips: ["Call this after dynamically adding/removing Handle components inside a custom node."],
@@ -324,7 +324,7 @@ const useKeyPressHook = {
     description: "Listen for specific key codes and returns whether they are currently pressed.",
     importPath: "import { useKeyPress } from '@xyflow/react'",
     returns: "boolean",
-    usage: `const shiftPressed = useKeyPress('Shift');
+    usage: `const shiftPressed = useKeyPress('Shift');
 const ctrlZ = useKeyPress(['Control+z', 'Meta+z']);`,
     examples: [],
     relatedApis: ["ReactFlow"],
@@ -335,7 +335,7 @@ const useInternalNodeHook = {
     description: "Returns an InternalNode object with additional computed properties like positionAbsolute and measured dimensions.",
     importPath: "import { useInternalNode } from '@xyflow/react'",
     returns: "InternalNode | undefined",
-    usage: `const internalNode = useInternalNode('node-1');
+    usage: `const internalNode = useInternalNode('node-1');
 // internalNode.internals.positionAbsolute, internalNode.measured.width, etc.`,
     examples: [],
     relatedApis: ["useReactFlow", "useNodeId"],

package/dist/data/migration.js

@@ -1,48 +1,48 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.V12_MIGRATION = void 0;
-exports.V12_MIGRATION = `# React Flow v12 Migration Guide (from v11)
-
-## Package Change
-\`\`\`bash
-# Remove old package
-npm uninstall reactflow
-
-# Install v12
-npm install @xyflow/react
-\`\`\`
-
-## Import Changes
-\`\`\`tsx
-// v11 (OLD)
-import ReactFlow, { Background, Controls } from 'reactflow';
-import 'reactflow/dist/style.css';
-
-// v12 (NEW)
-import { ReactFlow, Background, Controls } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-\`\`\`
-
-## Key Breaking Changes
-
-| v11 | v12 |
-|-----|-----|
-| \`node.width\` / \`node.height\` | \`node.measured.width\` / \`node.measured.height\` |
-| \`nodeInternals\` | \`nodeLookup\` |
-| \`project()\` | \`screenToFlowPosition()\` |
-| \`getNode(id)\` returns \`null\` | \`getNode(id)\` returns \`undefined\` |
-| \`getEdge(id)\` returns \`null\` | \`getEdge(id)\` returns \`undefined\` |
-| Default export | Named export: \`{ ReactFlow }\` |
-| \`onEdgeUpdate\` | \`onReconnect\` |
-| \`edgesUpdatable\` | \`edgesReconnectable\` |
-| \`updateEdge()\` util | \`reconnectEdge()\` util |
-
-## Type Changes
-\`\`\`tsx
-// v11: generic data in Node type
-type MyNode = Node<{ label: string }>;
-
-// v12: data AND type in generic
-type MyNode = Node<{ label: string }, 'customType'>;
-\`\`\`
+exports.V12_MIGRATION = `# React Flow v12 Migration Guide (from v11)
+
+## Package Change
+\`\`\`bash
+# Remove old package
+npm uninstall reactflow
+
+# Install v12
+npm install @xyflow/react
+\`\`\`
+
+## Import Changes
+\`\`\`tsx
+// v11 (OLD)
+import ReactFlow, { Background, Controls } from 'reactflow';
+import 'reactflow/dist/style.css';
+
+// v12 (NEW)
+import { ReactFlow, Background, Controls } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+\`\`\`
+
+## Key Breaking Changes
+
+| v11 | v12 |
+|-----|-----|
+| \`node.width\` / \`node.height\` | \`node.measured.width\` / \`node.measured.height\` |
+| \`nodeInternals\` | \`nodeLookup\` |
+| \`project()\` | \`screenToFlowPosition()\` |
+| \`getNode(id)\` returns \`null\` | \`getNode(id)\` returns \`undefined\` |
+| \`getEdge(id)\` returns \`null\` | \`getEdge(id)\` returns \`undefined\` |
+| Default export | Named export: \`{ ReactFlow }\` |
+| \`onEdgeUpdate\` | \`onReconnect\` |
+| \`edgesUpdatable\` | \`edgesReconnectable\` |
+| \`updateEdge()\` util | \`reconnectEdge()\` util |
+
+## Type Changes
+\`\`\`tsx
+// v11: generic data in Node type
+type MyNode = Node<{ label: string }>;
+
+// v12: data AND type in generic
+type MyNode = Node<{ label: string }, 'customType'>;
+\`\`\`
 `;