Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Sketch MCP ServerCreate a UI wireframe for a mobile login screen on a new canvas"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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 buildAdd 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 |
| Create/open a named canvas, launches browser window |
| Read current SVG (base64 images truncated at 25KB) |
| Replace entire canvas SVG |
| Add SVG fragment without clearing existing content |
| Add fixed-width text area with word wrapping |
| Lock all objects (non-selectable, non-movable) |
| Unlock all objects |
| Save canvas as JSON template |
| Load JSON template into canvas |
| List saved templates |
| Clear canvas to blank |
| Bring canvas window to foreground |
| List active canvas sessions |
| 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_templateIncluded 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 serverPort is OS-assigned (port 0), logged to stderr on startup.
License
MIT