WebMCP: The Web becomes "Agent-Able"

Posted by

  

For years, web automation has been an exercise in fragility. From scraping based on fickle CSS selectors to simulating user input via tools like Playwright or Selenium, the relationship between software and the web has always been mediated by "hacking" an interface designed for humans.

With the introduction of WebMCP (proposed by Google as a standard for interaction between AI models and the browser), we are changing the paradigm: we are moving from the "Web to be read" to the "Web to be executed".

🔗 Do you like Techelopment? Check out the website for all the details!

The Paradigm Shift: From DOM-parsing to Function Calling

Until today, an AI agent that wanted to interact with a website had to "look" at the page (e.g., taking a series of screenshots), attempt to interpret the DOM structure, guess which <div> was a button, and hope the layout wouldn't change between sessions.

WebMCP (Model Context Protocol for the Web) introduces a standardized contract. Instead of forcing the AI to guess, the web developer exposes the site's functionality as "Tools" directly in the browser context. The browser acts as an orchestrator, ensuring a secure, semantic, and predictable interface between the web application and the AI agent.

Image created from https://developer.chrome.com/blog/ai-webmcp-origin-trial


Architecture and Operation

WebMCP is not just an API. It is based on a clear separation between presentation logic (UI) and execution logic (Tool).

1. Tool Declaration

The developer defines tools using a native JavaScript interface in the browser. Each tool is described by:

  • Name and Description: Essential for the LLM to understand when and how to use it:
    • toolname
    • tooldescription
    • toolparamdescription
    • toolName

    <form toolname="supportRequestTool"
    tooldescription="Submit a request for support."
    action="/submit">

    <label for="firstName">First Name</label>
    <input type=text name=firstName>

    <label for="lastName">Last Name</label>
        <input type=text name=lastName>

    <select name="select" required 
        toolparamdescription="Determines what team this request is routed to.">
        <option value="Customer happiness team">Return my purchase.</option>
        <option value="Distribution team">Check where my package is.</option>
        <option value="Website support team">Get help on the website.</option>
    </select>

    <button type=submit>Submit</button>
</form>
    Source code: https://developer.chrome.com/docs/ai/webmcp/declarative-api
  • Parameter Schema: Uses JSON Schema to define rigorous inputs, drastically reducing parameter hallucinations. 
    await document.modelContext.registerTool({
  name: "filter-templates",
  description: "Filters the list of templates based on a natural language visual description.",
  inputSchema: {
    type: "object",
    properties: {
      description: { type: "string", description: "A visual description of templates to show." }
    },
    required: ["description"]
  },
  execute({ description }) {
    filterTemplatesInUI(description);
  }
});
    Source code: https://github.com/webmachinelearning/webmcp?tab=readme-ov-file

2. The Execution Lifecycle

  1. Discovery: The agent queries the page to discover which tools are exposed via WebMCP.
  2. Negotiation: The browser verifies permissions.
  3. Execution: The agent invokes the tool. The browser executes the JavaScript function defined in the page context, ensuring that state (cookies, session, authentication) is handled correctly.
  4. Feedback: The result is returned to the agent in a structured format, ready for further processing.

Security: Isolation as a Pillar

One of the biggest fears is: "Can an agent make purchases on my behalf or delete my account?".

WebMCP was designed with security at its core. Unlike an invasive browser extension, WebMCP operates under the browser's strict Permissions Policy. Access to tools is bound to the Origin and requires explicit user consent. The browser acts as a gatekeeper: the agent does not "take control" of the site, but only executes functions that the site has explicitly authorized to be exposed.


State of the Art and Impact on Web Development

We are in an Origin Trial phase. It is no longer a theoretical exercise, but a technology that is defining how web applications will integrate with next-generation artificial intelligence.

For a developer, this means:

  • Less "Glue" Code: Complex backends are no longer needed just to expose simple actions.
  • Testability: Since interactions are based on standard APIs, it is possible to write unit tests for the exposed tools, ensuring the agent always behaves as expected.
  • AI-Native User Experience: It is possible to create flows where the AI assists the user in completing complex tasks (e.g., product configuration, multi-step form filling) in a fluid and transparent way.

Conclusion

WebMCP represents the natural evolution of the web. If the transition from static sites to SPAs (Single Page Applications) made the web interactive for humans, WebMCP makes the web operational for machines.

For developers, the challenge is no longer just building beautiful interfaces, but defining robust interfaces for agents. The website of the future is not just made of HTML and CSS, but of a well-documented set of tools ready to collaborate with AI.


References



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment