diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..a006783 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 MCP Excalidraw Server + +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. \ No newline at end of file diff --git a/README.md b/README.md index 54cf33e..eda7ba5 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ -# Excalidraw MCP Canvas: Live Visual Diagramming with AI Integration +# MCP Excalidraw Server: Advanced Live Visual Diagramming with AI Integration A comprehensive system that combines **Excalidraw's powerful drawing capabilities** with **Model Context Protocol (MCP)** integration, enabling AI agents to create and manipulate diagrams in real-time on a live canvas. +> **🚀 NEW: Now available as `mcp-excalidraw-server` on npm!** Install with `npm install -g mcp-excalidraw-server` or run directly with `npx mcp-excalidraw-server`. + ## 🚀 What This System Does - **🎨 Live Canvas**: Real-time Excalidraw canvas accessible via web browser @@ -55,9 +57,35 @@ A comprehensive system that combines **Excalidraw's powerful drawing capabilitie - Node.js 16+ - npm or yarn -### **1. Clone and Install** +### **Option 1: NPM Installation (Recommended)** + +#### **Global Installation** ```bash -git clone +# Install globally +npm install -g mcp-excalidraw-server + +# Run the server +mcp-excalidraw-server +``` + +#### **Run Without Installation** +```bash +# Run directly with npx (no installation needed) +npx mcp-excalidraw-server +``` + +#### **Local Project Installation** +```bash +# Install in your project +npm install mcp-excalidraw-server + +# Run from node_modules +npx mcp-excalidraw-server +``` + +### **Option 2: Clone from Source** +```bash +git clone https://github.com/yctimlin/mcp_excalidraw.git cd mcp_excalidraw npm install ``` @@ -174,29 +202,46 @@ The MCP server provides these tools for creating visual diagrams: ## 🔌 Integration with Claude Desktop +### **Using NPM Package (Recommended)** + Add this configuration to your `claude_desktop_config.json`: ```json { "mcpServers": { - "excalidraw_canvas": { - "command": "node", - "args": ["/path/to/mcp_excalidraw/src/index.js"], + "excalidraw": { + "command": "npx", + "args": ["-y", "mcp-excalidraw-server"] } } } ``` -## Integration with Cursor +### **Using Global Installation** -Add this configuration to your `claude_desktop_config.json`: +If you installed globally with `npm install -g mcp-excalidraw-server`: ```json { - "mcpServers": { - "mcp_excalidraw": { - "command": "node", - "args": ["/path/to/mcp_excalidraw/src/index.js"] + "mcpServers": { + "excalidraw": { + "command": "mcp-excalidraw-server", + "args": [] + } + } +} +``` + +### **Using Source Installation** + +If you cloned from source: + +```json +{ + "mcpServers": { + "excalidraw": { + "command": "node", + "args": ["/path/to/mcp_excalidraw/src/index.js"] } } } @@ -204,6 +249,56 @@ Add this configuration to your `claude_desktop_config.json`: **Important**: Replace `/path/to/mcp_excalidraw` with the actual absolute path to your installation. +## 🔧 Integration with Other Tools + +### **Cursor IDE** + +Add to your `claude_desktop_config.json` or MCP settings: + +```json +{ + "mcpServers": { + "excalidraw": { + "command": "npx", + "args": ["-y", "mcp-excalidraw-server"] + } + } +} +``` + +### **VS Code MCP Extension** + +For VS Code MCP extension, add to your settings: + +```json +{ + "mcp": { + "servers": { + "excalidraw": { + "command": "npx", + "args": ["-y", "mcp-excalidraw-server"] + } + } + } +} +``` + +### **Command Line Usage** + +```bash +# Run directly with npx (no installation needed) +npx mcp-excalidraw-server + +# Run with global installation +mcp-excalidraw-server + +# Run with custom canvas server URL +EXPRESS_SERVER_URL=http://localhost:8080 npx mcp-excalidraw-server + +# Run with debug logging +DEBUG=true npx mcp-excalidraw-server +``` + ## 🛠️ Environment Variables | Variable | Default | Description | diff --git a/package.json b/package.json index e5f7658..a7cf20a 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,19 @@ { - "name": "excalidraw-mcp", + "name": "mcp-excalidraw-server", "version": "1.0.0", - "description": "MCP server for Excalidraw", + "description": "Advanced MCP server for Excalidraw with real-time canvas, WebSocket sync, and comprehensive diagram management", "main": "src/index.js", "type": "module", + "bin": { + "mcp-excalidraw-server": "src/index.js" + }, "scripts": { "start": "node src/index.js", "canvas": "node src/server.js", "build": "vite build", "dev": "concurrently \"npm run canvas\" \"vite\"", - "production": "npm run build && npm run canvas" + "production": "npm run build && npm run canvas", + "prepublishOnly": "npm run build" }, "dependencies": { "@excalidraw/excalidraw": "^0.18.0", @@ -32,21 +36,42 @@ }, "keywords": [ "mcp", + "mcp-server", "excalidraw", "model-context-protocol", "ai", - "drawing" + "drawing", + "diagrams", + "canvas", + "real-time", + "websocket", + "visualization", + "claude", + "ai-tools" ], - "author": "", + "author": { + "name": "yctimlin", + "email": "c22647809@gmail.com" + }, "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/yctimlin/mcp_excalidraw.git" + }, + "homepage": "https://github.com/yctimlin/mcp_excalidraw#readme", + "bugs": { + "url": "https://github.com/yctimlin/mcp_excalidraw/issues" + }, "engines": { "node": ">=16.0.0" }, "publishConfig": { - "access": "public" + "access": "public", + "registry": "https://registry.npmjs.org/" }, "files": [ "src/**/*", + "dist/**/*", "README.md", "LICENSE" ] diff --git a/src/index.js b/src/index.js index a95c248..165aa26 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,5 @@ +#!/usr/bin/env node + // Disable colors to prevent ANSI color codes from breaking JSON parsing process.env.NODE_DISABLE_COLORS = '1'; process.env.NO_COLOR = '1';