@next-ai-drawio/mcp-server 0.1.2 → 0.1.5

package/README.md

@@ -4,17 +4,22 @@ MCP (Model Context Protocol) server that enables AI agents like Claude Desktop a
 
 **Self-contained** - includes an embedded HTTP server, no external dependencies required.
 
-## Features
+## Quick Start
 
-- **Real-time Preview**: Diagrams appear and update in your browser as the AI creates them
-- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
-- **Edit Support**: Modify existing diagrams with natural language instructions
-- **Export**: Save diagrams as `.drawio` files
-- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from embed.diagrams.net)
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
 
-## Quick Start
+## Installation
 
-### Claude Desktop Configuration
+### Claude Desktop
 
 Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
 
@@ -23,43 +28,69 @@ Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_
   "mcpServers": {
     "drawio": {
       "command": "npx",
-      "args": ["-y", "@next-ai-drawio/mcp-server"]
+      "args": ["@next-ai-drawio/mcp-server@latest"]
     }
   }
 }
 ```
 
-That's it! The MCP server runs its own embedded HTTP server.
+### VS Code
 
-### Use with Claude
+Add to your VS Code settings (`.vscode/mcp.json` in workspace or user settings):
 
-1. Restart Claude Desktop after updating config
-2. Ask Claude to create a diagram:
-   > "Create a flowchart showing user authentication with login, MFA, and session management"
-3. The diagram appears in your browser in real-time!
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
 
-## How It Works
+### Cursor
+
+Add to Cursor MCP config (`~/.cursor/mcp.json`):
 
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
 ```
-┌─────────────────┐     stdio      ┌─────────────────┐
-│  Claude Desktop │ <───────────> │   MCP Server    │
-│    (AI Agent)   │               │  (this package) │
-└─────────────────┘               └────────┬────────┘
-                                           │
-                                  ┌────────▼────────┐
-                                  │ Embedded HTTP   │
-                                  │ Server (:6002)  │
-                                  └────────┬────────┘
-                                           │
-                                  ┌────────▼────────┐
-                                  │  User's Browser │
-                                  │ (draw.io embed) │
-                                  └─────────────────┘
+
+### Claude Code CLI
+
+```bash
+claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
 ```
 
-1. **MCP Server** receives tool calls from Claude via stdio
-2. **Embedded HTTP Server** serves the draw.io UI and handles state
-3. **Browser** shows real-time diagram updates via polling
+### Other MCP Clients
+
+Use the standard MCP configuration with:
+- **Command**: `npx`
+- **Args**: `["@next-ai-drawio/mcp-server@latest"]`
+
+## Usage
+
+1. Restart your MCP client after updating config
+2. Ask the AI to create a diagram:
+   > "Create a flowchart showing user authentication with login, MFA, and session management"
+3. The diagram appears in your browser in real-time!
+
+## Features
+
+- **Real-time Preview**: Diagrams appear and update in your browser as the AI creates them
+- **Version History**: Restore previous diagram versions with visual thumbnails - click the clock button (bottom-right) to browse and restore earlier states
+- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
+- **Edit Support**: Modify existing diagrams with natural language instructions
+- **Export**: Save diagrams as `.drawio` files
+- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from embed.diagrams.net)
 
 ## Available Tools
 
@@ -71,7 +102,30 @@ That's it! The MCP server runs its own embedded HTTP server.
 | `get_diagram` | Get the current diagram XML |
 | `export_diagram` | Save diagram to a `.drawio` file |
 
-## Environment Variables
+## How It Works
+
+```
+┌─────────────────┐     stdio      ┌─────────────────┐
+│  Claude Desktop │ <───────────> │   MCP Server    │
+│    (AI Agent)   │               │  (this package) │
+└─────────────────┘               └────────┬────────┘
+                                          │
+                                 ┌────────▼────────┐
+                                 │ Embedded HTTP   │
+                                 │ Server (:6002)  │
+                                 └────────┬────────┘
+                                          │
+                                 ┌────────▼────────┐
+                                 │  User's Browser │
+                                 │ (draw.io embed) │
+                                 └─────────────────┘
+```
+
+1. **MCP Server** receives tool calls from Claude via stdio
+2. **Embedded HTTP Server** serves the draw.io UI and handles state
+3. **Browser** shows real-time diagram updates via polling
+
+## Configuration
 
 | Variable | Default | Description |
 |----------|---------|-------------|
