Content
# 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.
Connection Info
You Might Also Like
awesome-mcp-servers
A collection of MCP servers.
git
A Model Context Protocol server for Git automation and interaction.
Appwrite
Build like a team of hundreds
TrendRadar
TrendRadar: Your hotspot assistant for real news in just 30 seconds.
oh-my-opencode
Background agents · Curated agents like oracle, librarians, frontend...
chatbox
User-friendly Desktop Client App for AI Models/LLMs (GPT, Claude, Gemini, Ollama...)