document.modelContext, and tools are added with registerTool(). SEOSiri registers its 223 MCP tools from 25 servers this way on developers.seosiri.com.
1. What is WebMCP?
WebMCP (Web Model Context Protocol) lets a web page describe its features as tools that in-browser AI agents can discover and call directly. Each tool has a unique name, a plain-language description, and an inputSchema written in JSON Schema. The agent reads the contract and calls a function, so it no longer needs screenshots or DOM scraping to use the site.
Without it, browser agents click by guesswork, which is slow and breaks when a button moves. With it, the page itself says what it can do. Because Claude, GPT and Gemini all already understand JSON Schema function definitions, no special model training is needed.
Status as of October 2026: WebMCP is a Draft Community Group Report from the W3C Web Machine Learning Community Group. It is not a W3C Standard and is not on the Standards Track. Chrome offers it as an origin trial from version 149. Read the draft specification and the Chrome for Developers WebMCP docs before shipping anything.
2. How is WebMCP different from MCP?
MCP servers run outside the browser and serve desktop AI clients, while WebMCP tools run inside the open page and serve browser agents. The Model Context Protocol connects clients such as Claude Desktop or Cursor to servers over stdio or HTTP. WebMCP applies the same idea inside a tab, with tools running as client-side JavaScript.
| Feature | Backend MCP | Browser WebMCP |
|---|---|---|
| Runs in | Server or local process | The user's open browser tab |
| Transport | stdio, SSE, streamable HTTP, JSON-RPC | JavaScript API on the page |
| Typical client | Claude Desktop, Cursor, IDE agents | Browser-integrated agents and extensions |
| Auth context | API keys, OAuth | The signed-in browser session |
| Best for | Pipelines, automation, DevOps | Interactive web apps and portals |
The two work well together. SEOSiri keeps the real logic in backend MCP servers (see the central SEOSiri MCP server directory) and uses WebMCP as a thin layer so a browser agent can reach them from the portal.
3. Imperative vs declarative WebMCP
Chrome documents two ways to expose tools: an imperative JavaScript API and a declarative, HTML-based approach.
- Imperative: call
document.modelContext.registerTool()from script. Best for dynamic apps and for anything that calls an API, which is how the SEOSiri portal works. - Declarative: annotate existing HTML forms so the browser can expose them as tools without custom script. Best for simple forms and content sites. The exact attributes are still changing, so follow the Chrome docs.
Other concepts you will meet: tool discovery (an agent lists available tools with getTools()), tool change events (a toolchange event signals updates), and cross-origin gating (tools can be limited to named origins with exposedTo). Check the docs for the current signatures.
4. How does the SEOSiri portal expose 223 tools?
It reads one master registry (MCP_MODULES) at startup and registers every tool automatically, then forwards each call to a Cloudflare edge gateway over JSON-RPC 2.0. The SEOSiri MCP Suite portal covers AI search governance, AEO/GEO analytics, schema validation, Core Web Vitals, DNS security, biopharma compliance and industrial AI tooling.
Step 01: Chrome 149+ Runtime — Browser AI Agent environment initialization.
Step 02: Developer Portal (developers.seosiri.com) — document.modelContext registers all 223 autonomous tools.
Step 03: Cloudflare Edge Gateways — 14 official gateways route JSON-RPC 2.0 requests directly to 25 published MCP servers.
- One registry, many surfaces: the same metadata powers the tool search, the topology explorer, the docs and the WebMCP list.
- Predictable names: every tool starts with
seosiri_agent_, then the server id and tool name, so nothing collides with other extensions. - Edge execution: each call becomes a
tools/callrequest to the matching gateway under*.seosiri.com.
Examples of the servers behind it include the database and infrastructure MCP server and the bio-robotics core engine.
5. What does production registration code look like?
It feature-detects the API, skips duplicate names, uses a timeout, checks HTTP status, and marks tools as read-only where that is true. A bare loop works for a demo, but this version is safer to ship:
import { MCP_MODULES } from '../data/mcpData';
const NS = 'seosiri_agent_';
export async function registerSeosiriWebMcp() {
if (typeof document === 'undefined') return;
// Current Chrome: document.modelContext. Early previews: navigator.modelContext.
const ctx = document.modelContext || (typeof navigator !== 'undefined' && navigator.modelContext);
if (!ctx || typeof ctx.registerTool !== 'function') return; // unsupported browser: do nothing
const controller = new AbortController();
const seen = new Set();
const callGateway = async (gateway, toolName, args) => {
const res = await fetch('https://' + gateway + '/rpc', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
signal: AbortSignal.timeout(15000),
body: JSON.stringify({
jsonrpc: '2.0',
id: crypto.randomUUID(),
method: 'tools/call',
params: { name: toolName, arguments: args }
})
});
if (!res.ok) throw new Error('Gateway ' + gateway + ' returned ' + res.status);
return res.json();
};
const register = async (tool) => {
if (seen.has(tool.name)) return; // names must be unique per page
seen.add(tool.name);
try {
await ctx.registerTool(tool, { signal: controller.signal });
} catch (err) {
console.warn('WebMCP skipped', tool.name, err);
}
};
// 1. Discovery tool so an agent can find the right tool first
await register({
name: NS + 'directory_search',
description: 'Search the SEOSiri MCP directory by keyword and return matching servers and tools.',
inputSchema: {
type: 'object',
properties: { searchTerm: { type: 'string', description: 'Keyword, e.g. "schema" or "dns"' } },
required: ['searchTerm']
},
annotations: { readOnlyHint: true },
execute: async ({ searchTerm }) => {
const term = String(searchTerm || '').toLowerCase();
const results = MCP_MODULES.filter(m =>
m.title.toLowerCase().includes(term) ||
m.tools.some(t => t.name.toLowerCase().includes(term)));
return { total: MCP_MODULES.length, matched: results.length, results };
}
});
// 2. One WebMCP tool per MCP tool
for (const mod of MCP_MODULES) {
for (const t of mod.tools) {
await register({
name: NS + mod.id.replace(/-/g, '_') + '_' + t.name,
description: t.description + ' [Gateway: ' + mod.edgeGateway + ']',
// Reuse the real MCP schema when available; otherwise accept a JSON string
inputSchema: t.inputSchema || {
type: 'object',
properties: { argumentsJson: { type: 'string', description: 'JSON string of tool arguments.' } }
},
// Output comes from a remote service, so flag it as untrusted content
annotations: { readOnlyHint: t.readOnly !== false, untrustedContentHint: true },
execute: async (input) => {
let args = input;
if (input && typeof input.argumentsJson === 'string') {
try { args = JSON.parse(input.argumentsJson); } catch { args = {}; }
}
return callGateway(mod.edgeGateway, t.name, args);
}
});
}
}
return () => controller.abort(); // call on unmount to unregister every tool
}Why these changes: the spec has no unregisterTool(), so an AbortController signal removes tools; the timeout stops a slow gateway from freezing an agent; readOnlyHint and untrustedContentHint tell the browser how to treat each tool; and real schemas give agents typed arguments instead of one opaque string.
6. Is WebMCP secure?
It is only as safe as the tools you expose, and the spec itself treats prompt injection and tool chaining as open concerns. Any tool a page registers can be called by an agent, so design as if every call might be manipulated. SEOSiri applies five rules:
- No secrets in the browser. Signing keys, master secrets and billing credentials live only in Cloudflare Worker environment variables.
- Stateless edge proxying. The browser sends a standard JSON-RPC 2.0 request over HTTPS; the gateway validates it and holds all credentials.
- Namespace isolation. The
seosiri_agent_prefix prevents collisions with other tools on the page. - Read-only by default, human-in-the-loop for the rest. Require explicit user confirmation for anything that writes data or spends money.
- Treat results as untrusted. Text returned by tools can try to steer an agent, so never pass it into privileged actions unchecked.
For payload validation behind the gateways, SEOSiri also publishes the open-source API Guard MCP server, which scans LLM-generated payloads for injection patterns and credential leaks. Compliance coverage and edge routing details are listed on developers.seosiri.com.
7. How do I test WebMCP in Chrome?
Use Chrome 149 or newer, enable the WebMCP testing flag, then inspect tools in DevTools under Application > WebMCP.
- Open
chrome://flags/#enable-webmcp-testing, set it to Enabled, and relaunch. - Visit developers.seosiri.com and press F12.
- Open Application > WebMCP. The Available Tools pane lists every registered tool with its name and description.
- Run a WebMCP-enabled agent. Calls and results appear live in Tool Activity.
If the list is empty, confirm the page uses HTTPS, the flag is on, and the console shows no registration errors. Flag names and DevTools panels can change between releases. You can also join Chrome's early preview program through the Chrome docs.
8. Which browsers support WebMCP?
Only Chromium-based Chrome documents support today, as an origin trial and behind flags. Public standards-position trackers list Mozilla as neutral and Apple's WebKit as opposed, citing privacy and security concerns, so cross-browser support is not guaranteed. Build WebMCP as an enhancement: your site must work normally for people and for crawlers without it.
9. How do I design good agent tools?
- Write descriptions for the agent. State what the tool does, when to use it, and what it returns, in one or two sentences.
- Keep schemas strict. Use
required, enums and a description on every property. - One action per tool. Small tools are easier for an agent to choose than one tool with many modes.
- Return compact results. Large JSON payloads waste context; return only the fields the agent needs.
- Fail clearly. Return an error message the agent can act on, not a stack trace.
- Keep normal SEO intact. WebMCP adds an agent path; it does not replace your HTML, schema markup or Core Web Vitals work.
10. FAQ
What is WebMCP in simple terms?
A browser API that lets a website tell AI agents which functions it offers, using names, descriptions and JSON schemas, so agents call them directly instead of clicking around.
Is it document.modelContext or navigator.modelContext?
Early previews used navigator.modelContext. Current Chrome builds use document.modelContext. Detect both, as shown in the code above.
Is WebMCP a finished W3C standard?
No. It is a Draft Community Group Report in a Chrome origin trial, so treat it as experimental.
How is WebMCP different from a normal MCP server?
A normal MCP server runs outside the browser for desktop AI clients. WebMCP runs inside the page for browser agents. Many sites use both.
Can Claude Desktop or Cursor see WebMCP tools?
Not directly. They connect to MCP servers, not to open tabs. You need a bridge or extension, or you expose the same tools through a standard MCP server, which SEOSiri also does.
How many tools does SEOSiri expose?
223 autonomous tools across 25 published MCP servers and 14 official edge gateways, all listed at developers.seosiri.com.
Related SEOSiri MCP guides
Browse all 223 tools, test live edge gateways and read the open-source code at developers.seosiri.com.
