WebMCP Challenge Winners
Observatory
A local-first fantasy map builder where people and browser agents create together through WebMCP.
Core trick
Agent edits go through typed WebMCP tools with optimistic revision checks, and destructive changes need a single-use approval token.
Built with
indexeddbpiniapixijsplaywrightvitevitestvue.jswebmcp
Description
Inspiration
Fantasy maps help writers and game designers think, but creators often have to choose between complex graphics software and flattened AI images that are difficult to revise. Browser agents face a related problem: canvas interactions are hard to infer and fragile to automate visually.
Observatory gives people and agents a shared, semantic mapmaking workspace.
What it does
Observatory is a local-first fantasy map builder where writers paint terrain, compose rooms, draw walls, place objects and labels, manage layers, undo changes, and export finished maps.
Through WebMCP, a compatible browser agent can inspect and modify that same map using bounded, structured tools. A request such as “Build a map of a lone tower in a dense forest” becomes editable terrain strokes, structures, objects, and text—not a flattened image.
Human and agent actions use the same state, persistence, revision, and undo paths. Destructive semantic changes require visible, single-use approval.
How we built it
Observatory uses Vue 3, Pinia, PixiJS/WebGL, IndexedDB, and Vite. Terrain remains editable vector data and is rendered through adaptive cached chunks. Structures, objects, labels, and layers retain stable semantic IDs.
The WebMCP adapter registers library and project tools through
document.modelContext.registerTool
. Strict JSON schemas, bounded responses, optimistic revision checks, idempotent operation IDs, abort handling, compact result envelopes, and approval tokens keep agent operations predictable and safe.
IndexedDB is the durable boundary. Logical mutations increment a project revision and persist changed stores transactionally. Failed saves roll visible state and history back, while BroadcastChannel notifications prevent stale cross-tab writes.
Challenges we ran into
The hardest part was keeping agent operations and human editing genuinely unified. Routing every action through the same application stores and transaction boundary required careful rollback and revision semantics.
Terrain rendering also required balancing painterly materials, deterministic output, responsive previews, and large-map performance.
Accomplishments that we're proud of
A complete human map editor that remains useful without an agent.
Structured WebMCP operations for discovery, inspection, terrain, geometry, objects, labels, layers, history, removal, and export.
Agent changes that remain manually editable and undoable.
Revision guards, idempotency, bounded payloads, and approval-gated removal.
Local-first operation with no account, backend, telemetry, or runtime model API.
Automated lint, type-check, locale, coverage, unit, browser, build, and dependency-security gates.
What we learned
WebMCP works best when it exposes the product's actual domain model instead of mirroring UI clicks. Stable IDs, revisions, and approvals make collaboration faster and more reliable while preserving human control.
What's next for Observatory
Future work could add restorable project archive import, richer templates, and optional collaboration while preserving the local-first core.
Testing
Open the live app in ChatGPT's in-app browser, create a blank map, and ask: “Build a map of a lone tower in a dense forest.” Inspect and manually edit created elements, use undo and redo, request a refinement by element ID, test approval-gated removal, and export as PNG.
No account or credentials are required. Maps remain in browser IndexedDB.
README excerpt
# Observatory Observatory is a local-first fantasy map builder for dungeons, villages, interiors, wilderness regions, and world maps. A writer can sketch and refine a map by hand, or ask a compatible browser agent to turn one sentence into a visible, editable landscape through WebMCP. Created and maintained by Martin Hooijmans. The application is deliberately standalone: no login, backend, cloud sync, telemetry, private dependency, or Story Shack production credential is required. ## Development ```bash npm install npm run dev npm run check npm test npm run test:e2e npm run lint npm run typecheck npm run test:coverage npm run i18n:check npm run build ``` Working map data stays in IndexedDB. The human editor can download a rendered PNG, but it does not currently expose project archive export or import. There is no authentication, backend, cloud synchronization, or telemetry. The application is an installable offline PWA. ## Features - A clearly bounded map frame with compact, standard, wide, and grand presets plus optional base landscapes; the square grid is only a guide inside that finished-map boundary. - Ordered vector terrain strokes plus semantic rooms, walls, objects, layers, and labels. - Generated hand-painted terrain materials with deterministic world-space variation and seamless compositing. - Natural, crisp, and wild edge profiles with exact live previews and deterministic organic boundaries. - Terrain brushes, editable geometric shapes, styled lines, props,