Click on "Deploy 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., "@design-canvas-mcp Show me all routes on the 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.
MCP server for Design Canvas — control the infinite canvas from AI coding agents.
Design Canvas is a native Mac app that shows all your web app's routes on an infinite canvas with live browser views. This MCP server lets AI agents (Claude Code, Cursor) add routes, capture screenshots, and manage what's displayed.
Design Canvas Mac app must be running on your machine
The app must be connected to a running dev server (e.g., localhost:3000)
Node.js 20+
Related MCP server: Excalidraw MCP Server
claude mcp add design-canvas -s user -- npx -y design-canvas-mcpAdd to .cursor/mcp.json:
{
"mcpServers": {
"design-canvas": {
"command": "npx",
"args": ["-y", "design-canvas-mcp"]
}
}
}npm install -g design-canvas-mcpThen configure with command: "design-canvas-mcp" instead of the npx variant.
Tool | Description | Key Parameters |
| List all routes on the canvas with IDs, paths, dimensions, positions | — |
| Add a route to the canvas from the connected dev server |
|
| Remove a route frame by ID or path |
|
| Capture screenshots of routes and return as images |
|
"Show me all routes on the canvas" → list_routes
"Add /dashboard at desktop and mobile" → add_route at 1280 + 375
"Capture the canvas so you can see my app" → capture_canvas
"Remove the mobile version of /dashboard" → list_routes then remove_route by ID
The MCP server communicates with the Design Canvas Mac app via a local HTTP API on localhost:7420. The server is an adapter layer — it translates between the HTTP API and MCP's content block format.
Claude Code / Cursor
→ spawns design-canvas-mcp (stdio)
→ HTTP requests to localhost:7420
→ Design Canvas Mac app respondsScreenshots are captured by the Mac app's WebKit rendering engine, resized to 1200px width, and returned as base64 JPEG images.
"Design Canvas is not running" The Mac app isn't open or isn't listening on port 7420. Open Design Canvas and make sure it shows the canvas view.
Routes show but pages are blank
The dev server isn't running. Start your dev server (e.g., npm run dev) and make sure Design Canvas is connected to it.
Screenshots are from WebKit, not Chrome Design Canvas uses WebKit (Safari's engine) for rendering. For pixel-perfect Chromium verification, use Playwright. The MCP screenshots are for quick layout checks, not cross-browser QA.
MIT
Add a web page route to the Design Canvas. The route is loaded from the connected dev server and displayed as a live frame on the infinite canvas. Returns the route ID for future reference.
CONSTRAINTS:
Path must start with '/' (e.g., '/dashboard', '/settings', '/blog/[slug]')
Do not pass full URLs — the dev server base URL is configured in the app
Use standard responsive widths: 1280 desktop (default), 768 tablet, 375 mobile
Position (x, y) is auto-calculated if omitted — frames stack horizontally
RESPONSIVE COMPARISON: To compare layouts at different viewports, add the same path multiple times with different widths. Example: add '/dashboard' at width 1280, then add '/dashboard' again at width 375.
Inputs: path (required), x, y, width, +1 more.
Capture fresh screenshots of routes on the Design Canvas. Triggers a new render (not cached), waits for pages to fully load, and returns screenshots as images. Screenshots use WebKit rendering — use for quick layout verification, not pixel-perfect cross-browser QA.
USAGE: Use after making code changes to visually verify how routes look. This is an expensive operation (several seconds) — do not call speculatively.
CONSTRAINTS:
Returns 3 images by default. Pass limit for more, or ids for specific routes.
If the canvas has many routes, pass specific route IDs to capture only what changed — this saves context space and is significantly faster
Route IDs are returned by list_routes and add_route
For precise cross-browser verification, use Playwright instead
Inputs: ids, limit.
List all routes currently displayed on the Design Canvas. Returns each route's ID, path, viewport dimensions (width × height), and canvas position.
USAGE: Call this before removing routes (you need the route ID for precise removal) or before adding routes (to avoid duplicates). Route IDs are stable — use them to reference specific frames.
Inputs: no named parameters.
Remove a route frame from the Design Canvas.
CONSTRAINTS:
Prefer removal by ID (from list_routes or add_route response) — unambiguous
Removal by path is supported but removes only the first match — risky when duplicate paths exist (e.g., same route at desktop + mobile widths)
If you need to remove a specific viewport size, call list_routes first to find the exact route ID
Inputs: id, path.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 4 tools
Each tool has a clearly distinct purpose: listing, adding, removing, and capturing. There is no overlap in functionality, and the descriptions strongly reinforce the boundaries between them.
All four tool names follow the same verb_noun pattern (list_routes, add_route, remove_route, capture_canvas). The naming is consistent, predictable, and easy to infer.
With 4 tools, the set is well-scoped for the server's purpose of managing routes on a design canvas. Each tool covers a core operation without unnecessary redundancy.
The set covers the main lifecycle (list, add, remove) and adds a capture action. An update route operation is missing, but adding/removing routes can serve as a workaround, so the gap is minor.
Design and edit Bloom canvases from AI coding agents with browser OAuth.
Lets your AI build and edit websites in Xodia, a visual website builder for real code (Vite, React, Tailwind CSS or plain HTML in your own git repo): read and write site files, create pages and CMS collections, run typecheck, design and link checks, take screenshots, manage forms and translations, and pick up change requests the user sends from the visual editor. Sign in once with your Xodia account (OAuth). Free plan, no card needed. Setup: https://xodia.ai/ai/mcp
Discover, compare, route, and execute machine-accessible capabilities for AI agents.
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
