Drawing Tool MCP Server 🎨

A Model Context Protocol (MCP) server that enables AI assistants to create drawings, diagrams, and visual content through a web-based drawing tool.

🌟 Features

• Complete Drawing API: Lines, circles, rectangles, paths, and text
• Real-time Control: AI can draw and modify content in real-time
• WebSocket Communication: Low-latency communication between AI and drawing tool
• Cross-platform: Works on any system with Python 3.8+ and a web browser
• MCP Compatible: Works with any MCP-compatible AI assistant (Claude Desktop, etc.)

🚀 Quick Start

1. Setup

# Clone or download this project
cd drawing-mcp-server

# Run the setup script
chmod +x setup.sh
./setup.sh

2. Start the Services

Terminal 1 - WebSocket Bridge:

./start_bridge.sh

This will:

• Start the WebSocket bridge server on ws://localhost:8765
• Open the drawing tool in your browser
• Show connection status

Terminal 2 - MCP Server:

./start_mcp_server.sh

This starts the MCP server that AI assistants can connect to.

3. Configure Your AI Assistant

For Claude Desktop, add this to your MCP settings:

{
  "mcpServers": {
    "drawing-tool": {
      "command": "python",
      "args": ["/path/to/drawing-mcp-server/drawing_mcp_server.py"],
      "cwd": "/path/to/drawing-mcp-server"
    }
  }
}

🛠️ Available Tools

The MCP server provides these drawing tools:

Basic Shapes

• draw_circle(x, y, radius, color, line_width, fill)
• draw_rectangle(x, y, width, height, color, line_width, fill)
• draw_line(x1, y1, x2, y2, color, line_width)

Advanced Drawing

• draw_path(points, color, line_width) - Connect multiple points
• write_text(text, x, y, color, font_size, font) - Add text

Canvas Control

• launch_webview() - Open drawing tool in browser (NEW!)
• clear_canvas() - Clear everything
• undo() / redo() - History navigation
• get_canvas_info() - Get canvas dimensions
• download_image(filename, format) - Download as PNG/JPEG (NEW!)
• copy_image() - Copy to clipboard (NEW!)
• save_drawing(filename) - Export as image

Settings

• set_color(color) - Set default color
• set_brush_size(size) - Set default line width

📝 Usage Examples

⚡ Quick Start (New!)

Now you can start drawing with just one command:

1. Add MCP server to Claude Desktop
2. Ask: "Launch the drawing tool and draw a house"
3. AI will call launch_webview() automatically and start drawing!

Traditional Usage

Once connected, AI assistants can use natural language to create drawings:

"Draw a house"

The AI might use:
- draw_rectangle() for the main structure
- draw_line() for the roof
- draw_circle() for the sun
- write_text() for a label

"Create a flowchart"

- draw_rectangle() for process boxes
- draw_circle() for decision points  
- draw_line() for connectors
- write_text() for labels

"Make a graph showing sales data"

- draw_line() for axes
- draw_path() for data lines
- write_text() for labels and values

🏗️ Architecture

AI Assistant
     ↓ (MCP Protocol)
MCP Server (drawing_mcp_server.py)
     ↓ (WebSocket)
WebSocket Bridge (websocket_bridge.py)
     ↓ (WebSocket)
Drawing Tool (Browser)

Components

1. MCP Server - Implements MCP protocol, exposes drawing tools
2. WebSocket Bridge - Handles communication between MCP server and browser
3. Drawing Tool - Web-based canvas that executes drawing commands

🔧 Configuration

WebSocket Settings

• Default port: 8765
• Host: localhost
• Change in both websocket_bridge.py and drawing_mcp_server.py

Canvas Settings

• Default size: 800x600 pixels
• Modify in the drawing tool HTML

MCP Settings

Configure your AI assistant to connect to the MCP server using the mcp_config.json file.

🐛 Troubleshooting

"No connection to drawing tool"

1. Ensure WebSocket bridge is running (./start_bridge.sh)
2. Check that the drawing tool is open in browser
3. Verify WebSocket URL in console

"MCP server not responding"

1. Check that MCP server is running (./start_mcp_server.sh)
2. Verify AI assistant MCP configuration
3. Check for port conflicts

Drawing commands not working

1. Verify WebSocket connection status in browser
2. Check browser console for error messages
3. Ensure coordinate values are within canvas bounds (0-800, 0-600)

📦 Dependencies

• Python 3.8+
• mcp - Model Context Protocol SDK
• websockets - WebSocket communication
• Modern web browser with WebSocket support

🤝 Contributing

Feel free to:

• Add new drawing tools
• Improve error handling
• Enhance the web interface
• Add more canvas features

📄 License

MIT License - feel free to use and modify as needed.

🔗 Related Projects

• Model Context Protocol
• Claude Desktop - AI assistant with MCP support

Happy Drawing! 🎨

For questions or issues, please check the troubleshooting section or create an issue in the project repository.