草图MCP服务器
Claude Code的协作SVG画布。Claude通过MCP工具写入/读取SVG；您可以在Fabric.js浏览器编辑器中编辑。通过WebSocket实时同步更改。
建筑
Claude Code Node.js Server 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。
许可证
麻省理工学院