Why is your use case a strong fit for WebMCP?
Shopping is one of the worst experiences for DOM-scraping agents today —
dynamic prices, paginated results, changing stock, coupon logic buried in a
form. WebMCP replaces all of that guessing with typed, described tools an
agent can call directly: search_products, filter_products, add_to_cart,
apply_coupon, and more, each with a real JSON Schema instead of a DOM
selector to reverse-engineer.
How does it create a better user experience?
The agent and the human work the same visible cart in the same tab, live — not a hidden background process the human has to double-check afterward. Every tool call the agent makes shows up immediately, both as a highlighted product card and as an entry in a small on-screen activity log, so the human always sees exactly what the agent did and why, as it happens.
What can people and agents do together that was difficult or impossible before?
Before WebMCP, "let an agent shop for me" meant one of two extremes: full checkout automation with no human oversight, or an agent that can only describe what it would do with no way to actually act. Cairn is the middle path — the agent does the tedious part (searching, comparing, filling the cart, testing a coupon) while the human keeps the one decision that matters. There is no tool that can complete a purchase. It isn't hidden behind a confirmation step — it was never registered. An agent asked to "check out" has nothing to call, no matter how it's asked. Neither side can finish the transaction alone; the collaboration loop only closes when a human clicks the real button in the UI.
How did you implement WebMCP?
Built as a static HTML/CSS/JS site (no framework, no build step) so it
deploys anywhere with zero configuration. cart.js holds all cart state and
logic — search, filter, add/remove, quantity updates, coupon math — as a
single module. Both the human-facing UI (app.js) and the agent-facing
tools (webmcp-tools.js) call the same functions in that module, so
there's genuinely one cart, not two systems kept in sync. Tools are
registered with document.modelContext.registerTool() — the current API;
the earlier navigator.modelContext name was deprecated in Chromium 150 and
intentionally not used. Eight tools are registered in total
(search_products, filter_products, get_product_details, add_to_cart,
update_cart_quantity, remove_from_cart, apply_coupon,
get_cart_summary), with read-only tools marked via readOnlyHint: true.
No purchase-completing tool is registered anywhere in the codebase.
Inspiration
Cairns are trail markers — stones stacked by one traveler for the next one to find. That's the shape of good human-agent collaboration: each side leaves useful, visible work for the other, and no one silently takes over the whole trip.
What it does
Lets a shopper and their AI agent build a shared cart together in a specialty coffee gear store — searching, filtering, adding items, and applying coupons — while keeping the actual purchase decision exclusively in human hands.
How we built it
Vanilla JS, no framework, no backend — a single shared state module
(cart.js) that both the UI and the WebMCP tool layer call into, so the
agent and the human are never looking at two different versions of the cart.
Challenges we ran into
Making the "no checkout tool" boundary feel like a deliberate design statement rather than a missing feature — solved by narrating it explicitly in the UI copy itself ("Checkout — human only") and in the on-screen tool log, so it reads as intentional the moment you look at the page.
Accomplishments
A working, deployable demo where an agent's actions and a human's actions visibly share one piece of state in real time, with a hard, code-level boundary around the one action that shouldn't be automatable.
What's next
Multi-agent carts (two shoppers, two agents, one shared list), and an
optional prepare_order read-only tool that hands the human a pre-filled
summary without ever being able to submit it itself.
Built with
document.modelContext.registerTool (WebMCP), HTML, CSS, JavaScript
Log in or sign up for Devpost to join the conversation.