Mar 1, 2026
WebMCP vs MCP: What’s the Difference and Why It Matters
Christophe Barre
co-founder of Tandem
WebMCP and MCP share a name but almost nothing else. One runs in the browser, the other on the backend. Here’s when you need each — and when you need both.
Updated February 26, 2026
TL;DR: MCP (Anthropic’s Model Context Protocol) connects AI platforms to backend services via JSON-RPC. WebMCP (the W3C browser standard from Google and Microsoft) lets websites expose client-side tools directly to browser agents. They share a name and a conceptual model but zero actual spec. Most SaaS products will eventually need both: MCP for API integrations, WebMCP for browser-based agent interactions. The confusion is understandable — the naming was not a gift to the developer community.
The naming problem
If you’ve spent any time in the AI tooling space over the past year, you’ve heard “MCP” everywhere. Anthropic launched the Model Context Protocol in November 2024 as an open standard for connecting AI systems to external tools and data. The community built thousands of MCP servers within months. It became the de facto way to give AI agents access to databases, APIs, and third-party services.
Then in February 2026, Google and Microsoft shipped WebMCP — and the confusion started immediately. Same three letters. Similar conceptual model (tools with schemas that agents can call). Completely different architecture, completely different spec, completely different runtime environment.
As the Arcade.dev interview with Alex Nahas revealed, Nahas actually pushed early on to port the full MCP protocol to the browser. The W3C working group decided against it — they didn’t want to couple too tightly to Anthropic’s spec. The result is a standard that shares MCP’s mental model but diverges in every technical detail.
Let’s untangle this properly.
MCP: Anthropic’s backend protocol
Anthropic’s Model Context Protocol is a backend communication standard. It uses JSON-RPC to connect AI platforms (Claude, ChatGPT, local models) to external “servers” — each of which exposes tools, resources, and prompts.
Here’s what MCP does well: it gives any AI a standardized way to talk to Notion, GitHub, Slack, a database, a CRM, or any other service. You build an MCP server, connect it to your AI client, and the AI can call tools like create_issue, query_database, or send_message. The AI platform doesn’t need to know anything about the underlying API — MCP abstracts it away.
MCP runs server-side. It requires hosting. It uses a client-server architecture where the AI platform is the client and the tool provider is the server. Authentication is handled through the protocol (OAuth 2.1 in the latest spec). The whole thing operates independently of any browser.
Within developer workflows, MCP has become central to tools like Claude Code, where engineers connect MCP servers to their coding agent for access to databases, JIRA, GitHub, and other systems. It’s also how products like Notion, Google Calendar, and Gmail expose their functionality to AI assistants.
WebMCP: the browser-native standard
WebMCP is architecturally different in almost every way.
It runs entirely client-side, in the browser tab. There’s no server to host. Tools execute in the page’s JavaScript context, share the user’s existing browser session, and the browser enforces permissions. As Bug0’s technical analysis explained, “The web page is the ‘server’ that starts when an agent lands on it.”
Instead of JSON-RPC, WebMCP uses the browser’s postMessage communication. Instead of connecting to an external service, it exposes the website’s own functionality. Instead of requiring API keys and OAuth flows, it piggybacks on whatever authentication the user already has in their browser session.
The tools are registered through two APIs — a Declarative API (HTML attributes on forms) and an Imperative API (JavaScript registration via navigator.modelContext.registerTool()). Both make the website’s capabilities discoverable and callable by any AI agent operating in the browser.
VentureBeat quoted Chrome staff engineer Khushal Sagar comparing WebMCP to “the USB-C of AI agent interactions with the web” — a single, standardized interface that any agent can plug into.
Side-by-side comparison
Dimension | MCP (Anthropic) | WebMCP (W3C / Google + Microsoft) |
|---|---|---|
Runs where | Server-side (backend) | Client-side (browser tab) |
Communication | JSON-RPC | Browser postMessage |
Authentication | OAuth 2.1, API keys | User’s existing browser session |
Hosting required | Yes — MCP server | No — runs in page JavaScript |
Who builds the tools | Service providers (Notion, GitHub, etc.) | Website developers |
Who consumes the tools | AI platforms (Claude, ChatGPT, etc.) | Browser-based agents (Comet, Atlas, Dia, extensions) |
Session context | None by default (stateless) | Full browser session (cookies, local storage, auth) |
Spec body | Anthropic (open standard) | W3C Community Group |
Key co-authors | Anthropic | Google (Chrome) + Microsoft (Edge) |
Shipped | November 2024 | February 2026 (Chrome 146 Canary preview) |
Maturity | Production-ready, thousands of servers | Early preview, behind feature flag |
Best for | Backend integrations, API access, data pipelines | Browser-based interactions, form filling, UI automation |
When you need MCP
MCP is the right choice when your AI needs to interact with a backend service that doesn’t have a browser interface — or when the interaction happens entirely server-to-server without a human in the loop.
Common scenarios: connecting Claude Code to your database for schema queries. Giving a ChatGPT Custom GPT access to your company’s Notion workspace. Building an internal AI assistant that can read and write to your CRM. Automating a pipeline where an AI agent processes incoming support tickets from your helpdesk API.
In all these cases, there’s no browser involved. The AI talks directly to the service through a hosted MCP server. Authentication is handled programmatically. The tools are always available, regardless of what page anyone has open.
If you’re an engineer working with Claude Code, MCP servers are how you extend the agent’s capabilities — connecting it to JIRA, GitHub, Slack, databases, and more. The ecosystem is mature and growing fast.
When you need WebMCP
WebMCP is the right choice when an AI agent needs to interact with your website or web application in the context of a logged-in user’s browser session.
Common scenarios: a user asks Perplexity’s Comet to “book the cheapest flight to New York next Monday” — the agent navigates to a travel site that has WebMCP tools and calls searchFlights() directly instead of trying to parse the page visually. An agentic browser helps a user fill out a complex configuration form in a SaaS product. A Chrome extension with AI capabilities helps a user compare products across multiple e-commerce sites.
The critical difference: the agent is operating as the user, within their authenticated session, in their browser. No separate API credentials needed. No backend server to maintain. The website’s frontend JavaScript becomes the agent interface.
This matters especially for SaaS products where much of the value happens in the browser: complex forms, multi-step workflows, configuration wizards, onboarding flows. These are precisely the interactions where screen scraping fails and WebMCP shines.
When you need both
For most SaaS companies, the answer will eventually be: both.
As VentureBeat’s analysis noted, “A travel company might maintain a backend MCP server for direct API integrations with AI platforms like ChatGPT or Claude, while simultaneously implementing WebMCP tools on its consumer-facing website so that browser-based agents can interact with its booking flow in the context of a user’s active session.”
The two serve different interaction patterns without conflict. MCP handles programmatic, server-side integrations. WebMCP handles browser-based, session-aware interactions. Together, they cover the full spectrum of how AI agents will interact with your product.
Consider a B2B SaaS product like a project management tool. MCP servers let AI assistants read and create tasks programmatically (the equivalent of an API integration). WebMCP tools let browser agents help users navigate complex settings pages, fill configuration forms, or complete onboarding workflows within the actual product UI.
The contextual loading breakthrough
Beyond the MCP vs. WebMCP distinction, there’s a design pattern in WebMCP that deserves attention on its own: contextual tool loading.
In traditional MCP, you connect servers and all their tools are available in the context window at once. For a small server with 5 tools, that’s fine. For an enterprise with thousands of internal tools (as Alex Nahas experienced at Amazon), it becomes a context window management problem.
WebMCP takes a different approach. Tools are registered and unregistered per page. As AI Jason demonstrated, navigating from a search page to a results page automatically swaps the available tools. The agent only sees what’s relevant to the current context.
This pattern — loading tools contextually based on what the agent is currently doing — is something the broader MCP ecosystem has been reaching toward with concepts like “skills” that load descriptions upfront and full instructions on demand. WebMCP achieves it natively because the browser page itself is the context. Navigate to a new page, get new tools. It’s elegant and token-efficient.
Where Tandem fits in
At Tandem, we build AI agents that live inside SaaS products — understanding natural language, navigating the interface, and executing actions for users. Our agent already operates with structured knowledge of your product’s workflows, which is conceptually similar to what WebMCP enables for external browser agents.
We’re now bridging these two worlds: helping SaaS teams expose their product’s capabilities to external browser agents via WebMCP, while simultaneously powering the internal AI experience for their own users. If you’re thinking about agent-readiness from both angles, we’d like to talk.
FAQ
Is WebMCP going to replace MCP?
No. They solve different problems. MCP handles backend, server-side AI integrations. WebMCP handles browser-based, client-side agent interactions. Think of MCP as the API layer and WebMCP as the browser layer. Most products will eventually use both.
Can I use my existing MCP server tools through WebMCP?
Not directly — the protocols are incompatible at the spec level. However, the mcp-b/react-webmcp library and other community tools are emerging to bridge the two. You could also write WebMCP tools that internally call your MCP server endpoints.
If I’ve already built an MCP server for my product, do I still need WebMCP?
It depends on your use case. If your AI integrations are all server-side (e.g., Claude or ChatGPT connecting to your API), MCP is sufficient. If you want browser-based agents like Comet or Atlas to interact with your web interface, you’ll need WebMCP. As agentic browsers become mainstream, WebMCP will matter more.
Which one should I implement first?
If you’re a developer building AI integrations today, MCP is production-ready and has a mature ecosystem. Start there. WebMCP is worth prototyping now but shouldn’t be in production workflows yet. If you’re planning your 2026-2027 product roadmap, budget for both.
Does Claude Code use MCP or WebMCP?
Claude Code uses MCP for connecting to external tools and services. It also supports skills (SKILL.md files) and hooks for extending its capabilities. WebMCP is a separate browser standard that Claude Code doesn’t directly interact with — though Claude Code skills can help you generate WebMCP implementations for your web applications.
Glossary
MCP (Model Context Protocol): Anthropic’s open standard for connecting AI platforms to external tools and data sources. Uses JSON-RPC, runs server-side, requires hosted MCP servers. Production-ready since late 2024.
WebMCP (Web Model Context Protocol): A W3C web standard that lets websites expose client-side tools for browser-based AI agents. Runs entirely in the browser tab. Co-authored by Google and Microsoft. Early preview since February 2026.
JSON-RPC: A remote procedure call protocol using JSON. The communication standard underlying Anthropic’s MCP. Not used by WebMCP.
navigator.modelContext: The JavaScript API surface that WebMCP introduces to the browser. Through this interface, websites register tools, manage context, and handle agent interactions.
Contextual Tool Loading: A design pattern where available tools change based on the agent’s current context (e.g., which page is loaded). Native to WebMCP’s per-page registration model.
Claude Code Skill: A SKILL.md file that extends Claude Code’s capabilities with domain-specific instructions. Skills can include patterns for generating WebMCP implementations, MCP server configurations, and other developer workflows.
MCP Server: A backend service that exposes tools, resources, and prompts to AI platforms via the MCP protocol. Examples include servers for Notion, GitHub, Slack, and custom databases.
Subscribe to get daily insights and company news straight to your inbox.
Keep reading
Mar 1, 2026
6
min
Make Your SaaS Agent-Ready: WebMCP, In-App AI, and What to Build Now
The web is shifting from documents to functions. SaaS products that aren’t agent-ready will lose users to competitors whose apps work with AI. Here’s the two-front strategy - WebMCP for external agents, in-app AI for your own users - and how to implement it.
Christophe Barre
Mar 1, 2026
8
min
How to Add WebMCP to Your React App: A Step-by-Step Guide
A hands-on guide to implementing WebMCP in React and Next.js apps. Both APIs explained with code, from HTML form attributes to navigator.modelContext.registerTool(). Plus: how Tandem’s Claude Code skill can automate the setup.
Christophe Barre
Mar 1, 2026
5
min
Agentic Browsers Are Here: What Atlas, Comet, and Dia Mean for Your Product
Perplexity’s Comet, OpenAI’s Atlas, and Dia are sending AI agents to browse the web. If you build a SaaS product, your app is about to get visitors who aren’t human. Here’s what that means — and why WebMCP changes the game.
Christophe Barre
Mar 1, 2026
7
min
What Is WebMCP? The Plain-English Guide for Product Teams
WebMCP lets websites tell AI agents exactly what they can do — no more screen scraping or guessing. Here’s what it is, why Google and Microsoft built it, and why your product team should pay attention now.
Christophe Barre