Interactive Draw MCP

🚀 インタラクティブなMCPの描画

このプロジェクトは、インタラクティブな描画インターフェースを備えたモデルコンテキストプロトコル（MCP）サーバーのサンプルです。Tkinterをグラフィックインターフェースとして使用し、個別の描画インターフェースを含むMCP拡張機能の構築方法を示しています。

✨ 主な機能

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

  • 16x16のグリッドを提供し、各セルは2つの状態（塗りつぶしまたは空白）に切り替えることができます。
  • グリッドをクリアするボタンを提供し、すべてのセルをリセットします。

• サーバー機能：

  • 描画セッションの開始：新しいセッションを初期化し、インターフェースを開きます。
  • セルの色を切り替える：コマンドインターフェースを介して、指定されたrowとcolの位置のセルの色を切り替えます。
  • グリッドの状態を取得する：現在のグリッド構成のテキスト表現を返します。

• 永続化ストレージ：グリッドの状態は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セッションを開始します：

# ローカル開発
goose session --with-extension "python -m interactive-draw-mcp"

📚 ドキュメント

ツールとアーキテクチャの概要

• サーバーツール：
  • start_drawing_session()：描画セッションを初期化し、インターフェースを開きます。
  • 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からのツール呼び出しは直接グリッドの状態に反映され、逆もまた同様です。

利点

• 責任の分離：ロジックと表示の間に明確な区別を維持します。
• ユーザー体験の向上：直感的な視覚フィードバックを提供しながら、テキストベースのコマンドインターフェースを維持します。
• 適応性：AIとインタラクティブなインターフェースを含む、より複雑なアプリケーションに拡張することができます。