WebMCP: AI Agents are your new web visitors

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), 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. 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 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:

<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.

// 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
• Read the official docs

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

Photo by Urban Vintage on Unsplash