Industry Templates

Restaurant WebMCP Template

A complete WebMCP template for restaurants featuring 16 AI-agent tools — menu browsing, table reservations, online ordering, allergen lookups, catering quotes, and more.

Beginner

16 WebMCP Tools

2,150 downloads

Live Preview

yoursite.com/restaurant-webmcp

Load live preview on demand to keep template pages fast.

Tool Inventory

16 registered

webmcp-tools: restaurant-webmcp

Execution Trace

9 steps

01USER→"I'd like to book a table for 4 this Saturday at 7 PM and pre-order dinner."

02AGENT→get_menu({ category: "mains", time_of_day: "dinner" })

03AGENT→get_daily_specials({})

04AGENT→get_dietary_info({ dietary_preference: "gluten-free" })

05AGENT→book_table({ party_size: 4, date: "2025-03-15", time: "19:00", guest_name: "Sarah M." })

06OK→Table confirmed: 4 guests, Sat Mar 15, 7:00 PM — Reservation #R-4821

07WAIT→Presenting menu options to user for selection...

08AGENT→order_food({ items: [...], order_type: "dine-in" })

09DONE→Reservation + pre-order complete. Confirmation sent to guest.

Code Examples

CODE EXPORT

// Register get_menu tool
navigator.modelContext.registerTool({
  name: "get_menu",
  description: "Retrieve the full restaurant menu organised by category",
  inputSchema: {
      "type": "object",
      "properties": {
          "category": {
              "type": "string",
              "enum": [
                  "appetizers",
                  "mains",
                  "desserts",
                  "drinks",
                  "sides"
              ],
              "description": "Filter by menu section"
          },
          "time_of_day": {
              "type": "string",
              "enum": [
                  "lunch",
                  "dinner",
                  "brunch"
              ],
              "description": "Menu variant by service period"
          }
      },
      "required": []
  },
  annotations: {"readOnlyHint":true},
  execute: async (params) => {
    const response = await fetch("/api/get_menu", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(params),
    });
    return response.json();
  }
});

What's Included

16 WebMCP Tools

Full coverage from discovery to transaction — menu, reservations, ordering, catering.

Declarative HTML Forms

Table booking and food ordering forms that AI agents can read and submit directly.

Allergen & Dietary Safety

Structured allergen data so agents can confidently recommend safe dishes.

Real-Time Availability

Wait times, operating hours, and daily specials keep agent responses current.

Dark Premium Design

Ember & Oak branded dark theme with orange accents and glass-morphism cards.

Copy-Paste Ready

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.

Mixed API Surface

Combines imperative JS tools with declarative HTML forms for maximum agent compatibility.

Realistic Mock Data

Runs standalone with plausible menu items, prices, 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.

Replace Mock Data with Your API

Swap the static execute() responses with calls to your real menu / POS system.

Customise Branding

Update the restaurant name, colours, menu items, and imagery to match your brand.

Deploy & Verify

Publish the page and use the WebMCP inspector to confirm all 16 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.

Browse More Templates

Back to Templates

Industry Templates

Restaurant WebMCP Template

A complete WebMCP template for restaurants featuring 16 AI-agent tools — menu browsing, table reservations, online ordering, allergen lookups, catering quotes, and more.

Beginner

16 WebMCP Tools

2,150 downloads

Live Preview

yoursite.com/restaurant-webmcp

Load live preview on demand to keep template pages fast.

Tool Inventory

16 registered

webmcp-tools: restaurant-webmcp

Execution Trace

9 steps

01USER→"I'd like to book a table for 4 this Saturday at 7 PM and pre-order dinner."

02AGENT→get_menu({ category: "mains", time_of_day: "dinner" })

03AGENT→get_daily_specials({})

04AGENT→get_dietary_info({ dietary_preference: "gluten-free" })

05AGENT→book_table({ party_size: 4, date: "2025-03-15", time: "19:00", guest_name: "Sarah M." })

06OK→Table confirmed: 4 guests, Sat Mar 15, 7:00 PM — Reservation #R-4821

07WAIT→Presenting menu options to user for selection...

08AGENT→order_food({ items: [...], order_type: "dine-in" })

09DONE→Reservation + pre-order complete. Confirmation sent to guest.

Code Examples

CODE EXPORT

// Register get_menu tool
navigator.modelContext.registerTool({
  name: "get_menu",
  description: "Retrieve the full restaurant menu organised by category",
  inputSchema: {
      "type": "object",
      "properties": {
          "category": {
              "type": "string",
              "enum": [
                  "appetizers",
                  "mains",
                  "desserts",
                  "drinks",
                  "sides"
              ],
              "description": "Filter by menu section"
          },
          "time_of_day": {
              "type": "string",
              "enum": [
                  "lunch",
                  "dinner",
                  "brunch"
              ],
              "description": "Menu variant by service period"
          }
      },
      "required": []
  },
  annotations: {"readOnlyHint":true},
  execute: async (params) => {
    const response = await fetch("/api/get_menu", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(params),
    });
    return response.json();
  }
});