JSON Canvas MCP 服务器

一个模型上下文协议 (MCP) 服务器实现，它提供了根据 官方规范 处理 JSON Canvas 文件的工具。此服务器支持创建、修改和验证无限画布数据结构。

概述

JSON Canvas MCP 服务器提供了 JSON Canvas 1.0 规范的完整实现，支持：

• 创建和操作无限画布数据
• 支持所有节点类型（文本、文件、链接、组）
• 具有样式和标签的边连接
• 针对规范进行验证
• 可配置的输出路径

组件

资源

服务器公开以下资源：

• canvas://schema: 用于验证画布文件的 JSON Schema
• canvas://examples: 演示不同功能的示例画布文件
• canvas://templates: 用于创建新画布的模板

工具

节点操作

• create_node

  • 创建任何支持类型的新节点
  • 输入：
    • type (string): 节点类型 ("text", "file", "link", "group")
    • properties (object): 节点特定属性
      • 通用: id, x, y, width, height, color
      • 类型特定: text, file, url 等
  • 返回：创建的节点对象

• update_node

  • 更新现有节点的属性
  • 输入：
    • id (string): 要更新的节点 ID
    • properties (object): 要更新的属性
  • 返回：更新的节点对象

• delete_node

  • 删除节点及其连接的边
  • 输入：
    • id (string): 要删除的节点 ID
  • 返回：成功确认

边操作

• create_edge

  • 在节点之间创建新边
  • 输入：
    • id (string): 唯一的边标识符
    • fromNode (string): 源节点 ID
    • toNode (string): 目标节点 ID
    • fromSide (optional string): 起始边 ("top", "right", "bottom", "left")
    • toSide (optional string): 结束边
    • color (optional string): 边颜色
    • label (optional string): 边标签
  • 返回：创建的边对象

• update_edge

  • 更新现有边的属性
  • 输入：
    • id (string): 要更新的边 ID
    • properties (object): 要更新的属性
  • 返回：更新的边对象

• delete_edge

  • 删除边
  • 输入：
    • id (string): 要删除的边 ID
  • 返回：成功确认

画布操作

• validate_canvas

  • 针对规范验证画布
  • 输入：
    • canvas (object): 要验证的画布数据
  • 返回：包含任何错误的验证结果

• export_canvas

  • 将画布导出为不同的格式
  • 输入：
    • format (string): 目标格式 ("json", "svg", "png")
    • canvas (object): 要导出的画布数据
  • 返回：以请求格式导出的画布

与 Claude Desktop 一起使用

Docker

将此添加到您的 claude_desktop_config.json：

{
  "mcpServers": {
    "jsoncanvas": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-v",
        "canvas-data:/data",
        "mcp/jsoncanvas"
      ],
      "env": {
        "OUTPUT_PATH": "/data/output"
      }
    }
  }
}

UV

{
  "mcpServers": {
    "jsoncanvas": {
      "command": "uv",
      "args": [
        "--directory",
        "/path/to/jsoncanvas",
        "run",
        "mcp-server-jsoncanvas"
      ],
      "env": {
        "OUTPUT_PATH": "./output"
      }
    }
  }
}

配置

可以使用环境变量配置服务器：

• OUTPUT_PATH: 将保存画布文件的目录（默认值："./output"）
• FORMAT: 画布文件的默认输出格式（默认值："json"）

构建

Docker 构建

docker build -t mcp/jsoncanvas .

本地构建

# 如果尚未安装，请安装 uv
curl -LsSf https://astral.sh/uv/install.sh | sh

# 创建虚拟环境并安装依赖项
uv venv
source .venv/bin/activate  # 在 Windows 上：.venv\Scripts\activate
uv pip install -e .

# 运行测试
pytest

使用示例

创建画布

from jsoncanvas import Canvas, TextNode, Edge

# 创建节点
title = TextNode(
    id="title",
    x=100,
    y=100,
    width=400,
    height=100,
    text="# Hello Canvas\n\nThis is a demonstration.",
    color="#4285F4"
)

info = TextNode(
    id="info",
    x=600,
    y=100,
    width=300,
    height=100,
    text="More information here",
    color="2"  # 使用预设颜色
)

# 创建画布
canvas = Canvas()
canvas.add_node(title)
canvas.add_node(info)

# 连接节点
edge = Edge(
    id="edge1",
    from_node="title",
    to_node="info",
    from_side="right",
    to_side="left",
    label="Connection"
)
canvas.add_edge(edge)

# 保存画布
canvas.save("example.canvas")

许可证

此 MCP 服务器是在 MIT 许可证下获得许可的。 这意味着您可以自由使用、修改和分发该软件，但须遵守 MIT 许可证的条款和条件。 有关更多详细信息，请参阅项目存储库中的 LICENSE 文件。