WebMCP Kit

Demo guide

Natural language becomes safe, typed app actions.

5 routes show the same contract from different angles: current page context, narrow tools, planned input, app-owned execution, and approval for sensitive changes.
01

Inventory

A SaaS page can expose useful AI actions without handing over global app control.

Command
Select all French items
Expected tool call
select_items({ ids: [...] })
Safety boundary
The planner cannot invent invoice, cart, or ticket actions on this route.
Open Inventory
02

Invoices

Agentic workflows can be useful while still respecting approval gates for sensitive records.

Command
Mark Stark Industries invoices as paid
Expected tool call
select_invoices(...) -> update_selected_invoice_status({ status: "paid" })
Safety boundary
Confirmation is enforced per mutating tool, including inside chained plans.
Open Invoices
03

Commerce

The demo shows blocked actions as a feature: app rules remain authoritative.

Command
Add 20 keyboard kits to the cart
Expected tool call
add_to_cart({ productId: "kbd-01", quantity: 20 })
Safety boundary
The guard blocks the action because only 18 keyboard kits are available.
Open Commerce
04

Flights

Travel products can expose useful search and choice workflows while keeping checkout out of scope.

Command
Find Lisbon to London flights and select the morning direct option
Expected tool call
search_flights(...) -> select_flight({ id: "flight_lis_lhr_0830" })
Safety boundary
The app selects an itinerary candidate only; no passenger, payment, or booking action exists.
Open Flights
05

Support

Teams can make ordinary forms and queues agent-callable without rebuilding the product.

Command
Create a support ticket
Expected tool call
create_support_ticket({ subject, body })
Safety boundary
The app owns the form fields, validation, and created ticket record.
Open Support