Rayzia MCP — an MCP server that drives a real SVG editor

Rayzia is a free online SVG/vector editor. This MCP server lets an AI agent (Claude Code, Claude Desktop, or any MCP client) drive the running editor: draw with real tools, edit the artwork already on the canvas, read scene state back, and render PNGs so the model can see its own work.

Unlike generate-only servers that write an SVG file and hand it over, this one gives the agent a full observe-and-act loop on a live canvas — and the human watches every operation land, with each step one undo away.

Docs: rayzia.com/mcp · Editor: rayzia.com/vector

MCP client ──stdio JSON-RPC──▶ server.mjs ──SSE /events──▶ browser bridge
                                    ▲                            │
                                    └──────── POST /reply ───────┘
browser bridge ──▶ editor host facade ──▶ engine (runs in a worker)

Zero npm dependencies — Node ≥16 built-ins only. The HTTP bridge binds to 127.0.0.1 and every operation carries a per-browser capability token.

Quickstart — the in-app way (recommended)

The editor has the browser side built in:

1. Open the editor at rayzia.com/vector.

2. Open the AI Assistant panel → settings (gear) → Claude Code (local).

3. Copy the SKILL.md the pane generates — it embeds this server's code, your browser's capability token and the bridge port. Give it to Claude Code; it saves the server file and registers it as an MCP server:

   claude mcp add rayzia \
     --env AI_MCP_PORT=<port> --env AI_MCP_TOKEN=<token> \
     -- node /absolute/path/to/rayzia-mcp-server.mjs

4. Click Connect. The status dot turns green. Type in Claude Code directly, or chat from the panel by telling Claude Code to "listen for Rayzia panel prompts".

Related MCP server: Excalidraw MCP Server

Quickstart — any MCP client

1. Run the editor in a browser and connect the bridge (in-app Connect as above, or paste bridge.js into the editor's DevTools console).

2. Point your MCP client at the server over stdio:

   {
     "mcpServers": {
       "rayzia": {
         "command": "node",
         "args": ["/absolute/path/to/server.mjs"],
         "env": { "AI_MCP_PORT": "8765", "AI_MCP_TOKEN": "<token>" }
       }
     }
   }

Diagnostics go to stderr (stdout is the JSON-RPC channel). Default bridge port is 8765, override with AI_MCP_PORT.

Tools

Security

• The server binds to 127.0.0.1 only, and rejects requests whose Host header is not loopback (closes the DNS-rebinding drive path).

• Every operation carries a capability token (AI_MCP_TOKEN) generated once per browser; the editor bridge rejects ops with a mismatched token, so a rogue local process squatting the port cannot drive the canvas.

• File and document operations (save / open / new / import) are deny-listed at the engine boundary.

• Connecting is opt-in from the editor's side. The panel /prompt inbox is token-authenticated too, so a local web page cannot inject prompts.

Do not expose the bridge port beyond localhost.

Self-test

_selftest.mjs spawns the server, waits for a browser bridge, then drives the full round-trip (initialize → tools/list → get_catalog → createShape → addGradient → get_state → get_svg):

AI_MCP_PORT=8791 node _selftest.mjs

Expect SELFTEST PASS.

License

MIT © 2026 Rayzia