CoShop: The Agent-Native Storefront

A WebMCP storefront where shoppers and AI agents collaborate in the exact same session, featuring live UI grounding and secure human-in-the-loop checkout validations.

Comment

Inspiration

We realized that real agentic checkout,the kind large merchants will actually ship to production,needs a human sign-off gate for the same reason two-factor authentication exists. An agent should be able to do the tedious 90% (searching the catalog, comparing specs, filling the cart, applying discount codes) autonomously, but the final "place an order with real money" step requires a deliberate, visible human decision. CoShop was born out of the necessity to build a secure, collaborative, and beautiful environment where humans and agents can shop together without liability risks.

What it does

CoShop is a high-performance, stateless e-commerce storefront that exposes its entire architecture to AI agents via WebMCP.

  1. Live UI Grounding: When the AI agent interacts with the store (e.g., searching or adding an item to the cart), the human shopper's screen visually reacts. The cart slides open, the product card pulses, and an accessible activity log narrates the action. The AI doesn't work in a black box; the human watches exactly what it is doing.

  2. Human-in-the-Loop Checkout: When an agent attempts to check out, it is securely gated. The agent can only stage the checkout, which summons a live confirmation banner on the human's screen. The transaction is completely halted until the human physically clicks "Confirm Order."

How we built it

We built CoShop using Next.js 16 (App Router), TypeScript, and Tailwind CSS v4, styling it with a premium "Midnight Violet" glassmorphism aesthetic and 8K photorealistic product assets.

The core of our WebMCP integration relies on the use-webmcp-tool React hook. We registered 11 distinct tools to document.modelContext.

The architectural magic happens in our state management. We used Zustand as a single source of truth. When an AI agent executes a WebMCP tool (like add_to_cart), the callback fires a Zustand state mutation. Because the React UI is listening to that exact same store, the UI instantly animates via Framer Motion to reflect the agent's action to the human user. Furthermore, the cart state is persisted into secure, HTTP-only cookies, ensuring the app remains entirely stateless and scalable on Vercel's Edge network without requiring an external database.

The WebMCP Fit & User Experience

Why this is a strong fit for WebMCP: Most agentic-commerce demos rely on brittle DOM-scraping or disjointed chat widgets that act on a storefront rather than with it. CoShop leverages the Model Context Protocol for Web (WebMCP) to expose 11 schema-defined tools directly to the agent's context window. This eliminates hallucination-the agent doesn't guess how to buy a shoe; it natively calls add_to_cart(productId, size, qty) with 100% deterministic accuracy.

What humans and agents can do together now: Before CoShop, you either shopped yourself, or you handed a task to an autonomous agent and hoped it didn't accidentally drain your credit card. CoShop introduces the Shared Session. A human can manually add a shirt to their cart, and concurrently ask their AI agent to find a matching pair of waterproof boots and add them to the same cart. They are no longer isolated; they are collaborating in real-time.

Challenges we ran into

The biggest challenge was bridging the gap between the agent's headless execution and the human's visual experience. Initially, when the agent added an item to the cart, the human wouldn't know it happened unless they manually checked. We had to heavily engineer our state synchronization so that WebMCP execution callbacks directly triggered UI animations, sidebars, and focus states, ensuring absolute transparency.

Accomplishments that we're proud of

We are incredibly proud of achieving true Live Agent Grounding. Being able to give an agent a complex prompt- "find me a waterproof running shoe under $120, add a size 10 to my cart, and stage a checkout" and then literally sitting back and watching the website's UI animate and scroll on its own as the agent executes the tasks is a magical experience. We are also proud of building this with zero external database dependencies, making it blazing fast and infinitely scalable.

What we learned

We learned that the future of agentic web isn't just about giving AI access to APIs; it's about building secure hand-offs. The Model Context Protocol for Web proves that we don't have to choose between full autonomy (which is dangerous) and manual labor. We can have collaborative autonomy, where the AI does the heavy lifting and the human provides the final, secure consensus.

What's next for CoShop: The Agent-Native Storefront

We plan to expand the WebMCP toolset to include dynamic sizing recommendations (where the agent reads the user's past purchase history to determine the best shoe size) and real-time inventory negotiations. Ultimately, we want to open-source the "Human-in-the-Loop Checkout" component as a standalone NPM package so any e-commerce store can securely integrate agentic checkout.

Built With

Share this project:

Updates

Submission history