Consumer app / complete journey

WebMCP appointment booking demo.

See how an agent can help someone find a time, prepare a booking and check a reservation—with the person in control of confirmation.

Same website. Same task.

Compare with and without WebMCP.

Use the same agent and model in a fresh conversation for each run. Both modes use the same calendar and confirmation flow.

Find the earliest available portfolio-review appointment on October 14, 2026, before noon UTC. Prepare it for my review and stop before confirming. Wait for me to confirm using the page. After I confirm, look up the reservation and report its reference, date, time and status.

How to compare fairly

Without WebMCP

Operate the ordinary page controls. The run document registers no WebMCP tools.

Start without WebMCP

With WebMCP

A supported browser agent can call the page’s structured tools. Ordinary controls stay available.

Start with WebMCP

Compare results0 saved attempts

Latest attempt for each mode. These are local observations, not a verified AI benchmark. We cannot distinguish your clicks from an agent’s clicks.

Observed measure	Without WebMCP	With WebMCP
Task outcome	—	—
Page stopwatch	—	—
Time with review open	—	—
Page time excluding review	—	—
Page-control actions	—	—
Native tool calls	—	—
Failed handler calls	—	—
Page confirmations	—	—
Execution evidence	No attempt recorded	No attempt recorded
Agent tokens, cost & total browser actions	Not available	Not available

Up to 20 attempts are saved in this browser. DOM reads, all browser clicks, agent tokens and provider costs are not observed. No speed winner is inferred.

Checking browser support…Browser setup

A complete reservation journey

From an open time to a confirmed appointment.

Try the controls yourself, or start a guided example and confirm the review.

1Find a time
Choose a service and date. The same availability appears in the page and tool result.
2Review & confirm
Prepare a slot, then confirm it yourself. A tool call alone does not make the reservation.
3Check the reservation
Use your demo reference to read its status. The booked slot becomes unavailable.
4Cancel & check again
Review a cancellation, confirm it, then see the time become available again.

The guided example runs a fixed sequence of local tool calls. It is not an AI conversation.

Form / StudioAppointment booking

Fictional data

Book time with the studio

Pick a service. Find your time.

Fixed demo calendar · October 12–14, 2026 · All times UTC. No account or personal details needed.

Service

Date

30 minutes · FreeTime zone: UTC

Your reservation

Local only

Choose an available time to prepare your appointment.

Reservations live in this page session. Reloading or resetting clears them.

Tool inspector6 tools

Show fictional studio availability for a service and date in UTC. Updates the visible calendar and clears any unconfirmed review.

Tool arguments JSON

Current revision: 0. After a change, load a current example before running a write tool.

Tool schema

{
  "type": "object",
  "properties": {
    "service_id": {
      "type": "string",
      "description": "Studio service.",
      "maxLength": 120,
      "enum": [
        "intro",
        "portfolio",
        "design"
      ]
    },
    "date": {
      "type": "string",
      "description": "Date in the fixed October 2026 demo calendar.",
      "maxLength": 120,
      "enum": [
        "2026-10-12",
        "2026-10-13",
        "2026-10-14"
      ]
    }
  },
  "required": [
    "service_id",
    "date"
  ],
  "additionalProperties": false
}

Registration code

Template: replace runBookingAction with your validated handler.

// Schema: expand “Tool schema” below.
const lifetime = new AbortController();
if (document.modelContext?.registerTool) {
  await document.modelContext.registerTool({
    name: "find_appointment_slots",
    description: "Show fictional studio availability for a service and date in UTC. Updates the visible calendar and clears any unconfirmed review.",
    inputSchema: {
  "type": "object",
  "properties": {
    "service_id": {
      "type": "string",
      "description": "Studio service.",
      "maxLength": 120,
      "enum": [
        "intro",
        "portfolio",
        "design"
      ]
    },
    "date": {
      "type": "string",
      "description": "Date in the fixed October 2026 demo calendar.",
      "maxLength": 120,
      "enum": [
        "2026-10-12",
        "2026-10-13",
        "2026-10-14"
      ]
    }
  },
  "required": [
    "service_id",
    "date"
  ],
  "additionalProperties": false
},
    execute: async (args, { signal } = {}) => {
      signal?.throwIfAborted();
      // This must be the same validated handler your UI calls.
      return runBookingAction("find_appointment_slots", args);
    }
  }, { signal: lifetime.signal });
}
// On page disposal: lifetime.abort();

Last result

// Find a time or run a tool to inspect its result.

Page controls, the local runner and native WebMCP use the same state and validation. Only an actual browser tool callback is labelled “Native WebMCP”.

Execution trace0 calls

Newest first. Local examples are scripted. Native calls require a supported browser and agent.

No calls yet.

What happens under the hood

One booking engine, three ways to use it.

The calendar controls, JSON runner and registered WebMCP tools call the same booking engine. Select a different service in the page, then run get_booking_state: the tool reads exactly that selection.

A confirmed booking changes availability.

Confirm a 09:00 appointment and that time becomes unavailable for the selected service. Look up the reference to see its status. Confirm a cancellation and the slot opens again. Trying to book an unavailable time returns an error without changing the reservation.

State can change between tool calls.

