AI导哈

2D画布绘图服务

一个基于Konva.js的MCP服务器，使AI助手能够在2D画布上进行绘图，并支持无头运行在Node.js上。

  • by bilaltahseen
  • 本地部署
  • 更新于
在 GitHub 查看 bilaltahseen/konva-mcp

使用说明

conva mcp

MCP（模型上下文协议）服务器，使AI助手能够使用 Konva.js，在Node.js上无头运行。

建筑

Claude ←stdio→ Python MCP (FastMCP) ←HTTP→ Node.js bridge (Express + Konva)
  • Python MCP服务器 (server/)--使用FastMCP通过stdio公开12个工具，代理对网桥的调用。
  • Node.js网桥 (bridge/)--通过以下方式无头运行Konva.js canvas 包，管理画布状态，渲染PNG。

先决条件

安装

# Install Node.js bridge dependencies
cd bridge
npm install

# Python dependencies are managed automatically by uv — no manual step needed

用法

作为MCP服务器运行（适用于Claude Desktop或Claude Code）

cd server
uv run python main.py

服务器将Node.js网桥作为子进程启动，等待其准备就绪，然后开始通过stdio接受MCP请求。

Claude桌面配置

添加 claude_desktop_config.json:

{
  "mcpServers": {
    "konva-canvas": {
      "command": "uv",
      "args": ["run", "--directory", "/path/to/konva-mcp/server", "python", "main.py"]
    }
  }
}

Claude代码配置(.mcp.json)

{
  "mcpServers": {
    "konva-canvas": {
      "type": "stdio",
      "command": "uv",
      "args": ["run", "--directory", "/path/to/konva-mcp/server", "python", "main.py"]
    }
  }
}

独立运行网桥（用于测试）

cd bridge
node server.js

默认情况下，网桥在随机空闲端口上侦听（可通过以下方式覆盖 BRIDGE_PORT env var）并打印 BRIDGE_READY 当准备好。

工具

工具 说明
create_canvas 创建新画布（Stage+默认层）。退货 canvas_id 和 layer_id.
add_layer 将图层添加到现有画布。层从下到上渲染。
create_shape 在图层上绘制形状。请参阅下面的形状类型。
update_shape 更新形状的位置、大小、颜色或其他属性。
delete_shape 永久删除形状。
transform_shape 移动、旋转、缩放或翻转形状。
create_group 将多个形状组合成一个可寻址单元。
list_shapes 列出画布上的所有形状，可选择按层过滤。
clear_layer 从图层中删除所有形状（图层本身保留）。
get_canvas_state 返回画布的完整JSON状态。
preview_canvas 渲染画布并将其作为内联图像返回以进行视觉检查。
export_canvas 将完成的画布导出为PNG文件。

形状类型

rect, circle, ellipse, line, arrow, text, path, star, regular_polygon, wedge, ring, arc

推荐的工作流程

  1. create_canvas → get canvas_id 和 layer_id
  2. 添加形状 create_shape
  3. 呼叫 preview_canvas 在每个主要部分之后，目视检查进度
  4. 修复任何与 update_shape 或 delete_shape
  5. 呼叫 export_canvas 当设计完成时

项目结构

konva-mcp/
├── bridge/
│   ├── server.js              # Express entry point
│   └── src/
│       ├── canvasManager.js   # Canvas state (Map of canvas_id → Stage)
│       └── handlers/          # Action dispatcher and per-action handlers
└── server/
    ├── main.py                # Entry point: finds free port, starts bridge, runs MCP
    ├── pyproject.toml
    └── src/
        ├── mcp_server.py      # FastMCP tool definitions (12 tools)
        ├── bridge_client.py   # httpx async HTTP client
        └── bridge_process.py  # asyncio subprocess manager

依赖项

Node.js网桥

  • konva ^10.2.0——二维画布库
  • canvas ^3.2.1-Node.js的无头Canvas API
  • express ^5.2.1-HTTP服务器
  • nanoid ^5--唯一ID生成

Python MCP服务器

  • fastmcp >=3.1.0-MCP服务器框架
  • httpx >=0.28.1--异步HTTP客户端

相关 MCP