{"_id":"@agentcanvas/mcp-server","name":"@agentcanvas/mcp-server","dist-tags":{"latest":"0.2.3"},"versions":{"0.2.3":{"name":"@agentcanvas/mcp-server","version":"0.2.3","description":"MCP server for Agent Canvas - AI-powered diagram generation with real-time browser preview","type":"module","main":"dist/index.js","bin":{"agentcanvas-mcp":"dist/index.js"},"scripts":{"build":"tsc","dev":"tsx watch src/index.ts","start":"node dist/index.js","test":"vitest run","test:watch":"vitest","prepublishOnly":"npm run build"},"keywords":["mcp","drawio","diagram","ai","claude","model-context-protocol"],"author":{"name":"alihusains"},"license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/alihusains/agent-canvas.git","directory":"packages/mcp-server"},"homepage":"https://alihusains.github.io/agent-canvas","bugs":{"url":"https://github.com/alihusains/agent-canvas/issues"},"publishConfig":{"access":"public"},"dependencies":{"@modelcontextprotocol/sdk":"^1.0.4","linkedom":"^0.18.0","open":"^11.0.0","zod":"^4.0.0"},"devDependencies":{"@types/node":"^24.0.0","tsx":"^4.19.0","typescript":"^5","vitest":"^4.1.8"},"engines":{"node":">=18"},"gitHead":"0fe7ada69b8a0e935eb096d98473573f685679af","types":"./dist/index.d.ts","_id":"@agentcanvas/mcp-server@0.2.3","_nodeVersion":"26.5.1","_npmVersion":"11.17.0","dist":{"integrity":"sha512-LqL1c1CwN4TFFIpIL5jBjCVKUG0HaLB+IIYgsA6W6b5Gfr0UM6Q7qPdCIogCStPzzBz4vL+C44jJtgO2YgjTCg==","shasum":"47807e6e6774746ea2a331d55d512f3f577e37b4","tarball":"https://registry.npmjs.org/@agentcanvas/mcp-server/-/mcp-server-0.2.3.tgz","fileCount":38,"unpackedSize":338185,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDe+Svg5kbP9dN7pF0KIf9HHFQRjFDOoYVr3XEiTHyVQAIgdP6sjHmLn62srOY+4KlsVGcf1miP+ghBlEayyVJigSY="}]},"_npmUser":{"name":"alihusains","email":"sorathiyaalihusain@gmail.com"},"directories":{},"maintainers":[{"name":"alihusains","email":"sorathiyaalihusain@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mcp-server_0.2.3_1786003242261_0.20606927187409996"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-06T08:00:42.065Z","0.2.3":"2026-08-06T08:00:42.416Z","modified":"2026-08-06T08:00:42.679Z"},"maintainers":[{"name":"alihusains","email":"sorathiyaalihusain@gmail.com"}],"description":"MCP server for Agent Canvas - AI-powered diagram generation with real-time browser preview","homepage":"https://alihusains.github.io/agent-canvas","keywords":["mcp","drawio","diagram","ai","claude","model-context-protocol"],"repository":{"type":"git","url":"git+https://github.com/alihusains/agent-canvas.git","directory":"packages/mcp-server"},"author":{"name":"alihusains"},"bugs":{"url":"https://github.com/alihusains/agent-canvas/issues"},"license":"Apache-2.0","readme":"# Agent Canvas MCP Server\n\nMCP (Model Context Protocol) server that enables AI agents like Claude Desktop and Cursor to generate and edit draw.io diagrams with **real-time browser preview**.\n\n**Self-contained** - includes an embedded HTTP server, no external dependencies required.\n\n## Quick Start\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@agentcanvas/mcp-server@latest\"]\n    }\n  }\n}\n```\n\n## Installation\n\n### Claude Desktop\n\nAdd to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@agentcanvas/mcp-server@latest\"]\n    }\n  }\n}\n```\n\n### VS Code\n\nAdd to your VS Code settings (`.vscode/mcp.json` in workspace or user settings):\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@agentcanvas/mcp-server@latest\"]\n    }\n  }\n}\n```\n\n### Cursor\n\nAdd to Cursor MCP config (`~/.cursor/mcp.json`):\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@agentcanvas/mcp-server@latest\"]\n    }\n  }\n}\n```\n\n### Cline (VS Code Extension)\n\n1. Click the **MCP Servers** icon in Cline's top menu bar\n2. Select the **Configure** tab\n3. Click **Configure MCP Servers** to edit `cline_mcp_settings.json`\n4. Add the drawio server:\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@agentcanvas/mcp-server@latest\"]\n    }\n  }\n}\n```\n\n### Claude Code CLI\n\n```bash\nclaude mcp add drawio -- npx @agentcanvas/mcp-server@latest\n```\n\n### Other MCP Clients\n\nUse the standard MCP configuration with:\n- **Command**: `npx`\n- **Args**: `[\"@agentcanvas/mcp-server@latest\"]`\n\n## Usage\n\n1. Restart your MCP client after updating config\n2. Ask the AI to create a diagram:\n   > \"Create a flowchart showing user authentication with login, MFA, and session management\"\n3. The diagram appears in your browser in real-time!\n\n## Features\n\n- **Real-time Preview**: Diagrams appear and update in your browser as the AI creates them\n- **Version History**: Restore previous diagram versions with visual thumbnails - click the clock button (bottom-right) to browse and restore earlier states\n- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.\n- **Edit Support**: Modify existing diagrams with natural language instructions\n- **Export**: Save diagrams as `.drawio` files\n- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from `embed.diagrams.net` by default, configurable via `DRAWIO_BASE_URL`)\n\n## Available Tools\n\n| Tool | Description |\n|------|-------------|\n| `start_session` | Opens browser with real-time diagram preview |\n| `create_new_diagram` | Create a new diagram from XML (requires `xml` argument) |\n| `load_diagram` | Load a `.drawio` file from disk into the session (handles compressed files) |\n| `edit_diagram` | Edit diagram by ID-based operations (update/add/delete cells) |\n| `get_diagram` | Get the current diagram XML |\n| `export_diagram` | Save diagram to a `.drawio`, `.png`, or `.svg` file |\n| `list_pages` | List every page (tab) with id, name, index, and cell count |\n| `add_page` | Append a new page without touching existing ones |\n| `rename_page` | Rename a page |\n| `delete_page` | Delete a page (refuses to delete the last one) |\n\n## How It Works\n\n```\n┌─────────────────┐     stdio      ┌─────────────────┐\n│  Claude Desktop │ <───────────> │   MCP Server    │\n│    (AI Agent)   │               │  (this package) │\n└─────────────────┘               └────────┬────────┘\n                                          │\n                                 ┌────────▼────────┐\n                                 │ Embedded HTTP   │\n                                 │ Server (:6002)  │\n                                 └────────┬────────┘\n                                          │\n                                 ┌────────▼────────┐\n                                 │  User's Browser │\n                                 │ (draw.io embed) │\n                                 └─────────────────┘\n```\n\n1. **MCP Server** receives tool calls from Claude via stdio\n2. **Embedded HTTP Server** serves the draw.io UI and handles state\n3. **Browser** shows real-time diagram updates via polling\n\n## Configuration\n\n| Variable | Default | Description |\n|----------|---------|-------------|\n| `PORT` | `6002` | Port for the embedded HTTP server |\n| `DRAWIO_BASE_URL` | `https://embed.diagrams.net` | Base URL for the draw.io embed. Set this to use a self-hosted draw.io instance for private deployments. |\n\n### Private Deployment (Self-hosted draw.io)\n\nFor security-sensitive environments that require private deployment of draw.io:\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@agentcanvas/mcp-server@latest\"],\n      \"env\": { \n        \"DRAWIO_BASE_URL\": \"https://drawio.your-company.com\"\n      }\n    }\n  }\n}\n```\n\nYou can deploy your own draw.io instance using the official Docker image:\n\n```bash\ndocker run -d -p 8080:8080 jgraph/drawio\n```\n\nThen set `DRAWIO_BASE_URL=http://localhost:8080` (or your server's URL).\n\n## Troubleshooting\n\n### Port already in use\n\nIf port 6002 is in use, the server will automatically try the next available port (up to 6020).\n\nOr set a custom port:\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@agentcanvas/mcp-server@latest\"],\n      \"env\": { \"PORT\": \"6003\" }\n    }\n  }\n}\n```\n\n### \"No active session\"\n\nCall `start_session` first to open the browser window.\n\n### Browser not updating\n\nCheck that the browser URL has the `?mcp=` query parameter. The MCP session ID connects the browser to the server.\n\n## License\n\nApache-2.0\n","readmeFilename":"README.md","_rev":"1-430d8d3bfb8c9444696bc47119e7506c"}