AI Drawing Guesser

What it does

AI Drawing Guesser is an interactive drawing game that renders a canvas UI inside your MCP host. You sketch something on the canvas, then ask the AI to analyze your drawing and guess what it is. The AI returns guesses with confidence scores, and you confirm or keep drawing. It's a fun, hands-on demonstration of the MCP Apps Extension (SEP-1865), showing how interactive HTML UIs can be served from an MCP server with bidirectional communication between the UI and the host.

Key features

• Drawing canvas with smooth freehand drawing, touch and mouse support, and a multi-color palette
• AI guessing — click "Ask AI to Guess" and the server's analyze_drawing tool returns ranked guesses with confidence scores
• Undo and clear to fix mistakes or start a fresh sketch
• Theme-aware styling — automatically adapts to the host's light or dark mode
• Real-time model context updates — the AI is notified of drawing progress as you sketch via debounced updateModelContext() calls

Installation

Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "drawing-guesser": {
      "command": "node",
      "args": ["/absolute/path/to/ai-drawing-guesser-mcp-app/dist/server/index.js"]
    }
  }
}

Restart Claude Desktop, then say "Let's play the drawing game!" or "Start the AI drawing guesser."

MCP Inspector (development)

npx @modelcontextprotocol/inspector node dist/server/index.js

Supported hosts

Claude Desktop (confirmed in README). Also works with the MCP Inspector for development.