JSON Canvas

🚀 JSON Canvas MCP サーバー

このサーバーは、公式仕様に基づき、Model Context Protocol (MCP) プロトコルを実装し、JSON Canvas ファイルを処理するためのツールを提供します。無限のキャンバスデータ構造の作成、修正、検証をサポートしています。

🚀 クイックスタート

JSON Canvas MCP サーバーは、JSON Canvas 1.0 仕様を完全に実装しており、以下の機能をサポートしています。

• 無限のキャンバスデータの作成と操作
• すべてのノードタイプ（テキスト、ファイル、リンク、グループ）のサポート
• スタイル付きのエッジ接続とラベル
• 仕様の検証
• 出力パスの設定可能

✨ 主な機能

リソース

サーバーは以下のリソースを公開しています。

• 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
  • 戻り値：なし

💻 使用例

基本的な使用法

Claude Desktop を使用する方法は以下の通りです。

方法1：コマンドラインツールを使用する

1. Claude Desktop をインストールして起動します。
2. ターミナルを開き、以下のコマンドを実行します。

python3 -m jsoncanvas.example

3. 指示に従って操作します。

方法2：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")

📚 ドキュメント

環境変数の設定

以下の環境変数を設定して、サーバーの動作をカスタマイズできます。

• 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"
}

📦 インストール

リポジトリをクローンする

Git を使用してこのプロジェクトをクローンします。

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

依存関係をインストールする

以下のコマンドを実行して、必要な依存関係をインストールします。

pip install -r requirements.txt

サーバーを起動する

インストールが完了したら、以下のコマンドを実行してサーバーを起動します。

python3 -m jsoncanvas.server

📄 ライセンス

このプロジェクトは MIT ライセンスの下で提供されています。詳細は LICENSE ファイルを参照してください。