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。

先决条件

• （v18+）
• python 3.12+
• 紫外线 （Python包管理器）

安装

# 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 当准备好。

工具

形状类型

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客户端