WebMCP Bridge is a little experiment I put together to explore the intersection of
Model Context Protocol (MCP)
and the browser. It lets you connect to any remote MCP server and exposes its tools to
Chrome's upcoming WebMCP API (navigator.modelContext).
Think of it as a bridge - you bring your favorite MCP servers, and this page makes their tools available to browser-based AI agents. Pretty neat for testing and learning how these pieces fit together.
I've been fascinated by how AI agents can interact with web applications. The WebMCP proposal from folks at Microsoft and Google caught my attention - it's a way for web pages to expose "tools" that AI agents can use, similar to how MCP works for desktop apps.
But here's the thing: there are already hundreds of MCP servers out there. What if we could reuse them in the browser? That's exactly what this bridge does.
navigator.modelContext.provideContext()
Each tool call gets proxied back to the original MCP server, so all the heavy lifting still happens there. The browser just acts as a bridge.
In chat mode, Prompt API planning picks and calls tools. Tool activity is shown as subtle "Using tool" entries with expandable args, and chat stays disabled while the local model is downloading or unavailable.
The key bit of code that makes this work:
navigator.modelContext.provideContext({
tools: [{
name: "search_proposals",
description: "Search TC39 proposals",
inputSchema: { type: "object", properties: {...} },
execute: async (args) => {
// Proxy to remote MCP server
const result = await fetch(mcpServerUrl, {...});
return { content: [{ type: "text", text: result }] };
}
}]
});
chrome://flags/#enable-webmcp-testingI've added detailed console logs to help you understand the MCP protocol flow. Open DevTools and watch the connection happen - it's a great way to learn how MCP and WebMCP work together.