theosorus/MCP-Drawing

MCP Drawing (Server + Frontend)

A complete MCP (Model Context Protocol) drawing application with a Node.js server backend and React frontend for visualizing and monitoring drawing operations in real-time.

Resources

• MCP TypeScript SDK
• MCP Documentation

This application provides a canvas interface for rendering geometric shapes and a console panel for tracking MCP requests.

Project Structure

This project consists of two main components:

• mcp-drawing-back/ - Node.js/TypeScript MCP server that handles drawing operations and WebSocket connections
• mcp-drawing-front/ - React frontend application for real-time visualization and monitoring

Features

• MCP Server Integration: Full MCP (Model Context Protocol) server implementation with TypeScript
• Real-time Canvas Rendering: Interactive drawing canvas powered by p5.js
• Shape Support: Points, rectangles, circles, lines, and triangles with customizable colors and properties
• MCP Request Monitoring: Live console showing incoming MCP requests with method types and timestamps
• Server-Sent Events (SSE): Real-time communication between server and frontend
• Connection Status: Visual indicator showing real-time connection status
• Responsive Design: Clean, modern interface with terminal-inspired console panel

Tech Stack

Backend:

• Node.js - Runtime environment
• TypeScript - Programming language
• MCP SDK - Model Context Protocol implementation
• Express - Web server framework
• Server-Sent Events - Real-time communication

Frontend:

• React 19 - Frontend framework
• Vite - Build tool and dev server
• p5.js - Canvas rendering and graphics
• Axios - HTTP client for API requests

MCP Tools

This MCP provides 5 tools for drawing and canvas management:

draw_shapes

Draw multiple shapes of any type on the canvas.

• Supported shapes: points, rectangles, circles, lines, triangles
• Parameters: shapes (array of shape objects)
• Colors: Hexadecimal format (e.g., #FF0000, #00FF00, #0000FF)

Example shapes:

[
  {
    "type": "rectangle",
    "x": 100, "y": 200,
    "width": 200, "height": 150,
    "color": "#FF0000", "fill": false
  },
  {
    "type": "circle", 
    "x": 300, "y": 300, "radius": 50,
    "color": "#00FF00", "fill": true
  },
  {
    "type": "line",
    "x1": 100, "y1": 100, "x2": 200, "y2": 200,
    "color": "#0000FF", "thickness": 2
  }
]

set_background_color

Set the background color of the canvas.

• Parameters: color (hexadecimal color, e.g., #FFFFFF)

get_background_color

Get the current background color of the canvas.

• Returns: Current background color

clear_canvas

Clear all shapes from the canvas.

• Effect: Removes all drawn shapes

get_canvas_state

Get the complete state of the canvas.

• Returns: Canvas size, background color, and list of all shapes

How It Works

1. MCP Server: The backend receives tool calls from Claude Desktop via stdio transport
2. API Communication: MCP server makes HTTP requests to the frontend API server (port 3001)
3. Real-time Updates: Frontend Express server updates canvas state and broadcasts changes via Server-Sent Events
4. Visualization: React frontend renders shapes on p5.js canvas and displays MCP request logs in real-time

Drawing Interface

Access the drawing interface at http://localhost:3001 to see:

• Live canvas with shapes drawn by Claude
• Real-time console showing MCP requests
• Connection status indicator

Results

Claude Opus 4.1

Claude Sonnet 4.5

Getting Started

1. Clone Repository

git clone https://github.com/theosorus/mcp-drawing.git

2. Setup Backend

cd mcp-drawing-back
npm install
npm run build

3. Setup Frontend

cd mcp-drawing-front
npm install
npm run build-and-serve

4. Configure Claude Desktop

Edit your Claude Desktop configuration:

macOS/Linux:

vim ~/Library/Application\ Support/Claude/claude_desktop_config.json

Windows:

vim %APPDATA%/Claude/claude_desktop_config.json

Add the MCP server configuration:

{
  "mcpServers": {
    "mcp-drawing": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/mcp-drawing/mcp-drawing-back/build/index.js"]
    }
  }
}

5. Start Using

1. Restart Claude Desktop
2. Open the drawing interface at http://localhost:3001
3. Ask Claude to draw something, like: "Can you draw a red circle and a blue rectangle on the canvas?"
4. Watch the magic happen in real-time!

Development Commands

Backend

cd mcp-drawing-back
npm install          # Install dependencies
npm run build        # Build TypeScript to JavaScript

Frontend

cd mcp-drawing-front
npm install          # Install dependencies
npm run build-and-serve  # Build and serve in one command