Interactive Drawing MCP

インタラクティブ描画 MCP

このプロジェクトは、インタラクティブな描画インターフェースを備えた Model Context Protocol（MCP）サーバーのサンプルです。Tkinter をグラフィカルインターフェースとして使用し、描画用の独立した UI ウィンドウを含む MCP 拡張機能の構築方法を紹介します。

機能

• 描画グリッドインターフェース：

  • 16x16 のグリッドを用意し、各セルを塗りつぶしまたは空の 2 つの状態に切り替えられます。
  • すべてのセルをリセットするグリッドクリアボタンを備えています。

• サーバーの機能：

  • 描画セッションの開始：新しいセッションを初期化し、UI を起動します。
  • セルの切り替え：コマンドインターフェースを介して、個々のセルの色を切り替えます。
  • グリッドの状態の取得：現在のグリッド設定をテキスト形式で取得します。

• 永続化：セッション間で一貫性を保つため、グリッドの状態を JSON ファイル（board_state.json）に保存します。

• UI と状態の同期：

  • リアルタイム UI 更新：バックグラウンドスレッドがグリッド状態ファイルの更新を継続的に監視し、変更を視覚的に反映します。

インストール

オプション 1：ソースからインストール

1. このリポジトリをクローンします：

   git clone https://github.com/AaronGoldsmith/interactive_draw_mcp
   cd interactive_draw_mcp
   

2. パッケージをインストールします：

   pip install -e .
   

使用方法

スタンドアロン MCP サーバーとして

サーバーを実行して描画ウィンドウを開きます：

interactive-draw-mcp

Goose で使用する

オプション 1：Goose CLI を使用（推奨）

拡張機能を有効にして Goose を起動します：

# Local Development
goose session --with-extension "python -m interactive-draw-mcp"

ツール

• サーバーツール：
  • start_drawing_session()：描画セッションを初期化し、UI を開きます。
  • toggle_cell_color(row, col)：指定した row と col のセルの色を切り替えます。
  • get_grid_state()：グリッドの現在の状態を文字列形式で返します。

リソースと参考情報

• 着想元：この MCP は Kvadratni/tik-tak-toe-mcp から着想を得ています。

アーキテクチャの概要

このプロジェクトのアーキテクチャでは、次の点を紹介しています。

1. MCP サーバー：明確に定義されたツールを介して、Goose AI と描画インターフェース間の通信を管理します。
2. インタラクティブ UI：グリッドの視覚的なインターフェースを提供します。
3. Goose AI との統合：Goose AI からのツール呼び出しはグリッドの状態に直接反映され、その逆も同様です。

メリット

• 責務の分離：サーバーロジックと UI 表示を明確に分離します。
• ユーザーエクスペリエンスの向上：テキストベースのコマンドインターフェースに加え、直感的な視覚フィードバックを提供します。
• 拡張性：AI とインタラクティブ UI を活用する、より高度なアプリケーションへ拡張できます。