JSON キャンバス MCP サーバー

モデルコンテキストプロトコル（MCP）サーバー実装。公式仕様に従ってJSON Canvasファイルを操作するためのツールを提供します。このサーバーは、無限のCanvasデータ構造の作成、変更、検証を可能にします。

概要

JSON Canvas MCP サーバーは、JSON Canvas 1.0 仕様の完全な実装を提供し、次のことを可能にします。

• 無限のキャンバスデータの作成と操作

• すべてのノード タイプ (テキスト、ファイル、リンク、グループ) をサポート

• スタイルとラベルによるエッジ接続

• 仕様に対する検証

• 設定可能な出力パス

Related MCP server: MCP REST API Server

コンポーネント

リソース

サーバーは次のリソースを公開します。

• canvas://schema : キャンバスファイルを検証するための JSON スキーマ

• canvas://examples : さまざまな機能を示すサンプルキャンバスファイル

• canvas://templates : 新しいキャンバスを作成するためのテンプレート

ツール

ノード操作

• ノード作成

  • サポートされている任意のタイプの新しいノードを作成します

  • 入力：

    • type (文字列): ノードタイプ ("text", "file", "link", "group")

    • properties （オブジェクト）：ノード固有のプロパティ

      • 共通: id 、 x 、 y 、 width 、 height 、 color

      • タイプ固有: text 、 file 、 urlなど。

  • 戻り値: 作成されたノードオブジェクト

• ノードの更新

  • 既存のノードのプロパティを更新する

  • 入力：

    • id (文字列): 更新するノードID

    • properties (オブジェクト): 更新するプロパティ

  • 戻り値: 更新されたノードオブジェクト

• ノードの削除

  • ノードとそれに接続されたエッジを削除する

  • 入力：

    • id (文字列): 削除するノードID

  • 戻り値: 成功確認

エッジオペレーション

• エッジを作成する

  • ノード間に新しいエッジを作成する

  • 入力：

    • id (文字列): 一意のエッジ識別子

    • fromNode (文字列): ソースノードID

    • toNode (文字列): ターゲットノードID

    • fromSide (オプションの文字列): 開始側 ("top", "right", "bottom", "left")

    • toSide (オプションの文字列): 終了側

    • color (オプションの文字列): エッジの色

    • label （オプションの文字列）：エッジラベル

  • 戻り値: 作成されたエッジオブジェクト

• 更新エッジ

  • 既存のエッジのプロパティを更新する

  • 入力：

    • id (文字列): 更新するエッジID

    • properties (オブジェクト): 更新するプロパティ

  • 戻り値: 更新されたエッジオブジェクト

• 削除エッジ

  • エッジを削除する

  • 入力：

    • id (文字列): 削除するエッジID

  • 戻り値: 成功確認

キャンバスオペレーション

• 検証キャンバス

  • 仕様に基づいてキャンバスを検証する

  • 入力：

    • canvas （オブジェクト）：検証するキャンバスデータ

  • 戻り値: エラーを含む検証結果

• エクスポートキャンバス

  • キャンバスをさまざまな形式でエクスポートする

  • 入力：

    • format (文字列): ターゲット形式 ("json", "svg", "png")

    • canvas (オブジェクト): エクスポートするキャンバスデータ

  • 戻り値: 要求された形式でエクスポートされたキャンバス

Claude Desktopでの使用

ドッカー

これをclaude_desktop_config.jsonに追加します:

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

紫外線

{
  "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 .

ローカルビルド

# Install uv if not already installed
curl -LsSf https://astral.sh/uv/install.sh | sh

# Create virtual environment and install dependencies
uv venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate
uv pip install -e .

# Run tests
pytest

使用例

キャンバスを作成する

from jsoncanvas import Canvas, TextNode, Edge

# Create nodes
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"  # Using preset color
)

# Create canvas
canvas = Canvas()
canvas.add_node(title)
canvas.add_node(info)

# Connect nodes
edge = Edge(
    id="edge1",
    from_node="title",
    to_node="info",
    from_side="right",
    to_side="left",
    label="Connection"
)
canvas.add_edge(edge)

# Save canvas
canvas.save("example.canvas")

ライセンス

このMCPサーバーはMITライセンスに基づいてライセンスされています。つまり、MITライセンスの条件に従って、ソフトウェアを自由に使用、改変、配布することができます。詳細については、プロジェクトリポジトリのLICENSEファイルをご覧ください。