The MCP server that drives a real SVG editor

Not another file generator

Plenty of MCP servers can write an SVG file. That is one tool call with no feedback: the model guesses at coordinates, then you open the result somewhere else to find out what went wrong. Rayzia's server gives the agent a full observe-and-act loop instead. get_state reads the scene: the selection, every object's id and bounding box, paints, the active tool and the current view. get_render returns a PNG of the canvas so the model can see its own work.

Because actions run through the real engine, the agent is not limited to emitting markup. It places type on a path, applies envelope warps, pours gradients and runs the same live path effects you would apply by hand. Each semantic verb is a single undo step, and a batch of steps lands as a single undo, so a wrong move is one Ctrl+Z away.

The loop also runs in reverse. The editor's AI Assistant panel has a Claude Code (local) provider: prompts you type there reach the agent through wait_for_prompt, and the panel narrates each operation live as the agent works. When it finishes, it posts a short reply back with reply_to_user.

The tools

Nine tools cover the whole loop. get_catalog is the map: it returns the semantic verbs with parameter schemas, 533 raw commands, 69 effects and 57 tools, so the agent discovers what the editor can do instead of hallucinating an API.

Quickstart: connect Claude Code in five steps

1. Open the AI panel. In the editor at rayzia.com/vector/, open the AI Assistant panel and click the settings gear.
2. Pick Claude Code (local). Select it in the Providers list; this provider needs no API key.
3. Copy the SKILL.md. The pane generates a skill with the entire server embedded, plus your browser's capability token and bridge port; copy or download it and hand it to Claude Code.
4. Let Claude Code register the server. It saves the server file and adds 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

5. 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".

The server is a single file, open source at github.com/RayziaOfficial/rayzia-mcp. Other MCP clients use it through a standard .mcp.json entry:

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

Local by design

The server is a single Node file with zero npm dependencies (Node 16+ built-ins only), and it binds to 127.0.0.1, so the server is never reachable from outside your machine. Every operation carries a capability token generated once per browser, and the editor rejects any operation with a mismatched token, so a rogue local process squatting on the port cannot drive your canvas.

File and document operations (save, open, new and import) are deny-listed at the engine boundary. Connecting is opt-in from the editor's side, and it works with the deployed https editor too: the bridge answers Chrome's Private Network Access preflight so the page can reach the loopback server.

If you want AI-made vectors without the developer plumbing, the in-editor assistant covers that with your own Claude or GPT account: see the AI SVG generator.

Rayzia MCP: common questions