Pixel Art Generator

hello

What we built

Pixel Generator is a shared pixel-art canvas that people and AI agents can draw on. Users describe an idea to an external agent, and the agent places exact colors through WebMCP tools. People can also drag across the canvas to paint random colors.

The canvas starts at 51×51, grows in odd sizes up to 111×111, and always keeps (0,0) at its center. It includes light/dark themes, a grid toggle, local saving, and one-step undo.

inspiration from 3Blue1Brown video : where he was explain how image generation works

Stack

We kept it simple:

HTML and CSS for the page and controls.
Vanilla JavaScript ES modules for application logic.
Canvas 2D for rendering instead of thousands of individual HTML elements.
WebMCP for tools exposed directly from the open browser tab.
localStorage for artwork and preferences.
Node’s built-in test runner for deterministic tests.

There is no frontend framework, backend, database, build step, or built-in AI model. The external agent handles the creative reasoning; the app validates and renders its instructions.

Our approach

We first defined the coordinate system, editing rules, and minimal interface. Then we separated state management, rendering, persistence, pointer painting, and WebMCP registration into focused modules.

The six agent tools cover inspection, edit-session management, generation, clearing, resizing, and undo. All drawing formats feed into the same validated mutation path.

To prevent conflicting edits, we added an edit lock and revision checks. Each batch is atomic: if any coordinate, color, or overlap is invalid, the entire batch is rejected.

Challenges we faced

Large JSON payloads. Listing every pixel individually consumed too much agent context. We added lossless representations suited to different artwork:

Coordinate groups for scattered pixels.
Horizontal runs for long stretches of one color.
Indexed rows for detailed patterns.
Rectangles for filled areas.

Inspection chooses the smallest serialized representation among its supported formats. We also removed repeated pagination metadata, made full color counts optional, and added revision-based delta inspection.

Compression has overhead. Supporting more formats enlarged the tool catalog. We shortened repeated descriptions and simplified equivalent schema structures while preserving constraints. That reduced catalog text by 18.4%.

Human and agent coordination. Mouse painting needed immediate visual feedback without conflicting with agent work. A drag now previews while holding the shared lease, then saves as one undoable mutation.

Browser lifecycle and reliability. We encountered stale WebMCP handles during live use and had to refetch them. We also handled unavailable storage, registration cleanup, and repaint failures explicitly.