drawing-mcp

drawing-mcp

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

What it does

Two tools:

• analyse_subject — Takes a text description, returns a pencil constructiondrawing as a self-contained HTML canvas snippet. Works gesture → volumes → forms.
• refine_drawing — Takes the previous output and adds line quality, weightvariation, or form shadow at detail levels 1–3.

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.jsonor 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_drawingin 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 intoa 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 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