Connecting browser-based AI agents to web applications through standardized client-side tool protocols.
In standard web browsing, an AI assistant is blind to private on-page state and cannot interact with application-specific backends. WebMCP (Model Context Protocol for Web) provides a standardized browser interface (document.modelContext) that lets websites expose interactive tools directly to AI agents.
The human detective observes the physical evidence on screen: the photograph showing “Pier 44, Nov 12” and the municipal zoning record marking Warehouse 7 as condemned.
The AI agent accesses the registered tools on the page via WebMCP (e.g. search_archive_records, lookup_manifest, decode_document, query_timeline, and accuse_suspect) to query the secure backend archive.
Web applications register client-side tools using the document.modelContext API (falling back to navigator.modelContext). The browser allows an AI agent to discover the tool schema and invoke the handler:
// 1. Resolve modelContext from document (or deprecated navigator fallback)
const modelContext = document.modelContext ?? navigator.modelContext;
if (modelContext?.registerTool) {
// 2. Register tool with name, description, inputSchema, and handler
await modelContext.registerTool({
name: "search_archive_records",
description: "Search historical archive logs by location and date.",
inputSchema: {
type: "object",
properties: {
location: {
type: "string",
description: "Location mentioned in records or evidence",
},
date: {
type: "string",
description: "Date mentioned in records (e.g. Nov 12, 1923)",
},
},
required: ["location", "date"],
},
execute: async (args) => {
// Forward tool invocation to backend server function / database
const response = await executeToolFn({
data: { sessionId, toolName: "search_archive_records", args }
});
return response.result;
},
});
}Search harbor logs for the photograph’s location and date (Pier 44, Nov 12) to discover the SS Horizon and manifest M-402.
Retrieve cargo manifest M-402 containing an encrypted memo (“PHHW DW WKH ROG ZDUHKRXVH”).
Decrypt the Caesar cipher (shift 3) to reveal “MEET AT THE OLD WAREHOUSE”.
Query the condemned Warehouse 7 to discover the suspect dossier for Silas Thorne.
Submit the accusation with evidence to the server to close Case #192-A.
Instruct your AI agent to collaborate with this page by providing the following prompt:
You are an investigative agent connected to "The Archive — Case #192-A".
The webpage exposes WebMCP tools on document.modelContext (fallback: navigator.modelContext).
Available tools:
- search_archive_records({ location, date })
- lookup_manifest({ manifest_id })
- decode_document({ text, shift })
- query_timeline({ entity })
- accuse_suspect({ suspect_name, reason })
Inspect the clues visible on the page (photo of Pier 44, Nov 12, 1923; zoning logs with condemned Warehouse 7) and use the tools in sequence to solve the crime and identify the culprit.