Uploaded July 2026 | Updated September 2026, 3 weeks ago

---

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. You can define structured tools with JavaScript and the Imperative API, or by adding annotations to your HTML forms with the Declarative API. Once your tools are built, you can debug and test these tools in Chrome DevTools' dedicated interface in the Application panel.

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: https://goo.gle/webmcp
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/alexandraklepper
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,