AI导哈

SVG协作画布服务

Sketch MCP Server是一个实时的SVG协作画布服务，允许Claude Code通过MCP工具读写SVG，用户可以在Fabric.js浏览器编辑器中进行编辑，并通过WebSocket实现实时同步。

  • by glebis
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 glebis/sketch-mcp-server

使用说明

草图MCP服务器

Claude Code的协作SVG画布。Claude通过MCP工具写入/读取SVG；您可以在Fabric.js浏览器编辑器中编辑。通过WebSocket实时同步更改。

建筑

Claude Code <--stdio/MCP--> Node.js Server <--WebSocket--> Browser Editor(s)
                            (Express + WS)                  (Fabric.js)

安装

git clone https://github.com/glebis/sketch-mcp-server.git
cd sketch-mcp-server
npm install
npm run build

添加到您的Claude Code MCP配置中(~/.claude/settings.json 或项目 .mcp.json):

{
  "mcpServers": {
    "sketch-mcp-server": {
      "command": "node",
      "args": ["/path/to/sketch-mcp-server/dist/index.js", "--stdio"]
    }
  }
}

MCP工具

工具 说明
sketch_open_canvas 创建/打开一个命名画布，启动浏览器窗口
sketch_get_svg 读取当前SVG（base64图像截断为25KB）
sketch_set_svg 替换整个画布SVG
sketch_add_element 添加SVG片段而不清除现有内容
sketch_add_textbox 添加带换行功能的固定宽度文本区域
sketch_lock_objects 锁定所有对象（不可选、不可移动）
sketch_unlock_objects 解锁所有对象
sketch_save_template 将画布另存为JSON模板
sketch_load_template 将JSON模板加载到画布中
sketch_list_templates 列出已保存的模板
sketch_clear_canvas 将画布清除为空白
sketch_focus_canvas 将画布窗口置于前台
sketch_list_canvases 列出活动画布会话
sketch_close_canvas 关闭画布和浏览器窗口

编辑器功能

  • 工具栏：选择、绘制（徒手）、形状（矩形、椭圆形、三角形、直线、箭头）、文本
  • 文本工具：单击可获得自由宽度的IText，拖动可获得固定宽度的带换行符的Textbox
  • 撤销/重做：Ctrl+Z/Ctrl+Shift+Z
  • 删除：空格键/删除键
  • 剪贴板：从剪贴板粘贴图像和SVG
  • 实时同步：所有MCP工具调用都会立即更新浏览器

模板

模板将完整的Fabric.js画布状态保存为JSON，保留文本框宽度、锁状态和所有对象属性。

# Build a layout, lock structure, add editable areas, save
sketch_open_canvas -> sketch_add_element -> sketch_lock_objects -> sketch_add_textbox -> sketch_save_template

# Reuse on a new canvas
sketch_open_canvas -> sketch_load_template

包含的模板： before-after --带有可编辑文本区域的3列网格（前|产品/受众|后）。

发展

npm run build    # type-check + vite (editor) + bun (server)
npm run dev      # build + run
npm start        # run built server

端口由操作系统分配（端口0），在启动时记录到stderr。

许可证

麻省理工学院

相关 MCP