Artificial intelligence is beginning to interact with the web in a completely new way. Instead of manually browsing pages, AI agents can now perform actions directly on websites.
However, most websites today are built only for humans. AI agents often rely on fragile techniques such as:
• DOM parsing
• automated clicking
• scraping HTML
• interpreting screenshots
These approaches break whenever the UI changes.
To solve this problem, a new browser capability called WebMCP (Web Model Context Protocol) allows websites to expose their functionality as structured tools that AI agents can execute directly.
In this tutorial you will learn:
• What WebMCP is
• How WebMCP works
• How to implement the Declarative API
• How to implement the Imperative API
• How to build a real WebMCP example
By the end of this guide, you will have created your first AI-agent-ready website feature.
What is WebMCP?
WebMCP is a protocol that allows websites to expose structured actions that AI agents can call directly.
Instead of navigating UI elements step by step, the agent simply calls a tool provided by the website.
For example, consider an ecommerce website.
Without WebMCP an AI agent might need to:
- Load the homepage
- Find the search field
- Enter a product name
- Click the search button
- Parse the results page
With WebMCP the agent can directly call:
searchProducts("running shoes")
The website then returns structured results.
This makes AI interactions:
• faster
• more reliable
• independent of UI layout
By the numbers (from W3C spec data):
• 89% token reduction vs. screenshot-based methods
• Zero UI selector maintenance after implementation
• Works within the existing browser session — no extra auth overhead
How WebMCP Works
The WebMCP architecture has three main layers.
1. Website Tools
The website defines actions it wants to expose to AI agents.
Examples:
searchProducts()
addToCart()
createSupportTicket()
bookFlight()
Each tool contains:
• name
• description
• input schema
• output format
2. Browser Integration
Browsers detect WebMCP tools on a webpage and expose them to AI agents.
This allows agents to discover what actions a site supports.
3. AI Execution
When an AI agent wants to perform an action, it calls the tool with parameters.
Example:
Agent → searchProducts("running shoes")
Website → returns structured JSON results
Two Ways to Implement WebMCP
WebMCP supports two implementation methods.
- Declarative API (HTML)
- Imperative API (JavaScript)
Both approaches expose tools to AI agents.
Method 1: Declarative API (HTML Forms)
The declarative API is the easiest way to implement WebMCP.
Existing HTML forms can be turned into AI tools using attributes such as:
toolname
tooldescription
toolautosubmit
Example: Flight Search Tool
<form toolname="searchFlights"
tooldescription="Search flights between two airports"
toolautosubmit="true"
action="/api/flights/search"
method="GET">
<label>Origin</label>
<input name="origin" type="text" required pattern="[A-Z]{3}">
<label>Destination</label>
<input name="destination" type="text" required pattern="[A-Z]{3}">
<label>Date</label>
<input name="date" type="date" required>
<label>Passengers</label>
<input name="passengers" type="number" min="1" max="9" value="1">
<button type="submit">Search Flights</button>
</form>
When the browser detects this form, it automatically converts the fields into a tool schema.
The AI agent sees something like:
searchFlights(origin, destination, date, passengers)
The agent can fill the fields and submit the form automatically.
Method 2: Imperative API (JavaScript Tools)
The imperative API provides more flexibility and is used for complex actions.
Instead of forms, developers register tools directly using JavaScript.
This is done using the browser's model context interface.
Example: Add Product to Cart
if ("modelContext" in navigator) {
navigator.modelContext.registerTool({
name: "addToCart",
description: "Add a product to the shopping cart",
inputSchema: {
type: "object",
properties: {
sku: {
type: "string",
description: "Product SKU"
},
quantity: {
type: "integer",
minimum: 1,
maximum: 10
}
},
required: ["sku", "quantity"]
},
execute: async (params) => {
const product = await fetch(`/api/products/${params.sku}`)
.then(res => res.json());
if (!product) {
return {
type: "text",
text: JSON.stringify({
success: false,
error: "Product not found"
})
};
}
const result = await fetch("/api/cart/add", {
method: "POST",
body: JSON.stringify({
id: product.id,
quantity: params.quantity
})
});
const cart = await result.json();
return {
type: "text",
text: JSON.stringify({
success: true,
product: product.name,
quantity: params.quantity,
cartTotal: cart.total
})
};
}
});
}
This registers a tool called addToCart that AI agents can execute directly.
Testing Your WebMCP Implementation
To test WebMCP features:
- Use a Chromium browser supporting WebMCP (Chrome version 146.0.7672.0 or higher )
- Load your webpage
- Verify tools are registered
- Test with an AI agent capable of calling WebMCP tools
Since WebMCP is still in early preview, testing tools are evolving quickly.
Real-World Use Cases
WebMCP can be implemented across many industries.
Ecommerce
searchProducts()
addToCart()
checkout()
trackOrder()
Travel Platforms
searchFlights()
bookFlight()
cancelBooking()
SaaS Platforms
createInvoice()
generateReport()
listClients()
Customer Support
createTicket()
checkTicketStatus()
Instead of reading pages, AI agents can perform real actions.
Why Developers Should Start Learning WebMCP
WebMCP represents a shift in how websites interact with machines.
Traditional websites were designed for human navigation.
The next generation of websites will support both:
• human interfaces
• AI agent interfaces
Developers who adopt WebMCP early will be able to build platforms that integrate directly with AI assistants and autonomous agents.
Final Thoughts
WebMCP introduces a powerful new paradigm for web development.
Instead of building websites that AI agents must interpret visually, developers can expose clear structured tools that agents can execute.
Although the ecosystem is still evolving, understanding WebMCP today could place developers ahead of the next wave of AI-driven web interaction.
The future web may not just be browsed.
It may be executed by AI agents.
Talk to me If you need assistance in implementing WebMCP.
Top comments (0)