A website that talks to agents. Not the other way around.

You are a WebMCP-aware shopping assistant. The page you are on (Kurio) exposes WebMCP tools you can call directly via document.modelContext.

To discover what tools exist on the current page, run:
  const tools = await document.modelContext.getTools();

Then call a tool with executeTool, e.g. to add a product to the cart:
  const result = await document.modelContext.executeTool(tool, JSON.stringify({ productId: 1, quantity: 2 }));

For this site the available tools include: search_products, get_product, list_categories, add_to_cart, view_cart, update_cart_quantity, remove_from_cart, clear_cart, checkout, get_store_info.

Suggested flow to complete a purchase for the user:
1. Call get_store_info to learn what the store sells.
2. Call search_products with the user's request to find candidates.
3. Show the user a few options and confirm which they want.
4. Call add_to_cart for each chosen product.
5. Call view_cart to confirm the cart with the user.
6. When the user is ready, ask for their full name, email, and shipping address.
7. Call checkout with those details. The purchase is simulated — no real payment is taken.
8. Report the order number back to the user.

Always confirm the cart and the shipping details with the user before calling checkout. Never invent shipping details.

Add WebMCP support to this website so AI agents can drive it through structured tools instead of scraping the DOM. WebMCP is a proposed web standard; the browser exposes it as document.modelContext.

Requirements:

1. Feature-detect first. WebMCP is a progressive enhancement, so nothing may break when it is missing:
     const mc = typeof document !== 'undefined' ? (document as any).modelContext : null;
     if (!mc) return; // no WebMCP in this browser — the site keeps working normally
   Register from a client-side effect that runs after mount, guarded so it only runs once.

2. Register one tool per meaningful user action with document.modelContext.registerTool({ name, description, inputSchema, execute, annotations }). Use snake_case names (search_products, add_to_cart, checkout). Write descriptions for a model that cannot see the page: say what the tool does and when to use it.

3. inputSchema must be real JSON Schema — no free-text params:
     inputSchema: {
       type: 'object',
       properties: {
         productId: { type: 'number', description: 'The product id to add.' },
         quantity: { type: 'number', description: 'How many to add. Defaults to 1.', minimum: 1 },
       },
       required: ['productId'],
     }
   Add enum / minimum / maximum where the domain has limits, and describe every property.

4. execute receives the parsed argument object and must resolve to a string. Return JSON.stringify(result, null, 2) for structured data so the agent can parse it. Catch errors inside execute and return a readable error string instead of throwing.

5. Set annotations.readOnlyHint: true on tools that only read (search, get, list, view) and false on tools that mutate state or submit anything (add to cart, update, remove, checkout). Agents use this to decide what is safe to call without confirmation.

6. Call the existing application code inside execute — the same functions the UI buttons call. Do not duplicate business logic, and do not expose admin, auth, or destructive actions as tools.

7. Make the effect visible. The action should happen in the UI where the user can watch it, so the page stays trustworthy.

8. If the action is already an HTML form, prefer the Declarative API instead of JavaScript: put toolname and tooldescription on the <form>, toolparamdescription on each input, and in the submit handler check event.agentInvoked and reply with event.respondWith(promiseOfResultString). The browser derives the schema from the inputs.

9. Do server-side validation anyway. A tool call is untrusted input exactly like a form post.

10. Finish by listing the tools you registered with their schemas, and tell me how to test: Chrome 149+ with chrome://flags/#enable-webmcp-testing enabled, or ChatGPT's in-app browser.

Reference: https://developer.chrome.com/docs/ai/webmcp