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
Git
Model Context Protocol Servers
TrendRadar
🎯 Say goodbye to information overload. AI helps you understand news hotspots...
repomix
📦 Repomix is a powerful tool that packs your entire repository into a...
easy-code-reader
A powerful MCP (Model Context Protocol) server for intelligently reading...
strudel-mcp-server
A Model Context Protocol (MCP) server that gives Claude direct control over...
awesome-context-engineering
A curated list of awesome open-source libraries for context engineering...