E-Commerce WebMCP Template
A complete AI-agent-ready e-commerce storefront with 20 WebMCP tools for product discovery, cart management, checkout, and order tracking. Supports both imperative JavaScript and declarative HTML integration.
Load live preview on demand to keep template pages fast.
// Register search_products tool
navigator.modelContext.registerTool({
name: "search_products",
description: "Search the product catalog by keyword, category, and price range.",
inputSchema: {
"type": "object",
"properties": {
"keyword": {
"type": "string",
"description": "Search term (e.g. \"running shoes\")"
},
"category": {
"type": "string",
"description": "Product category slug"
},
"price_min": {
"type": "number",
"description": "Minimum price in USD"
},
"price_max": {
"type": "number",
"description": "Maximum price in USD"
},
"sort_by": {
"type": "string",
"enum": [
"relevance",
"price_asc",
"price_desc",
"rating",
"newest"
],
"description": "Sort order"
},
"page": {
"type": "number",
"description": "Page number (1-indexed)"
},
"per_page": {
"type": "number",
"description": "Results per page (max 50)"
}
},
"required": [
"keyword"
]
},
annotations: {"readOnlyHint":true},
execute: async (params) => {
const response = await fetch("/api/search_products", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(params),
});
return response.json();
}
});What's Included
Search, browse, filter, and compare products with structured responses.
Full add-to-cart, update, remove, coupon, and checkout pipeline with user confirmation.
Real-time shipping estimates, delivery tracking, and order history.
AI-friendly review summaries and personalized product recommendations.
Add-to-cart and checkout forms that agents can submit without JavaScript.
Checkout requires explicit user confirmation before processing payment.
Why This Template Works
Designed for AI agent interoperability with structured tool definitions.
Complete Purchase Journey
Covers every step from discovery to post-purchase tracking, so agents never hit a dead end.
Structured Product Data
Tools return typed JSON with prices, sizes, colors, and availability — no scraping needed.
Safe Checkout Pattern
The checkout tool uses requestUserInteraction to ensure humans confirm payment before it processes.
Dual API Surface
Imperative JS for rich agents and declarative HTML forms for simpler crawlers — both work out of the box.
Implementation Guide
Follow these steps to deploy the template on your website.
Drop in the HTML
Copy the template HTML into your site. All tools and styles are self-contained — no external dependencies.
Wire up your product API
Replace the mock execute() functions with real fetch() calls to your product catalog, cart, and order APIs.
Test with an AI agent
Open the page in an MCP-capable browser or test harness and verify the full search → cart → checkout flow.
Download Options
Other Industry Templates
Ready to Make Your Site Agent-Ready?
Deploy this template and start receiving structured traffic from AI agents.