JSON キャンバス MCP サーバー

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

概要

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

無限のキャンバスデータの作成と操作
すべてのノードタイプ (テキスト、ファイル、リンク、グループ) をサポート
スタイルとラベルによるエッジ接続
仕様に対する検証
設定可能な出力パス

Related MCP server: mcp-server-code-assist

コンポーネント

リソース

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

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ファイルをご覧ください。

JSON Canvas MCP Server