• 

  Website page

• 

• 

  Use the site tools to call g et_account,get_saved_customer, get_shop_state. Quote the exact JSON, call apply_saved_profile.

• 

  Asked Agent to recommend a gift under 40 pounds for someone who cooks

Inspiration

Every "AI shopping" demo I'd seen had the same problem: the agent clicks buttons it's guessing at, or it shops in a parallel page you can't even see. I wanted the opposite. One real shop, one cart, where ChatGPT and I are looking at the exact same thing and I get the final say.

That's what Hearth is, a small home goods shop for the table and kitchen. You browse and click like you would anywhere else. The agent, meanwhile, calls real site tools and nothing gets bought until you approve it, review it, and confirm it.

What it does

I and the agent share the same tab and the same cart.

The agent calls recommend_gift instead of silently adding something to your bag. A tradeoff card shows up: here's the pick, here's why, here's what it costs and that makes the cart stay empty.

You hit Approve on the page only then does the item land in your cart.

explain_cart and prepare_order build a review of everything while ordering stays locked.

If the agent tries place_order without confirm: true, it gets blocked and Undo Last restores your last cart snapshot if anything goes sideways.

Privacy was a deliberate part of the demo. Once you sign in, get_account and get_saved_customer only return a profileStatus flag, like hasShipping: true. Your street address and phone number never leave this browser; they sit in a local demo vault. Checkout keeps those fields hidden too, until you personally choose Use saved details or Show saved address which makes the agent unable to see them.

Why this is a fit for WebMCP

A shop is a terrible scraping target. Filters, quantities, promo codes, checkout, and a yes/no question about how much you're willing to spend, and an agent guessing at all of that through the DOM is fragile and blind. WebMCP lets the page declare those actions up front. The agent doesn't just click or hunt for buttons, it calls search_products, recommend_gift and prepare_order. Since it's the same page, you watch the DOM update live, right next to you.

The hard part was always the trust gap: how do you let an agent "help" while you're still the one who sees everything, approves everything, and can undo everything without handing it your address? Structured tools let the site describe the action, its inputs, and its guardrails directly. That's what solved it.

What I learned

The biggest lesson is learned is that agent usefulness is not the same thing as agent autonomy. The moments where the agent actually felt useful weren't when it acted on its own, they were when it made a clear proposal, showed its reasoning, and waited one step for my approval.

How I built it

Static HTML and ES modules on Netlify, no backend, auth, and the customer vault are plain localStorage.

mcp-boot.js looks for document.modelContext / navigator.modelContext early. webmcp.js builds each tool (name, description, inputSchema, execute) and registers it with registerTool, including search_products:

document.modelContext.registerTool({
  name: "search_products",
  description: "Search the shop by words such as mug, skillet, linen, gift, or wool.",
  inputSchema: { type: "object", properties: { query: { type: "string" } }, required: ["query"] },
  execute: async ({ query }) => shop.searchProducts(query, "agent")
});

Built With

• chatgpt
• css
• docker
• githubactions
• html
• javascript
• localstorage
• nginx
• python
• webmcp