Interactive Draw 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 with a separate drawing interface, using Tkinter as the graphical interface.

✨ Features

• Drawing Grid Interface:

  • Provides a 16x16 grid where each cell can be toggled between two states (filled or blank).
  • Offers a button to clear the grid and reset all cells.

• Server Functions:

  • Start Drawing Session: Initializes a new session and opens the interface.
  • Toggle Cell Color: Switches the color of the cell at the specified row and col through the command interface.
  • Get Grid State: Returns a text representation of the current grid configuration.

• Persistent Storage: The grid state is saved to a JSON file (board_state.json) to maintain consistency across different sessions.

• UI and State Synchronization:

  • Real-time UI Updates: A background thread continuously monitors the grid state file and reflects changes in the interface.

📦 Installation

Option 1: Install from Source Code

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 Examples

As an Independent MCP Server

Run the server to open the drawing window:

interactive-draw-mcp

Integration with Goose

Option 1: Use Goose CLI (Recommended)

Enable the extension to start a Goose session:

# Local development
goose session --with-extension "python -m interactive-draw-mcp"

🔧 Technical Details

Server Tools

• start_drawing_session(): Initializes a drawing session and opens the interface.
• toggle_cell_color(row, col): Toggles the color of the cell at the specified row and col.
• get_grid_state(): Returns a string representation of the current grid state.

Resources and References

• Inspiration Source: This MCP is inspired by Kvadratni/tik-tak-toe-mcp.

📚 Documentation

Architecture Overview

The project architecture demonstrates:

1. MCP Server: Manages communication between Goose AI and the drawing interface through well-defined tools.
2. Interactive UI: Provides a visual interface for the grid.
3. Integration with Goose AI: Tool calls from Goose AI are directly reflected in the grid state, and vice versa.

Advantages

• Separation of Duties: Maintains a clear division between logic and presentation.
• Improved User Experience: Provides intuitive visual feedback while retaining a text-based command interface.
• Adaptability: Can be extended to more complex applications involving AI and interactive interfaces.