Join us for this special episode of Developer Tooling Tips on tour from Google I/O Connect Berlin! Alexandra Klepper details how WebMCP bridges the gap between your web application and browser agents by providing structured tools. You can define these tools using the imperative API in JavaScript, or by adding annotations to your HTML forms with the declarative API. Once your tools are built, Chrome DevTools provides a dedicated interface in the Application panel and agent tools for debugging and testing.
Chapters:
00:00 – Introduction
00:33 – What is WebMCP?
00:52 – Using the imperative API
01:47 – Using the declarative API
02:40 – Browser agent integration
03:34 – Debug with the Application panel
04:47 – Test with DevTools for agents
06:15 – Join the WebMCP Origin Trial
Resources:
WebMCP docs:
Imperative API demo: https://goo.gle/webmcp-smart-home
Declarative API demo: https://goo.gle/webmcp-french-bistro
DevTools for agents: https://goo.gle/dta-setup
WebMCP Origin Trial: https://goo.gle/webmcp-origin-trial
Questions? Find us on LinkedIn:
https://goo.gle/chrome-for-developers
Watch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#ChromeForDevelopers #Chrome #WebMCP
Speaker: Alexandra Klepper
Products Mentioned: Chrome, Chrome DevTools,