Observatory

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.

Built With

• indexeddb
• pinia
• pixijs
• playwright
• vite
• vitest
• vue.js
• webmcp