WebMCP - Why is awesome & How to use it

Web MCP for Chrome: Enabling Deterministic Agent Behavior on the Web

Key Concepts:

• Web MCP (Model Call Protocol): A new concept from Google Chrome designed to enable deterministic agent behavior on websites.
• Deterministic Behavior: Consistent and predictable actions taken by an agent, crucial for reliable automation.
• Agent: An AI entity capable of interacting with web content and performing actions.
• MCP Tool: A defined function that an agent can call to perform a specific action on a website.
• Declarative MCP: Defining MCP tools directly within HTML attributes.
• Imperative MCP: Registering MCP tools programmatically using JavaScript.
• Contextual MCP: Loading relevant MCP tools based on the current webpage or component.
• Schema: The defined structure for input and output data of an MCP tool, ensuring consistency.
• Skills: A related concept where only essential information (title & description) is loaded, with details loaded contextually.

1. The Problem: Non-Deterministic Agent Behavior

The core issue Web MCP addresses is the unreliability of current methods for agents interacting with websites. Without a standardized approach, agents relying on browser automation (like Maneater) face challenges due to the inherent variability of websites. These agents typically extract raw HTML, clean it, and feed it to large language models (LLMs). This process is prone to errors because:

• Websites are poorly built for agents: Designed for human consumption, they contain significant noise and inconsistencies.
• LLMs struggle with noisy data: Leading to non-deterministic behavior – the same input doesn’t always produce the same output.
• Agent failure: This unreliability hinders agents from reliably completing tasks, especially as they become primary consumers of web content. A website that’s easier for agents to use will see increased adoption.

2. Introducing Web MCP: A Solution for Deterministic Interactions

Web MCP aims to solve this by allowing developers to define actions (MCP Tools) that agents can reliably call. Instead of agents attempting to interpret the website’s structure, they interact through these pre-defined tools.

• MCP Server is still built, but declared in code: Developers still create the logic for actions, but declare them within the website’s code (HTML or JavaScript).
• Agent doesn’t need a translation layer: Agents directly call the registered MCP tools, eliminating the need for HTML parsing and screenshot analysis.
• Deterministic Actions: This approach guarantees consistent behavior, as agents always interact through the defined tools.

3. Implementation Methods: Declarative vs. Imperative

Web MCP offers two primary implementation methods:

• Declarative Approach (HTML Attributes):
  • Uses HTML attributes like tool-name and tool-description on elements (e.g., <form>).
  • tool-param-description is used for each customizable input field.
  • Chrome automatically exposes these tools to agents, transforming attributes into a usable schema.
  • Example: A reservation page with a form can be made agent-ready by adding these attributes to the form and input elements.
  • Special CSS classes are triggered for UI feedback (e.g., “Please review and confirm” tooltips).
• Imperative Approach (JavaScript):
  • Uses navigator.registerTool() and navigator.unregisterTool() in JavaScript to bind tools to specific React components or page states.
  • More suitable for dynamic applications.
  • Example: A flight booking app registers different tools on the search page (search flights) and the results page (set filter, list flights).
  • Tools are loaded contextually based on the current UI component.

4. The Power of Contextual MCP

The speaker highlights the significance of contextual MCP as a key advancement. This builds upon previous concepts:

• Initial MCP: Enabled agent capability extension with schema guarantees but consumed excessive context.
• Skills: Reduced context usage by loading only titles and descriptions, but lacked schema guarantees.
• Web MCP (Contextual): Combines the benefits of both – schema guarantees and contextual loading. Different MCP tools are loaded based on the webpage the agent is currently on. This is seen as the ideal future direction for agent-web interaction.

5. Setting Up Web MCP: Technical Details

• Prerequisites: Latest version of Chrome (Chrome Beta) and the "Model Context Tool Inspector" Chrome extension.
• Enabling Web MCP: Navigate to chrome://flags and enable the "Web MCP" flag.
• Detailed Tutorials: Step-by-step guides are available at AI at Build a Club (https://www.buildaclub.ai/).
• Declarative Example (Contact Form): Adding tool-name, tool-description, and tool-param-description attributes to a static HTML contact form makes it agent-ready. Custom event listeners can handle form submission and provide feedback to the agent.
• Imperative Example (React App): Creating a webmcp.ts file to define and register MCP tools for different components (listing columns, adding cards, etc.) in a React application.

6. Data & Statistics (Implied)

While no specific numbers are given, the video implies a growing trend of AI agents becoming significant web consumers, making website agent-friendliness increasingly important. The speaker suggests that websites optimized for agents will likely see increased usage.

7. Notable Quotes

• “Websites are not well built and it’s designed for human to consume rather than for agents.” – Highlights the core problem Web MCP addresses.
• “This web MCP concept is quite interesting…If your website is easier for agent to complete tasks that means agent will do it more and more people were likely to adopt it.” – Emphasizes the potential benefits of adopting Web MCP.
• “This is like the coolest part I’ve seen after using web MCP. Like each web page, it just has this special list of exposed MCP tool that will be loaded up contextually.” – Expresses enthusiasm for the contextual MCP approach.

8. Conclusion

Web MCP represents a significant step towards enabling reliable and deterministic agent interactions with the web. By providing a standardized way for developers to define actions and for agents to interact through those actions, it addresses the limitations of current browser automation techniques. The contextual loading of MCP tools is particularly promising, offering a balance between schema guarantees and efficient context usage. Adopting Web MCP is likely to become increasingly important as AI agents become more prevalent web consumers.