Demos

Two example apps, each used by an agent through the app's own WebMCP tools. Watch the cursor type, and stop where a person has to click. Recorded with agent-browser on the apps' mock data, offline.

Skyline

Book a flight, Riyadh to Dubai

The agent searches flights, picks the first result and types the traveler's details into the booking form. Booking is the person's call: the cursor parks on Book flight until they click it.

localhost:5175 · Skyline, the flights example

The calls, in order

search_flights({ from: "RUH", to: "DXB", date: "2027-03-12", adults: 1 })
list_results({ limit: 1 })
select_flight({ flightId: "F-…" })
fill_traveler_details({ firstName: "Mustafa", lastName: "Elsayed",
  email: "[email protected]", phone: "+966567891011", … })
book_flight({ acceptTerms: true })   // parks until the person clicks

list_results and select_flight are the results page's tools (match); search, traveler details and booking are forms with useWebTool (React Hook Form, and TanStack Form for the travelers), and book_flight has requireConfirmation, so it waits for a click.

Field Store

Shop and check out, shipped to Riyadh

The agent finds a bag, opens it, adds it to the cart and goes to checkout, where it types the contact and shipping details. The order is placed only when the person clicks Place order.

localhost:5174 · Field Store, the e-commerce example

The calls, in order

search_products({ query: "bag" })
open_product({ slug: "canvas-tote" })
add_to_cart({ qty: 1 })
go_to_page({ page: "checkout" })
checkout({ email: "[email protected]", name: "Mustafa Elsayed",
  address: "King Fahd Road 2411, Al Olaya", city: "Riyadh",
  postcode: "12214", country: "Saudi Arabia" })   // parks until the person clicks

open_product and go_to_page are app-wide tools that navigate; search, add to cart and checkout are React Hook Form forms with useWebTool, and checkout has requireConfirmation, so it waits for a click.

Give your own page its first tool

Call useWebTool beside the button it belongs to, name it like that button, and the cursor shows every call. Quickstart · Define a tool

pnpm add @webmcp-agents/core @webmcp-agents/react @webmcp-agents/chat