MCP-Drawing

MCP Drawing is a complete server+frontend application that lets you visualize and monitor drawing operations in real time using the Model Context Protocol. The backend is a Node.js TypeScript MCP server that handles drawing commands over MCP and communicates with a React frontend via Server-Sent Events to provide live updates on the canvas and a running MCP request console. The frontend renders shapes with p5.js and updates the canvas as new MCP calls arrive. You can use Claude Desktop to issue drawing commands through the MCP tools exposed by the server, and watch the canvas update live in your browser at the configured frontend URL (typically http://localhost:3001). The MCP Tools include functions to draw shapes, manage the canvas background, clear the board, and fetch the current canvas state, enabling interactive and programmable drawing sessions.

Prerequisites:

• Node.js (14+ recommended) and npm
• Access to the repository with both backend and frontend components

Step-by-step:

1. Clone the repository

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

2. Install and build the backend

cd mcp-drawing-back
npm install
npm run build

3. Install and build/serve the frontend

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

4. Configure Claude Desktop to point at the MCP server (example shows the built backend index.js path). Create or edit claude_desktop_config.json to include:

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

5. Start and test

• Ensure backend is built and running (the server listens on port 3001 by default as documented).
• Open the frontend interface at http://localhost:3001 to verify the canvas and live MCP console.

Tips and common issues:

• Ensure the backend is built before starting Claude Desktop; the index.js file must exist at the path you configure in claude_desktop_config.json.
• If you change the backend port, update the frontend/Claude configuration accordingly.
• The MCP Tools exposed by this server include: draw_shapes, set_background_color, get_background_color, clear_canvas, and get_canvas_state. Use appropriate JSON payloads per tool specification.
• For development, you can run the frontend in development mode and connect to a locally running backend; use the provided build-and-serve workflow to simplify setup.
• Check that the frontend uses port 3001 as documented; if you run on another port, update URLs accordingly.