Without WebMCP
Operate the ordinary page controls. The run document registers no WebMCP tools.
Start without WebMCPCONSUMER 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.
With WebMCP
A supported browser agent can call the page’s structured tools. Ordinary controls stay available.
Start with WebMCPCompare results · 0 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.
- 1. Find a time
Choose a service and date. The same availability appears in the page and tool result.
- 2. Review & confirm
Prepare a slot, then confirm it yourself. A tool call alone does not make the reservation.
- 3. Check the reservation
Use your demo reference to read its status. The booked slot becomes unavailable.
- 4. Cancel & 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.
Execution trace 0 calls
Newest first. Local examples are scripted. Native calls require a supported browser and agent.
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.
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 →