In short, an agent comes to your website, discovers what WebMCP tools you offer, reads what each one does, and calls the one that fits 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’s no headless or background mode, and the browser has to keep running.
Declarative API (HTML)
The declarative API is the easier implementation, meant for actions that already live in a form. For example, a reservation, signup, or 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
- tooldescription explains what it does
- toolparamdescription, optional, and tells the agent what that field expects
From there, the browser turns the form into a tool. By default, only your own site can use it.
To see the declarative API in action, I loaded Google’s Le Petit Bistro demo with the Model Context Tool Inspector open. It’s a Chrome extension that lists the tools a page has registered and lets you enter a prompt and watch its Gemini-powered test agent call them.
Just a heads up, you’ll need a Gemini API key for this (you can use the free tier).
The demo is a restaurant reservation page with one booking form. The fields include name, phone number, date and time, etc.
Sure enough, the form showed up 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.