Inspiration

Itta is an existing QR-based recovery service for bicycles and personal mobility devices. While working on its registration flow, I noticed two connected problems.

First, registration is harder than it looks. Owners of older bicycles often cannot remember the exact manufacturer, model, official color, or size. Second, even a correctly identified model is not enough for recovery. Replaceable parts can change, logos can be covered, and two bicycles from the same product line can look almost identical.

That led to Recovery DNA: a visual passport made from the small details that belong to one specific bicycle.

What it does

The experience begins with registration. The owner selects a vehicle type and adds a representative photo. A browser agent examines the photo already visible on the page and uses WebMCP tools to present likely manufacturer, model, color, and size candidates.

The suggestions are never applied automatically. The owner reviews the evidence, chooses the best candidate, edits anything necessary, and remains responsible for the final registration.

The agent can then propose a Recovery DNA made from distributed visual anchors: decal placement, frame geometry, distinctive marks, damage, accessories, and personal signs of wear. It also distinguishes durable evidence from parts that can easily be replaced. The owner reviews and confirms these anchors before they can be reused.

Later, when a bicycle is found, the agent compares the new photo with the owner-confirmed Recovery DNA. It explains which details remain, which parts changed, what is missing, and how likely it is to be the same bicycle. Finally, it prepares a recovery report for human review.

Nothing is sent automatically, and the result is presented as a visual probability assessment—not forensic proof of ownership.

Why WebMCP

This workflow needs more than a chatbot response.

The agent must understand the page’s current state, inspect the photo already shared with the user, request additional evidence when necessary, and return structured results to the correct interface. WebMCP provides that bridge between the agent’s reasoning and Itta’s product UI.

The tools do not receive raw image files, private owner data, contact information, or location. The agent visually inspects what is already rendered in the shared browser, while WebMCP carries only limited context and validated structured results.

This creates a continuous human-agent journey across registration, identification, comparison, and recovery—while keeping every consequential decision with a person.

How I built it

The demo is built with React, TypeScript, and Vite and deployed on Vercel.

I implemented eight WebMCP tools using document.modelContext.registerTool():

  • Registration tools read the current draft, request focused evidence, and render up to three specification candidates.
  • Recovery DNA tools expose limited owner or finder context, render visual anchors, display an identity comparison, and prepare a recovery-report draft.

Tools are registered only after the user explicitly opens the relevant assistant. They are removed with an AbortController when the scene changes, the component unmounts, or the photo is replaced. This prevents stale tools from modifying the wrong stage of the experience.

The public challenge route is isolated from Itta’s production authentication, database, analytics, and reporting systems. All demo state stays in browser memory.

Challenges

The biggest design challenge was making WebMCP essential rather than decorative. Simple specification autofill was useful, but it did not fully demonstrate what becomes possible when a person and an agent share the same web experience.

Recovery DNA made the collaboration more meaningful: the agent contributes visual reasoning across two moments in time, while the product contributes structured state, validation, lifecycle control, and human confirmation.

Another challenge was judge accessibility. A reviewer may not have a bicycle photo available, so the demo includes a fictional before-and-after sample. The bicycle changes its saddle, front wheel, and visible branding to demonstrate why a model name or basic photo match is insufficient.

Unsupported browsers also receive a clearly labeled simulation preview. It demonstrates the interface without pretending that a WebMCP call occurred.

What I learned

WebMCP is most valuable as a trusted interaction boundary—not as a replacement for the interface or the user.

Agents are good at interpreting ambiguous evidence. Websites are good at holding state, validating structured actions, protecting private data, and asking for confirmation. Combining those strengths creates experiences that would be difficult to achieve with either side alone.

What's next

The next step is to connect owner-confirmed Recovery DNA to Itta’s real registration and QR recovery flows. The same approach could later support scooters, pets, luggage, and other registered objects whose identity depends on more than a serial number or product name.

Built With

Share this project:

Updates

Submission history