Sketch MCP 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

Tool	Description
sketch_open_canvas	Create/open a named canvas, launches browser window
sketch_get_svg	Read current SVG (base64 images truncated at 25KB)
sketch_set_svg	Replace entire canvas SVG
sketch_add_element	Add SVG fragment without clearing existing content
sketch_add_textbox	Add fixed-width text area with word wrapping
sketch_lock_objects	Lock all objects (non-selectable, non-movable)
sketch_unlock_objects	Unlock all objects
sketch_save_template	Save canvas as JSON template
sketch_load_template	Load JSON template into canvas
sketch_list_templates	List saved templates
sketch_clear_canvas	Clear canvas to blank
sketch_focus_canvas	Bring canvas window to foreground
sketch_list_canvases	List active canvas sessions
sketch_close_canvas	Close canvas and browser window

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