Infinite Canvas — Agent Design Lab

Infinite Canvas is a browser-based visual design canvas where people and AI agents inspect, create, and edit the same live document through native WebMCP tools.

Problem Visual design applications are built for pointer-and-keyboard interaction. An AI agent approaching the same application usually has to infer state from pixels, guess which controls to click, and repeat brittle UI actions. That makes substantial design work slow, unreliable, and difficult for a person to supervise.

Solution For this WebMCP Challenge proof of concept, one agent brief starts three named hypotheses in isolated editable branches. A person can keep working on the original while the lanes run, inspect status and layout checks, cancel a lane, promote one branch only if the source revision is still current, and undo that promotion in one history step.

Why WebMCP Visual design is state-heavy and precision-dependent: selections, trees, styles, tokens, pages, and history. The app registers structured tools through document.modelContext.registerTool, so an agent operates on the live document model instead of guessing from rendered pixels. The same MobX stores and handlers power both the visible editor and agent calls.

What people and agents can do together The person keeps working visually while delegating a bounded exploration task. The agent reads the real selection and tree, starts three hypotheses, and reports progress. The person can compare structured editable branches, cancel work, promote a result, or undo it. A fingerprint-based stale-revision check rejects a completed branch when the person changed the original instead of silently overwriting that work.

Implementation The hosted build exposes 54 tools: 34 core canvas tools, 14 design-lab tools, and six experiment tools: start_design_experiment, get_experiment_status, compare_experiment, cancel_experiment_lane, promote_variant, and undo_experiment_commit. Experiment jobs are orchestrated together, while writes to the single editor document are serialized. Operation IDs make retries idempotent; cancellation is cooperative; promotion is atomic and undo-compatible.

Live demo Open the public URL and use the judge prompt in the repository README. No login is required.

Built With

• cloudflare-workers
• codex
• mobx
• typescript
• vite
• webmcp