Co-Shop

Interface

Most "agentic shopping" demos we'd seen worked by having an AI agent drive a headless browser through a UI built for humans clicking buttons, parsing HTML, guessing at what a page meant. It's slow, brittle, and worst of all, invisible: the human has no idea what's happening until the agent reports back a summary at the end.

WebMCP flips that entirely. A page can declare what an agent is allowed to do search_products add_to_cart checkout with typed schemas, so the agent calls real functions instead of pretending to be a mouse. We wanted to build something that showed off what changes once a human and an agent aren't just near each other, but genuinely sharing the same piece of state in real time. Grocery shopping felt like the perfect testbed: it's repetitive, constraint-heavy work ("stay under budget," "keep it vegetarian," "don't forget the eggs") that's exactly what an agent is good at, while still being something people want a say in; nobody wants an AI silently deciding what's for dinner.

That became Co-Shop: a storefront where you and your agent literally share one cart.

What it does Co-Shop is a grocery catalog with a shared cart. A human can browse and add items by clicking, same as any store. An AI agent through ChatGPT's WebMCP-enabled browser, or any WebMCP-aware client can call into the same cart through seven registered tools:

search_products free-text / category / tag / price search
add_to_cart, remove_from_cart, update_quantity direct cart edits
get_cart read the current shared state, including what the human added
plan_dinners a compound tool: give it a day count, a diet, and a budget, and it picks matching dinners and adds all of them in one call
checkout places the order and clears the cart

Every action human or agent shows up instantly with a badge (YOU or AGENT), a highlight animation on agent-added items, and a live activity feed narrating the back-and-forth. Ask your agent "plan a week of vegetarian dinners under $40" and watch the cart fill up in front of you, still fully editable.

How i built it

The whole app is a single Next.js (App Router) page with one client component holding the cart and activity-log state. On mount, it registers all seven tools with document.modelContext.registerTool(...), each with a JSON Schema inputSchema and an execute function but critically, those execute functions call the same internal helpers (addToCart, removeFromCart, checkout, etc.) that the UI's own click handlers call. That was the core design decision: there's no separate "agent path" and "human path," just one state, mutated from two places.

Tools are registered inside a useEffect and cleaned up via an AbortController passed as the registration's signal. Every execute returns the WebMCP content-array shape ({ content: [{ type: "text", text: JSON.stringify(...) }] }) so the agent gets structured JSON back not just a confirmation string which matters a lot for a compound tool like plan_dinners, where the agent needs to know things like "only 5 of 7 requested days fit the budget."

Challenges i ran into

Stale closures. Tools are registered once on mount, so their execute functions would otherwise capture a stale snapshot of the cart. We solved this by keeping the state update functions themselves as the single source of truth (via setState functional updates) rather than reading from a captured variable.
Making agent actions legible, not just correct. It's not enough for the tool calls to work a judge (or a shopper) needs to see the difference between "I added this" and "the agent added this" at a glance. That's what drove the AGENT/YOU badges, the purple pulse animation, and the activity feed.
Testing without a live agent. Early on, we stubbed document.modelContext in a headless browser to exercise the tools programmatically before ever touching a real agent client — that caught a few bugs (like quantity handling on update_quantity) well before we tested against ChatGPT's actual WebMCP browser.
Getting the deploy pipeline right on a deadline. Wiring up GitHub, Vercel, and an MIT license that GitHub actually detects in the About section took more back-and-forth than the code itself.

What i learned

WebMCP's real power isn't "agents can now click your buttons for you" it's that a page and an agent can share one source of truth instead of two. That's a genuinely different interaction model from screen-scraping or API wrapping, and it's why an agent's actions in Co-Shop feel like someone else shopping with you, not an AI doing your shopping for you somewhere off-screen.

What's next

Natural extensions: letting the agent negotiate substitutions when a diet/budget can't be satisfied exactly, a compare_products tool for side-by-side agent recommendations, and multi-user shared carts where two humans and an agent are all in the same session at once.