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:

# 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.

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.