@og-mcp/reactflow-mcp 1.0.4 → 1.0.6

package/dist/tools/generate-flow.js

@@ -41,22 +41,22 @@ function register(server) {
         if (desc.includes("custom node") || desc.includes("custom-node")) {
             imports.add("Handle");
             imports.add("Position");
-            additionalComponents += `
-type CustomNodeData = { label: string };
-type CustomNodeType = Node<CustomNodeData, 'custom'>;
-
-const CustomNode = memo(({ data, selected }: NodeProps<CustomNodeType>) => (
-  <>
-    <Handle type="target" position={Position.Left} />
-    <div className={\`px-4 py-2 rounded border shadow-sm bg-white \${selected ? 'border-blue-500' : 'border-gray-200'}\`}>
-      {data.label}
-    </div>
-    <Handle type="source" position={Position.Right} />
-  </>
-));
-CustomNode.displayName = 'CustomNode';
-
-const nodeTypes = { custom: CustomNode };
+            additionalComponents += `
+type CustomNodeData = { label: string };
+type CustomNodeType = Node<CustomNodeData, 'custom'>;
+
+const CustomNode = memo(({ data, selected }: NodeProps<CustomNodeType>) => (
+  <>
+    <Handle type="target" position={Position.Left} />
+    <div className={\`px-4 py-2 rounded border shadow-sm bg-white \${selected ? 'border-blue-500' : 'border-gray-200'}\`}>
+      {data.label}
+    </div>
+    <Handle type="source" position={Position.Right} />
+  </>
+));
+CustomNode.displayName = 'CustomNode';
+
+const nodeTypes = { custom: CustomNode };
 `;
             extraImports.push("import { memo } from 'react';");
             xyflowImports.add("type NodeProps");
@@ -66,21 +66,21 @@ const nodeTypes = { custom: CustomNode };
         // Drag and drop
         if (desc.includes("drag") && desc.includes("drop") || desc.includes("sidebar")) {
             xyflowImports.add("useReactFlow");
-            beforeReturn += `
-  const { screenToFlowPosition, addNodes } = useReactFlow();
-
-  const onDragOver = useCallback((event: React.DragEvent) => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'move';
-  }, []);
-
-  const onDrop = useCallback((event: React.DragEvent) => {
-    event.preventDefault();
-    const type = event.dataTransfer.getData('application/reactflow');
-    if (!type) return;
-    const position = screenToFlowPosition({ x: event.clientX, y: event.clientY });
-    addNodes({ id: crypto.randomUUID(), type, position, data: { label: 'New Node' } });
-  }, [screenToFlowPosition, addNodes]);
+            beforeReturn += `
+  const { screenToFlowPosition, addNodes } = useReactFlow();
+
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    const type = event.dataTransfer.getData('application/reactflow');
+    if (!type) return;
+    const position = screenToFlowPosition({ x: event.clientX, y: event.clientY });
+    addNodes({ id: crypto.randomUUID(), type, position, data: { label: 'New Node' } });
+  }, [screenToFlowPosition, addNodes]);
 `;
             extraImports.push("import { useCallback } from 'react';");
             flowProps.push("onDragOver={onDragOver}", "onDrop={onDrop}");
@@ -93,27 +93,27 @@ const nodeTypes = { custom: CustomNode };
         if (desc.includes("dag") || desc.includes("cycle") || desc.includes("pipeline")) {
             xyflowImports.add("getOutgoers");
             xyflowImports.add("useReactFlow");
-            beforeReturn += `
-  const { getNodes, getEdges } = useReactFlow();
-
-  const isValidConnection = useCallback((connection: Connection) => {
-    const allNodes = getNodes();
-    const allEdges = getEdges();
-    const target = allNodes.find((n) => n.id === connection.target);
-    const source = allNodes.find((n) => n.id === connection.source);
-    if (!target || !source) return false;
-    // Prevent cycles
-    const hasCycle = (node: Node, visited = new Set<string>()): boolean => {
-      if (visited.has(node.id)) return false;
-      visited.add(node.id);
-      if (node.id === source.id) return true;
-      for (const outgoer of getOutgoers(node, allNodes, allEdges)) {
-        if (hasCycle(outgoer, visited)) return true;
-      }
-      return false;
-    };
-    return !hasCycle(target);
-  }, [getNodes, getEdges]);
+            beforeReturn += `
+  const { getNodes, getEdges } = useReactFlow();
+
+  const isValidConnection = useCallback((connection: Connection) => {
+    const allNodes = getNodes();
+    const allEdges = getEdges();
+    const target = allNodes.find((n) => n.id === connection.target);
+    const source = allNodes.find((n) => n.id === connection.source);
+    if (!target || !source) return false;
+    // Prevent cycles
+    const hasCycle = (node: Node, visited = new Set<string>()): boolean => {
+      if (visited.has(node.id)) return false;
+      visited.add(node.id);
+      if (node.id === source.id) return true;
+      for (const outgoer of getOutgoers(node, allNodes, allEdges)) {
+        if (hasCycle(outgoer, visited)) return true;
+      }
+      return false;
+    };
+    return !hasCycle(target);
+  }, [getNodes, getEdges]);
 `;
             xyflowImports.add("type Connection");
             xyflowImports.add("type Node");
@@ -123,35 +123,35 @@ const nodeTypes = { custom: CustomNode };
         // Store vs useState
         if (useStore) {
             flowProps.push("onNodesChange={onNodesChange}", "onEdgesChange={onEdgesChange}", "onConnect={onConnect}");
-            storeCode = `
-// --- store.ts ---
-import { create } from 'zustand';
-import { type Node, type Edge, type OnNodesChange, type OnEdgesChange, type OnConnect, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
-
-const initialNodes: Node[] = [
-  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
-  { id: '2', position: { x: 250, y: 100 }, data: { label: 'Node 2' } },
-];
-
-const initialEdges: Edge[] = [
-  { id: 'e1-2', source: '1', target: '2' },
-];
-
-type FlowState = {
-  nodes: Node[]; edges: Edge[];
-  onNodesChange: OnNodesChange; onEdgesChange: OnEdgesChange; onConnect: OnConnect;
-};
-
-const useFlowStore = create<FlowState>((set, get) => ({
-  nodes: initialNodes,
-  edges: initialEdges,
-  onNodesChange: (changes) => set({ nodes: applyNodeChanges(changes, get().nodes) }),
-  onEdgesChange: (changes) => set({ edges: applyEdgeChanges(changes, get().edges) }),
-  onConnect: (connection) => set({ edges: addEdge(connection, get().edges) }),
-}));
-
-const selector = (s: FlowState) => s;
-export { useFlowStore, selector };
+            storeCode = `
+// --- store.ts ---
+import { create } from 'zustand';
+import { type Node, type Edge, type OnNodesChange, type OnEdgesChange, type OnConnect, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
+
+const initialNodes: Node[] = [
+  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
+  { id: '2', position: { x: 250, y: 100 }, data: { label: 'Node 2' } },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2' },
+];
+
+type FlowState = {
+  nodes: Node[]; edges: Edge[];
+  onNodesChange: OnNodesChange; onEdgesChange: OnEdgesChange; onConnect: OnConnect;
+};
+
+const useFlowStore = create<FlowState>((set, get) => ({
+  nodes: initialNodes,
+  edges: initialEdges,
+  onNodesChange: (changes) => set({ nodes: applyNodeChanges(changes, get().nodes) }),
+  onEdgesChange: (changes) => set({ edges: applyEdgeChanges(changes, get().edges) }),
+  onConnect: (connection) => set({ edges: addEdge(connection, get().edges) }),
+}));
+
+const selector = (s: FlowState) => s;
+export { useFlowStore, selector };
 `;
             beforeReturn =
                 `  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useFlowStore(selector);\n` +
@@ -164,14 +164,14 @@ export { useFlowStore, selector };
             imports.add("addEdge");
             extraImports.push("import { useCallback } from 'react';");
             beforeReturn =
-                `  const [nodes, setNodes, onNodesChange] = useNodesState([
-    { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
-    { id: '2', position: { x: 250, y: 100 }, data: { label: 'Node 2' } },
-  ]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([
-    { id: 'e1-2', source: '1', target: '2' },
-  ]);
-  const onConnect = useCallback((conn) => setEdges((eds) => addEdge(conn, eds)), [setEdges]);
+                `  const [nodes, setNodes, onNodesChange] = useNodesState([
+    { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
+    { id: '2', position: { x: 250, y: 100 }, data: { label: 'Node 2' } },
+  ]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([
+    { id: 'e1-2', source: '1', target: '2' },
+  ]);
+  const onConnect = useCallback((conn) => setEdges((eds) => addEdge(conn, eds)), [setEdges]);
 ` + beforeReturn;
             flowProps.push("onNodesChange={onNodesChange}", "onEdgesChange={onEdgesChange}", "onConnect={onConnect}");
         }

package/package.json

@@ -1,54 +1,54 @@
-{
-  "name": "@og-mcp/reactflow-mcp",
-  "version": "1.0.4",
-  "description": "MCP server that gives AI assistants accurate React Flow (@xyflow/react) v12 documentation, API references, patterns, and code generation",
-  "main": "dist/index.js",
-  "bin": {
-    "reactflow-mcp": "dist/index.js"
-  },
-  "scripts": {
-    "build": "tsc",
-    "start": "node dist/index.js",
-    "dev": "tsc --watch"
-  },
-  "keywords": [
-    "mcp",
-    "model-context-protocol",
-    "reactflow",
-    "xyflow",
-    "react-flow",
-    "react",
-    "node-based-ui",
-    "graph",
-    "flow",
-    "ai",
-    "claude",
-    "cursor",
-    "windsurf"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/codingdud/reactflow-mcp-server.git"
-  },
-  "homepage": "https://github.com/codingdud/reactflow-mcp-server#readme",
-  "bugs": {
-    "url": "https://github.com/codingdud/reactflow-mcp-server/issues"
-  },
-  "author": "Orkait",
-  "license": "MIT",
-  "engines": {
-    "node": ">=18"
-  },
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md"
-  ],
-  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.17.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.0.0",
-    "typescript": "^5.5.0"
-  }
-}
+{
+  "name": "@og-mcp/reactflow-mcp",
+  "version": "1.0.6",
+  "description": "MCP server that gives AI assistants accurate React Flow (@xyflow/react) v12 documentation, API references, patterns, and code generation",
+  "main": "dist/index.js",
+  "bin": {
+    "reactflow-mcp": "dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "dev": "tsc --watch"
+  },
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "reactflow",
+    "xyflow",
+    "react-flow",
+    "react",
+    "node-based-ui",
+    "graph",
+    "flow",
+    "ai",
+    "claude",
+    "cursor",
+    "windsurf"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codingdud/reactflow-mcp-server.git"
+  },
+  "homepage": "https://github.com/codingdud/reactflow-mcp-server#readme",
+  "bugs": {
+    "url": "https://github.com/codingdud/reactflow-mcp-server/issues"
+  },
+  "author": "Orkait",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.17.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.5.0"
+  }
+}