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., "@svg-whiteboard-mcp create a canvas and add a red circle"
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 that keeps SVG path canvases in memory, serves a loopback HTML preview (127.0.0.1), and returns proj-airi Surface embedUrl payloads so AIRI can render chat tool results in a sandbox iframe.
Tool | Purpose |
| New canvas → |
| Remove canvas |
| List ids / sizes / path counts |
| Append SVG |
| Remove path by id |
| Inspect paths on a canvas |
| Return |
| Same envelope for arbitrary |
Related MCP server: canvas-relay
pnpm install
pnpm build
node dist/index.jsMCP client config example:
{
"mcpServers": {
"svg-whiteboard": {
"command": "node",
"args": ["/absolute/path/to/svg-whiteboard-mcp/dist/index.js"]
}
}
}Node 20+
Host (e.g. Electron) must allow the renderer to load http://127.0.0.1:* preview URLs.
structuredContent includes:
{
"projAiriSurface": {
"version": 1,
"kind": "embedUrl",
"title": "...",
"data": { "url": "http://127.0.0.1:PORT/preview/CANVAS_ID", "mimeType": "text/html" }
}
}Aligns with @proj-airi/mcp-surface-contract in the AIRI monorepo.
Add an SVG path (d attribute) to a canvas.
Inputs: d (required), canvasId (required), fill, stroke, +2 more.
Create a new SVG whiteboard canvas. Returns canvas id for add_path and present_preview.
Inputs: name (required), width, height, backgroundColor.
Delete a canvas by id.
Inputs: canvasId (required).
Remove a path from a canvas.
Inputs: pathId (required), canvasId (required).
List all canvases with id, name, size, path count.
Inputs: no named parameters.
List paths on a canvas (id and d) for inspection.
Inputs: canvasId (required).
Return proj-airi Surface (embedUrl) so AIRI and other hosts show this canvas in a sandbox iframe. The URL is served on loopback by this MCP process. Call after drawing or when the user should see the board.
Inputs: canvasId (required), title, summary.
Generic proj-airi envelope: embed any safe http(s) URL in AIRI chat (sandbox iframe). Same contract as other proj-airi MCP servers.
Inputs: url (required), title, summary, mimeType.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 8 tools
Most tools have distinct purposes: canvas CRUD, path CRUD, and presentation. However, present_preview and proj_airi_present_surface both involve pushing content to AIRI, which could cause ambiguity despite differing descriptions.
All tool names follow a consistent verb_noun pattern with lowercase and underscores, e.g., create_canvas, add_path, present_preview. The proj_airi prefix maintains consistency.
Eight tools are well-scoped for an SVG whiteboard: three for canvas CRUD, three for path CRUD, and two for presentation. No tools feel extraneous or missing.
Core CRUD is present but missing update operations for both canvases (e.g., rename) and paths (e.g., modify d attribute). This is a notable gap that may frustrate agents.
OAuth-protected, read-only-by-default MCP server for provenance-labeled QuillCaddie project memory.
Bar-first MCP server for Tabula chart authoring, PNG rendering, and editor handoff.
Collaborative whiteboard MCP server — create objects, connectors, C4 diagrams, and manage boards
Experimental MCP server for current empirical verification of explicit public HTTPS endpoint claims.