Write tools require the current revision. Change the calendar, then run an old request to see it rejected. A real booking service must also enforce availability, identity and concurrent reservations on the server.

Read the implementation walkthrough

Try it with a browser agent

Give the agent a concrete task.

Find an introduction call on October 12, 2026 at 09:00 UTC. Prepare it for my review. After I confirm, check the reservation status.

Open this page in a supported WebMCP environment and use its agent or tool inspector. The page reports whether native tools registered. Starting the guided example alone does not test an AI agent.

Set up browser support

Does this book a real appointment?

No. This is a working browser-local application with fictional services and a fixed demo calendar. There is no provider API, payment, email, account or external reservation. Reloading clears the history.

Is this different from the healthcare example?

The healthcare playground teaches how to prepare a slot without patient information. This consumer booking example adds the full lifecycle: changing availability, reservation references, lookup, cancellation and stale-request handling.

Can WebMCP make this page rank on Google?

WebMCP exposes app actions to agents; it is not a search ranking shortcut. This page also supplies readable HTML, clear explanations and a crawlable URL. Read the WebMCP SEO guide for the distinction.

API references reviewed September 8, 2026.Chrome imperative API

Tools exposed by this demo

The appointment tool contract.

find_appointment_slots

Show fictional studio availability for a service and date in UTC. Updates the visible calendar and clears any unconfirmed review.

Input schema

{
  "type": "object",
  "properties": {
    "service_id": {
      "type": "string",
      "description": "Studio service.",
      "maxLength": 120,
      "enum": [
        "intro",
        "portfolio",
        "design"
      ]
    },
    "date": {
      "type": "string",
      "description": "Date in the fixed October 2026 demo calendar.",
      "maxLength": 120,
      "enum": [
        "2026-10-12",
        "2026-10-13",
        "2026-10-14"
      ]
    }
  },
  "required": [
    "service_id",
    "date"
  ],
  "additionalProperties": false
}

prepare_appointment

Prepare an available slot for visible user review. Does not book. Read get_booking_state for the current revision before calling.

Input schema

{
  "type": "object",
  "properties": {
    "slot_id": {
      "type": "string",
      "description": "A slot from the currently displayed calendar.",
      "maxLength": 120,
      "enum": [
        "intro-2026-10-12-0900",
        "intro-2026-10-12-1100",
        "intro-2026-10-12-1400",
        "intro-2026-10-13-0900",
        "intro-2026-10-13-1100",
        "intro-2026-10-13-1400",
        "intro-2026-10-14-0900",
        "intro-2026-10-14-1100",
        "intro-2026-10-14-1400",
        "portfolio-2026-10-12-0900",
        "portfolio-2026-10-12-1100",
        "portfolio-2026-10-12-1400",
        "portfolio-2026-10-13-0900",
        "portfolio-2026-10-13-1100",
        "portfolio-2026-10-13-1400",
        "portfolio-2026-10-14-0900",
        "portfolio-2026-10-14-1100",
        "portfolio-2026-10-14-1400",
        "design-2026-10-12-0900",
        "design-2026-10-12-1100",
        "design-2026-10-12-1400",
        "design-2026-10-13-0900",
        "design-2026-10-13-1100",
        "design-2026-10-13-1400",
        "design-2026-10-14-0900",
        "design-2026-10-14-1100",
        "design-2026-10-14-1400"
      ]
    },
    "expected_revision": {
      "type": "integer",
      "description": "Current revision returned by get_booking_state. Refresh after a state change.",
      "minimum": 0,
      "maximum": 9007199254740991
    }
  },
  "required": [
    "slot_id",
    "expected_revision"
  ],
  "additionalProperties": false
}

get_reservation

Read a fictional reservation created in this page session, including its confirmed or cancelled status. Does not contact a provider.

Input schema

{
  "type": "object",
  "properties": {
    "reference": {
      "type": "string",
      "description": "Reservation reference returned after the user confirms, for example DEMO-0001.",
      "maxLength": 120
    }
  },
  "required": [
    "reference"
  ],
  "additionalProperties": false
}

prepare_cancellation

Prepare cancellation of a confirmed local reservation for visible user review. Does not cancel it until the user confirms on the page.

Input schema

{
  "type": "object",
  "properties": {
    "reference": {
      "type": "string",
      "description": "Reference of a confirmed reservation in this page session.",
      "maxLength": 120
    },
    "expected_revision": {
      "type": "integer",
      "description": "Current revision returned by get_booking_state. Refresh after a state change.",
      "minimum": 0,
      "maximum": 9007199254740991
    }
  },
  "required": [
    "reference",
    "expected_revision"
  ],
  "additionalProperties": false
}

get_booking_state

Read the visible calendar, available slots, pending review, reservation history and revision. All data is fictional and local to this page.

Input schema

{
  "type": "object",
  "properties": {},
  "required": [],
  "additionalProperties": false
}

reset_booking_demo

Reset the fictional calendar, reviews and reservation history in this page only.

Input schema

{
  "type": "object",
  "properties": {},
  "required": [],
  "additionalProperties": false
}

Explore another workflow.

See how a catalog and cart differ from availability and reservations.

Try WebMCP for e-commerce Try the travel booking demo