WebMCP: The Browser Just Became an MCP Server

Published by The Plug | getmcpapps.com

On February 10, 2026, something quiet landed in Chrome 146 that changes what "building for AI agents" actually means. It's called WebMCP — and if you ship MCP apps, you need to understand it.

---

The Problem WebMCP Solves

Right now, when an AI agent visits a website, it's essentially blind. It either takes screenshots and guesses what's on screen, or it parses thousands of tokens of raw HTML hoping to find what it needs. Both approaches are fragile, expensive, and slow.

Your beautifully designed app submission form? To an agent, it's a wall of <div> soup.

WebMCP flips this. Instead of agents reverse-engineering your UI, your website tells agents exactly what it can do — in the same structured, schema-first language that MCP servers already speak.

---

What WebMCP Actually Is

WebMCP (Web Model Context Protocol) is a W3C Community Group standard that adds a navigator.modelContext API to the browser. It was jointly developed by Google and Microsoft, born from Alex Nahas's MCP-B project at Amazon, and dropped as an early preview in Chrome 146.

The concept is simple: websites register tools. AI agents call them.

No screenshots. No DOM scraping. No 2,000-token visual payloads. Just clean, typed function calls — the same pattern MCP developers already know.

The efficiency numbers are stark: 89% fewer tokens compared to screenshot-based approaches.

---

How It Works

WebMCP gives you two ways to expose tools: declarative (HTML) and imperative (JavaScript).

Declarative API — No JavaScript Required

For simple cases, you can declare tools directly in your HTML:

<form mcp-tool="search_apps"
      mcp-description="Search the MCPHub catalog by keyword or category"
      action="/api/apps/search"
      method="GET">
  <input name="query" mcp-description="Search term or keyword" type="text" />
  <input name="category" mcp-description="Filter by category (e.g. productivity, dev-tools)" type="text" />
  <button type="submit">Search</button>
</form>

Any AI agent with Chrome 146+ sees this form as a structured tool, not a UI element to click.

Imperative API — Full Programmatic Control

For dynamic tools or complex schemas, use JavaScript:

// components/WebMCPProvider.tsx (Next.js client component)
'use client';

import { useEffect } from 'react';

export function WebMCPProvider() {
  useEffect(() => {
    if (!navigator.modelContext) return; // graceful degradation

    // Register: search the app catalog
    navigator.modelContext.registerTool({
      name: 'search_apps',
      description: 'Search the MCPHub catalog for MCP apps by keyword, category, or tag',
      inputSchema: {
        type: 'object',
        properties: {
          query: { type: 'string', description: 'Search term' },
          category: { type: 'string', description: 'Category filter' },
          tag: { type: 'string', description: 'Tag filter' },
        },
        required: ['query'],
      },
      async execute({ query, category, tag }) {
        const params = new URLSearchParams({ query, ...(category && { category }), ...(tag && { tag }) });
        const res = await fetch(`/api/apps/search?${params}`);
        const data = await res.json();
        return { content: [{ type: 'text', text: JSON.stringify(data) }] };
      },
    });

    // Register: get full app details
    navigator.modelContext.registerTool({
      name: 'get_app_details',
      description: 'Get full details for a specific MCP app by its slug',
      inputSchema: {
        type: 'object',
        properties: {
          slug: { type: 'string', description: 'App slug (e.g. "github-mcp")' },
        },
        required: ['slug'],
      },
      async execute({ slug }) {
        const res = await fetch(`/api/apps/${slug}`);
        const data = await res.json();
        return { content: [{ type: 'text', text: JSON.stringify(data) }] };
      },
    });

    // Register: list categories
    navigator.modelContext.registerTool({
      name: 'list_categories',
      description: 'List all available app categories in the MCPHub catalog',
      inputSchema: { type: 'object', properties: {} },
      async execute() {
        const res = await fetch('/api/categories');
        const data = await res.json();
        return { content: [{ type: 'text', text: JSON.stringify(data) }] };
      },
    });

  }, []);

  return null;
}

Drop <WebMCPProvider /> in your root layout and your site is agent-native.

---

Why This Is a Big Deal for MCP Developers

If you build MCP servers, WebMCP is your browser counterpart. A few things worth noting:

Auth is solved. WebMCP reuses the browser session — same cookies, same SSO. No OAuth 2.1 dance, no token exchange. If the user is logged in, the agent is logged in.

It's just the "tools" primitive. No prompts, no resources — just tools. That's intentional. It keeps the surface area small and the security model clean.

Same-origin enforcement. Tools only fire on the domain that registered them. No cross-site tool injection.

It's Chrome-first, but the spec is open. Firefox and Safari haven't committed yet, but this is W3C — the pressure is on.

It doesn't replace MCP servers. It complements them. Server-side MCP gives agents access to data and services. WebMCP gives agents access to web applications using existing browser sessions and UI logic. Different layer, different job.

---

What This Means Right Now

If you're building a web app that you want AI agents to use well, this is your signal to start thinking about what tools you'd expose. Not the DOM — your business actions. Submit, search, filter, create, publish.

If you're building MCP apps that wrap web services, WebMCP gives those services a way to meet you halfway — fewer hacks, more reliability.

And if you're tracking the MCP ecosystem (you're on MCPHub, so you are), WebMCP is the next category to watch.

---

Submit Your WebMCP App to MCPHub

We're tracking WebMCP-enabled apps as the ecosystem grows. If you've built or found a site or tool that implements navigator.modelContext, submit it to our catalog — we'll get it tagged and listed.

The web is becoming agent-native. Might as well catalog it.

---

The Plug | MCPHub — the first dedicated marketplace for MCP apps. Browse the catalog at getmcpapps.com