Sketch Server

Collaborative SVG canvas for Claude Code. Claude writes/reads SVG via MCP tools; you edit in a Fabric.js browser editor. Changes sync in real-time via WebSocket.

Architecture

Claude Code <--stdio/MCP--> Node.js Server <--WebSocket--> Browser Editor(s)
                            (Express + WS)                  (Fabric.js)

Install

git clone https://github.com/glebis/sketch-mcp-server.git
cd sketch-mcp-server
npm install
npm run build

Add to your Claude Code MCP config (~/.claude/settings.json or project .mcp.json):

{
  "mcpServers": {
    "sketch-mcp-server": {
      "command": "node",
      "args": ["/path/to/sketch-mcp-server/dist/index.js", "--stdio"]
    }
  }
}

MCP Tools

Editor Features

• Toolbar: Select, draw (freehand), shapes (rect, ellipse, triangle, line, arrow), text
• Text tool: Click for free-width IText, drag for fixed-width Textbox with word wrap
• Undo/redo: Ctrl+Z / Ctrl+Shift+Z
• Delete: Backspace/Delete key
• Clipboard: Paste images and SVG from clipboard
• Real-time sync: All MCP tool calls update the browser instantly

Templates

Templates save the full Fabric.js canvas state as JSON, preserving Textbox widths, lock states, and all object properties.

# Build a layout, lock structure, add editable areas, save
sketch_open_canvas -> sketch_add_element -> sketch_lock_objects -> sketch_add_textbox -> sketch_save_template

# Reuse on a new canvas
sketch_open_canvas -> sketch_load_template

Included template: before-after -- 3-column grid (Before | Product/Audience | After) with editable text areas.

Development

npm run build    # type-check + vite (editor) + bun (server)
npm run dev      # build + run
npm start        # run built server

Port is OS-assigned (port 0), logged to stderr on startup.

License

MIT