---
title: "WebMCP: AI Agents are your new web visitors"
date: "2026-02-14"
slug: "webmcp-agents-in-the-browser"
author: "Dany Paredes"
canonical: "https://danywalls.com/webmcp-agents-in-the-browser"
description: "WebMCP is a new standard from Microsoft and Google. It turns your website into a tool for AI agents. Learn how to use it today."
---


This weekend, I decided to play with something that seems to have a lot of potential. As you probably know, I've been experimenting a lot with MCP lately (I even created [mcpclick.app](https://www.mcpclick.app/)), and this discovery feels like a game-changer.

The web is changing. Until now, we built websites only for humans. But today, a new user is visiting our pages: **AI Agents**.

Have you ever tried to make an AI enroll in university courses or search for a specific class schedule on a student portal? It is slow and often fails. **Why?** Because the agent has to "read" the website like a human. It looks at the HTML and guesses which fields to fill. If you change your CSS even a little bit, the agent gets lost.

**What problem does this solve for us as developers?** It gives us a simple, fast way to tell the AI: *"Don't guess. Use these tools instead."*

This is **WebMCP (Web Model Context Protocol)**.



## What is WebMCP?

WebMCP is a new standard [proposed by Microsoft and Google](https://github.com/webmachinelearning/webmcp/blob/main/docs/proposal.md). Its goal is to make your website **ready for agents**.

**Think of this as a Sitemap for actions.** A `sitemap.xml` helps Google find your pages. WebMCP involves telling AI models (like Gemini, GPT, or Claude) what they can *do* on your site.

### Two ways to use it:

1.  **The HTML Way (Declarative):** Great for forms. You add two simple attributes, and the browser handles the rest.
2.  **The JavaScript Way (Imperative):** For complex tasks, like calculations or real-time searching.



## Setting Up Your Lab

This is new technology and has not yet arrived in standard browsers. To interact with it, you will need a special version of Chrome that includes the latest experimental features.

**Don't worry, you can install it alongside your normal Chrome.**

1.  Download **[Chrome Canary](https://www.google.com/chrome/canary/)** or **Chrome Dev**.
    *   *Note:* You need version **146** or higher.
2.  Open Chrome Canary and go to `chrome://flags`.
3.  Search for `#web-mcp` (Web Model Context Protocol) and fully enable it.
4.  Restart the browser.

**Important:** This is experimental software. Features may change or break without notice. It is designed for developers, so expect some rough edges!

## The HTML Way

Imagine you have a blog. You want a user to say to their browser: *"Search Dany’s blog for React articles."*

Computers are bad at guessing. With WebMCP, we tell them exactly what to do using HTML:

```html
<form 
  action="/search" 
  toolname="search_articles" 
  tooldescription="Search for tech articles by topic in the blog.">
  
  <input type="text" name="query" placeholder="What to learn?" required />
  
  <select name="category">
    <option value="react">React</option>
    <option value="typescript">TypeScript</option>
    <option value="ai">AI</option>
  </select>

  <button type="submit">Search Now</button>
</form>
```

**What did we just do?**
We added `toolname` and `tooldescription`. Now, the browser reads this form and creates a manual for the IA. The agent knows exactly how to use your search bar. It does not need to guess.


## The JavaScript Way

Sometimes a form is not enough. Maybe you need to verify if a course has open seats without reloading the page. For this, we use JavaScript.

```javascript
// Check if the browser supports this
if ('modelContext' in navigator) {
  navigator.modelContext.registerTool({
    name: "check_course_availability",
    description: "Checks if a university course has open seats.",
    inputSchema: {
      type: "object",
      properties: {
        courseId: { type: "string", description: "The course code (e.g., CS101)" },
        semester: { type: "string", description: "Target semester (e.g., Fall 2026)" }
      },
      required: ["courseId", "semester"]
    },
    execute: async (args) => {
      // Fetch real-time data from your API
      const response = await fetch(`/api/courses/${args.courseId}/status?sem=${args.semester}`);
      const data = await response.json();
      return { 
        available: data.seats > 0, 
        remainingSeats: data.seats,
        professor: data.professorName
      };
    }
  });
}
```

**Why is this cool?**
Now, an AI (like a browser Copilot) can call `check_course_availability` directly. It doesn't need to navigate complex tables. It just asks your code for the answer.


## Is it Safe?

Yes. Security is built-in:

1.  **You know who called:** You can check if a human or an AI sent the form (the proposal adds an `agentInvoked` property to `SubmitEvent`).
2.  **Private:** The agent only sees the tools you list.
3.  **Consent:** The browser usually asks the user before the AI takes action (like buying something).

---

## Go Explore!

This is just the beginning. We are moving to a web where sites are APIs for AI.

I encourage you to **try it out**. It is fun to be an early adopter.

*   [Join the Chrome AI Early Preview Program](https://developer.chrome.com/docs/ai/join-epp)
*   [Read the official docs](https://github.com/webmachinelearning/webmcp)

Don't just read about it. **Experiment**. Try to make your own "Agent-Ready" website.



_Photo by [Urban Vintage](https://unsplash.com/@urban_vintage?utm_source=unsplashx&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=unsplashx&utm_medium=referral)_