@og-mcp/reactflow-mcp 1.0.4 → 1.0.6

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Orkait
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Orkait
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,74 +1,74 @@
-# React Flow MCP Server
-
-MCP server that gives AI assistants accurate [React Flow](https://reactflow.dev) (`@xyflow/react`) v12 documentation, API references, enterprise patterns, and code generation.
-
-
-
-## Tools
-
-| Tool | Description |
-|------|-------------|
-| `list_apis` | Browse all 56 APIs grouped by kind (components, hooks, utilities, types) |
-| `get_api` | Detailed reference for any API — props, usage, examples, tips |
-| `search_docs` | Keyword search across all documentation and code examples |
-| `get_examples` | Code examples by category (15 categories) |
-| `get_pattern` | Enterprise patterns with full implementation (17 patterns) |
-| `get_template` | Production-ready templates: custom-node, custom-edge, zustand-store |
-| `get_migration_guide` | React Flow v11 to v12 migration guide |
-| `generate_flow` | Generate a complete flow component from natural language |
-
-## Resources
-
-| Resource | URI |
-|----------|-----|
-| Cheatsheet | `reactflow://cheatsheet` |
-
-## Patterns
-
-zustand-store, undo-redo, drag-and-drop, auto-layout-dagre, auto-layout-elk, context-menu, copy-paste, save-restore, prevent-cycles, keyboard-shortcuts, performance, dark-mode, ssr, subflows, edge-reconnection, custom-connection-line, auto-layout-on-mount
-
-## Install
-
-### Claude Code
-
-```bash
-claude mcp add reactflow-mcp -- npx -y @codingdud/reactflow-mcp
-```
-
-### Claude Desktop / Cursor / Windsurf
-
-Add to your MCP config:
-
-```json
-{
-  "mcpServers": {
-    "reactflow-mcp": {
-      "command": "npx",
-      "args": ["-y", "@orkait-ai/reactflow-mcp"]
-    }
-  }
-}
-```
-
-### From source
-
-```bash
-git clone https://github.com/codingdud/reactflow-mcp.git
-cd reactflow-mcp-server
-npm install
-npm run build
-npm start
-```
-
-## Development
-
-```bash
-npm install
-npm run dev    # watch mode
-npm run build  # production build
-npm start      # run server
-```
-
-## License
-
-MIT
+# React Flow MCP Server
+
+MCP server that gives AI assistants accurate [React Flow](https://reactflow.dev) (`@xyflow/react`) v12 documentation, API references, enterprise patterns, and code generation.
+
+
+
+## Tools
+
+| Tool | Description |
+|------|-------------|
+| `list_apis` | Browse all 56 APIs grouped by kind (components, hooks, utilities, types) |
+| `get_api` | Detailed reference for any API — props, usage, examples, tips |
+| `search_docs` | Keyword search across all documentation and code examples |
+| `get_examples` | Code examples by category (15 categories) |
+| `get_pattern` | Enterprise patterns with full implementation (17 patterns) |
+| `get_template` | Production-ready templates: custom-node, custom-edge, zustand-store |
+| `get_migration_guide` | React Flow v11 to v12 migration guide |
+| `generate_flow` | Generate a complete flow component from natural language |
+
+## Resources
+
+| Resource | URI |
+|----------|-----|
+| Cheatsheet | `reactflow://cheatsheet` |
+
+## Patterns
+
+zustand-store, undo-redo, drag-and-drop, auto-layout-dagre, auto-layout-elk, context-menu, copy-paste, save-restore, prevent-cycles, keyboard-shortcuts, performance, dark-mode, ssr, subflows, edge-reconnection, custom-connection-line, auto-layout-on-mount
+
+## Install
+
+### Claude Code
+
+```bash
+claude mcp add reactflow-mcp -- npx -y @codingdud/reactflow-mcp
+```
+
+### Claude Desktop / Cursor / Windsurf
+
+Add to your MCP config:
+
+```json
+{
+  "mcpServers": {
+    "reactflow-mcp": {
+      "command": "npx",
+      "args": ["-y", "@orkait-ai/reactflow-mcp"]
+    }
+  }
+}
+```
+
+### From source
+
+```bash
+git clone https://github.com/codingdud/reactflow-mcp.git
+cd reactflow-mcp-server
+npm install
+npm run build
+npm start
+```
+
+## Development
+
+```bash
+npm install
+npm run dev    # watch mode
+npm run build  # production build
+npm start      # run server
+```
+
+## License
+
+MIT

package/dist/data/api-types.js

@@ -27,24 +27,24 @@ const nodeType = {
         { name: "origin", type: "NodeOrigin", description: "Origin point [0-1, 0-1] for positioning.", default: "[0, 0]" },
         { name: "measured", type: "{ width?: number; height?: number }", description: "Read-only measured dimensions." },
     ],
-    usage: `const node: Node = {
-  id: '1',
-  type: 'custom',
-  position: { x: 100, y: 200 },
-  data: { label: 'My Node', status: 'active' },
+    usage: `const node: Node = {
+  id: '1',
+  type: 'custom',
+  position: { x: 100, y: 200 },
+  data: { label: 'My Node', status: 'active' },
 };`,
     examples: [
         {
             title: "Typed custom node data",
             category: "custom-nodes",
-            code: `type MyNodeData = { label: string; status: 'active' | 'inactive' };
-type MyNode = Node<MyNodeData, 'statusNode'>;
-
-const node: MyNode = {
-  id: '1',
-  type: 'statusNode',
-  position: { x: 0, y: 0 },
-  data: { label: 'Server', status: 'active' },
+            code: `type MyNodeData = { label: string; status: 'active' | 'inactive' };
+type MyNode = Node<MyNodeData, 'statusNode'>;
+
+const node: MyNode = {
+  id: '1',
+  type: 'statusNode',
+  position: { x: 0, y: 0 },
+  data: { label: 'Server', status: 'active' },
 };`,
         },
     ],
@@ -82,13 +82,13 @@ const edgeType = {
         { name: "zIndex", type: "number", description: "Z-index." },
         { name: "interactionWidth", type: "number", description: "Width of invisible click target.", default: "20" },
     ],
-    usage: `const edge: Edge = {
-  id: 'e1-2',
-  source: '1',
-  target: '2',
-  type: 'smoothstep',
-  animated: true,
-  label: 'connects to',
+    usage: `const edge: Edge = {
+  id: 'e1-2',
+  source: '1',
+  target: '2',
+  type: 'smoothstep',
+  animated: true,
+  label: 'connects to',
 };`,
     examples: [],
     tips: [
@@ -123,26 +123,26 @@ const nodePropsType = {
         { name: "sourcePosition", type: "Position", description: "Source handle position (default nodes only)." },
         { name: "targetPosition", type: "Position", description: "Target handle position (default nodes only)." },
     ],
-    usage: `import type { NodeProps, Node } from '@xyflow/react';
-
-// Step 1: Define your node type
-type CounterNode = Node<{ initialCount?: number }, 'counter'>;
-
-// Step 2: Use NodeProps<YourNodeType> as the prop type
-export default function CounterNode(props: NodeProps<CounterNode>) {
-  const [count, setCount] = useState(props.data?.initialCount ?? 0);
-
-  return (
-    <div>
-      <p>Count: {count}</p>
-      <button className="nodrag" onClick={() => setCount(count + 1)}>
-        Increment
-      </button>
-    </div>
-  );
-}
-
-// Step 3: Register in nodeTypes (outside component!)
+    usage: `import type { NodeProps, Node } from '@xyflow/react';
+
+// Step 1: Define your node type
+type CounterNode = Node<{ initialCount?: number }, 'counter'>;
+
+// Step 2: Use NodeProps<YourNodeType> as the prop type
+export default function CounterNode(props: NodeProps<CounterNode>) {
+  const [count, setCount] = useState(props.data?.initialCount ?? 0);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button className="nodrag" onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+    </div>
+  );
+}
+
+// Step 3: Register in nodeTypes (outside component!)
 const nodeTypes = { counter: CounterNode };`,
     examples: [],
     tips: [
@@ -187,24 +187,24 @@ const edgePropsType = {
         { name: "style", type: "CSSProperties", description: "Edge SVG path styles." },
         { name: "interactionWidth", type: "number", description: "Width of invisible click target." },
     ],
-    usage: `import type { EdgeProps, Edge } from '@xyflow/react';
-import { BaseEdge, getBezierPath } from '@xyflow/react';
-
-// Step 1: Define your edge type (optional)
-type CustomEdgeType = Edge<{ weight: number }, 'weighted'>;
-
-// Step 2: Use EdgeProps<YourEdgeType>
-function WeightedEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, style }: EdgeProps<CustomEdgeType>) {
-  const [edgePath, labelX, labelY] = getBezierPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
-  return (
-    <>
-      <BaseEdge path={edgePath} style={style} />
-      <text x={labelX} y={labelY} textAnchor="middle">{data?.weight}</text>
-    </>
-  );
-}
-
-// Step 3: Register in edgeTypes (outside component!)
+    usage: `import type { EdgeProps, Edge } from '@xyflow/react';
+import { BaseEdge, getBezierPath } from '@xyflow/react';
+
+// Step 1: Define your edge type (optional)
+type CustomEdgeType = Edge<{ weight: number }, 'weighted'>;
+
+// Step 2: Use EdgeProps<YourEdgeType>
+function WeightedEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, style }: EdgeProps<CustomEdgeType>) {
+  const [edgePath, labelX, labelY] = getBezierPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
+  return (
+    <>
+      <BaseEdge path={edgePath} style={style} />
+      <text x={labelX} y={labelY} textAnchor="middle">{data?.weight}</text>
+    </>
+  );
+}
+
+// Step 3: Register in edgeTypes (outside component!)
 const edgeTypes = { weighted: WeightedEdge };`,
     examples: [],
     tips: [
@@ -225,8 +225,8 @@ const connectionType = {
         { name: "sourceHandle", type: "string | null", description: "Source handle ID." },
         { name: "targetHandle", type: "string | null", description: "Target handle ID." },
     ],
-    usage: `const onConnect = (connection: Connection) => {
-  setEdges((eds) => addEdge(connection, eds));
+    usage: `const onConnect = (connection: Connection) => {
+  setEdges((eds) => addEdge(connection, eds));
 };`,
     examples: [],
     relatedApis: ["Edge", "addEdge", "useConnection"],
@@ -278,15 +278,15 @@ const reactFlowInstanceType = {
         { name: "isNodeIntersecting()", type: "(node, area, partially?) => boolean", description: "Check if node intersects area." },
         { name: "getNodesBounds()", type: "(nodes) => Rect", description: "Get bounding box of nodes." },
     ],
-    usage: `const reactFlow = useReactFlow();
-
-// Add a node
-reactFlow.addNodes({ id: 'new', position: { x: 100, y: 100 }, data: { label: 'New' } });
-
-// Fit view with animation
-reactFlow.fitView({ duration: 500, padding: 0.2 });
-
-// Export flow
+    usage: `const reactFlow = useReactFlow();
+
+// Add a node
+reactFlow.addNodes({ id: 'new', position: { x: 100, y: 100 }, data: { label: 'New' } });
+
+// Fit view with animation
+reactFlow.fitView({ duration: 500, padding: 0.2 });
+
+// Export flow
 const json = reactFlow.toObject();`,
     examples: [],
     relatedApis: ["useReactFlow", "ReactFlowProvider"],