Skip to main content
Glama
ymirymir

drawing-mcp

by ymirymir
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: Draw-it-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.cloudflare.com/carlista/caddy/gpg.key' | gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
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

RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

Resources

Related MCP Connectors

Related MCP Servers