Interactive Drawing MCP

# Interactive Drawing MCP This project is an example of a Model Context Protocol (MCP) server with an interactive drawing interface. It demonstrates how to build an MCP extension that includes a separate UI window for drawing, using Tkinter as the graphical interface. ## Features - **Drawing Grid Interface**: - Offers a 16x16 grid where each cell can be toggled between two states (filled or empty). - Provides a clear grid button to reset all cells. - **Server Capabilities**: - **Start Drawing Session**: Initializes a new session and launches the UI. - **Toggle Cell**: Toggle the color of individual cells via a command interface. - **Get Grid State**: Retrieve the current grid configuration as a text representation. - **Persistence**: Grid state is saved to a JSON file (`board_state.json`) to maintain consistency across sessions. - **UI and State Synchronization**: - **Real-Time UI Update**: A background thread continuously watches for updates to the grid state file and reflects changes visually. ## Installation ### Option 1: Install from Source 1. Clone this repository: ``` git clone https://github.com/AaronGoldsmith/interactive_draw_mcp cd interactive_draw_mcp ``` 2. Install the package: ``` pip install -e . ``` ## Usage ### As a Standalone MCP Server Run the server to open the drawing window: ``` interactive-draw-mcp ``` ### With Goose #### Option 1: Using Goose CLI (recommended) Start Goose with your extension enabled: ```bash # Local Development goose session --with-extension "python -m interactive-draw-mcp" ``` ## Tools - **Server Tools**: - `start_drawing_session()`: Initializes a drawing session and opens the UI. - `toggle_cell_color(row, col)`: Toggles the cell's color at specified `row` and `col`. - `get_grid_state()`: Provides a string representation of the grid's current state. ### Resources and References - **Inspiration**: This MCP draws inspiration from [Kvadratni/tik-tak-toe-mcp](https://github.com/Kvadratni/tik-tak-toe-mcp). ## Architecture Overview The architecture of this project demonstrates: 1. **MCP Server**: Manages communication between the Goose AI and the drawing interface via well-defined tools. 2. **Interactive UI**: Provides a visual interface for the grid. 3. **Integration with Goose AI**: Tool calls from Goose AI reflect directly onto the grid state and vice versa. ### Benefits - **Separation of Responsibilities**: Maintains clear separation between server logic and UI presentation. - **Improved User Experience**: Offers intuitive visual feedback alongside text-based command interface. - **Adaptability**: Can be extended to more sophisticated applications involving AI and interactive UIs.