Skip to main content
Glama
Sign In
drawing-mcp

drawing-mcp

by ymarymar
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Hybrid

drawing-mcp

A process-based pencil drawing MCP server. Connects to Claude Code and produces layered HTML Canvas drawings using a classical construction methodology.

What it does

Two tools:

  • analyse_subject — Takes a text description, returns a pencil construction drawing as a self-contained HTML canvas snippet. Works gesture → volumes → forms.

  • refine_drawing — Takes the previous output and adds line quality, weight variation, or form shadow at detail levels 1–3.

Related MCP server: canvas3d-mcp

Local development (Claude Code on your machine)

1. Install and build

npm install
npm run build

2. Set up environment

cp .env.example .env
# Edit .env — add your ANTHROPIC_API_KEY

3. Add to Claude Code

Edit your Claude Code MCP config (~/.claude/claude_desktop_config.json or equivalent):

{
  "mcpServers": {
    "drawing-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/drawing-mcp/dist/index.js"],
      "env": {
        "ANTHROPIC_API_KEY": "your_key_here"
      }
    }
  }
}

Restart Claude Code. You should see analyse_subject and refine_drawing in the available tools.

4. Test it

In Claude Code:

"Can you draw a bird perched on a branch, side view?"

Claude will call analyse_subject, return an HTML snippet. Paste it into a Claude artifact or any HTML file to render.

Hosted deployment (DigitalOcean)

Droplet setup (one time)

# On the droplet as root

# Install Docker
curl -fsSL https://get.docker.com | sh

# Install Caddy
apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | tee /etc/apt/sources.list.d/caddy-stable.list
apt update && apt install caddy

# Create env file (never in the repo)
cp .env.example /root/drawing-mcp.env
chmod 600 /root/drawing-mcp.env
# Edit /root/drawing-mcp.env with real values

# Generate an API key
openssl rand -hex 32
# Paste the output as API_KEY in /root/drawing-mcp.env

# Copy Caddyfile
cp Caddyfile /etc/caddy/Caddyfile
# Edit /etc/caddy/Caddyfile — replace yourdomain.com with your domain
systemctl restart caddy

Firewall (DO Cloud Firewall or ufw)

Only these ports should be open to the public internet:

Port

Protocol

Purpose

22

TCP

SSH (restrict to your IP if possible)

80

TCP

Caddy HTTP→HTTPS redirect

443

TCP

Caddy HTTPS

Port 3000 must NOT be public — Caddy proxies to it internally.

Deploy

chmod +x deploy.sh
./deploy.sh root@your-droplet-ip

Connect Claude Code to hosted server

{
  "mcpServers": {
    "drawing-mcp": {
      "url": "https://yourdomain.com/mcp",
      "headers": {
        "Authorization": "Bearer your_api_key_here"
      }
    }
  }
}

Project structure

src/
  index.ts          — stdio entry point (local Claude Code)
  server.ts         — HTTP/SSE entry point (hosted)
  schema.ts         — Zod schemas for all inputs and outputs
  prompts/
    system.ts       — System prompts (methodology IP — never exposed)
  tools/
    handlers.ts     — Tool logic
    anthropic-client.ts — Inner AI call, validation, security checks
  rendering/
    canvas.ts       — Converts validated commands to HTML canvas snippet
  security/
    sanitise.ts     — Input sanitisation, sentinel checks, error scrubbing

Security notes

  • The Anthropic API key and system prompts never leave the server process

  • All AI output is validated against a strict Zod schema before returning

  • User input is sanitised before touching any prompt

  • Sentinel checks detect and block prompt extraction attempts

  • The container runs as a non-root user with a read-only filesystem

  • Caddy handles TLS — the app only binds to localhost

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivitySlowing
ResponsivenessNo recent community issues

Resources

Related MCP Connectors

Related MCP Servers

  • canvas3d-mcp

    eduardosm123
    F
    license
    A
    quality
    D
    maintenance
    Enables AI agents to create, render, and validate 3D scenes, 2D art, and games in HTML canvas using Three.js, WebGL, or Canvas 2D, with multi-angle screenshots, structured validation reports, and interactive playtesting.
    5
    -

  • paint-mcp

    Mishaadevv
    A
    license
    A
    quality
    C
    maintenance
    Gives AI agents a real paint canvas over MCP — layers, anti-aliased shapes, paths, brushes, fills, gradients, filters, transforms, undo/redo, and PNG/JPG/BMP/SVG import-export — with every drawing call returning the picture so the model can inspect and correct its own work. Ships one tool per operation plus a batch tool, preview, inspect, and an optional localhost live view.
    25
    MIT

  • genpark-visual-diagram

    Alpha-Park
    A
    license
    Not graded
    quality
    Not graded
    maintenance
    Enables translation of geometric bounding boxes, flowchart node connections, and architectural sketches into clean Mermaid graphs, JSON topology matrices, and boilerplate code scaffolds.
    MIT