Aergebra

The name

Algebra comes from al-jabr — "the reunion of broken parts." Aergebra reunites the two broken halves of agent–human work on the web: what the agent sees (screenshots) and what you see (prose about your own screen) — into one live drawing both of you can touch.

Inspiration

Watch an agent help a human with anything spatial and you see the same failure twice: the agent "sees" the page by screenshotting it and squinting; the human "sees" the agent's work as prose ("I placed a vertex near the top-left"). Neither is looking at the thing. We wanted one shared object both kinds of hands can touch: live geometry.

What it does

Aergebra is a geometry workroom — points, segments, circles, polygons, groups, photo/SVG underlays, a live algebra Inspector — where the document is the truth and the canvas is its projection. With WebMCP the page registers 16 tools via document.modelContext.registerTool(), so an agent in a WebMCP-capable browser gets the whole kit as structured tools:

• Construct — points/segments/circles/polygons, groups, frames — including over an imported photo.
• Mean — attach meanings; the board labels things by what they ARE, never arbitrary letters. Tools accept a meaning as the name: {name: "Table 2"}.
• Point — aergebra_highlight lights objects up so the human sees exactly what the agent means. No more "the circle on the left".
• Read as data — aergebra_get_algebra returns the construction as algebra; aergebra_get_view returns the camera as data. The agent never screenshots.
• Status in colour — a four-colour status vocabulary (at rest / blocked / ready / willing), visible in a legend on the board, so "Nan's path is blocked till Thursday" is one brown line everyone can read.

Every mutation — human tap, typed command, or agent tool call — goes through the SAME façade and lands on the same append-only receipt line. Agent calls echo live in the same command-line output a human's typed calls use. One board, one history, two kinds of hands.

The demo is a real session

The middle of the video is an actual conversation: Andrea tells the agent Saturday's wedding floor plan in plain words ("table 2's nan… speaker cable till thursday… table 4 on hold"); the agent builds, labels, colours and reads the board back — every board change a real WebMCP tool call, captured live.

Why this is a strong fit for WebMCP

Geometry is the worst case for pixels-in/prose-out and the best case for WebMCP: the page's internal model is already structured, so exposing it as tools is lossless. And it's bidirectional shared state: the agent reads the model as data, writes through receipted tools, and points at what the human is looking at. The human's UI and the agent's tools are projections of one document.

Who this is for

Anywhere a page's model is already graph/geometry: entity-relationship and data modelling, event floor plans and seating charts (our own business), process and project maps, tutoring. Any canvas-like app — whiteboards, CAD, slides, maps — can copy the pattern.

How we built it

TypeScript + Vite + JSXGraph, no frameworks. A receipted document model (src/model.ts) is the single source of truth; a typed façade (src/toolapi.ts) is the ONLY write path; src/webmcp.ts maps it onto document.modelContext.registerTool() (navigator fallback, late-injection retries) with JSON-Schema inputs. A badge reports WebMCP · 16 tools live when a model context is present; without one the page runs unchanged. Tested against native WebMCP in Chrome 152.

Built during the submission period

Everything in the repository was built during the Challenge submission period; the commit history is the evidence — the engine first, station by station, then the WebMCP integration on top.

Challenges

One façade kept honest (if the agent's path and the human's path diverge, receipts lie); resolving objects by meaning, not letters; auto-fit that never clips; Windows shells mangling --base=/aergebra/ mid-deploy.

What's next

User-declared colour meanings ("red = check on nan" is your board's meaning), outline detection over photos, .scu/.acu exports for agents, and a live mission clock — shared geometry applied to time.

Built With

• jsxgraph
• typescript
• vite
• webmcp