Build Your First WebMCP Application (Step-by-Step Developer Tutorial)

Salam Experts — Sat, 14 Mar 2026 10:27:08 +0000

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.

DEV Community: Salam Experts