cloudflare · Muhammad-Bin-Ali · Mar 27, 2026 · Mar 27, 2026 · Mar 27, 2026 · Mar 27, 2026
diff --git a/.changeset/add-webmcp-adapter.md b/.changeset/add-webmcp-adapter.md
@@ -0,0 +1,5 @@
+---
+"agents": minor
+---
+
+Add experimental WebMCP adapter (`agents/experimental/webmcp`) that bridges MCP server tools to Chrome's native `navigator.modelContext` API, enabling browser-native AI agents to discover and call tools registered on a Cloudflare McpAgent.
diff --git a/examples/webmcp/README.md b/examples/webmcp/README.md
@@ -0,0 +1,71 @@
+# WebMCP Adapter
+
+> **WARNING: EXPERIMENTAL.** This example uses `agents/experimental/webmcp` which is under active development and **will break** between releases. Google's WebMCP API (`navigator.modelContext`) is still in early preview.
+
+Bridges tools registered on an `McpAgent` to Chrome's native `navigator.modelContext` API using the experimental WebMCP adapter.
+
+## What it demonstrates
+
+- **`registerWebMcp()`** — one-line adapter that discovers MCP tools and registers them with Chrome's WebMCP
+- **Feature detection** — graceful fallback when `navigator.modelContext` is unavailable
+- **Dynamic sync** — listens for `tools/list_changed` notifications and re-syncs automatically
+- **McpAgent tools** — same `McpAgent` server as the `mcp` example, with `add`, `greet`, and `get_counter` tools
+
+## Running
+
+```sh
+npm install
+npm start
+```
+
+Open in Chrome Canary with `#enable-webmcp-testing` and `#enable-experimental-web-platform-features` enabled at `chrome://flags` to see full WebMCP integration. On other browsers, the adapter detects the missing API and shows a status message.
+
+## How it works
+
+The server defines tools using `McpAgent` as usual:
+
+```typescript
+export class MyMCP extends McpAgent<Env, State, {}> {
+  server = new McpServer({ name: "WebMCP Demo", version: "1.0.0" });
+
+  async init() {
+    this.server.registerTool(
+      "greet",
+      {
+        description: "Greet someone by name",
+        inputSchema: { name: z.string() }
+      },
+      async ({ name }) => ({
+        content: [{ type: "text", text: `Hello, ${name}!` }]
+      })
+    );
+  }
+}
+
+export default MyMCP.serve("/mcp", { binding: "MyMCP" });
+```
+
+The client uses the adapter to bridge those tools to Chrome's WebMCP:
+
+```typescript
+import { registerWebMcp } from "agents/experimental/webmcp";
+
+const handle = await registerWebMcp({ url: "/mcp" });
+console.log("Registered tools:", handle.tools);
+
+// Clean up when done
+handle.dispose();
+```
+
+The adapter:
+
+1. Connects to the `/mcp` endpoint via MCP Streamable HTTP
+2. Calls `tools/list` to discover all registered tools
+3. Registers each tool with `navigator.modelContext.registerTool()`
+4. Relays tool execution calls from Chrome's agent back to the MCP server
+5. Listens for `tools/list_changed` to dynamically sync
+
+## Related examples
+
+- [`mcp`](../mcp/) — stateful MCP server with built-in tool tester UI
+- [`mcp-client`](../mcp-client/) — connecting to MCP servers as a client
diff --git a/examples/webmcp/env.d.ts b/examples/webmcp/env.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+// Generated by Wrangler by running `wrangler types env.d.ts --include-runtime false` (hash: placeholder)
+declare namespace Cloudflare {
+  interface GlobalProps {
+    mainModule: typeof import("./src/server");
+    durableNamespaces: "MyMCP";
+  }
+  interface Env {}
+}
+interface Env extends Cloudflare.Env {}
diff --git a/examples/webmcp/index.html b/examples/webmcp/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en" data-theme="workers">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <title>WebMCP Adapter Demo</title>
+    <script>
+      (() => {
+        const stored = localStorage.getItem("theme");
+        const mode = stored || "light";
+        document.documentElement.setAttribute("data-mode", mode);
+        document.documentElement.style.colorScheme = mode;
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/client.tsx"></script>
+  </body>
+</html>
diff --git a/examples/webmcp/package.json b/examples/webmcp/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@cloudflare/agents-webmcp-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite dev",
+    "deploy": "vite build && wrangler deploy",
+    "types": "wrangler types env.d.ts --include-runtime false"
+  },
+  "dependencies": {
+    "@cloudflare/kumo": "^1.17.0",
+    "@modelcontextprotocol/sdk": "1.29.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "agents": "*",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4",
+    "tailwindcss": "^4.2.2"
+  }
+}
diff --git a/examples/webmcp/public/favicon.ico b/examples/webmcp/public/favicon.ico