In short, an agent comes to your website, finds out what WebMCP tools you offer, reads what each does, and calls the one best suited to the task.
There are two ways to set this up: HTML for forms or JavaScript for more complex uses.
Remember, these tools only work while the page is open; there is no headless or background modeand the browser must continue to work.
Declarative API (HTML)
THE Declarative API is the simplest implementation, designed for actions that already live in a module. For example, a reservation, a registration or a contact request.
To implement this, you simply need to add a couple of attributes to the form you already have:
- toolname gives the tool a name
- description of the instrument explain what it does
- toolparamdescriptionoptional, and tells the agent what that field expects
From there, the browser turns the form into a tool. By default, only your site can use it.
To see the declarative API in action, I uploaded Google’s Petit Bistrot demo with the Model Context tool inspector open. It’s a Chrome extension that lists registered tools from a page and lets you enter a prompt and watch its Gemini-based test agent call them.
Just a heads up, you will need a Gemini API key for this (you can use the free tier).
The demo is a restaurant booking page with a reservation form. Fields include name, phone number, date and time, etc.
As expected, the module appeared in the Inspector as a registered tool, complete with its schema. The panel shows exactly which WebMCP tools an agent can see on a site.
