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