WebMCP Brings AI Agents to Your Website with 3 HTML Attributes

Overview

For years, AI agents navigating websites have resembled clumsy users trying to operate a mouse with oven mitts on. These models read pixel layouts, guess which input field handles a search, and hope their typed query triggers the correct submission button. Every guess is a potential failure point, forcing the agent to scrape the visual interface because that is all it has been given.

A new initiative called WebMCP aims to solve this friction by allowing web pages to expose their native features directly to AI agents as structured tools. Instead of guessing, an agent calls a function with a defined name, description, and typed inputs. This shift from visual scraping to functional calling promises to make AI interactions with websites significantly more reliable and efficient.

The solution is deceptively simple: three HTML attributes added to existing forms, or a lightweight JavaScript registration for dynamic components. Because browsers without WebMCP support simply ignore unknown attributes, the implementation is backward-compatible and invisible to standard human visitors.

The Core Mechanism

The primary method for exposing a tool is through standard HTML forms. If a website already has a search form or a filter widget, developers can simply add three specific attributes to unlock agent compatibility. This approach leverages existing markup rather than requiring a complete rebuild of site architecture.

Consider a newsletter search form. By adding toolname, tooldescription, and toolautosubmit, the browser transforms that static form into a callable tool for an AI agent.

<form action="/newsletter/" method="get" role="search"
      toolname="search_issues"
      tooldescription="Search the newsletter's issues on web development, CSS, HTML and JavaScript. Opens the results page."
      toolautosubmit>
  <input type="search" name="q" toolparamdescription="Search keywords" aria-label="Search issues">
</form>

Each named input becomes a parameter, while the optional descriptions guide the agent on how to use them effectively. The browser handles the conversion automatically, turning semantic HTML into an executable interface for AI models.

Key Attributes Explained

Understanding the specific roles of each attribute is crucial for proper implementation. Each one serves a distinct purpose in bridging the gap between human-readable HTML and machine-executable logic.

1. toolname: This is the identifier the agent uses to call the tool. Best practices suggest using a verb in snake_case (e.g., search_issues) and ensuring it is unique on the page to avoid conflicts.
2. tooldescription: This string explains what the tool does and what happens after execution. Since the language model reads every word, descriptions should be concise but comprehensive enough to include necessary limits or constraints.
3. toolparamdescription: Added to individual input fields, this clarifies the expected value and meaning of each parameter.
4. toolautosubmit: This boolean attribute allows the agent to trigger the form submission without human intervention. It is ideal for searches and filters but should be omitted for sensitive actions like purchases or deletions, where human confirmation remains essential.

Non-Form Tools and JavaScript Registration

Not every interactive element on a website is a traditional form. Calculators, configurators, and dynamic generators require a different approach. For these features, developers can register tools directly via JavaScript using the document.modelContext API.

This method offers fine-grained control over input schemas and execution logic. A border radius generator, for instance, might register a tool that accepts numeric inputs for corner values and returns the corresponding CSS code.

if (document.modelContext) {
  const controller = new AbortController();

  document.modelContext.registerTool({
    name: 'generate_border_radius',
    description: 'Set each corner of the preview and return the CSS. Max is 150px.',
    inputSchema: {
      type: 'object',
      properties: {
        topLeft: { type: 'number', minimum: 0, maximum: 150 },
        topRight: { type: 'number', minimum: 0, maximum: 150 },
      },
      required: ['topLeft'],
    },
    execute: ({ topLeft, topRight = topLeft }) => {
      setCorners(topLeft, topRight);
      return `border-radius: ${topLeft}px ${topRight}px;`;
    },
  }, { signal: controller.signal });
}

Note: The execute function should call existing code paths used by human users. This ensures that when an agent uses the tool, the visual preview updates exactly as it would for a manual interaction, maintaining consistency between human and AI-driven experiences.

Managing the lifecycle of these tools is equally important. Developers should call controller.abort() when a component unmounts or leaves the viewport to prevent memory leaks and stale tool registrations.

Current Status and Testing

WebMCP is currently an experimental feature available in Chrome behind an origin trial. To test the functionality in a real browser environment, developers must register their domain and add an origin trial token to the site’s <head>. For local development, the feature can be enabled via chrome://flags/#enable-webmcp-testing.

Testing can be performed directly in the browser console. Developers can retrieve registered tools and execute them programmatically to verify that inputs are parsed correctly and outputs are returned as expected.

const tools = await document.modelContext.getTools();
const tool = tools.find((t) => t.name === 'generate_border_radius');

await document.modelContext.executeTool(tool, { topLeft: 40, topRight: 0 });

It is worth noting that input parsing behavior may vary between Chrome versions. Some versions require input arguments to be passed as JSON strings rather than raw objects, so robust implementations should account for these nuances during early testing phases.

Practical Applications and Impact

The immediate utility of WebMCP is most visible in common web patterns like site search and filtering. By allowing an agent to invoke a search tool directly, users can bypass multiple clicks and interface navigation. A request like "show me red shoes under $100" becomes a single function call rather than a series of manual adjustments.

More complex tools, such as pricing calculators or shipping estimators, also benefit significantly. These features often involve multiple parameters that are tedious for users to adjust individually but straightforward for an agent to configure via structured inputs.

Why this matters: It costs almost nothing to implement. Three attributes on a form are invisible to visitors who do not need them, yet they provide a powerful contract for AI agents. This prevents agents from breaking when a site redesign changes the visual layout, as the tool definition remains stable regardless of UI changes.

As the technology matures, it represents a shift from passive content consumption to active service interaction. Websites will no longer just display information; they will offer executable capabilities to AI assistants, fundamentally changing how humans delegate tasks to software.