能驱动真实 SVG 编辑器的 MCP 服务器

许多面向矢量图形的 MCP 服务器只是生成一个 SVG 文件然后交给你。Rayzia 的 MCP 则把你的 AI 智能体接入一个在浏览器中运行的真实编辑器:它用和你一样的工具绘图,并直接编辑画布上已有的作品。每个操作都实时呈现在你眼前,你随时可以接手。编辑器本身免费,在浏览器中运行,无需安装任何东西。

不只是又一个文件生成器

能写出 SVG 文件的 MCP 服务器有很多。那只是一次没有反馈的工具调用:模型靠猜测坐标,然后你在别处打开结果才发现哪里出了问题。Rayzia 的服务器则为智能体提供完整的观察—行动闭环。 get_state 读取场景:当前选区、每个对象的 id 和包围盒、填色、活动工具以及当前视图。 get_render 返回画布的 PNG,让模型能看到自己的作品。

由于操作经由真实引擎执行,智能体并不局限于输出标记代码。它可以让文字沿路径排布、应用封套变形、填充渐变,并运行你手动操作时使用的同一批实时路径效果。每个语义动词都是一步撤销,一批步骤也只算一次撤销,走错一步只需一次 Ctrl+Z。

这个闭环也可以反向运行。编辑器的 AI 助手面板内置 Claude Code (local) 提供方:你在面板里输入的提示会通过 wait_for_prompt传给智能体,面板会在智能体工作时实时播报每一步操作。完成后,它会用 reply_to_user.

工具一览

九个工具覆盖整个闭环。 get_catalog 相当于地图:它返回带参数模式的语义动词、533 个原始命令、69 种效果和 57 个工具,让智能体发现编辑器能做什么,而不是凭空臆造一个 API。

工具作用
get_catalog发现编辑器暴露的一切:带参数模式的语义动词、533 个原始命令、69 种效果和 57 个工具。请先调用它。
get_state读取当前场景:选区、所有对象(递归进组)的 id、包围盒和填色,以及活动工具、文档尺寸和视图。
run_verb面向形状、文字、渐变、混合、变形以及约 200 种实时路径效果等的高级动词。每个动词是一步撤销;一批动词在一次往返中执行,也只算一次撤销。
draw通过合成输入用真实工具绘图:钢笔路径或手绘笔画,并支持修饰键进行形状生成器打孔和网格编辑。
run_command逃生舱:按名称运行任意原始引擎命令。文件和文档操作在引擎边界处被列入拒绝名单。
get_svg把当前文档导出为可安全往返的 SVG 字符串。
get_render把画布渲染成 PNG,让模型能看到自己的作品。
wait_for_prompt长轮询等待用户在编辑器 AI 助手面板中输入的下一条提示。
reply_to_user把一条简短的助手回复发回该面板。

快速上手:五步连接 Claude Code

  1. 打开 AI 面板。 在 rayzia.com 的编辑器/vector/中,打开 AI 助手面板并点击设置齿轮。
  2. 选择 Claude Code (local)。 在提供方列表中选中它;此提供方不需要 API 密钥。
  3. 复制 SKILL.md。 面板会生成一个内嵌完整服务器的技能文件,并附上你浏览器的能力令牌和桥接端口;复制或下载后交给 Claude Code。
  4. 让 Claude Code 注册服务器。 它会保存服务器文件并将其添加为 MCP 服务器:
    claude mcp add rayzia \
      --env AI_MCP_PORT=<port> --env AI_MCP_TOKEN=<token> \
      -- node /absolute/path/to/rayzia-mcp-server.mjs
  5. 点击连接。 状态指示灯变绿;你可以直接在 Claude Code 里输入,也可以在面板中聊天——只需告诉 Claude Code『监听 Rayzia 面板提示』。

服务器是单个文件,开源于 github.com/RayziaOfficial/rayzia-mcp。其他 MCP 客户端可通过标准的 .mcp.json 条目使用它:

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

为本地而生

服务器是一个零 npm 依赖的单个 Node 文件(仅使用 Node 16+ 内置模块),并绑定到 127.0.0.1,因此绝不会被机器外部访问。每个操作都携带一个每浏览器只生成一次的能力令牌,令牌不匹配的操作会被编辑器拒绝,所以即便有恶意本地进程抢占端口,也无法操控你的画布。

文件和文档操作(保存、打开、新建和导入)在引擎边界处被列入拒绝名单。连接需要在编辑器侧手动开启,并且也适用于已部署的 https 版编辑器:桥接会响应 Chrome 的私有网络访问预检,使页面能够访问回环服务器。

如果你想要 AI 生成的矢量图而不想折腾开发者那套流程,编辑器内置的助手用你自己的 Claude 或 GPT 账号即可搞定:参见 AI SVG 生成器.

Rayzia MCP:常见问题

它能与 Claude Code 及其他 MCP 客户端配合吗?

可以。应用内流程围绕 Claude Code 设计:编辑器生成一个 SKILL.md,Claude Code 用一条 claude mcp add 命令注册服务器。任何支持通过 stdio 使用 JSON-RPC 的 MCP 客户端都可以通过标准的 .mcp.json 条目使用同一个服务器。

让智能体操控我的编辑器安全吗?

服务器只绑定 127.0.0.1,编辑器对每个操作都验证按浏览器生成的能力令牌,因此其他本地进程无法控制画布。文件和文档操作(保存、打开、新建和导入)在引擎边界处被列入拒绝名单,而且只有在你点击连接之后连接才会存在。

AI 的编辑结果仍可编辑、可撤销吗?

可以。智能体在同一文档中使用同一引擎工作,它做出的一切都是可以继续编辑的普通矢量作品。每个语义动词是一步撤销,一批动词也只算一次撤销,Ctrl+Z 的表现和你自己的编辑完全一样。

需要额外付费吗?

不需要。MCP 集成随免费编辑器提供,AI 使用你自己的账号运行:Claude Code 在你的机器上按你自己的套餐执行。Rayzia 免费版包含全部工具和 AI 助手以及 3 个云端文件;Pro 为每月 $8,提供无限云端文件、30 天版本历史、无水印分享链接和 PDF 导出。