Video summary
WebMCP is an emerging web standard designed to help developers build and expose structured tools specifically for AI agents, allowing them to interact with websites in a meaningful way. Currently still experimental, this technology enables users to experience advanced capabilities where their agents can perform complex tasks like navigating sites or managing state directly through the browser. To begin experimenting with these features, developers need to enable specific flags in Chrome DevTools, which unlocks support for both imperative and declarative APIs. The imperative approach allows for defining tools in JavaScript to handle functions such as form inputs and site navigation, while the declarative API transforms standard HTML forms into usable tools by adding specific annotations that define the tool's name, purpose, and parameters.
The video illustrates these concepts through practical examples, including a smart home dashboard where users can customize their view based on priorities like security or climate control, and a restaurant reservation system that handles specific user requests with attention to detail, such as notifying staff about allergies. In another demonstration involving a car configuration tool, an agent is prompted to upgrade a vehicle's features within a budget, showcasing how WebMCP tools provide parameters for color, lighting, and comfort technology. These examples highlight how the standard empowers agents like Gemini and Chrome to understand exactly how to interact with a page, effectively bridging the gap between user intent and web application functionality.
Debugging and testing these new capabilities are streamlined through enhanced DevTools features that allow developers to inspect, modify, and execute tools directly within the browser interface. By accessing the Application panel, developers can view a list of available tools, examine their schemas, and manually tweak parameters before running them to see the results in real-time. Furthermore, the integration with Chrome DevTools for Agents allows coding agents to function as browser agents, though developers must explicitly instruct these agents to prioritize WebMCP tools over the native debugging utilities provided by the extension. This ensures that custom tools are utilized correctly while building robust experiences for the future agentic web.
As this technology matures, it promises to revolutionize how users interact with digital services, enabling them to quickly reserve tables at restaurants or configure complex software settings through simple natural language commands. While the specific implementation details may evolve as the standard is refined and moved out of its experimental phase, the core vision remains focused on creating a seamless interface between AI agents and web content. Developers are encouraged to register for the WebMCP origin trial to start building and debugging their own tools today, contributing to an ecosystem where intelligent agents can perform sophisticated tasks across the entire web with greater precision and reliability.
Read the full video transcript
Hi, I'm Alexandra and I'm your host on
this very special episode of developer
tooling tips on tour. Today, we're at
one of our biggest developer events,
Google IO Connect Berlin, and you're
going to learn everything there is to
need to know about WebMCP.
So, what it is, how users will
experience it, and even how they can
debug it in DevTools. Let's dive in.
>> [music]
[music]
>> WebMCP is a proposed web standard to
help you build and expose structured
tools for AI agents.
WebMCP is still experimental, and so are
our debugging tools in DevTools. Go to
Chrome flags and enable the DevTools
WebMCP support and enable WebMCP testing
flags to start playing with it. Your
WebMCP tools can be imperative or
declarative.
With the imperative API, you can define
tools in JavaScript to execute various
functions such as form input, site
navigation, and state management. Take a
look at our smart home application.
Users can ask their agents to customize
their dashboard to show what they care
most about, whether it's security,
climate, energy, or media management.
To build this dashboard, we used model
context.registerTool
to add a new tool.
This requires a tool name, description,
and input schema.
For example, in our WebMCP smart home
application, we built the rearrange DOM
components tool, which allows us to move
each component from individual pages to
our dashboard.
With get tools, you can discover and
execute tools in the document
asynchronously.
In the next demo, we implemented WebMCP
for a restaurant reservation system.
Watch as I ask my agent to book a
reservation for two people to celebrate
my friendiversary with the king of dev
tools, Matthias, outside on the terrace
at Le Petit Bistro.
I'll also make sure to notify the staff
of his severe allergies of fallen
soufflés.
With a declarative API, you can
transform a standard HTML form into a
web MCP tool with annotations.
Add the tool's name and purpose within
the form element while form fields start
to act as tool parameters.
The browser translates these annotations
for agents to use these tools similarly
to the imperative tools.
You can require a user to manually
submit a form to complete the task or
add tool auto submit. The attribute will
help you trigger submission and
navigation once the model invokes the
tool.
Web MCP tools help a browser agent like
Gemini and Chrome know exactly how to
interact with a page to support a user's
experience.
In our car configuration demo, you can
see how we customize a dyno run car.
While on the dyno run website, I
prompted Gemini and Chrome to build the
ultimate party car with immersive audio,
interior lighting, and anything else I
can afford to add under $40,000.
Gemini and Chrome asks me to confirm its
understanding of my request and then it
starts the task. Thanks to web MCP, the
agent can easily upgrade my dyno car
with the update car configuration tool.
The tool offers parameters for car
color, lighting, and comfort technology,
plus many other updates.
This is just an early example of what
Gemini and Chrome could do when
interacting with web MCP tools. It's
still experimental, so the nature of
this flow might change.
Just like the rest of your web
application, you can inspect, test, and
debug your web MCP tools with dev tools.
On a site using web MCP tools, open the
dev tools and go to the application
panel. In the bottom of the panel, you
see a list of all available tools.
Select a tool to reveal the details.
In the details sidebar, you see the
tools names and descriptions that are
available to any agent accessing the
site along with additional available
parameters.
From this sidebar, you can also invoke
the selected tool.
Hover over the grayed-out parameter and
reveal a plus icon.
Click on the plus icon to edit a
parameter value.
Clicking in the opening text field shows
a drop-down of all of the available
options for this parameter as inferred
from the tool schema.
Once you've tweaked your parameters, you
can click run tool to actually execute
the tool with the selected parameters.
As soon as you click run, you'll see the
tool invocation in the upper part of the
panel with its status, input, and
output.
Clicking on any invocation reveals
another detail sidebar for you to
inspect the input and output objects in
detail.
But, you can also test WebMCP tools with
DevTools for Agents. Let's look into it.
With Chrome DevTools for Agents, your
coding agent can become a browser agent,
too.
Learn how to install, set up, and
configure DevTools for Agents through
this link.
Once you set it up, you can enable the
WebMCP support by toggling the category
experimental WebMCP configuration flag.
This enables two additional tools: list
WebMCP tools and execute WebMCP tool.
With those tools enabled, you can prompt
your agent just like you'd prompt a
browser agent.
However, since DevTools for Agents has
more tools to interact with the site,
your agent might prefer those over your
WebMCP tools.
So, if you want to make sure that your
agent uses your WebMCP tools, you must
explicitly instruct it to.
For example, with the French bistro demo
you saw earlier, prompt create a
reservation for four people using the
Web MCP tool.
Whether you rely on tools provided by
the DevTools for agents or Web MCP
tools,
you're building out experiences for the
agentic web.
Soon, your users will be able to use
their agent to quickly reserve a special
night at Le Petit Bistro, where all the
soufflés are almost always perfect, or
so I've been told.
Register for the Web MCP origin trial,
start building and debugging your tools.
And don't worry, folks, Matias will be
back soon in a future developer tooling
tips. Thanks for watching.
>> [music]
[music]