Mabel’s TableFind a table
Your corner table is waiting

Good food.
Unhurried evenings.

A cozy neighborhood bistro serving market suppers, generous pours, and the kind of welcome that remembers your name.

This is a fictional restaurant built to demonstrate WebMCP. Reservations create real state, but no actual table exists.

Dinner Tue–Sun Seasonal menu
01 Agent tasting menu

Try it with
your agent.

No WebMCP-capable browser detected
  1. 1
    Use a WebMCP-capable browser.

    Open ChatGPT’s in-app browser, or Chrome 149+ with chrome://flags/#enable-webmcp-testing enabled for the origin trial.

  2. 2
    Open this site there.

    Your agent discovers the booking tools automatically through document.modelContext. Nothing to paste or configure.

  3. 3
    Give your agent a reservation.

    Copy the starter prompt. The live calendar makes it check, negotiate, hold, and confirm.

STARTER PROMPT
Book me a table for 4 this Friday at 7pm at this restaurant; if that's full, find the closest available time and confirm it under my name.
Friday at 7 is intentionally popular. The agent may need to negotiate the nearest real opening before confirming.
02 The host stand
Reservations

Pull up a chair.

MABEL’S
Since
always

Come for the roast chicken.
Stay because nobody is rushing you.

Fictional restaurant.
Genuinely working reservations.
Tonight’s chalkboard

Market-led bistro food, a short wine list, and enough detail to make the fictional dining room feel lived in.

To beginMarket radishes, cultured butter, smoked salt11
From the gardenCharred leeks, hazelnut, mustard cream16
Mabel’s supperRoast chicken, spring herbs, lemon jus29
From the coastCrisp trout, white beans, salsa verde27
Something sweetOlive oil cake, citrus, crème fraîche12
Plans change

Already have
a table?

Look up, cancel, or move your reservation. No account, no phone tree.

03 Under the tablecloth

A website an agent
can actually use.

6 typed booking toolsAvailability through rescheduling, backed by live data
Keep readingChrome WebMCP docs WebMCP community guide
booking-tools.js
const ctx = document.modelContext ?? navigator.modelContext;
const controller = new AbortController();

await ctx?.registerTool({
  name: "mabel_check_availability",
  description: "Check live table availability at Mabel's Table for a date and party size. Use this before creating a hold or rescheduling.",
  inputSchema: {
    type: "object",
    properties: {
      date: {
        type: "string",
        description: "Reservation date in YYYY-MM-DD format, within the next 21 days."
      },
      partySize: {
        type: "integer",
        minimum: 1,
        maximum: 10,
        description: "Number of guests, from 1 to 10."
      }
    },
    required: ["date", "partySize"]
  },
  execute: ({ date, partySize }) =>
    checkAvailability(String(date), Number(partySize))
}, { signal: controller.signal });

// Cleanup
controller.abort();
ctx?.unregisterTool?.("mabel_check_availability");
01

The tool schema tells an agent exactly what values are valid before it acts.

Borrow our mise en place

Give your agent
a head start.

Paste this prompt into your coding agent to add a typed WebMCP booking flow to your own site.

PROMPT FOR YOUR CODING AGENT

Add WebMCP booking tools to this site using document.modelContext.registerTool(), with navigator.modelContext as a fallback for older browsers. Expose typed tools to check live availability, place an expiring hold, confirm with guest details, look up, cancel, and reschedule reservations. Use JSON Schema inputs, return concise structured results, validate every server-side action, persist state, handle sold-out times with alternatives, and abort current registrations or unregister older fallback tools during cleanup. Keep the normal human booking UI fully functional too.