@@ -81,7 +135,7 @@ That's it! The MCP server runs its own embedded HTTP server.
 
 ### Port already in use
 
-If port 6002 is in use, the server will automatically try the next available port.
+If port 6002 is in use, the server will automatically try the next available port (up to 6020).
 
 Or set a custom port:
 ```json
@@ -89,7 +143,7 @@ Or set a custom port:
   "mcpServers": {
     "drawio": {
       "command": "npx",
-      "args": ["-y", "@next-ai-drawio/mcp-server"],
+      "args": ["@next-ai-drawio/mcp-server@latest"],
       "env": { "PORT": "6003" }
     }
   }

package/dist/history.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Simple diagram history - matches Next.js app pattern
+ * Stores {xml, svg} entries in a circular buffer
+ */
+export declare function addHistory(sessionId: string, xml: string, svg?: string): number;
+export declare function getHistory(sessionId: string): Array<{
+    xml: string;
+    svg: string;
+}>;
+export declare function getHistoryEntry(sessionId: string, index: number): {
+    xml: string;
+    svg: string;
+} | undefined;
+export declare function clearHistory(sessionId: string): void;
+export declare function updateLastHistorySvg(sessionId: string, svg: string): boolean;
+//# sourceMappingURL=history.d.ts.map

package/dist/history.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"history.d.ts","sourceRoot":"","sources":["../src/history.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,wBAAgB,UAAU,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,SAAK,GAAG,MAAM,CAsB3E;AAED,wBAAgB,UAAU,CACtB,SAAS,EAAE,MAAM,GAClB,KAAK,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC,CAErC;AAED,wBAAgB,eAAe,CAC3B,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GACd;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAG1C;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAEpD;AAED,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAS5E"}

package/dist/history.js

@@ -0,0 +1,48 @@
+/**
+ * Simple diagram history - matches Next.js app pattern
+ * Stores {xml, svg} entries in a circular buffer
+ */
+import { log } from "./logger.js";
+const MAX_HISTORY = 20;
+const historyStore = new Map();
+export function addHistory(sessionId, xml, svg = "") {
+    let history = historyStore.get(sessionId);
+    if (!history) {
+        history = [];
+        historyStore.set(sessionId, history);
+    }
+    // Dedupe: skip if same as last entry
+    const last = history[history.length - 1];
+    if (last?.xml === xml) {
+        return history.length - 1;
+    }
+    history.push({ xml, svg });
+    // Circular buffer
+    if (history.length > MAX_HISTORY) {
+        history.shift();
+    }
+    log.debug(`History: session=${sessionId}, entries=${history.length}`);
+    return history.length - 1;
+}
+export function getHistory(sessionId) {
+    return historyStore.get(sessionId) || [];
+}
+export function getHistoryEntry(sessionId, index) {
+    const history = historyStore.get(sessionId);
+    return history?.[index];
+}
+export function clearHistory(sessionId) {
+    historyStore.delete(sessionId);
+}
+export function updateLastHistorySvg(sessionId, svg) {
+    const history = historyStore.get(sessionId);
+    if (!history || history.length === 0)
+        return false;
+    const last = history[history.length - 1];
+    if (!last.svg) {
+        last.svg = svg;
+        return true;
+    }
+    return false;
+}
+//# sourceMappingURL=history.js.map

package/dist/history.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"history.js","sourceRoot":"","sources":["../src/history.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AAEjC,MAAM,WAAW,GAAG,EAAE,CAAA;AACtB,MAAM,YAAY,GAAG,IAAI,GAAG,EAA+C,CAAA;AAE3E,MAAM,UAAU,UAAU,CAAC,SAAiB,EAAE,GAAW,EAAE,GAAG,GAAG,EAAE;IAC/D,IAAI,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IACzC,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,GAAG,EAAE,CAAA;QACZ,YAAY,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;IACxC,CAAC;IAED,qCAAqC;IACrC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IACxC,IAAI,IAAI,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC;QACpB,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;IAC7B,CAAC;IAED,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;IAE1B,kBAAkB;IAClB,IAAI,OAAO,CAAC,MAAM,GAAG,WAAW,EAAE,CAAC;QAC/B,OAAO,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,GAAG,CAAC,KAAK,CAAC,oBAAoB,SAAS,aAAa,OAAO,CAAC,MAAM,EAAE,CAAC,CAAA;IACrE,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;AAC7B,CAAC;AAED,MAAM,UAAU,UAAU,CACtB,SAAiB;IAEjB,OAAO,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;AAC5C,CAAC;AAED,MAAM,UAAU,eAAe,CAC3B,SAAiB,EACjB,KAAa;IAEb,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IAC3C,OAAO,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;AAC3B,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,SAAiB;IAC1C,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;AAClC,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,SAAiB,EAAE,GAAW;IAC/D,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IAC3C,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,KAAK,CAAA;IAClD,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IACxC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;QACZ,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QACd,OAAO,IAAI,CAAA;IACf,CAAC;IACD,OAAO,KAAK,CAAA;AAChB,CAAC"}

package/dist/http-server.d.ts

@@ -1,34 +1,21 @@
 /**
  * Embedded HTTP Server for MCP
- *
- * Serves a static HTML page with draw.io embed and handles state sync.
- * This eliminates the need for an external Next.js app.
+ * Serves draw.io embed with state sync and history UI
  */
 interface SessionState {
     xml: string;
     version: number;
     lastUpdated: Date;
+    svg?: string;
+    syncRequested?: number;
 }
 export declare const stateStore: Map<string, SessionState>;
-/**
- * Get state for a session
- */
 export declare function getState(sessionId: string): SessionState | undefined;
-/**
- * Set state for a session
- */
-export declare function setState(sessionId: string, xml: string): number;
-/**
- * Start the embedded HTTP server
- */
+export declare function setState(sessionId: string, xml: string, svg?: string): number;
+export declare function requestSync(sessionId: string): boolean;
+export declare function waitForSync(sessionId: string, timeoutMs?: number): Promise<boolean>;
 export declare function startHttpServer(port?: number): Promise<number>;
-/**
- * Stop the HTTP server
- */
 export declare function stopHttpServer(): void;
-/**
- * Get the current server port
- */
 export declare function getServerPort(): number;
 export {};
 //# sourceMappingURL=http-server.d.ts.map

package/dist/http-server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"http-server.d.ts","sourceRoot":"","sources":["../src/http-server.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,UAAU,YAAY;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,IAAI,CAAA;CACpB;AAGD,eAAO,MAAM,UAAU,2BAAkC,CAAA;AAOzD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAEpE;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAY/D;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,GAAE,MAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAoCpE;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAKrC;AAkBD;;GAEG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAEtC"}
+{"version":3,"file":"http-server.d.ts","sourceRoot":"","sources":["../src/http-server.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAYH,UAAU,YAAY;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,IAAI,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,eAAO,MAAM,UAAU,2BAAkC,CAAA;AAOzD,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAEpE;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAY7E;AAED,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAStD;AAED,wBAAsB,WAAW,CAC7B,SAAS,EAAE,MAAM,EACjB,SAAS,SAAO,GACjB,OAAO,CAAC,OAAO,CAAC,CASlB;AAED,wBAAgB,eAAe,CAAC,IAAI,SAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAoC5D;AAED,wBAAgB,cAAc,IAAI,IAAI,CAKrC;AAeD,wBAAgB,aAAa,IAAI,MAAM,CAEtC"}