金大哥 - JSON Canvas MCP 详情

article

README

🚀 JSON Canvas MCP 服务器

JSON Canvas MCP 服务器是一个实现了 Model Context Protocol (MCP) 协议的服务器，它依据官方规范，提供了用于处理 JSON Canvas 文件的工具。该服务器支持创建、修改和验证无限画布数据结构，为用户在画布操作方面提供了强大的功能支持。

🚀 快速开始

克隆仓库

使用 Git 克隆此项目：

git clone https://github.com/your-username/jsoncanvas.git
cd jsoncanvas

安装依赖

运行以下命令安装所需依赖项：

pip install -r requirements.txt

运行服务器

安装完成后，运行以下命令启动服务器：

python3 -m jsoncanvas.server

✨ 主要特性

JSON Canvas MCP 服务器完整实现了 JSON Canvas 1.0 规范，具备以下强大功能：

数据操作：支持创建和操作无限画布数据，满足多样化的画布使用需求。
节点类型丰富：支持所有节点类型，包括文本、文件、链接、组，为画布内容的构建提供了多种选择。
边连接及标签：提供带样式的边连接及标签，使画布元素之间的关系更加清晰。
规范验证：可对规范进行验证，确保画布数据的准确性和规范性。
输出路径可配置：用户能够根据自身需求配置输出路径。

📦 安装指南

环境变量配置

设置以下环境变量以自定义服务器行为：

JSONCANVAS_PORT：指定服务器监听的端口，默认为 3000。
JSONCANVAS_HOST：指定服务器绑定的主机地址，默认为 localhost。
JSONCANVAS_LOG_LEVEL：指定日志级别，可选值有 debug, info, warning, error，默认为 info。

配置文件

可以在项目根目录下创建一个 config.json 文件：

{
  "port": 3001,
  "host": "127.0.0.1",
  "log_level": "debug"
}

💻 使用示例

基础用法

使用 Claude Desktop 的方式一：通过命令行工具

安装并启动 Claude Desktop。
打开终端，运行以下命令：

python3 -m jsoncanvas.example

按照提示操作即可。

使用 Claude Desktop 的方式二：直接使用 API 接口

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")

高级用法

创建一个画布

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")

📚 详细文档

组件

资源

服务器公开了以下资源：

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

工具

节点操作

create_node
- 功能：创建任意类型的新节点。
- 输入：
  - type (字符串)：节点类型 ("text", "file", "link", "group")。
  - properties (对象)：节点特定属性。
    - 公共属性：id, x, y, width, height, color。
    - 类型特定属性：text, file, url 等。
- 返回：创建的节点对象。
update_node
- 功能：更新现有节点属性。
- 输入：
  - id (字符串)：要更新的节点 ID。
  - properties (对象)：要更新的属性。
- 返回：已更新的节点对象。
delete_node
- 功能：删除节点及其连接的边。
- 输入：
  - id (字符串)：要删除的节点 ID。
- 返回：无。

边操作

create_edge
- 功能：创建新边。
- 输入：
  - id (字符串)：边的唯一标识符。
  - from_node (字符串)：起始节点的 ID。
  - to_node (字符串)：目标节点的 ID。
  - label (字符串，可选)：边的标签。
  - color (字符串，可选)：边的颜色，默认为 "#000000"。
- 返回：创建的边对象。
update_edge
- 功能：更新现有边属性。
- 输入：
  - id (字符串)：要更新的边 ID。
  - properties (对象)：要更新的属性。
- 返回：无。
delete_edge
- 功能：删除指定边。
- 输入：
  - id (字符串)：要删除的边 ID。
- 返回：无。

📄 许可证

此项目采用 MIT 许可证。详见 LICENSE 文件。

JSON Canvas