PixelForge Studio

Judge Quick Links

1. Live Cloudflare mirror (start here): https://pixelforge-studio.himomohi.workers.dev
2. Public GitHub source: https://github.com/himomohi/pixelforge-studio
3. ChatGPT Sites (in-app browser fallback): https://pixelforge-studio.appcaster.chatgpt.site
4. Demo video: https://youtu.be/-mTECXrUEy8

Fast judging path: Open the Cloudflare mirror, use a WebMCP-capable browser, and watch one shared project receive a frame, an undo, a duplicated frame, 180 ms timing, an Agent Highlights layer, and 10 cyan pixels—then undo or redo the same visible result in the editor.

Inspiration

Creative software is still split into two worlds. People work through rich visual interfaces, while agents are often forced to guess which controls to click and where to place the pointer. That is especially fragile in pixel-art production, where a single coordinate, frame, layer, or alpha value matters.

PixelForge Studio explores a better model: one shared creative surface for both the artist and the agent. The artist keeps the complete visual editor, while WebMCP gives the agent precise, structured access to the same project.

What it does

PixelForge Studio is a professional browser-based pixel-art editor with:

• crisp pixel drawing and shape tools;
• palettes, foreground and background colors, grid, symmetry, selection, and zoom;
• multiple animation frames with timing, playback, duplication, and reordering;
• multiple layers with visibility, locking, opacity, duplication, and reordering;
• browser-local autosave and project management;
• browser-local reference images with split and floating views;
• adaptive image-to-pixel conversion with transparency and aspect-ratio guardrails;
• a measurable strict-99 reference fidelity audit;
• PNG, animated GIF, sprite-sheet, editable project, and game-engine bundle exports.

It also registers 65 browser-native WebMCP tools. Compatible agents can inspect the current state, create and duplicate projects, place exact pixels, edit frames and layers, convert references, verify results, and export assets without inferring the UI.

Why WebMCP is a strong fit

Pixel art combines high-level creative intent with low-level precision. A person may ask for a highlighted animation frame, a palette adjustment, or a Unity-ready sprite bundle. Performing that work through screen coordinates is slow and error-prone because the agent must infer canvas geometry, selected frames, selected layers, active colors, and editor state.

WebMCP makes those workflows explicit. Each action has a bounded JSON schema and a stable semantic meaning. The agent can read the project state, apply an atomic edit, and immediately return control to the artist in the visual editor.

How it creates a better user experience

The agent does not replace the editor. It accelerates precise or repetitive work while preserving human review and creative control.

In the demo, the agent performs this exact real-editor run:

1. add_frame;
2. undo, proving the first change is a normal reversible editor action;
3. duplicate_frame;
4. set_frame_duration with 180 milliseconds;
5. add_layer, then rename_layer to Agent Highlights;
6. draw_pixels with an exact batch of 10 cyan pixels.

This is not a separate agent-only canvas. All 65 typed tools and the human interface use the same browser-local project state, so every change appears immediately on the canvas, timeline, and layer stack. The artist can inspect the result, refine it manually, play the animation, undo or redo changes, or export the finished asset.

What was difficult or impossible before

Before WebMCP, an agent had to navigate the editor visually and hope that pointer coordinates, focus, selections, panels, and timing controls had not changed. Exact pixel batches and multi-step animation edits were especially unreliable.

With WebMCP, the agent and person share a stable project model. The agent can operate semantically while the person continues to work visually. This makes mixed-initiative creative workflows practical instead of brittle.

How WebMCP was implemented

The integration is implemented in lib/pixelforge/webmcp.ts using document.modelContext.registerTool.

The 65 registered tools cover:

• project lifecycle and production presets;
• reference-image state and view controls;
• reference conversion and fidelity auditing;
• exact pixels, shapes, selections, palettes, colors, and brush size;
• frames, layers, playback, grid, onion skin, symmetry, and zoom;
• PNG, GIF, sprite-sheet, project, and game-bundle exports.

Schemas enforce bounded dimensions, colors, array sizes, and enums. Operations accept cancellation signals. Read-only operations are annotated, destructive operations are identified, and raw reference image data remains browser-local.

The live judging run is deliberately concrete: add_frame → undo → duplicate_frame → set_frame_duration (180 ms) → add_layer → rename_layer (Agent Highlights) → draw_pixels (10 cyan pixels). Because those calls update the editor's actual browser-local state rather than a demo surrogate, the visible result stays fully undoable and redoable.

How we built it

• Next.js 16 and React 19
• TypeScript
• Vinext and Vite
• Cloudflare Workers with Static Assets
• ChatGPT Sites backup
• Browser-native WebMCP
• Canvas rendering and browser-local storage
• Custom PNG, GIF, sprite-sheet, ZIP, and game-engine exporters
• Remotion for the public demo video

We also focused the shipped surface: only 14 UI primitives used by the product remain, and the unused D1/notes scaffold was removed. That keeps the submission centered on the editor and its WebMCP workflow.

Challenges

• Designing one project model that works for both visual editing and structured agent actions
• Keeping frame-layer cels complete and consistent across duplication and reordering
• Preserving alpha, aspect ratio, and subject bounds during reference conversion
• Making fidelity claims measurable instead of subjective
• Exporting useful assets for many game engines from one browser project
• Defining tool schemas that are powerful without accepting unbounded input

Accomplishments

• 65 working WebMCP tools registered in the deployed app
• A complete editor rather than a single-purpose proof of concept
• Strict-99 reference conversion and audit guardrails
• Browser-local projects and reference images
• Animated GIF, sprite-sheet, editable project, and multi-engine bundle exports
• Public MIT-licensed source with automated tests
• A reproducible Remotion demo project using real captures from the live app

What we learned

WebMCP works best when tools map to real product concepts instead of individual UI clicks. A strong agent-native app still needs an excellent human interface; the value comes from both surfaces sharing the same state and producing immediately reviewable results.

What's next

• Natural-language creative recipes that combine several tools into reviewable plans
• More sprite animation presets and engine-specific export helpers
• Optional collaboration and project sharing
• Richer fidelity reports and side-by-side reference comparisons
• Community palettes, templates, and reusable agent workflows

Built With

• ai-agents
• chatgpt
• cloudflare-workers
• next.js
• openai
• pixel-art
• react
• remotion
• typescript
• vinext
• webmcp