Skip to content

Conversation

@antonpk1
Copy link
Collaborator

@antonpk1 antonpk1 commented Jan 18, 2026

Simple MCP App example: minimalistic drawing canvas with color picker.

What it does

  • Opens a drawing canvas via the draw tool
  • User picks colors and draws freehand
  • Drawing is debounced (1s) and sent as a PNG image via updateModelContext
  • Model can then describe what the user drew

Implementation

  • Based on basic-server-vanillajs template
  • Vanilla JS, no React
  • Canvas scales export to max 256px (longest side)
  • Uses pointer events for mouse + touch support

Testing

  1. Add to Claude Desktop config:
"paint": {
  "command": "node",
  "args": ["path/to/ext-apps/examples/paint-server/dist/index.js", "--stdio"]
}
  1. Ask Claude to draw
  2. Draw something on the canvas
  3. Ask Claude "what did I draw?"

Simple MCP App example that provides a drawing canvas where users can:
- Pick colors from a palette
- Draw freehand with pointer/touch
- Clear the canvas

The drawing is debounced (1s) and sent as a PNG image via
updateModelContext so the model can see what was drawn.

Export is scaled to max 256px on longest side to fit within
the 4000 token model context limit.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants