WebMCP Early Preview: Bridging Web Applications and AI Agents

AI agents currently interact with websites by “screen-scraping” - analyzing visual elements and guessing how to click buttons or fill forms. WebMCP changes this by letting websites expose structured tools that agents can call directly, like APIs designed specifically for AI interaction.

The Problem with Screen-Scraping

When an AI agent books a flight today, it must:

• Parse complex calendar UIs designed for humans
• Guess which fields require full names versus separate first/last names
• Navigate nested menus to find diagnostic tools
• Retry when it misunderstands form structures

This approach is slow, unreliable, and breaks when websites update their designs.

How WebMCP Works

WebMCP provides two ways to expose tools to AI agents:

Imperative API: Define tools using JavaScript functions with clear schemas Declarative API: Annotate existing HTML forms to become callable tools

Instead of guessing, agents discover exactly which tools a page supports and how to use them through standardized contracts.

Real-World Applications

Airlines: Expose a book_flight tool that accepts structured passenger data directly, eliminating calendar UI confusion.

Medical portals: Annotate complex forms as submit_application tools, ensuring agents map data to correct fields instantly.

Developer dashboards: Create run_diagnostics tools that trigger fixes hidden behind nested menus.

Getting Started

You need Chrome 146+ with the “WebMCP for testing” flag enabled:

1. Navigate to chrome://flags/#enable-webmcp-testing
2. Set flag to Enabled
3. Restart Chrome
4. Install the Model Context Tool Inspector Extension

Imperative API Example

Register tools using JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

window.navigator.modelContext.registerTool({
  name: "searchFlights",
  description: "Search for available flights between cities",
  inputSchema: {
    type: "object",
    properties: {
      origin: { type: "string" },
      destination: { type: "string" },
      outboundDate: { type: "string" }
    }
  },
  execute: ({ origin, destination, outboundDate }) => {
    // Your flight search logic here
    return { content: [{ type: "text", text: `Found flights from ${origin} to ${destination}` }] };
  }
});

Declarative API Example

Transform existing forms into tools:

1
2
3
4
5
6
7
8

<form toolname="search_flights" 
      tooldescription="Search for available flights" 
      action="/search">
  <input type="text" name="origin" toolparamtitle="Departure City">
  <input type="text" name="destination" toolparamtitle="Arrival City">
  <input type="date" name="outboundDate" toolparamtitle="Departure Date">
  <button type="submit">Search</button>
</form>

The browser automatically generates schemas from your form structure and handles agent interactions.

Tool Design Best Practices

Use specific verbs: Choose create_event for immediate creation, start_event_creation if redirecting to a form.

Accept raw input: Let agents pass “11:00 to 15:00” as strings rather than requiring time calculations.

Validate in code: Schema constraints aren’t guaranteed - validate parameters in your functions and return descriptive errors for self-correction.

Return after UI updates: Ensure functions complete after your interface reflects changes, so agents can verify success.

Try the Live Demo

Visit the travel booking demo to see WebMCP in action. Use the inspector extension to view registered tools, execute them manually, or test with natural language prompts.

Current Limitations

WebMCP requires an active browser tab - no headless operation yet. Complex sites may need refactoring to handle both human and agent interactions smoothly. Tool discovery across the web remains an open challenge.

Next Steps

WebMCP is a proposed web standard currently in early preview. Test it with your applications, provide feedback through the Dev Preview Group, and help shape how AI agents will interact with the web.

The future of web interaction isn’t about teaching agents to see like humans - it’s about websites speaking directly to AI in their native language of structured data and clear contracts.