Food Delivery WebMCP Template
A complete WebMCP template for food delivery platforms featuring 15 AI-agent tools — restaurant browsing, menu search, cart management, order placement, live tracking, reordering, subscriptions, and delivery zones.
Load live preview on demand to keep template pages fast.
// Register browse_restaurants tool
navigator.modelContext.registerTool({
name: "browse_restaurants",
description: "Browse available restaurants by cuisine, rating, or delivery time",
inputSchema: {
"type": "object",
"properties": {
"cuisine": {
"type": "string",
"enum": [
"american",
"italian",
"mexican",
"chinese",
"japanese",
"indian",
"thai",
"mediterranean",
"korean",
"vegan"
],
"description": "Filter by cuisine type"
},
"sort_by": {
"type": "string",
"enum": [
"rating",
"delivery_time",
"distance",
"price_low",
"price_high",
"popular"
],
"description": "Sort order for results"
},
"max_delivery_minutes": {
"type": "number",
"description": "Maximum delivery time in minutes"
}
},
"required": []
},
annotations: {"readOnlyHint":true},
execute: async (params) => {
const response = await fetch("/api/browse_restaurants", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(params),
});
return response.json();
}
});What's Included
End-to-end food delivery coverage from browsing restaurants to tracking your order in real time.
Place-order and promo code forms that AI agents can read, populate, and submit with user confirmation.
Structured menu data with prices, dietary tags, allergen info, and customization options.
Real-time order status, driver location, and ETA updates agents can relay to users.
FreshFleet branded dark theme with orange accents and glassmorphism card layouts.
Self-contained HTML file — no build step, no dependencies, instant deployment.
Why This Template Works
Designed for AI agent interoperability with structured tool definitions.
Structured Tool Schemas
Every tool has a typed JSON Schema so agents know exactly what parameters to send.
User Interaction Gates
Order placement requires explicit user confirmation, preventing accidental purchases.
Realistic Mock Data
Runs standalone with plausible restaurants, menus, pricing, and confirmation numbers.
Progressive Enhancement
Works as a regular website for humans; lights up with superpowers when an agent visits.
Implementation Guide
Follow these steps to deploy the template on your website.
Download or Copy the HTML
Grab the self-contained HTML file and drop it into your web root or CMS.
Connect Your Restaurant API
Swap the static execute() responses with calls to your real restaurant and ordering system.
Configure Payment Gateway
Wire up the place_order tool to your Stripe, Square, or payment processor of choice.
Customise Branding
Update the company name, colours, restaurant logos, and menu imagery to match your brand.
Deploy & Verify
Publish the page and use the WebMCP inspector to confirm all 15 tools are registered.
Download Options
Other Industry Templates
Ready to Make Your Site Agent-Ready?
Deploy this template and start receiving structured traffic from AI agents.