diff --git a/docs/migrate-to-3.md b/docs/migrate-to-3.md
new file mode 100644
index 000000000..afa974554
--- /dev/null
+++ b/docs/migrate-to-3.md
@@ -0,0 +1,148 @@
+---
+title: Migrate to v3
+group: Getting Started
+description: Upgrade from ext-apps 2.x to 3.x — tools a View exposes to the Host move to WebMCP, with before/after code for Views and the changes Hosts and Sandbox proxies must make.
+---
+
+# Migrating from ext-apps 2.x to 3.x
+
+## Tools exposed by the View (WebMCP)
+
+Tools a View exposes to the Host now use
+[WebMCP](https://webmachinelearning.github.io/webmcp/)
+(`document.modelContext`) instead of SDK-specific plumbing, so the same View
+code works in any MCP Apps Host and in a WebMCP-capable browser
+([#797](https://github.com/modelcontextprotocol/ext-apps/issues/797)).
+
+**This is a breaking change.** A View on the new SDK that calls
+`app.registerTool()` exposes **no tools** on a Host that has not adopted the
+changes below. The only signal is a one-time `console.warn` in the View.
+
+Deprecated, but still working: `app.registerTool()`, `app.oncalltool`,
+`app.onlisttools` (each logs a one-time warning in the View),
+`app.sendToolListChanged()`, the `tools` app capability and
+`AppBridge.listTools()` / `callTool()`.
+
+`registerTool()` no longer declares the `tools` capability for you. Code that
+assigns a raw `app.oncalltool` / `app.onlisttools` after `registerTool()`,
+without declaring `tools` itself, now throws at the assignment: declare
+`{ tools: {} }` in the `App` constructor, or move to WebMCP.
+
+### Views
+
+```ts
+// Before
+app.registerTool(
+  "set_zoom",
+  {
+    description: "Set the zoom level",
+    inputSchema: z.object({ level: z.number().min(1) }),
+  },
+  async ({ level }) => {
+    setZoom(level);
+    return {
+      content: [{ type: "text", text: `Zoom ${level}` }],
+      structuredContent: { level },
+    };
+  },
+);
+
+// After
+// Types: `npm i -D webmcp-types`, then add it to "types" in tsconfig.json
+const SetZoom = z.object({ level: z.number().min(1) });
+const controller = new AbortController();
+await document.modelContext?.registerTool(
+  {
+    name: "set_zoom",
+    description: "Set the zoom level", // required
+    inputSchema: z.toJSONSchema(SetZoom), // plain JSON Schema
+    execute: async (input) => {
+      const { level } = SetZoom.parse(input); // input is not validated for you
+      setZoom(level);
+      return { level }; // plain data; throw to report an error
+    },
+  },
+  { signal: controller.signal },
+);
+// Unregister with controller.abort()
+```
+
+`registerTool()` returns a Promise that rejects on a duplicate or invalid name
+or a missing description. `document.modelContext` also offers `getTools()`,
+`executeTool()` and a `toolchange` event. There is no `outputSchema`.
+
+**What the Host receives.** The value `execute()` returns arrives as
+`{ content: [], structuredContent: value }`: a non-object `v` becomes
+`{ result: v }` and nothing becomes `{ result: null }`. A throw becomes
+`isError: true` with the message as text. The value is JSON, so images and
+other binary content cannot be returned: the pdf-server `get_screenshot` tool,
+which returns an image, is an example of what does not map. The deprecated
+`app.registerTool()` keeps its `CallToolResult` callbacks: it forwards
+`structuredContent` (or `{ content }`) and turns `isError: true` into a
+throw. It exposes `readOnlyHint` only, and drops `_meta` and `outputSchema`.
+
+### Hosts
+
+1. **Polyfill.** `AppBridge.sendSandboxResourceReady()` injects a small
+   `document.modelContext` polyfill into the View HTML by default. Pass
+   `modelContextPolyfill: false` in `HostOptions` to opt out. A native
+   `document.modelContext` always wins; the polyfill does not replace it.
+2. **Sandbox proxy.** The proxy is the only party same-origin with the View,
+   so it reads the View's tools. Adopt
+   `createModelContextRelay({ getViewDocument, postToHost })` from
+   `@modelcontextprotocol/ext-apps/app-bridge`:
+
+   ```ts
+   const relay = createModelContextRelay({
+     getViewDocument: () => inner.contentDocument,
+     postToHost: (message) => window.parent.postMessage(message, hostOrigin),
+   });
+
+   // Host -> View
+   if (relay.handleHostMessage(event.data)) return; // true: answered, don't forward
+   inner.contentWindow.postMessage(event.data, "*");
+   // View -> Host (before forwarding)
+   relay.handleViewMessage(event.data);
+   ```
+
+   Use a **fresh inner iframe for every View**: a View can leave its own
+   `document.modelContext` behind in a document that is written again, where
+   it would be read as the next View's.
+
+3. **Host page.** Call `bridge.listWebMcpTools()` and
+   `bridge.callWebMcpTool()`. They travel as the reserved sandbox messages
+   `ui/sandbox-list-tools` and `ui/sandbox-call-tool`, which the relay answers;
+   the View never sees them. Tool changes arrive as
+   `ui/notifications/sandbox-tools-changed`, exposed as
+   `bridge.onwebmcptoolschange` (re-list the tools in the handler).
+   `bridge.listTools()` / `callTool()` still reach Views that declare `tools`
+   (older SDKs), so a Host that supports both can branch on the capability:
+
+   ```ts
+   const listViewTools = (bridge: AppBridge) =>
+     bridge.getAppCapabilities()?.tools
+       ? bridge.listTools({})
+       : bridge.listWebMcpTools();
+   ```
+
+4. **Native WebMCP.** In a browser with native WebMCP, delegate the `tools`
+   Permissions Policy feature to the sandbox iframe (`allow="tools"`). Native
+   support tracks the current WebMCP spec; Chrome builds that still take
+   JSON-string input are accommodated. The message of an error a tool throws
+   is not visible through the native API. The SDK does not use native WebMCP
+   of the parent page itself.
+5. **CSP.** The injected polyfill is an inline script, so the View's CSP must
+   allow inline scripts. MCP Apps single-file HTML already does.
+
+See `examples/basic-host/src/sandbox.ts` for a complete Sandbox proxy, and
+`examples/debug-server` for a View that logs its WebMCP calls.
+
+## Checklist
+
+1. Views: move `app.registerTool` / `oncalltool` / `onlisttools` to
+   `document.modelContext.registerTool()`.
+2. Hosts: keep the polyfill injection on, adopt `createModelContextRelay` in
+   the Sandbox proxy (with a fresh inner iframe per View), and read tools with
+   `bridge.listWebMcpTools()` / `callWebMcpTool()`.
+3. Hosts in browsers with native WebMCP: add `allow="tools"` to the sandbox
+   iframe.
diff --git a/examples/basic-host/README.md b/examples/basic-host/README.md
index c64cda75d..168517e1b 100644
--- a/examples/basic-host/README.md
+++ b/examples/basic-host/README.md
@@ -41,3 +41,12 @@ Host (port 8080)
 - Messages flow through the outer iframe which validates and relays them bidirectionally
 
 This architecture ensures that even if tool UI code is malicious, it cannot access the host application's DOM, cookies, or JavaScript context.
+
+## App tools (WebMCP)
+
+Views can register tools with [WebMCP](https://webmachinelearning.github.io/webmcp/) (`document.modelContext.registerTool()`). The host lists them in an "App tools (WebMCP)" panel, where they can be called with JSON input.
+
+- `AppBridge.sendSandboxResourceReady()` prepends a WebMCP polyfill to the View HTML by default (a native `document.modelContext` is left untouched), so the sandbox proxy injects nothing. For native WebMCP, `loadSandboxProxy` also delegates the `tools` permissions policy to the sandbox iframe (`allow="tools"`).
+- The host reaches the tools with `appBridge.listWebMcpTools()` / `appBridge.callWebMcpTool()`, which send the reserved sandbox messages `ui/sandbox-list-tools` / `ui/sandbox-call-tool`. The panel refreshes (debounced) on `appBridge.onwebmcptoolschange` (`ui/notifications/sandbox-tools-changed`).
+- Only the sandbox proxy is same-origin with the View, so it reads the tools: `createModelContextRelay()` (from `@modelcontextprotocol/ext-apps/app-bridge`) answers those reserved requests in `sandbox.ts` via `handleHostMessage()` (they are not forwarded to the View), and `handleViewMessage()` lets it start watching the View's tools once the View has initialized.
+- `tools/list` / `tools/call` (`appBridge.listTools()` / `callTool()`, deprecated) still go straight to the View, which only answers them if it handles them itself.
diff --git a/examples/basic-host/src/implementation.ts b/examples/basic-host/src/implementation.ts
index 5f680ffdc..0c36c49cf 100644
--- a/examples/basic-host/src/implementation.ts
+++ b/examples/basic-host/src/implementation.ts
@@ -170,11 +170,13 @@ export function loadSandboxProxy(
 
   iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
 
-  // Set Permission Policy allow attribute based on requested permissions
-  const allowAttribute = buildAllowAttribute(permissions);
-  if (allowAttribute) {
-    iframe.setAttribute("allow", allowAttribute);
-  }
+  // Set Permission Policy allow attribute based on requested permissions, plus
+  // `tools`: in a browser with native WebMCP, the View's `document.modelContext`
+  // only works in nested cross-origin frames if the policy is delegated.
+  const allowAttribute = [buildAllowAttribute(permissions), "tools"]
+    .filter(Boolean)
+    .join("; ");
+  iframe.setAttribute("allow", allowAttribute);
 
   const readyNotification: McpUiSandboxProxyReadyNotification["method"] =
     "ui/notifications/sandbox-proxy-ready";
@@ -247,6 +249,17 @@ export async function initializeApp(
   );
 }
 
+/**
+ * Lists the tools the View registered with WebMCP (`document.modelContext`).
+ * The sandbox proxy answers from the View's document, so the View does not need
+ * to declare anything.
+ */
+export async function listViewTools(appBridge: AppBridge): Promise<Tool[]> {
+  const { tools } = await appBridge.listWebMcpTools({});
+  log.info("View tools (WebMCP):", tools.map((tool) => tool.name));
+  return tools;
+}
+
 /**
  * Hooks into `AppBridge.oninitialized` and returns a Promise that resolves when
  * the MCP App is initialized (i.e., when the inner iframe is ready).
@@ -270,6 +283,7 @@ export interface AppBridgeCallbacks {
   onContextUpdate?: (context: ModelContext | null) => void;
   onMessage?: (message: AppMessage) => void;
   onDisplayModeChange?: (mode: "inline" | "fullscreen") => void;
+  onAppToolsChanged?: () => void;
 }
 
 export interface AppBridgeOptions {
@@ -348,6 +362,11 @@ export function newAppBridge(
     return {};
   };
 
+  appBridge.onwebmcptoolschange = () => {
+    log.info("View tools (WebMCP) changed");
+    callbacks?.onAppToolsChanged?.();
+  };
+
   appBridge.onloggingmessage = (params) => {
     log.info("Log message from MCP App:", params);
   };
diff --git a/examples/basic-host/src/index.module.css b/examples/basic-host/src/index.module.css
index 0bd09dd05..d894470c9 100644
--- a/examples/basic-host/src/index.module.css
+++ b/examples/basic-host/src/index.module.css
@@ -250,6 +250,47 @@
   font-size: 0.75rem;
 }
 
+.appTool {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  cursor: default;
+}
+
+.appToolName {
+  font-family: monospace;
+  font-weight: 600;
+}
+
+.appToolCall {
+  display: flex;
+  gap: 0.5rem;
+
+  textarea {
+    flex: 1;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-family: monospace;
+    font-size: 0.8rem;
+  }
+
+  button {
+    border: none;
+    border-radius: 4px;
+    background-color: var(--color-primary);
+    color: white;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--color-primary-hover);
+    }
+  }
+}
+
 .collapsiblePreview {
   margin-top: 0.25rem;
   color: var(--color-text-secondary);
diff --git a/examples/basic-host/src/index.tsx b/examples/basic-host/src/index.tsx
index 00c0d52b2..9db16642d 100644
--- a/examples/basic-host/src/index.tsx
+++ b/examples/basic-host/src/index.tsx
@@ -1,8 +1,8 @@
 import { getToolUiResourceUri, McpUiToolMetaSchema } from "@modelcontextprotocol/ext-apps/app-bridge";
-import type { Tool } from "@modelcontextprotocol/client";
+import type { CallToolResult, Tool } from "@modelcontextprotocol/client";
 import { Component, type ErrorInfo, type ReactNode, StrictMode, Suspense, use, useEffect, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
-import { callTool, connectToServer, hasAppHtml, initializeApp, loadSandboxProxy, log, newAppBridge, type ServerInfo, type ToolCallInfo, type ModelContext, type AppMessage } from "./implementation";
+import { callTool, connectToServer, hasAppHtml, initializeApp, listViewTools, loadSandboxProxy, log, newAppBridge, type ServerInfo, type ToolCallInfo, type ModelContext, type AppMessage } from "./implementation";
 import { getTheme, toggleTheme, onThemeChange, type Theme } from "./theme";
 import styles from "./index.module.css";
 
@@ -417,6 +417,54 @@ function CollapsiblePanel({ icon, label, content, badge, defaultExpanded = false
 }
 
 
+/**
+ * Lists the tools the View registered (WebMCP `document.modelContext`, or the
+ * deprecated `App.registerTool`) and lets you call them with JSON input.
+ */
+interface AppToolsPanelProps {
+  tools: Tool[];
+  onCall: (name: string, args: Record<string, unknown>) => Promise<CallToolResult>;
+}
+function AppToolsPanel({ tools, onCall }: AppToolsPanelProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className={styles.collapsiblePanel}>
+      <div className={styles.collapsibleHeader} onClick={() => setExpanded(!expanded)}>
+        <span className={styles.collapsibleLabel}>🧰 App tools (WebMCP)</span>
+        <span className={styles.collapsibleSize}>{tools.length} tool{tools.length > 1 ? "s" : ""}</span>
+        <span className={styles.collapsibleToggle}>{expanded ? "▼" : "▶"}</span>
+      </div>
+      {expanded && tools.map((tool) => <AppToolRow key={tool.name} tool={tool} onCall={onCall} />)}
+    </div>
+  );
+}
+
+function AppToolRow({ tool, onCall }: { tool: Tool; onCall: AppToolsPanelProps["onCall"] }) {
+  const [input, setInput] = useState(() => getToolDefaults(tool));
+  const [result, setResult] = useState("");
+
+  const call = async () => {
+    try {
+      setResult(JSON.stringify(await onCall(tool.name, JSON.parse(input)), null, 2));
+    } catch (error) {
+      setResult(`Error: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
+
+  return (
+    <div className={styles.appTool}>
+      <div><span className={styles.appToolName}>{tool.name}</span> {tool.description}</div>
+      <div className={styles.appToolCall}>
+        <textarea rows={2} value={input} onChange={(e) => setInput(e.target.value)} aria-label={`${tool.name} input JSON`} />
+        <button onClick={call}>Call</button>
+      </div>
+      {result && <pre className={styles.collapsibleFull}>{result}</pre>}
+    </div>
+  );
+}
+
+
 interface AppIFramePanelProps {
   toolCallInfo: Required<ToolCallInfo>;
   isDestroying?: boolean;
@@ -428,6 +476,22 @@ function AppIFramePanel({ toolCallInfo, isDestroying, onTeardownComplete }: AppI
   const [modelContext, setModelContext] = useState<ModelContext | null>(null);
   const [messages, setMessages] = useState<AppMessage[]>([]);
   const [displayMode, setDisplayMode] = useState<"inline" | "fullscreen">("inline");
+  const [appTools, setAppTools] = useState<Tool[]>([]);
+
+  const refreshAppTools = () => {
+    const appBridge = appBridgeRef.current;
+    if (!appBridge) return;
+    listViewTools(appBridge).then(setAppTools, (err) => log.warn("Listing View tools failed:", err));
+  };
+
+  // A View registering several tools at once (e.g. 5 in a row) triggers one
+  // `webmcptoolschange` per tool: coalesce the burst into a single refresh.
+  const refreshTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const scheduleRefreshAppTools = () => {
+    clearTimeout(refreshTimerRef.current);
+    refreshTimerRef.current = setTimeout(refreshAppTools, 100);
+  };
+  useEffect(() => () => clearTimeout(refreshTimerRef.current), []);
 
   useEffect(() => {
     const iframe = iframeRef.current!;
@@ -445,13 +509,14 @@ function AppIFramePanel({ toolCallInfo, isDestroying, onTeardownComplete }: AppI
             onContextUpdate: setModelContext,
             onMessage: (msg) => setMessages((prev) => [...prev, msg]),
             onDisplayModeChange: setDisplayMode,
+            onAppToolsChanged: scheduleRefreshAppTools,
           }, {
             // Provide container dimensions - maxHeight for flexible sizing
             containerDimensions: { maxHeight: 6000 },
             displayMode: "inline",
           });
           appBridgeRef.current = appBridge;
-          initializeApp(iframe, appBridge, toolCallInfo);
+          initializeApp(iframe, appBridge, toolCallInfo).then(refreshAppTools);
         }
       });
     });
@@ -528,6 +593,12 @@ function AppIFramePanel({ toolCallInfo, isDestroying, onTeardownComplete }: AppI
       {modelContext && (
         <CollapsiblePanel icon="📋" label="Model Context" content={fullContext} />
       )}
+      {appTools.length > 0 && (
+        <AppToolsPanel
+          tools={appTools}
+          onCall={(name, args) => appBridgeRef.current!.callWebMcpTool({ name, arguments: args })}
+        />
+      )}
     </div>
   );
 }
diff --git a/examples/basic-host/src/sandbox.ts b/examples/basic-host/src/sandbox.ts
index 6f1dd93d7..9af845890 100644
--- a/examples/basic-host/src/sandbox.ts
+++ b/examples/basic-host/src/sandbox.ts
@@ -1,5 +1,5 @@
 import type { McpUiSandboxProxyReadyNotification, McpUiSandboxResourceReadyNotification } from "@modelcontextprotocol/ext-apps/app-bridge";
-import { buildAllowAttribute } from "@modelcontextprotocol/ext-apps/app-bridge";
+import { buildAllowAttribute, createModelContextRelay } from "@modelcontextprotocol/ext-apps/app-bridge";
 
 const ALLOWED_REFERRER_PATTERN = /^http:\/\/(localhost|127\.0\.0\.1)(:|\/|$)/;
 
@@ -48,6 +48,17 @@ inner.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
 // based on the permissions requested by the app
 document.body.appendChild(inner);
 
+// WebMCP: the View registers tools on its own `document.modelContext` (the
+// polyfill is prepended to the View HTML by AppBridge on the Host side). This
+// proxy is the only party same-origin with the View (the Host page is not), so
+// it is the one that reads those tools: the relay answers the Host's reserved
+// `ui/sandbox-list-tools` / `ui/sandbox-call-tool` requests and sends
+// `ui/notifications/sandbox-tools-changed` when the View's tools change.
+const relay = createModelContextRelay({
+  getViewDocument: () => inner.contentDocument,
+  postToHost: (message) => window.parent.postMessage(message, EXPECTED_HOST_ORIGIN),
+});
+
 const RESOURCE_READY_NOTIFICATION: McpUiSandboxResourceReadyNotification["method"] =
   "ui/notifications/sandbox-resource-ready";
 const PROXY_READY_NOTIFICATION: McpUiSandboxProxyReadyNotification["method"] =
@@ -108,6 +119,8 @@ window.addEventListener("message", async (event) => {
         }
       }
     } else {
+      // Answered here from the View's `document.modelContext`: don't forward.
+      if (relay.handleHostMessage(event.data)) return;
       if (inner && inner.contentWindow) {
         inner.contentWindow.postMessage(event.data, "*");
       }
@@ -122,6 +135,8 @@ window.addEventListener("message", async (event) => {
       );
       return;
     }
+    // Lets the relay start watching the View's tools once it has initialized.
+    relay.handleViewMessage(event.data);
     // Relay messages from inner frame to parent window.
     // Use specific origin instead of "*" to prevent message interception.
     window.parent.postMessage(event.data, EXPECTED_HOST_ORIGIN);
diff --git a/examples/budget-allocator-server/package.json b/examples/budget-allocator-server/package.json
index 52ba7b11f..3ed1f2fcf 100644
--- a/examples/budget-allocator-server/package.json
+++ b/examples/budget-allocator-server/package.json
@@ -46,7 +46,8 @@
     "cross-env": "^10.1.0",
     "typescript": "^5.9.3",
     "vite": "^6.0.0",
-    "vite-plugin-singlefile": "^2.3.0"
+    "vite-plugin-singlefile": "^2.3.0",
+    "webmcp-types": "0.1.10"
   },
   "types": "dist/server.d.ts",
   "exports": {
diff --git a/examples/budget-allocator-server/src/mcp-app.ts b/examples/budget-allocator-server/src/mcp-app.ts
index a9bae12c6..627837445 100644
--- a/examples/budget-allocator-server/src/mcp-app.ts
+++ b/examples/budget-allocator-server/src/mcp-app.ts
@@ -12,6 +12,7 @@ Chart.register(...registerables);
 
 const log = {
   info: console.log.bind(console, "[APP]"),
+  warn: console.warn.bind(console, "[APP]"),
   error: console.error.bind(console, "[APP]"),
 };
 
@@ -627,22 +628,33 @@ function handleHostContextChanged(ctx: McpUiHostContext) {
 
 app.onhostcontextchanged = handleHostContextChanged;
 
-// Register tools for model interaction
-app.registerTool(
-  "get-allocations",
-  {
-    title: "Get Budget Allocations",
-    description:
-      "Get the current budget allocations including total budget, percentages, and amounts per category",
-  },
-  async () => {
+// ---------------------------------------------------------------------------
+// WebMCP tools (model interaction)
+// ---------------------------------------------------------------------------
+
+/**
+ * Register a tool via WebMCP (`document.modelContext`). The Host backfills
+ * `document.modelContext` into the View; without it, tools are simply skipped.
+ */
+function registerTool(tool: WebMCP.ModelContextTool): void {
+  if (!document.modelContext) {
+    log.warn(`document.modelContext unavailable; not registering ${tool.name}`);
+    return;
+  }
+  document.modelContext.registerTool(tool).catch((err) => {
+    log.warn(`Failed to register tool ${tool.name}:`, err);
+  });
+}
+
+registerTool({
+  name: "get-allocations",
+  title: "Get Budget Allocations",
+  description:
+    "Get the current budget allocations including total budget, percentages, and amounts per category",
+  annotations: { readOnlyHint: true },
+  async execute() {
     if (!state.config) {
-      return {
-        content: [
-          { type: "text" as const, text: "Error: Configuration not loaded" },
-        ],
-        isError: true,
-      };
+      throw new Error("Configuration not loaded");
     }
 
     const allocations: Record<string, { percent: number; amount: number }> = {};
@@ -654,7 +666,7 @@ app.registerTool(
       };
     }
 
-    const result = {
+    return {
       totalBudget: state.totalBudget,
       currency: state.config.currency,
       currencySymbol: state.config.currencySymbol,
@@ -666,57 +678,36 @@ app.registerTool(
         color: c.color,
       })),
     };
-
-    return {
-      content: [
-        { type: "text" as const, text: JSON.stringify(result, null, 2) },
-      ],
-      structuredContent: result,
-    };
   },
-);
-
-app.registerTool(
-  "set-allocation",
-  {
-    title: "Set Category Allocation",
-    description: "Set the allocation percentage for a specific budget category",
-    inputSchema: z.object({
-      categoryId: z
-        .string()
-        .describe(
-          "Category ID (e.g., 'marketing', 'engineering', 'operations', 'sales', 'rd')",
-        ),
-      percent: z
-        .number()
-        .min(0)
-        .max(100)
-        .describe("Allocation percentage (0-100)"),
-    }),
-  },
-  async (args) => {
+});
+
+const SetAllocationInput = z.object({
+  categoryId: z
+    .string()
+    .describe(
+      "Category ID (e.g., 'marketing', 'engineering', 'operations', 'sales', 'rd')",
+    ),
+  percent: z.number().min(0).max(100).describe("Allocation percentage (0-100)"),
+});
+
+registerTool({
+  name: "set-allocation",
+  title: "Set Category Allocation",
+  description: "Set the allocation percentage for a specific budget category",
+  inputSchema: z.toJSONSchema(SetAllocationInput),
+  async execute(input) {
+    const args = SetAllocationInput.parse(input);
     if (!state.config) {
-      return {
-        content: [
-          { type: "text" as const, text: "Error: Configuration not loaded" },
-        ],
-        isError: true,
-      };
+      throw new Error("Configuration not loaded");
     }
 
     const category = state.config.categories.find(
       (c) => c.id === args.categoryId,
     );
     if (!category) {
-      return {
-        content: [
-          {
-            type: "text" as const,
-            text: `Error: Category "${args.categoryId}" not found. Available: ${state.config.categories.map((c) => c.id).join(", ")}`,
-          },
-        ],
-        isError: true,
-      };
+      throw new Error(
+        `Category "${args.categoryId}" not found. Available: ${state.config.categories.map((c) => c.id).join(", ")}`,
+      );
     }
 
     handleSliderChange(args.categoryId, args.percent);
@@ -731,33 +722,24 @@ app.registerTool(
 
     const amount = (args.percent / 100) * state.totalBudget;
     return {
-      content: [
-        {
-          type: "text" as const,
-          text: `Set ${category.name} allocation to ${args.percent.toFixed(1)}% (${state.config.currencySymbol}${amount.toLocaleString()})`,
-        },
-      ],
+      message: `Set ${category.name} allocation to ${args.percent.toFixed(1)}% (${state.config.currencySymbol}${amount.toLocaleString()})`,
     };
   },
-);
-
-app.registerTool(
-  "set-total-budget",
-  {
-    title: "Set Total Budget",
-    description: "Set the total budget amount",
-    inputSchema: z.object({
-      amount: z.number().positive().describe("Total budget amount"),
-    }),
-  },
-  async (args) => {
+});
+
+const SetTotalBudgetInput = z.object({
+  amount: z.number().positive().describe("Total budget amount"),
+});
+
+registerTool({
+  name: "set-total-budget",
+  title: "Set Total Budget",
+  description: "Set the total budget amount",
+  inputSchema: z.toJSONSchema(SetTotalBudgetInput),
+  async execute(input) {
+    const args = SetTotalBudgetInput.parse(input);
     if (!state.config) {
-      return {
-        content: [
-          { type: "text" as const, text: "Error: Configuration not loaded" },
-        ],
-        isError: true,
-      };
+      throw new Error("Configuration not loaded");
     }
 
     state.totalBudget = args.amount;
@@ -780,46 +762,31 @@ app.registerTool(
     updateComparisonSummary();
 
     return {
-      content: [
-        {
-          type: "text" as const,
-          text: `Total budget set to ${state.config.currencySymbol}${args.amount.toLocaleString()}`,
-        },
-      ],
+      message: `Total budget set to ${state.config.currencySymbol}${args.amount.toLocaleString()}`,
     };
   },
-);
-
-app.registerTool(
-  "set-company-stage",
-  {
-    title: "Set Company Stage",
-    description:
-      "Set the company stage for benchmark comparison (e.g., 'Seed', 'Series A', 'Series B', 'Growth')",
-    inputSchema: z.object({
-      stage: z.string().describe("Company stage ID"),
-    }),
-  },
-  async (args) => {
+});
+
+const SetCompanyStageInput = z.object({
+  stage: z.string().describe("Company stage ID"),
+});
+
+registerTool({
+  name: "set-company-stage",
+  title: "Set Company Stage",
+  description:
+    "Set the company stage for benchmark comparison (e.g., 'Seed', 'Series A', 'Series B', 'Growth')",
+  inputSchema: z.toJSONSchema(SetCompanyStageInput),
+  async execute(input) {
+    const args = SetCompanyStageInput.parse(input);
     if (!state.analytics) {
-      return {
-        content: [
-          { type: "text" as const, text: "Error: Analytics not loaded" },
-        ],
-        isError: true,
-      };
+      throw new Error("Analytics not loaded");
     }
 
     if (!state.analytics.stages.includes(args.stage)) {
-      return {
-        content: [
-          {
-            type: "text" as const,
-            text: `Error: Stage "${args.stage}" not found. Available: ${state.analytics.stages.join(", ")}`,
-          },
-        ],
-        isError: true,
-      };
+      throw new Error(
+        `Stage "${args.stage}" not found. Available: ${state.analytics.stages.join(", ")}`,
+      );
     }
 
     state.selectedStage = args.stage;
@@ -840,45 +807,26 @@ app.registerTool(
       updateComparisonSummary();
     }
 
-    return {
-      content: [
-        {
-          type: "text" as const,
-          text: `Company stage set to "${args.stage}"`,
-        },
-      ],
-    };
-  },
-);
-
-app.registerTool(
-  "get-benchmark-comparison",
-  {
-    title: "Get Benchmark Comparison",
-    description:
-      "Compare current allocations against industry benchmarks for the selected stage",
+    return { message: `Company stage set to "${args.stage}"` };
   },
-  async () => {
+});
+
+registerTool({
+  name: "get-benchmark-comparison",
+  title: "Get Benchmark Comparison",
+  description:
+    "Compare current allocations against industry benchmarks for the selected stage",
+  annotations: { readOnlyHint: true },
+  async execute() {
     if (!state.config || !state.analytics) {
-      return {
-        content: [{ type: "text" as const, text: "Error: Data not loaded" }],
-        isError: true,
-      };
+      throw new Error("Data not loaded");
     }
 
     const benchmark = state.analytics.benchmarks.find(
       (b) => b.stage === state.selectedStage,
     );
     if (!benchmark) {
-      return {
-        content: [
-          {
-            type: "text" as const,
-            text: `Error: No benchmark data for stage "${state.selectedStage}"`,
-          },
-        ],
-        isError: true,
-      };
+      throw new Error(`No benchmark data for stage "${state.selectedStage}"`);
     }
 
     const comparison: Record<
@@ -902,19 +850,9 @@ app.registerTool(
       };
     }
 
-    const result = {
-      stage: state.selectedStage,
-      comparison,
-    };
-
-    return {
-      content: [
-        { type: "text" as const, text: JSON.stringify(result, null, 2) },
-      ],
-      structuredContent: result,
-    };
+    return { stage: state.selectedStage, comparison };
   },
-);
+});
 
 // Handle theme changes
 window
diff --git a/examples/budget-allocator-server/tsconfig.json b/examples/budget-allocator-server/tsconfig.json
index b028ff5c0..a680d7048 100644
--- a/examples/budget-allocator-server/tsconfig.json
+++ b/examples/budget-allocator-server/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "types": ["node", "vite/client"],
+    "types": ["node", "vite/client", "webmcp-types"],
     "target": "ESNext",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
diff --git a/examples/debug-server/README.md b/examples/debug-server/README.md
index 89d9a7d21..f716c67ca 100644
--- a/examples/debug-server/README.md
+++ b/examples/debug-server/README.md
@@ -22,6 +22,10 @@ Configurable tool for testing all result variations:
 
 App-only tool (hidden from model) for polling server state. Returns current timestamp and call counter.
 
+### View tools (WebMCP)
+
+The View exposes two demo tools to the host through WebMCP (`document.modelContext.registerTool()`): `view-echo` (read-only, echoes a message) and `view-fail` (always throws, to show how errors reach the host). Each `execute()` call is logged as `webmcp-execute` and each `toolchange` event as `webmcp-toolchange`; if the host provides no `document.modelContext`, a `webmcp-unavailable` event is logged instead.
+
 ## App UI
 
 The debug app provides a dashboard with:
diff --git a/examples/debug-server/mcp-app.html b/examples/debug-server/mcp-app.html
index 63c344457..b0fda656b 100644
--- a/examples/debug-server/mcp-app.html
+++ b/examples/debug-server/mcp-app.html
@@ -21,8 +21,9 @@ <h2 class="section-header">
             <option value="ontoolcancelled">ontoolcancelled</option>
             <option value="onhostcontextchanged">onhostcontextchanged</option>
             <option value="onteardown">onteardown</option>
-            <option value="oncalltool">oncalltool</option>
-            <option value="onlisttools">onlisttools</option>
+            <option value="webmcp-execute">webmcp-execute</option>
+            <option value="webmcp-toolchange">webmcp-toolchange</option>
+            <option value="webmcp-unavailable">webmcp-unavailable</option>
             <option value="onerror">onerror</option>
             <option value="connected">connected</option>
           </select>
diff --git a/examples/debug-server/package.json b/examples/debug-server/package.json
index 136529a03..f098caf07 100644
--- a/examples/debug-server/package.json
+++ b/examples/debug-server/package.json
@@ -53,6 +53,7 @@
     "express": "^5.1.0",
     "typescript": "^5.9.3",
     "vite": "^6.0.0",
-    "vite-plugin-singlefile": "^2.3.0"
+    "vite-plugin-singlefile": "^2.3.0",
+    "webmcp-types": "0.1.10"
   }
 }
diff --git a/examples/debug-server/src/mcp-app.css b/examples/debug-server/src/mcp-app.css
index 79a74ed26..5cf7280d0 100644
--- a/examples/debug-server/src/mcp-app.css
+++ b/examples/debug-server/src/mcp-app.css
@@ -129,8 +129,9 @@
 .log-type.ontoolcancelled { color: var(--color-warning); }
 .log-type.onhostcontextchanged { color: #7c3aed; }
 .log-type.onteardown { color: #f97316; }
-.log-type.oncalltool { color: #ec4899; }
-.log-type.onlisttools { color: #14b8a6; }
+.log-type.webmcp-execute { color: #ec4899; }
+.log-type.webmcp-toolchange { color: #14b8a6; }
+.log-type.webmcp-unavailable { color: var(--color-warning); }
 .log-type.onerror { color: var(--color-error); }
 .log-type.connected { color: var(--color-success); }
 .log-type.update-context { color: #0891b2; }
diff --git a/examples/debug-server/src/mcp-app.ts b/examples/debug-server/src/mcp-app.ts
index b1c862d36..b4dc81744 100644
--- a/examples/debug-server/src/mcp-app.ts
+++ b/examples/debug-server/src/mcp-app.ts
@@ -45,8 +45,8 @@ const CALLBACKS = [
   "ontoolcancelled",
   "onhostcontextchanged",
   "onteardown",
-  "oncalltool",
-  "onlisttools",
+  "webmcp-execute",
+  "webmcp-toolchange",
   "onerror",
 ] as const;
 
@@ -200,7 +200,11 @@ function renderCallbackStatus(): void {
   callbackTableBodyEl.innerHTML = CALLBACKS.map((name) => {
     const count = state.callbackCounts.get(name) ?? 0;
     const lastPayload = state.lastPayloads.get(name);
-    const registered = name !== "onerror"; // All callbacks are registered
+    // All callbacks are registered, except that the WebMCP events need
+    // `document.modelContext`.
+    const registered = name.startsWith("webmcp-")
+      ? document.modelContext !== undefined
+      : name !== "onerror";
 
     return `
       <tr>
@@ -347,7 +351,7 @@ function handleHostContextChanged(ctx: McpUiHostContext): void {
 
 const app = new App(
   { name: "Debug App", version: "1.0.0" },
-  { tools: { listChanged: true } }, // Declare tools capability for oncalltool/onlisttools
+  {}, // Tools are exposed through document.modelContext (WebMCP), not app capabilities
   { autoResize: false }, // We'll manage auto-resize ourselves for toggle demo
 );
 
@@ -378,22 +382,70 @@ app.onteardown = async (params) => {
   return {};
 };
 
-app.oncalltool = async (params) => {
-  logEvent("oncalltool", params);
-  return {
-    content: [{ type: "text", text: "App handled tool call" }],
-  };
-};
-
-app.onlisttools = async (params) => {
-  logEvent("onlisttools", params);
-  return { tools: [] };
-};
-
 app.onerror = (error) => {
   logEvent("onerror", error);
 };
 
+// ============================================================================
+// WebMCP Tools (tools exposed by the View)
+// ============================================================================
+
+/**
+ * Expose a couple of demo tools to the host with WebMCP. The host provides
+ * `document.modelContext` (AppBridge injects a polyfill by default) and reads
+ * the tools from there; `execute()` return values reach it as
+ * `structuredContent`, a throw as `isError: true`.
+ */
+function registerWebMcpTools(): void {
+  const modelContext = document.modelContext;
+  if (!modelContext) {
+    logEvent("webmcp-unavailable", {
+      reason: "document.modelContext is not defined",
+    });
+    return;
+  }
+
+  // Listen before registering so the registrations below are logged too.
+  modelContext.addEventListener("toolchange", async () => {
+    try {
+      const tools = await modelContext.getTools();
+      logEvent("webmcp-toolchange", { tools: tools.map((t) => t.name) });
+    } catch (e) {
+      logEvent("error", e);
+    }
+  });
+
+  modelContext
+    .registerTool({
+      name: "view-echo",
+      title: "Echo (View)",
+      description: "Echo a message back with a timestamp.",
+      inputSchema: {
+        type: "object",
+        properties: { message: { type: "string" } },
+        required: ["message"],
+      },
+      annotations: { readOnlyHint: true },
+      execute: ({ message }) => {
+        logEvent("webmcp-execute", { name: "view-echo", input: { message } });
+        return { message, receivedAt: new Date().toISOString() };
+      },
+    })
+    .catch((e) => logEvent("error", e));
+
+  modelContext
+    .registerTool({
+      name: "view-fail",
+      title: "Fail (View)",
+      description: "Always throws, to show how errors reach the host.",
+      execute: (input) => {
+        logEvent("webmcp-execute", { name: "view-fail", input });
+        throw new Error("view-fail always fails");
+      },
+    })
+    .catch((e) => logEvent("error", e));
+}
+
 // ============================================================================
 // Section Collapsing
 // ============================================================================
@@ -625,6 +677,8 @@ app
   .then(() => {
     logEvent("connected", { success: true });
 
+    registerWebMcpTools();
+
     const ctx = app.getHostContext();
     if (ctx) {
       handleHostContextChanged(ctx);
diff --git a/examples/debug-server/tsconfig.json b/examples/debug-server/tsconfig.json
index b028ff5c0..a680d7048 100644
--- a/examples/debug-server/tsconfig.json
+++ b/examples/debug-server/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "types": ["node", "vite/client"],
+    "types": ["node", "vite/client", "webmcp-types"],
     "target": "ESNext",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
diff --git a/examples/map-server/package.json b/examples/map-server/package.json
index 707ea7f5e..0124f2718 100644
--- a/examples/map-server/package.json
+++ b/examples/map-server/package.json
@@ -46,7 +46,8 @@
     "cross-env": "^10.1.0",
     "typescript": "^5.9.3",
     "vite": "^6.0.0",
-    "vite-plugin-singlefile": "^2.3.0"
+    "vite-plugin-singlefile": "^2.3.0",
+    "webmcp-types": "0.1.10"
   },
   "types": "dist/server.d.ts",
   "exports": {
diff --git a/examples/map-server/src/mcp-app.ts b/examples/map-server/src/mcp-app.ts
index d3090c7a4..6c930495a 100644
--- a/examples/map-server/src/mcp-app.ts
+++ b/examples/map-server/src/mcp-app.ts
@@ -680,11 +680,11 @@ const PREFERRED_INLINE_HEIGHT = 400;
 // Current display mode
 let currentDisplayMode: "inline" | "fullscreen" | "pip" = "inline";
 
-// Create App instance with tool capabilities
+// Create App instance
 // autoResize: false - we manually send size since map fills its container
 const app = new App(
   { name: "CesiumJS Globe", version: "1.0.0" },
-  { tools: { listChanged: true } },
+  {},
   { autoResize: false },
 );
 
@@ -872,32 +872,42 @@ app.ontoolinput = async (params) => {
   }
 };
 
+/**
+ * Register a tool via WebMCP (`document.modelContext`). The Host backfills
+ * `document.modelContext` into the View; without it, tools are simply skipped.
+ */
+function registerTool(tool: WebMCP.ModelContextTool): void {
+  if (!document.modelContext) {
+    log.warn(`document.modelContext unavailable; not registering ${tool.name}`);
+    return;
+  }
+  document.modelContext.registerTool(tool).catch((err) => {
+    log.warn(`Failed to register tool ${tool.name}:`, err);
+  });
+}
+
 // Register tools for the model to interact with this component
-app.registerTool(
-  "navigate-to",
-  {
-    title: "Navigate To",
-    description: "Navigate the globe to a new bounding box location",
-    inputSchema: z.object({
-      west: z.number().describe("Western longitude (-180 to 180)"),
-      south: z.number().describe("Southern latitude (-90 to 90)"),
-      east: z.number().describe("Eastern longitude (-180 to 180)"),
-      north: z.number().describe("Northern latitude (-90 to 90)"),
-      duration: z
-        .number()
-        .optional()
-        .describe("Animation duration in seconds (default: 2)"),
-      label: z.string().optional().describe("Optional label to display"),
-    }),
-  },
-  async (args) => {
+const NavigateToInput = z.object({
+  west: z.number().describe("Western longitude (-180 to 180)"),
+  south: z.number().describe("Southern latitude (-90 to 90)"),
+  east: z.number().describe("Eastern longitude (-180 to 180)"),
+  north: z.number().describe("Northern latitude (-90 to 90)"),
+  duration: z
+    .number()
+    .optional()
+    .describe("Animation duration in seconds (default: 2)"),
+  label: z.string().optional().describe("Optional label to display"),
+});
+
+registerTool({
+  name: "navigate-to",
+  title: "Navigate To",
+  description: "Navigate the globe to a new bounding box location",
+  inputSchema: z.toJSONSchema(NavigateToInput),
+  async execute(input) {
+    const args = NavigateToInput.parse(input);
     if (!viewer) {
-      return {
-        content: [
-          { type: "text" as const, text: "Error: Viewer not initialized" },
-        ],
-        isError: true,
-      };
+      throw new Error("Viewer not initialized");
     }
 
     const bbox: BoundingBox = {
@@ -911,31 +921,20 @@ app.registerTool(
     setLabel(args.label);
 
     return {
-      content: [
-        {
-          type: "text" as const,
-          text: `Navigated to: W:${bbox.west.toFixed(4)}, S:${bbox.south.toFixed(4)}, E:${bbox.east.toFixed(4)}, N:${bbox.north.toFixed(4)}${args.label ? ` (${args.label})` : ""}`,
-        },
-      ],
+      message: `Navigated to: W:${bbox.west.toFixed(4)}, S:${bbox.south.toFixed(4)}, E:${bbox.east.toFixed(4)}, N:${bbox.north.toFixed(4)}${args.label ? ` (${args.label})` : ""}`,
     };
   },
-);
-
-app.registerTool(
-  "get-current-view",
-  {
-    title: "Get Current View",
-    description:
-      "Get the current camera position and bounding box visible on the globe",
-  },
-  async () => {
+});
+
+registerTool({
+  name: "get-current-view",
+  title: "Get Current View",
+  description:
+    "Get the current camera position and bounding box visible on the globe",
+  annotations: { readOnlyHint: true },
+  async execute() {
     if (!viewer) {
-      return {
-        content: [
-          { type: "text" as const, text: "Error: Viewer not initialized" },
-        ],
-        isError: true,
-      };
+      throw new Error("Viewer not initialized");
     }
 
     const camera = viewer.camera;
@@ -956,7 +955,7 @@ app.registerTool(
       };
     }
 
-    const viewData = {
+    return {
       camera: {
         latitude,
         longitude,
@@ -964,18 +963,8 @@ app.registerTool(
       },
       bbox,
     };
-
-    return {
-      content: [
-        {
-          type: "text" as const,
-          text: JSON.stringify(viewData, null, 2),
-        },
-      ],
-      structuredContent: viewData,
-    };
   },
-);
+});
 
 // Handle tool result - extract viewUUID and restore persisted view if available
 app.ontoolresult = async (result) => {
diff --git a/examples/map-server/tsconfig.json b/examples/map-server/tsconfig.json
index b028ff5c0..a680d7048 100644
--- a/examples/map-server/tsconfig.json
+++ b/examples/map-server/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "types": ["node", "vite/client"],
+    "types": ["node", "vite/client", "webmcp-types"],
     "target": "ESNext",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
diff --git a/examples/pdf-server/package.json b/examples/pdf-server/package.json
index de822cd05..bfead34f5 100644
--- a/examples/pdf-server/package.json
+++ b/examples/pdf-server/package.json
@@ -47,7 +47,8 @@
     "cross-env": "^10.1.0",
     "typescript": "^5.9.3",
     "vite": "^6.0.0",
-    "vite-plugin-singlefile": "^2.3.0"
+    "vite-plugin-singlefile": "^2.3.0",
+    "webmcp-types": "0.1.10"
   },
   "types": "dist/server.d.ts",
   "exports": {
diff --git a/examples/pdf-server/src/mcp-app.ts b/examples/pdf-server/src/mcp-app.ts
index 45e0c7458..739c3b099 100644
--- a/examples/pdf-server/src/mcp-app.ts
+++ b/examples/pdf-server/src/mcp-app.ts
@@ -2583,7 +2583,7 @@ async function handleGetViewerState(requestId: string): Promise<void> {
 /**
  * Collect text and/or screenshots for a set of page intervals.
  * Shared by the server-driven `get_pages` command (via handleGetPages)
- * and the app-registered `get_text` / `get_screenshot` tools.
+ * and the WebMCP `get_text` / `get_screenshot` tools.
  */
 async function collectPageData(
   intervals: Array<{ start?: number; end?: number }>,
@@ -5174,12 +5174,17 @@ app.onteardown = async () => {
 app.onhostcontextchanged = handleHostContextChanged;
 
 // =============================================================================
-// App-registered tools — 1:1 with the server's `interact` commands.
+// WebMCP tools — 1:1 with the server's `interact` commands.
 //
 // Each tool constructs the matching PdfCommand and dispatches through
 // processCommands(), so the command-handling logic lives in exactly one
 // place. The server-side `interact` tool remains for hosts that don't
-// support app-registered tools.
+// expose WebMCP tools from the View.
+//
+// Tools are registered on `document.modelContext` (WebMCP). The Host injects a
+// polyfill into the View and exposes each tool to the model as an MCP tool:
+// `execute()` returns plain data (surfaced as `structuredContent`) and throws
+// to report an error.
 // =============================================================================
 
 /** Shared zod shapes mirroring server.ts interact schema. */
@@ -5192,37 +5197,54 @@ const PageIntervalSchema = z.object({
   end: z.number().min(1).optional(),
 });
 
-/** Dispatch a command via processCommands and return a text result. */
+/**
+ * Register a WebMCP tool whose input is validated against a zod schema (the
+ * same schema also provides the tool's JSON Schema). No-op when the Host
+ * doesn't provide `document.modelContext`.
+ */
+function registerViewerTool<S extends z.ZodType>(
+  name: string,
+  config: Pick<WebMCP.ModelContextTool, "title" | "description">,
+  schema: S,
+  run: (input: z.output<S>) => Promise<unknown>,
+): void {
+  document.modelContext
+    ?.registerTool({
+      name,
+      ...config,
+      inputSchema: z.toJSONSchema(schema, { io: "input" }),
+      execute: async (input) => run(schema.parse(input)),
+    })
+    .catch((err: unknown) =>
+      log.error(`Failed to register tool "${name}":`, err),
+    );
+}
+
+function assertDocumentLoaded(): void {
+  if (!pdfDocument) throw new Error("No document loaded");
+}
+
+/** Dispatch a command via processCommands and return a short status message. */
 async function runCommand(
   cmd: PdfCommand,
   okText: string | (() => string),
-): Promise<CallToolResult> {
-  if (!pdfDocument) {
-    return {
-      content: [{ type: "text" as const, text: "Error: No document loaded" }],
-      isError: true,
-    };
-  }
+): Promise<{ message: string }> {
+  assertDocumentLoaded();
   await processCommands([cmd]);
-  const text = typeof okText === "function" ? okText() : okText;
-  return { content: [{ type: "text" as const, text }] };
+  return { message: typeof okText === "function" ? okText() : okText };
 }
 
-app.registerTool(
+registerViewerTool(
   "get-document-info",
   {
     title: "Get Document Info",
     description:
       "Get information about the current PDF document including title, current page, total pages, and zoom level",
   },
+  z.object({}),
   async () => {
-    if (!pdfDocument) {
-      return {
-        content: [{ type: "text" as const, text: "Error: No document loaded" }],
-        isError: true,
-      };
-    }
-    const info = {
+    assertDocumentLoaded();
+    return {
       title: pdfTitle || "Untitled",
       url: pdfUrl,
       currentPage,
@@ -5230,33 +5252,21 @@ app.registerTool(
       scale,
       displayMode: currentDisplayMode,
     };
-    return {
-      content: [{ type: "text" as const, text: JSON.stringify(info, null, 2) }],
-      structuredContent: info,
-    };
   },
 );
 
-app.registerTool(
+registerViewerTool(
   "navigate",
   {
     title: "Navigate",
     description: "Jump to a specific page in the document",
-    inputSchema: z.object({
-      page: z.number().int().min(1).describe("Page number (1-indexed)"),
-    }),
   },
+  z.object({
+    page: z.number().int().min(1).describe("Page number (1-indexed)"),
+  }),
   async ({ page }) => {
     if (pdfDocument && (page < 1 || page > totalPages)) {
-      return {
-        content: [
-          {
-            type: "text" as const,
-            text: `Error: Page ${page} out of range (1-${totalPages})`,
-          },
-        ],
-        isError: true,
-      };
+      throw new Error(`Page ${page} out of range (1-${totalPages})`);
     }
     return runCommand(
       { type: "navigate", page },
@@ -5265,16 +5275,16 @@ app.registerTool(
   },
 );
 
-app.registerTool(
+registerViewerTool(
   "search",
   {
     title: "Search",
     description:
       "Search for text and highlight matches in the viewer UI. Opens the search bar and jumps to the first match.",
-    inputSchema: z.object({
-      query: z.string().describe("Text to search for"),
-    }),
   },
+  z.object({
+    query: z.string().describe("Text to search for"),
+  }),
   async ({ query }) =>
     runCommand(
       { type: "search", query },
@@ -5282,16 +5292,16 @@ app.registerTool(
     ),
 );
 
-app.registerTool(
+registerViewerTool(
   "find",
   {
     title: "Find",
     description:
       "Silent search — locate matches without opening the search UI. Use before search_navigate.",
-    inputSchema: z.object({
-      query: z.string().describe("Text to search for"),
-    }),
   },
+  z.object({
+    query: z.string().describe("Text to search for"),
+  }),
   async ({ query }) =>
     runCommand(
       { type: "find", query },
@@ -5299,38 +5309,24 @@ app.registerTool(
     ),
 );
 
-app.registerTool(
+registerViewerTool(
   "search_navigate",
   {
     title: "Search Navigate",
     description:
       "Jump to the Nth search match (0-indexed). Call search or find first.",
-    inputSchema: z.object({
-      matchIndex: z.number().int().min(0).describe("Match index (0-indexed)"),
-    }),
   },
+  z.object({
+    matchIndex: z.number().int().min(0).describe("Match index (0-indexed)"),
+  }),
   async ({ matchIndex }) => {
     if (allMatches.length === 0) {
-      return {
-        content: [
-          {
-            type: "text" as const,
-            text: "Error: No search results. Call search or find first.",
-          },
-        ],
-        isError: true,
-      };
+      throw new Error("No search results. Call search or find first.");
     }
     if (matchIndex >= allMatches.length) {
-      return {
-        content: [
-          {
-            type: "text" as const,
-            text: `Error: matchIndex ${matchIndex} out of range (0-${allMatches.length - 1})`,
-          },
-        ],
-        isError: true,
-      };
+      throw new Error(
+        `matchIndex ${matchIndex} out of range (0-${allMatches.length - 1})`,
+      );
     }
     return runCommand(
       { type: "search_navigate", matchIndex },
@@ -5339,19 +5335,19 @@ app.registerTool(
   },
 );
 
-app.registerTool(
+registerViewerTool(
   "zoom",
   {
     title: "Zoom",
     description: "Set the zoom scale for the document",
-    inputSchema: z.object({
-      scale: z
-        .number()
-        .min(0.5)
-        .max(3.0)
-        .describe("Zoom scale, 1.0 = 100% (range: 0.5-3.0)"),
-    }),
   },
+  z.object({
+    scale: z
+      .number()
+      .min(0.5)
+      .max(3.0)
+      .describe("Zoom scale, 1.0 = 100% (range: 0.5-3.0)"),
+  }),
   async ({ scale }) =>
     runCommand(
       { type: "zoom", scale },
@@ -5359,21 +5355,21 @@ app.registerTool(
     ),
 );
 
-app.registerTool(
+registerViewerTool(
   "add_annotations",
   {
     title: "Add Annotations",
     description:
       "Add one or more annotations (highlight, note, rectangle, circle, line, stamp, image, freetext). Each needs id, type, page, and type-specific geometry.",
-    inputSchema: z.object({
-      annotations: z
-        .array(z.record(z.string(), z.any()))
-        .min(1)
-        .describe(
-          "Annotation objects. Each needs: id, type, page, plus type-specific fields (x, y, width, height, rects, color, content, etc.)",
-        ),
-    }),
   },
+  z.object({
+    annotations: z
+      .array(z.record(z.string(), z.any()))
+      .min(1)
+      .describe(
+        "Annotation objects. Each needs: id, type, page, plus type-specific fields (x, y, width, height, rects, color, content, etc.)",
+      ),
+  }),
   async ({ annotations }) =>
     runCommand(
       {
@@ -5384,19 +5380,19 @@ app.registerTool(
     ),
 );
 
-app.registerTool(
+registerViewerTool(
   "update_annotations",
   {
     title: "Update Annotations",
     description:
       "Patch existing annotations by id. Only id and type are required; other fields are merged.",
-    inputSchema: z.object({
-      annotations: z
-        .array(z.record(z.string(), z.any()))
-        .min(1)
-        .describe("Partial annotation objects. Each needs: id, type."),
-    }),
   },
+  z.object({
+    annotations: z
+      .array(z.record(z.string(), z.any()))
+      .min(1)
+      .describe("Partial annotation objects. Each needs: id, type."),
+  }),
   async ({ annotations }) =>
     runCommand(
       {
@@ -5410,15 +5406,15 @@ app.registerTool(
     ),
 );
 
-app.registerTool(
+registerViewerTool(
   "remove_annotations",
   {
     title: "Remove Annotations",
     description: "Delete annotations by id",
-    inputSchema: z.object({
-      ids: z.array(z.string()).min(1).describe("Annotation IDs to remove"),
-    }),
   },
+  z.object({
+    ids: z.array(z.string()).min(1).describe("Annotation IDs to remove"),
+  }),
   async ({ ids }) =>
     runCommand(
       { type: "remove_annotations", ids },
@@ -5426,24 +5422,24 @@ app.registerTool(
     ),
 );
 
-app.registerTool(
+registerViewerTool(
   "highlight_text",
   {
     title: "Highlight Text",
     description:
       "Auto-locate text and add a highlight annotation. Searches the document (or a specific page) and highlights the first match.",
-    inputSchema: z.object({
-      query: z.string().describe("Text to locate and highlight"),
-      page: z
-        .number()
-        .int()
-        .min(1)
-        .optional()
-        .describe("Restrict search to this page"),
-      color: z.string().optional().describe("Highlight color (CSS color)"),
-      content: z.string().optional().describe("Tooltip/note content"),
-    }),
   },
+  z.object({
+    query: z.string().describe("Text to locate and highlight"),
+    page: z
+      .number()
+      .int()
+      .min(1)
+      .optional()
+      .describe("Restrict search to this page"),
+    color: z.string().optional().describe("Highlight color (CSS color)"),
+    content: z.string().optional().describe("Tooltip/note content"),
+  }),
   async ({ query, page, color, content }) => {
     const id = `ht_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
     return runCommand(
@@ -5453,20 +5449,20 @@ app.registerTool(
   },
 );
 
-app.registerTool(
+registerViewerTool(
   "fill_form",
   {
     title: "Fill Form",
     description: "Fill PDF form fields by name",
-    inputSchema: z.object({
-      fields: z
-        .array(FormFieldSchema)
-        .min(1)
-        .describe(
-          "Form fields: { name, value } where value is string or boolean",
-        ),
-    }),
   },
+  z.object({
+    fields: z
+      .array(FormFieldSchema)
+      .min(1)
+      .describe(
+        "Form fields: { name, value } where value is string or boolean",
+      ),
+  }),
   async ({ fields }) =>
     runCommand(
       { type: "fill_form", fields },
@@ -5474,94 +5470,53 @@ app.registerTool(
     ),
 );
 
-app.registerTool(
+registerViewerTool(
   "get_text",
   {
     title: "Get Text",
     description:
-      "Extract text from one or more pages. Returns one text block per page.",
-    inputSchema: z.object({
-      page: z
-        .number()
-        .int()
-        .min(1)
-        .optional()
-        .describe("Single page (shorthand for intervals: [{start:N, end:N}])"),
-      intervals: z
-        .array(PageIntervalSchema)
-        .optional()
-        .describe(
-          "Page ranges. Each has optional start/end. [{start:1,end:5}], [{}] = all pages. Max 20 pages.",
-        ),
-    }),
+      "Extract text from one or more pages. Returns the text of each page in `pages`.",
   },
+  z.object({
+    page: z
+      .number()
+      .int()
+      .min(1)
+      .optional()
+      .describe("Single page (shorthand for intervals: [{start:N, end:N}])"),
+    intervals: z
+      .array(PageIntervalSchema)
+      .optional()
+      .describe(
+        "Page ranges. Each has optional start/end. [{start:1,end:5}], [{}] = all pages. Max 20 pages.",
+      ),
+  }),
   async ({ page, intervals }) => {
-    if (!pdfDocument) {
-      return {
-        content: [{ type: "text" as const, text: "Error: No document loaded" }],
-        isError: true,
-      };
-    }
+    assertDocumentLoaded();
     const resolved = intervals ?? (page ? [{ start: page, end: page }] : [{}]);
-    const data = await collectPageData(resolved, true, false);
-    const parts = data
-      .filter((e) => e.text != null)
-      .map((e) => ({
-        type: "text" as const,
-        text: `--- Page ${e.page} ---\n${e.text}`,
-      }));
-    return {
-      content:
-        parts.length > 0
-          ? parts
-          : [{ type: "text" as const, text: "No text content returned" }],
-      structuredContent: { pages: data },
-    };
+    return { pages: await collectPageData(resolved, true, false) };
   },
 );
 
-app.registerTool(
+registerViewerTool(
   "get_screenshot",
   {
     title: "Get Screenshot",
-    description: "Render a page to a JPEG image for visual analysis",
-    inputSchema: z.object({
-      page: z.number().int().min(1).describe("Page number to render"),
-    }),
+    description:
+      "Render a page to a JPEG image for visual analysis. Returns the base64-encoded image in `data`.",
   },
+  z.object({
+    page: z.number().int().min(1).describe("Page number to render"),
+  }),
   async ({ page }) => {
-    if (!pdfDocument) {
-      return {
-        content: [{ type: "text" as const, text: "Error: No document loaded" }],
-        isError: true,
-      };
-    }
-    const data = await collectPageData(
+    assertDocumentLoaded();
+    const [entry] = await collectPageData(
       [{ start: page, end: page }],
       false,
       true,
     );
-    const entry = data[0];
-    if (entry?.image) {
-      return {
-        content: [
-          {
-            type: "image" as const,
-            data: entry.image,
-            mimeType: "image/jpeg",
-          },
-        ],
-      };
-    }
-    return {
-      content: [
-        {
-          type: "text" as const,
-          text: `Error: screenshot failed for page ${page}`,
-        },
-      ],
-      isError: true,
-    };
+    if (!entry?.image) throw new Error(`Screenshot failed for page ${page}`);
+    return { page, mimeType: "image/jpeg", data: entry.image };
   },
 );
 
diff --git a/examples/pdf-server/tsconfig.json b/examples/pdf-server/tsconfig.json
index 2fe7e6271..51d53d3b7 100644
--- a/examples/pdf-server/tsconfig.json
+++ b/examples/pdf-server/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "types": ["node", "vite/client", "bun"],
+    "types": ["node", "vite/client", "bun", "webmcp-types"],
     "target": "ESNext",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
diff --git a/examples/threejs-server/src/mcp-app-wrapper.tsx b/examples/threejs-server/src/mcp-app-wrapper.tsx
index 44fee0c67..85279e45d 100644
--- a/examples/threejs-server/src/mcp-app-wrapper.tsx
+++ b/examples/threejs-server/src/mcp-app-wrapper.tsx
@@ -175,7 +175,7 @@ function McpAppWrapper() {
 
   const { app, error } = useApp({
     appInfo: { name: "Three.js View", version: "1.0.0" },
-    capabilities: { tools: {} },
+    capabilities: {},
     onAppCreated: (app) => {
       appRef.current = app;
 
diff --git a/package-lock.json b/package-lock.json
index bfddf50aa..57bc91d8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -441,7 +441,8 @@
         "cross-env": "^10.1.0",
         "typescript": "^5.9.3",
         "vite": "^6.0.0",
-        "vite-plugin-singlefile": "^2.3.0"
+        "vite-plugin-singlefile": "^2.3.0",
+        "webmcp-types": "0.1.10"
       },
       "engines": {
         "node": ">=20"
@@ -588,7 +589,8 @@
         "express": "^5.1.0",
         "typescript": "^5.9.3",
         "vite": "^6.0.0",
-        "vite-plugin-singlefile": "^2.3.0"
+        "vite-plugin-singlefile": "^2.3.0",
+        "webmcp-types": "0.1.10"
       },
       "engines": {
         "node": ">=20"
@@ -730,7 +732,8 @@
         "cross-env": "^10.1.0",
         "typescript": "^5.9.3",
         "vite": "^6.0.0",
-        "vite-plugin-singlefile": "^2.3.0"
+        "vite-plugin-singlefile": "^2.3.0",
+        "webmcp-types": "0.1.10"
       },
       "engines": {
         "node": ">=20"
@@ -780,7 +783,8 @@
         "cross-env": "^10.1.0",
         "typescript": "^5.9.3",
         "vite": "^6.0.0",
-        "vite-plugin-singlefile": "^2.3.0"
+        "vite-plugin-singlefile": "^2.3.0",
+        "webmcp-types": "0.1.10"
       },
       "engines": {
         "node": ">=20"
@@ -9786,6 +9790,13 @@
         }
       }
     },
+    "node_modules/webmcp-types": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/webmcp-types/-/webmcp-types-0.1.10.tgz",
+      "integrity": "sha512-U4GQ1RpJ0tqCUt2ALMV9Pnhi+hsy8L31f/Q1v4mLVhW64r5sYhh+2+SjP/Lq4/9jP33vZgNkuRZARJl65A/ZIg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/whatwg-encoding": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
diff --git a/package.json b/package.json
index 9f802896e..d0e72b3c4 100644
--- a/package.json
+++ b/package.json
@@ -58,8 +58,8 @@
     "test:e2e": "playwright test",
     "test:e2e:update": "playwright test --update-snapshots",
     "test:e2e:ui": "playwright test --ui",
-    "test:e2e:docker": "docker run --rm -e EXAMPLE -v $(pwd):/work -w /work -it mcr.microsoft.com/playwright:v1.57.0-noble sh -c 'apt-get update -qq && apt-get install -qq -y python3-venv curl > /dev/null && curl -LsSf https://astral.sh/uv/install.sh | sh && export PATH=\"$HOME/.local/bin:$PATH\" && npm i -g bun && npm ci && npx playwright test'",
-    "test:e2e:docker:update": "npm run build:all && docker run --rm -e EXAMPLE -v $(pwd):/work -w /work -it mcr.microsoft.com/playwright:v1.57.0-noble sh -c 'apt-get update -qq && apt-get install -qq -y python3-venv curl > /dev/null && curl -LsSf https://astral.sh/uv/install.sh | sh && export PATH=\"$HOME/.local/bin:$PATH\" && npm i -g bun && npm ci && npx playwright test --update-snapshots'",
+    "test:e2e:docker": "scripts/e2e-docker.sh",
+    "test:e2e:docker:update": "npm run build:all && scripts/e2e-docker.sh --update-snapshots",
     "preexamples:build": "npm run build",
     "examples:build": "bun examples/run-all.ts build",
     "examples:start": "NODE_ENV=development npm run build && bun examples/run-all.ts start",
@@ -68,7 +68,7 @@
     "prepare": "npm run build && husky",
     "docs": "typedoc",
     "docs:watch": "typedoc --watch",
-    "generate:screenshots": "npm run build:all && docker run --rm -e EXAMPLE -e GENERATE_SCREENSHOTS=1 -v $(pwd):/work -w /work mcr.microsoft.com/playwright:v1.57.0-noble sh -c 'apt-get update -qq && apt-get install -qq -y python3-venv curl > /dev/null && curl -LsSf https://astral.sh/uv/install.sh | sh && export PATH=\"$HOME/.local/bin:$PATH\" && npm i -g bun && npm ci && npx playwright test tests/e2e/generate-grid-screenshots.spec.ts'",
+    "generate:screenshots": "npm run build:all && GENERATE_SCREENSHOTS=1 scripts/e2e-docker.sh tests/e2e/generate-grid-screenshots.spec.ts",
     "prettier": "prettier -u \"**/*.{js,jsx,ts,tsx,mjs,json,md,yml,yaml}\" --check",
     "prettier:fix": "prettier -u \"**/*.{js,jsx,ts,tsx,mjs,json,md,yml,yaml}\" --write",
     "check:versions": "node scripts/check-versions.mjs",
diff --git a/scripts/e2e-docker.sh b/scripts/e2e-docker.sh
new file mode 100755
index 000000000..31b116d4a
--- /dev/null
+++ b/scripts/e2e-docker.sh
@@ -0,0 +1,33 @@
+#!/bin/sh
+# Runs the Playwright e2e suite in the same image CI uses (screenshots are only
+# comparable on Linux). Extra arguments are passed to `playwright test`, e.g.
+#   scripts/e2e-docker.sh --update-snapshots
+#   GENERATE_SCREENSHOTS=1 scripts/e2e-docker.sh tests/e2e/generate-grid-screenshots.spec.ts
+#
+# The repo is bind-mounted so snapshots and screenshots are written back to the
+# host, but every node_modules directory is shadowed by an anonymous volume: the
+# container's `npm ci` installs Linux binaries and would otherwise replace the
+# host's node_modules with them.
+set -eu
+cd "$(dirname "$0")/.."
+
+mounts="-v /work/node_modules"
+for dir in examples/*/; do
+  mounts="$mounts -v /work/${dir}node_modules"
+done
+
+# `-t` needs a terminal; without one (CI, agents) docker refuses to start.
+tty=""
+if [ -t 0 ] && [ -t 1 ]; then tty="-it"; fi
+
+# shellcheck disable=SC2086 # word splitting of $tty and $mounts is intended
+exec docker run --rm $tty -e EXAMPLE -e GENERATE_SCREENSHOTS \
+  -v "$PWD:/work" $mounts -w /work \
+  mcr.microsoft.com/playwright:v1.57.0-noble \
+  sh -c 'apt-get update -qq &&
+    apt-get install -qq -y python3-venv curl > /dev/null &&
+    curl -LsSf https://astral.sh/uv/install.sh | sh &&
+    export PATH="$HOME/.local/bin:$PATH" &&
+    npm i -g bun &&
+    npm ci &&
+    npx playwright test "$@"' sh "$@"
diff --git a/specification/draft/apps.mdx b/specification/draft/apps.mdx
index f2523f25e..c1e09f121 100644
--- a/specification/draft/apps.mdx
+++ b/specification/draft/apps.mdx
@@ -501,9 +501,10 @@ If the Host is a web page, it MUST wrap the View and communicate with it through
    - Block dangerous features (`object-src 'none'`)
    - Apply restrictive defaults if no CSP metadata is provided
    - If `permissions` is declared, the Sandbox MAY set the inner iframe's `allow` attribute accordingly
-6. The Sandbox MUST forward messages sent by the Host to the View, and vice versa, for any method that doesn't start with `ui/notifications/sandbox-`. This includes lifecycle messages, e.g., `ui/initialize` request & `ui/notifications/initialized` notification both sent by the View. The Host MUST NOT send any request or notification to the View before it receives an `initialized` notification.
+6. The Sandbox MUST forward messages sent by the Host to the View, and vice versa, for any method that doesn't start with `ui/notifications/sandbox-` or `ui/sandbox-`. This includes lifecycle messages, e.g., `ui/initialize` request & `ui/notifications/initialized` notification both sent by the View. The Host MUST NOT send any request or notification to the View before it receives an `initialized` notification.
 7. The Sandbox SHOULD NOT create/send any requests to the Host or to the View (this would require synthesizing new request ids).
 8. The Host MAY forward any message from the View (coming via the Sandbox) to the MCP Apps server, for any method that doesn't start with `ui/`. While the Host SHOULD ensure the View's MCP connection is spec-compliant, it MAY decide to block some messages or subject them to further user approval.
+9. The Sandbox SHOULD serve the reserved `ui/sandbox-list-tools` and `ui/sandbox-call-tool` requests and send the `ui/notifications/sandbox-tools-changed` notification itself, from the View's WebMCP tools (see [Reserved Messages](#reserved-messages-sandbox-proxy) and [App-Registered Tools and WebMCP](#app-registered-tools-and-webmcp)). It MUST NOT forward these messages to the View.
 
 ### Standard MCP Messages
 
@@ -511,19 +512,21 @@ UI iframes can use the following subset of standard MCP protocol messages.
 
 Note that `tools/call` and `tools/list` flow **bidirectionally**:
 - **App → Host → Server**: Apps call server tools (requires host `serverTools` capability)
-- **Host → App**: Host calls app-registered tools (requires app `tools` capability)
+- **Host → App** (**Deprecated**): Host calls app-registered tools (requires app `tools` capability)
+
+> **Deprecated:** The Host → App and App → Host directions below (app-registered tools handled by the View) are deprecated in favor of [WebMCP](https://webmachinelearning.github.io/webmcp/). Tools a View registers with WebMCP are reached through [reserved Sandbox messages](#reserved-messages-sandbox-proxy) instead. See [App-Registered Tools and WebMCP](#app-registered-tools-and-webmcp).
 
 **Tools:**
 
 - `tools/call` - Execute a tool (bidirectional)
   - **App → Host**: Call server tool via host proxy
-  - **Host → App**: Call app-registered tool
+  - **Host → App** (Deprecated): Call app-registered tool
 - `tools/list` - List available tools (bidirectional)
   - **App → Host**: List server tools
-  - **Host → App**: List app-registered tools
+  - **Host → App** (Deprecated): List app-registered tools
 - `notifications/tools/list_changed` - Notify when tool list changes (bidirectional)
   - **Server → Host → App**: Server tools changed
-  - **App → Host**: App-registered tools changed
+  - **App → Host** (Deprecated): App-registered tools changed
 
 **Resources:**
 
@@ -550,7 +553,11 @@ When the View sends an `ui/initialize` request to the Host, it MUST include its
 interface McpUiAppCapabilities {
   /** Experimental features keyed by identifier. */
   experimental?: Record<string, object>;
-  /** App exposes MCP-style tools that the host can call. */
+  /**
+   * App exposes MCP-style tools that the host can call.
+   * @deprecated Register tools with WebMCP (`document.modelContext.registerTool()`)
+   * instead. See "App-Registered Tools and WebMCP".
+   */
   tools?: {
     /** App supports tools/list_changed notifications. */
     listChanged?: boolean;
@@ -1236,8 +1243,70 @@ Host behavior:
 - If multiple updates are received before the next user message, Host SHOULD only send the last update to the model
 - MAY display context updates to the user
 
+#### App-Registered Tools and WebMCP
+
+> **Deprecated:** App-registered tools (the `tools` app capability, Host → App `tools/list` and `tools/call` handled by the View, and App → Host `notifications/tools/list_changed`) are deprecated in favor of [WebMCP](https://webmachinelearning.github.io/webmcp/); see [ext-apps#797](https://github.com/modelcontextprotocol/ext-apps/issues/797). The legacy messages are unchanged, so Views that still use them keep working, but they MAY be removed in a future revision of this specification.
+
+**Views:**
+
+- Views SHOULD expose tools to the Host with `document.modelContext.registerTool()` and SHOULD NOT declare the `tools` app capability.
+- Views SHOULD feature-detect `document.modelContext`, which is provided by the Host (see below), not by the View.
+- Views SHOULD return plain data from `execute()`; it is relayed to the Host as `structuredContent` (see the mapping below).
+
+```typescript
+const controller = new AbortController();
+document.modelContext.registerTool(
+  {
+    name: "tictactoe_move",
+    description: "Make a move in the tic-tac-toe game",
+    inputSchema: { type: "object", properties: { position: { type: "number" } } },
+    annotations: { readOnlyHint: false },
+    async execute({ position }) {
+      return { board: makeMove(position) };
+    },
+  },
+  { signal: controller.signal }, // abort the signal to unregister
+);
+```
+
+> Non-normative: the SDK's deprecated `app.registerTool()` is a thin wrapper over `document.modelContext.registerTool()`.
+
+**Providing `document.modelContext`.** A View cannot polyfill WebMCP on its own: a registry that only the View can see is of no use to the Host. A Host that wants to surface View tools therefore provides `document.modelContext` to the View:
+
+- If the browser implements WebMCP, the native implementation is used (it wins over any polyfill). The Host MUST delegate the `tools` Permissions Policy feature to the nested frames (e.g. `allow="tools"` on the Sandbox iframe, which sets it on the inner View iframe), otherwise native registration is rejected.
+- Otherwise the Host SHOULD inject a polyfill into the View HTML it passes to the Sandbox in `ui/notifications/sandbox-resource-ready`, before the View's own scripts.
+
+**Reserved Sandbox messages.** The Sandbox proxy is the only party that shares an origin with the View: the Host and Sandbox MUST have different origins (see [Sandbox proxy](#sandbox-proxy)), so the Host page cannot reach into the View's document. The Host therefore reads View tools through three [reserved messages](#reserved-messages-sandbox-proxy): the requests `ui/sandbox-list-tools` and `ui/sandbox-call-tool` (Host → Sandbox) and the notification `ui/notifications/sandbox-tools-changed` (Sandbox → Host). They are not `tools/list` and `tools/call`.
+
+- The Sandbox SHOULD answer them from the `document.modelContext` of the View's own frame, using WebMCP's consumer API (`getTools()`, `executeTool()` and the `toolchange` event), and send the notification when `toolchange` fires. It MUST NOT forward them to the View.
+- The Sandbox MUST only expose tools registered in the View's own frame (WebMCP's native `getTools()` also returns tools of other frames).
+- A Sandbox that cannot access the View's document (for instance, an inner iframe whose `sandbox` attribute omits `allow-same-origin`) cannot serve them. If it forwards them instead, the View, which does not implement them, answers with a method-not-found error.
+- `tools/list` and `tools/call` are untouched: they still flow Host → Sandbox → View, where a View that declares the `tools` app capability answers them itself. A Host SHOULD NOT conclude that a View has no tools from the absence of that capability.
+- A Host that embeds the View without a Sandbox proxy MAY access `document.modelContext` directly and apply the same mapping.
+
+**Mapping.** WebMCP tools and results map to MCP as follows:
+
+| WebMCP | MCP |
+|--------|-----|
+| `name`, `description` | `Tool.name`, `Tool.description` |
+| `title` | `Tool.title`, only if non-empty |
+| `inputSchema` | `Tool.inputSchema`, which MUST have `type: "object"`: a schema without it is completed, and an absent schema becomes `{ "type": "object", "properties": {} }` |
+| `annotations.readOnlyHint` | `Tool.annotations.readOnlyHint` (no other annotation maps) |
+| *(none)* | `Tool.outputSchema` is omitted, as WebMCP has none |
+| `execute()` returns an object `v` | `CallToolResult` `{ content: [], structuredContent: v }` |
+| `execute()` returns a non-object value `v` (including `null` and arrays) | `{ content: [], structuredContent: { "result": v } }` |
+| `execute()` returns nothing | `{ content: [], structuredContent: { "result": null } }` |
+| `execute()` throws or rejects | `{ content: [{ type: "text", text: <error message> }], isError: true }` (a native implementation may only expose a generic message) |
+| `ui/sandbox-call-tool` names an unknown tool | JSON-RPC error `-32602` |
+
+Tool descriptors from the View that are malformed (for example, an invalid name or a non-string description) are omitted from the list.
+
+> Non-normative: in the SDK, `AppBridge.listWebMcpTools()` and `callWebMcpTool()` send the reserved requests, while the deprecated `listTools()` and `callTool()` keep sending `tools/list` and `tools/call`.
+
 #### Requests (Host → App)
 
+> **Deprecated:** The requests below, handled by the View itself, are deprecated. New Views SHOULD use WebMCP, whose tools the Host reaches through reserved Sandbox messages instead (see [App-Registered Tools and WebMCP](#app-registered-tools-and-webmcp)).
+
 When Apps declare the `tools` capability, the Host can send standard MCP tool requests to the App:
 
 `tools/call` - Execute an App-registered tool
@@ -1278,9 +1347,9 @@ When Apps declare the `tools` capability, the Host can send standard MCP tool re
 ```
 
 **App Behavior:**
-- Apps MUST implement `oncalltool` handler if they declare `tools` capability
+- Apps MUST implement `oncalltool` handler if they declare `tools` capability (deprecated; prefer WebMCP)
 - Apps SHOULD validate tool names and arguments
-- Apps MAY use `app.registerTool()` SDK helper for automatic validation
+- Apps MAY use the deprecated `app.registerTool()` SDK helper for automatic validation
 - Apps SHOULD return `isError: true` for tool execution failures
 
 `tools/list` - List App-registered tools
@@ -1321,7 +1390,7 @@ interface Tool {
 ```
 
 **App Behavior:**
-- Apps MUST implement `onlisttools` handler if they declare `tools` capability
+- Apps MUST implement `onlisttools` handler if they declare `tools` capability (deprecated; prefer WebMCP)
 - Apps SHOULD return complete tool metadata including schemas
 - Apps MAY filter tools based on context or permissions
 
@@ -1511,6 +1580,68 @@ These messages are reserved for web-based hosts that implement the recommended d
 
 These messages facilitate the communication between the outer sandbox proxy iframe and the host, enabling secure loading of untrusted HTML content. The `permissions` field maps to the inner iframe's `allow` attribute for Permission Policy features.
 
+`ui/sandbox-list-tools` (Host → Sandbox Proxy) - List the tools the View exposes through WebMCP
+
+```typescript
+// Request
+{
+  jsonrpc: "2.0",
+  id: 1,
+  method: "ui/sandbox-list-tools",
+  params: {
+    cursor?: string  // Optional pagination cursor
+  }
+}
+
+// Response: MCP ListToolsResult
+{
+  jsonrpc: "2.0",
+  id: 1,
+  result: {
+    tools: Array<Tool>,  // See the mapping in "App-Registered Tools and WebMCP"
+    nextCursor?: string
+  }
+}
+```
+
+`ui/sandbox-call-tool` (Host → Sandbox Proxy) - Call a tool the View exposes through WebMCP
+
+```typescript
+// Request
+{
+  jsonrpc: "2.0",
+  id: 2,
+  method: "ui/sandbox-call-tool",
+  params: {
+    name: string,        // Name of the tool to execute
+    arguments?: object   // Tool arguments
+  }
+}
+
+// Response: MCP CallToolResult
+{
+  jsonrpc: "2.0",
+  id: 2,
+  result: {
+    content: Array<ContentBlock>,
+    structuredContent?: object,
+    isError?: boolean
+  }
+}
+```
+
+`ui/notifications/sandbox-tools-changed` (Sandbox Proxy → Host) - The View's WebMCP tool list changed
+
+```typescript
+{
+  jsonrpc: "2.0",
+  method: "ui/notifications/sandbox-tools-changed",
+  params: {}
+}
+```
+
+The Sandbox proxy answers and sends these three messages itself, from the View's WebMCP tools, and MUST NOT forward them to the View. They are distinct from the standard `tools/list`, `tools/call` and `notifications/tools/list_changed`, which are forwarded to and from the View as usual. See [App-Registered Tools and WebMCP](#app-registered-tools-and-webmcp) for how WebMCP tools and results map to these messages.
+
 ### Lifecycle
 
 The typical lifecycle for rendering a UI resource:
@@ -1564,7 +1695,7 @@ sequenceDiagram
   end
 ```
 
-Note: when the View is rendered inside a sandbox, the sandbox transparently passes messages between the View and the Host, except for messages named `ui/notifications/sandbox-*`.
+Note: when the View is rendered inside a sandbox, the sandbox transparently passes messages between the View and the Host, except for messages named `ui/notifications/sandbox-*` or `ui/sandbox-*`.
 
 #### 3. Interactive Phase
 
@@ -1738,6 +1869,8 @@ Note: Tools with `visibility: ["app"]` are hidden from the agent but remain call
 
 ### App-Provided Tools
 
+> **Note:** Tools a View exposes now use [WebMCP](https://webmachinelearning.github.io/webmcp/) (`document.modelContext`). The legacy mechanism (`tools` app capability, `app.registerTool()`, View-handled `tools/list` and `tools/call`) is deprecated and described under [Legacy: View-Handled Tools](#legacy-view-handled-tools-deprecated). See [App-Registered Tools and WebMCP](#app-registered-tools-and-webmcp).
+
 Apps can register their own tools that hosts and agents can call, making apps **introspectable and accessible** to the model. This complements the existing capability where apps call server tools (via host proxy).
 
 #### Motivation: Semantic Introspection
@@ -1747,7 +1880,7 @@ Without tool registration, apps are opaque to the model:
 - The model therefore cannot query app state or discover what operations the app supports
 
 With tool registration, apps expose a semantic interface:
-- The model discovers available operations via `tools/list`
+- The model discovers available operations via the Host's tool listing (`ui/sandbox-list-tools`)
 - The model queries app state via tools (e.g., `get_board_state`)
 - The model executes actions via tools (e.g., `make_move`)
 - Apps return structured data rather than relying on the host to interpret rendered output
@@ -1756,7 +1889,229 @@ This is *pull*-based and complements the *push*-based [`ui/update-model-context`
 
 #### App Tool Registration
 
-Apps register tools using the SDK's `registerTool()` method:
+Views register tools with [WebMCP](https://webmachinelearning.github.io/webmcp/); the Host reaches them through the Sandbox proxy (see [App-Registered Tools and WebMCP](#app-registered-tools-and-webmcp)):
+
+```typescript
+const { signal } = new AbortController();
+
+document.modelContext.registerTool(
+  {
+    name: "tictactoe_move",
+    description: "Make a move in the tic-tac-toe game",
+    inputSchema: {
+      type: "object",
+      properties: {
+        position: { type: "number", minimum: 0, maximum: 8 },
+        player: { type: "string", enum: ["X", "O"] },
+      },
+      required: ["position", "player"],
+    },
+    annotations: { readOnlyHint: false }, // This tool has side effects
+    async execute({ position, player }) {
+      const board = makeMove(position, player);
+      return { board, winner: checkWinner(board) }; // plain data, relayed as structuredContent
+    },
+  },
+  { signal },
+);
+```
+
+WebMCP tools have no `outputSchema` and Views return plain data from `execute()`. Views SHOULD validate the arguments they receive.
+
+#### Tool Lifecycle
+
+A tool is available while the View's document is loaded and the tool's registration signal has not been aborted. Aborting the signal unregisters the tool, and to change a tool's description or schema the View unregisters it and registers it again. Whenever the View's tool list changes, WebMCP fires `toolchange` and the Sandbox sends `ui/notifications/sandbox-tools-changed` to the Host.
+
+#### Complete Example: Introspectable Tic-Tac-Toe
+
+This example demonstrates how apps expose semantic interfaces through tools:
+
+```typescript
+// Game state
+let board: Array<"X" | "O" | null> = Array(9).fill(null);
+let currentPlayer: "X" | "O" = "X";
+let moveHistory: number[] = [];
+
+const { signal } = new AbortController();
+
+// Agent can query semantic state directly
+document.modelContext.registerTool(
+  {
+    name: "get_board_state",
+    description: "Get current game state including board, current player, and winner",
+    annotations: { readOnlyHint: true },
+    async execute() {
+      return { board, currentPlayer, winner: checkWinner(board), moveHistory };
+    },
+  },
+  { signal },
+);
+
+// Agent can execute moves
+document.modelContext.registerTool(
+  {
+    name: "make_move",
+    description: "Place a piece at the specified position",
+    inputSchema: {
+      type: "object",
+      properties: { position: { type: "number", minimum: 0, maximum: 8 } },
+      required: ["position"],
+    },
+    annotations: { readOnlyHint: false },
+    async execute({ position }) {
+      if (board[position] !== null) {
+        throw new Error("Position already taken"); // becomes isError: true
+      }
+
+      board[position] = currentPlayer;
+      moveHistory.push(position);
+      const winner = checkWinner(board);
+      currentPlayer = currentPlayer === "X" ? "O" : "X";
+
+      return { board, currentPlayer, winner, moveHistory };
+    },
+  },
+  { signal },
+);
+
+// Agent can reset game
+document.modelContext.registerTool(
+  {
+    name: "reset_game",
+    description: "Reset the game board to initial state",
+    annotations: { readOnlyHint: false },
+    async execute() {
+      board = Array(9).fill(null);
+      currentPlayer = "X";
+      moveHistory = [];
+      return { board, currentPlayer, moveHistory };
+    },
+  },
+  { signal },
+);
+
+function checkWinner(board: Array<"X" | "O" | null>): "X" | "O" | "draw" | null {
+  const lines = [
+    [0, 1, 2], [3, 4, 5], [6, 7, 8],  // rows
+    [0, 3, 6], [1, 4, 7], [2, 5, 8],  // columns
+    [0, 4, 8], [2, 4, 6]              // diagonals
+  ];
+
+  for (const [a, b, c] of lines) {
+    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
+      return board[a];
+    }
+  }
+
+  return board.every(cell => cell !== null) ? "draw" : null;
+}
+```
+
+**Agent Interaction** (Host side, using the SDK; these calls send `ui/sandbox-list-tools` and `ui/sandbox-call-tool`):
+
+```typescript
+// 1. Discover available operations
+const { tools } = await bridge.listWebMcpTools();
+// → ["get_board_state", "make_move", "reset_game"]
+
+// 2. Query semantic state (not visual/DOM)
+const state = await bridge.callWebMcpTool({
+  name: "get_board_state",
+  arguments: {}
+});
+// → structuredContent: { board: [null, null, null, ...], currentPlayer: 'X', winner: null, moveHistory: [] }
+
+// 3. Execute actions based on semantic understanding
+if (state.structuredContent.board[4] === null) {
+  await bridge.callWebMcpTool({
+    name: "make_move",
+    arguments: { position: 4 }
+  });
+}
+
+// 4. Query updated state
+const newState = await bridge.callWebMcpTool({
+  name: "get_board_state",
+  arguments: {}
+});
+// → structuredContent: { board: [null, null, null, null, 'X', null, ...], currentPlayer: 'O', ... }
+```
+
+The agent interacts with the app through semantic operations rather than visual interpretation.
+
+#### Tool Flow Directions
+
+**Existing Flow (unchanged): App → Host → Server**
+
+Apps call server tools (proxied by host):
+
+```typescript
+// App calls server tool
+const result = await app.callServerTool("get_weather", { location: "NYC" });
+```
+
+Requires host `serverTools` capability.
+
+**New Flow: Host/Agent → App**
+
+Host/Agent calls tools the View registered with WebMCP:
+
+```typescript
+// Host calls app tool (sends ui/sandbox-call-tool to the Sandbox)
+const result = await bridge.callWebMcpTool({
+  name: "tictactoe_move",
+  arguments: { position: 4 }
+});
+```
+
+Does not require the app `tools` capability. Requires a Sandbox proxy that serves the [reserved tool messages](#reserved-messages-sandbox-proxy).
+
+**Key Distinction:**
+
+| Aspect | Server Tools | App Tools |
+|--------|-------------|-----------|
+| **Lifetime** | Persistent (server process) | Ephemeral (while app loaded) |
+| **Source** | MCP Server | App JavaScript |
+| **Trust** | Trusted | Sandboxed (untrusted) |
+| **Discovery** | Server `tools/list` | `ui/sandbox-list-tools` (from the View's `document.modelContext`) |
+| **When Available** | Always | Only while app is loaded |
+
+#### Use Cases
+
+**Introspection:** Agent queries app state semantically — the app's DOM is not exposed to the host or model
+
+**Voice mode:** Agent drives app interactions programmatically based on voice commands
+
+**Accessibility:** Structured state and operations more accessible than visual rendering
+
+**Complex workflows:** Agent discovers available operations and coordinates multi-step interactions
+
+**Stateful apps:** Apps expose operations (move, reset, query) rather than pushing state updates via messages
+
+#### Security Implications
+
+App tools run in **sandboxed iframes** (untrusted). See Security Implications section for detailed mitigations.
+
+Key considerations:
+- App tools could provide misleading descriptions
+- Tool namespacing needed to avoid conflicts with server tools
+- Resource limits (max tools, execution timeouts)
+- Audit trail for app tool invocations
+- User confirmation for tools with side effects
+
+#### Relation to WebMCP
+
+This feature was inspired by [WebMCP](https://webmachinelearning.github.io/webmcp/), which lets web pages register JavaScript functions as tools via `document.modelContext.registerTool()`. Views now expose tools with WebMCP itself, and the parallel app-registered mechanism is deprecated; see [App-Registered Tools and WebMCP](#app-registered-tools-and-webmcp).
+
+See [ext-apps#35](https://github.com/modelcontextprotocol/ext-apps/issues/35) for discussion.
+
+#### Legacy: View-Handled Tools (Deprecated)
+
+> **Deprecated:** Everything in this subsection describes the legacy mechanism: the `tools` app capability, `app.registerTool()`, and `oncalltool`/`onlisttools` handlers that answer the standard `tools/list` and `tools/call` requests from the View. Use [WebMCP](#app-registered-tools-and-webmcp) instead. It is kept for Views built with older SDKs.
+
+##### SDK Registration
+
+Older SDKs let apps register tools with the SDK's `registerTool()` method, declaring the legacy `tools` capability:
 
 ```typescript
 import { App } from '@modelcontextprotocol/ext-apps';
@@ -1764,7 +2119,7 @@ import { z } from 'zod';
 
 const app = new App(
   { name: "TicTacToe", version: "1.0.0" },
-  { tools: { listChanged: true } }  // Declare tool capability
+  { tools: { listChanged: true } }  // Declare the legacy tool capability
 );
 
 // Register a tool with schema validation
@@ -1858,9 +2213,9 @@ app.onlisttools = async () => {
 };
 ```
 
-#### Tool Lifecycle
+##### Legacy Tool Lifecycle
 
-Registered tools support dynamic lifecycle management:
+Tools registered with `app.registerTool()` support dynamic lifecycle management:
 
 **Enable/Disable:**
 
@@ -1874,7 +2229,7 @@ tool.disable();
 tool.enable();
 ```
 
-When a tool is disabled/enabled, the app automatically sends `notifications/tools/list_changed` (if the app declared `listChanged: true` capability).
+When a tool is disabled/enabled, the app sends `notifications/tools/list_changed` (if the app declared the `listChanged: true` capability).
 
 **Update:**
 
@@ -1895,13 +2250,13 @@ Updates also trigger `notifications/tools/list_changed`.
 tool.remove();
 ```
 
-#### Long-Running App Tools
+##### Long-Running App Tools
 
-App tools are bounded by the app's render lifecycle. For work that may outlive a single render, app `tools/call` MAY be task-augmented per [core MCP Tasks](https://modelcontextprotocol.io/specification/2025-11-25/basic/utilities/tasks); hosts proxy the `tasks/*` methods to the app exactly as they proxy `tools/call`. Because the iframe can be torn down at any time, apps SHOULD delegate long-lived work to the server (via `callServerTool()`) and return the server's task handle, so the host can continue polling the server after teardown.
+This applies to View-handled `tools/call` only; `ui/sandbox-call-tool` defines no task augmentation. App tools are bounded by the app's render lifecycle. For work that may outlive a single render, app `tools/call` MAY be task-augmented per [core MCP Tasks](https://modelcontextprotocol.io/specification/2025-11-25/basic/utilities/tasks); hosts proxy the `tasks/*` methods to the app exactly as they proxy `tools/call`. Because the iframe can be torn down at any time, apps SHOULD delegate long-lived work to the server (via `callServerTool()`) and return the server's task handle, so the host can continue polling the server after teardown.
 
-#### Schema Validation
+##### Schema Validation
 
-The SDK validates input and output against any [Standard Schema](https://standardschema.dev/)–compatible library (Zod, ArkType, Valibot, …). Examples below use Zod:
+The SDK's `app.registerTool()` validates input and output against any [Standard Schema](https://standardschema.dev/)–compatible library (Zod, ArkType, Valibot, …). Examples below use Zod:
 
 **Input Validation:**
 
@@ -1949,233 +2304,6 @@ app.registerTool(
 
 If the callback returns data that doesn't match `outputSchema`, the tool returns an error.
 
-#### Complete Example: Introspectable Tic-Tac-Toe
-
-This example demonstrates how apps expose semantic interfaces through tools:
-
-```typescript
-import { App } from '@modelcontextprotocol/ext-apps';
-import { z } from 'zod';
-
-// Game state
-let board: Array<'X' | 'O' | null> = Array(9).fill(null);
-let currentPlayer: 'X' | 'O' = 'X';
-let moveHistory: number[] = [];
-
-const app = new App(
-  { name: "TicTacToe", version: "1.0.0" },
-  { tools: { listChanged: true } }
-);
-
-// Agent can query semantic state directly
-app.registerTool(
-  "get_board_state",
-  {
-    description: "Get current game state including board, current player, and winner",
-    outputSchema: z.object({
-      board: z.array(z.enum(['X', 'O', null])).length(9),
-      currentPlayer: z.enum(['X', 'O']),
-      winner: z.enum(['X', 'O', 'draw', null]).nullable(),
-      moveHistory: z.array(z.number())
-    })
-  },
-  async () => {
-    return {
-      content: [{
-        type: "text",
-        text: `Board: ${board.map(c => c || '-').join('')}, Player: ${currentPlayer}`
-      }],
-      structuredContent: {
-        board,
-        currentPlayer,
-        winner: checkWinner(board),
-        moveHistory
-      }
-    };
-  }
-);
-
-// Agent can execute moves
-app.registerTool(
-  "make_move",
-  {
-    description: "Place a piece at the specified position",
-    inputSchema: z.object({
-      position: z.number().int().min(0).max(8)
-    }),
-    annotations: { readOnlyHint: false }
-  },
-  async ({ position }) => {
-    if (board[position] !== null) {
-      return {
-        content: [{ type: "text", text: "Position already taken" }],
-        isError: true
-      };
-    }
-
-    board[position] = currentPlayer;
-    moveHistory.push(position);
-    const winner = checkWinner(board);
-    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
-
-    return {
-      content: [{
-        type: "text",
-        text: `Player ${board[position]} moved to position ${position}` +
-              (winner ? `. ${winner} wins!` : '')
-      }],
-      structuredContent: {
-        board,
-        currentPlayer,
-        winner,
-        moveHistory
-      }
-    };
-  }
-);
-
-// Agent can reset game
-app.registerTool(
-  "reset_game",
-  {
-    description: "Reset the game board to initial state",
-    annotations: { readOnlyHint: false }
-  },
-  async () => {
-    board = Array(9).fill(null);
-    currentPlayer = 'X';
-    moveHistory = [];
-
-    return {
-      content: [{ type: "text", text: "Game reset" }],
-      structuredContent: { board, currentPlayer, moveHistory }
-    };
-  }
-);
-
-await app.connect(new PostMessageTransport(window.parent));
-
-function checkWinner(board: Array<'X' | 'O' | null>): 'X' | 'O' | 'draw' | null {
-  const lines = [
-    [0, 1, 2], [3, 4, 5], [6, 7, 8],  // rows
-    [0, 3, 6], [1, 4, 7], [2, 5, 8],  // columns
-    [0, 4, 8], [2, 4, 6]              // diagonals
-  ];
-
-  for (const [a, b, c] of lines) {
-    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
-      return board[a];
-    }
-  }
-
-  return board.every(cell => cell !== null) ? 'draw' : null;
-}
-```
-
-**Agent Interaction:**
-
-```typescript
-// 1. Discover available operations
-const { tools } = await bridge.sendListTools({});
-// → ["get_board_state", "make_move", "reset_game"]
-
-// 2. Query semantic state (not visual/DOM)
-const state = await bridge.sendCallTool({
-  name: "get_board_state",
-  arguments: {}
-});
-// → { board: [null, null, null, ...], currentPlayer: 'X', winner: null }
-
-// 3. Execute actions based on semantic understanding
-if (state.structuredContent.board[4] === null) {
-  await bridge.sendCallTool({
-    name: "make_move",
-    arguments: { position: 4 }
-  });
-}
-
-// 4. Query updated state
-const newState = await bridge.sendCallTool({
-  name: "get_board_state",
-  arguments: {}
-});
-// → { board: [null, null, null, null, 'X', null, ...], currentPlayer: 'O', ... }
-```
-
-The agent interacts with the app through semantic operations rather than visual interpretation.
-
-#### Tool Flow Directions
-
-**Existing Flow (unchanged): App → Host → Server**
-
-Apps call server tools (proxied by host):
-
-```typescript
-// App calls server tool
-const result = await app.callServerTool("get_weather", { location: "NYC" });
-```
-
-Requires host `serverTools` capability.
-
-**New Flow: Host/Agent → App**
-
-Host/Agent calls app-registered tools:
-
-```typescript
-// Host calls app tool
-const result = await bridge.sendCallTool({
-  name: "tictactoe_move",
-  arguments: { position: 4 }
-});
-```
-
-Requires app `tools` capability.
-
-**Key Distinction:**
-
-| Aspect | Server Tools | App Tools |
-|--------|-------------|-----------|
-| **Lifetime** | Persistent (server process) | Ephemeral (while app loaded) |
-| **Source** | MCP Server | App JavaScript |
-| **Trust** | Trusted | Sandboxed (untrusted) |
-| **Discovery** | Server `tools/list` | App `tools/list` (when app declares capability) |
-| **When Available** | Always | Only while app is loaded |
-
-#### Use Cases
-
-**Introspection:** Agent queries app state semantically — the app's DOM is not exposed to the host or model
-
-**Voice mode:** Agent drives app interactions programmatically based on voice commands
-
-**Accessibility:** Structured state and operations more accessible than visual rendering
-
-**Complex workflows:** Agent discovers available operations and coordinates multi-step interactions
-
-**Stateful apps:** Apps expose operations (move, reset, query) rather than pushing state updates via messages
-
-#### Security Implications
-
-App tools run in **sandboxed iframes** (untrusted). See Security Implications section for detailed mitigations.
-
-Key considerations:
-- App tools could provide misleading descriptions
-- Tool namespacing needed to avoid conflicts with server tools
-- Resource limits (max tools, execution timeouts)
-- Audit trail for app tool invocations
-- User confirmation for tools with side effects
-
-#### Relation to WebMCP
-
-This feature is inspired by [WebMCP](https://github.com/webmachinelearning/webmcp) (W3C incubation), which proposes allowing web pages to register JavaScript functions as tools via `navigator.modelContext.registerTool()`.
-
-Key differences:
-- **WebMCP**: General web pages, browser API, manifest-based discovery
-- **This spec**: MCP Apps, standard MCP messages, capability-based negotiation
-
-Similar to WebMCP but without turning the App (embedded page) into an MCP server - apps register tools within the App/Host architecture.
-
-See [ext-apps#35](https://github.com/modelcontextprotocol/ext-apps/issues/35) for discussion.
-
 ### Client\<\>Server Capability Negotiation
 
 Clients and servers negotiate MCP Apps support through the standard MCP extensions capability mechanism (defined in SEP-1724).
@@ -2287,9 +2415,11 @@ The host responds with its own capabilities, including support for proxying serv
 }
 ```
 
-**App Capability: `tools`**
+**App Capability: `tools`** (Deprecated)
 
-When present, the app can register tools that the host and agent can call.
+> **Deprecated:** Prefer WebMCP (`document.modelContext`). Hosts SHOULD NOT conclude that a View has no tools from the absence of this capability, since WebMCP tools are reached through reserved Sandbox messages. See [App-Registered Tools and WebMCP](#app-registered-tools-and-webmcp).
+
+When present, the app handles `tools/list` and `tools/call` itself, so that the host and agent can call its tools.
 
 - `listChanged` (boolean, optional): If `true`, the app will send `notifications/tools/list_changed` when tools are added, removed, or modified
 
@@ -2305,6 +2435,7 @@ These capabilities are independent - an app can have one, both, or neither.
 
 ```typescript
 interface McpUiAppCapabilities {
+  /** @deprecated Use WebMCP (`document.modelContext`) instead. */
   tools?: {
     listChanged?: boolean;
   };
@@ -2325,11 +2456,10 @@ This specification defines the Minimum Viable Product (MVP) for MCP Apps.
 
 **Included in MVP:**
 
-- **App-Provided Tools:** Apps can register tools via `app.registerTool()` that agents can call
+- **App-Provided Tools:** Views expose tools via WebMCP (`document.modelContext.registerTool()`) that agents can call through reserved Sandbox messages. The legacy `app.registerTool()` / `tools` app capability mechanism is deprecated in favor of WebMCP.
   - Bidirectional tool flow (Apps consume server tools AND provide app tools)
-  - Full lifecycle management (enable/disable/update/remove)
-  - Schema validation via [Standard Schema](https://standardschema.dev/) (Zod, ArkType, Valibot, …)
-  - Tool list change notifications
+  - Registration lifecycle (register / unregister via `AbortSignal`)
+  - Tool list change notifications (`ui/notifications/sandbox-tools-changed`)
 
 **Content Types (deferred from MVP):**
 
@@ -2445,6 +2575,8 @@ This proposal synthesizes feedback from the UI CWG and MCP-UI community, host im
 
 #### 6. App Tool Registration Support
 
+> **Deprecated:** This decision is superseded by adopting WebMCP for tools a View exposes. The Host reaches them through reserved Sandbox messages (`ui/sandbox-list-tools`, `ui/sandbox-call-tool`), while the standard `tools/list` and `tools/call` described here remain for Views that declare the deprecated `tools` capability. See [App-Registered Tools and WebMCP](#app-registered-tools-and-webmcp).
+
 **Decision:** Enable Apps to register tools using standard MCP `tools/call` and `tools/list` messages, making tools flow bidirectionally between Apps and Hosts.
 
 **Rationale:**
@@ -2568,6 +2700,8 @@ const allowAttribute = allowList.join(' ');
 
 #### 5. App-Provided Tools Security
 
+> **Deprecated:** App-provided tools are deprecated in favor of WebMCP. The considerations below apply equally to tools a Host surfaces from a View's `document.modelContext` (through the reserved Sandbox messages).
+
 Apps can register their own tools that agents can call. Apps are forward-deployed emanations of server tools, running in the client context. Hosts need to decide how to handle approval for app tool calls.
 
 **Approval Considerations:**
@@ -2612,7 +2746,7 @@ Hosts SHOULD implement the following protections for app-provided tools:
    - Limit maximum number of tools per app (recommended: 50)
    - Enforce execution timeouts for tool callbacks (recommended: 30 seconds)
    - Limit tool result sizes (recommended: 10 MB)
-   - Throttle `tools/list_changed` notifications to prevent spam
+   - Throttle tool list change notifications (`ui/notifications/sandbox-tools-changed`, `notifications/tools/list_changed`) to prevent spam
 
 5. **Audit Trail:**
    - Log all app tool registrations with timestamps
@@ -2638,7 +2772,7 @@ Hosts MAY implement different permission levels based on tool annotations:
 
 App tools MUST be tied to the app's lifecycle:
 
-- Tools become available once the app advertises the `tools` capability in `ui/initialize` and the host issues `tools/list`; subsequent changes are signaled via `notifications/tools/list_changed`
+- Tools become available once the View registers them with WebMCP and the host issues `ui/sandbox-list-tools`; subsequent changes are signaled via `ui/notifications/sandbox-tools-changed`. (Legacy: once the app advertises the `tools` capability in `ui/initialize` and the host issues `tools/list`; changes are signaled via `notifications/tools/list_changed`.)
 - Tools automatically disappear when app iframe is torn down
 - Hosts MUST NOT persist app tool registrations across sessions
 - Calling a tool from a closed app MUST return an error
diff --git a/src/app-bridge.test.ts b/src/app-bridge.test.ts
index a87b0e7db..ec955802d 100644
--- a/src/app-bridge.test.ts
+++ b/src/app-bridge.test.ts
@@ -4,6 +4,7 @@ import { Server, type ServerCapabilities } from "@modelcontextprotocol/server";
 import { z } from "zod/v4";
 
 import { App } from "./app.js";
+import { injectModelContextPolyfill } from "./model-context-host.js";
 import { LATEST_PROTOCOL_VERSION } from "./types.js";
 import {
   AppBridge,
@@ -766,289 +767,21 @@ describe("App <-> AppBridge integration", () => {
     });
   });
 
-  describe("App tool registration", () => {
+  describe("App tools over the wire (deprecated raw handlers)", () => {
+    let warn: ReturnType<typeof spyOn<Console, "warn">>;
+
     beforeEach(async () => {
-      app = new App(
-        testAppInfo,
-        { tools: { listChanged: true } },
-        { autoResize: false },
-      );
+      // Assigning oncalltool/onlisttools logs a one-time deprecation warning.
+      warn = spyOn(console, "warn").mockImplementation(() => {});
       await bridge.connect(bridgeTransport);
     });
 
-    it("registerTool creates a registered tool", async () => {
-      const InputSchema = z.object({ name: z.string() });
-      const OutputSchema = z.object({ greeting: z.string() });
-
-      const tool = app.registerTool(
-        "greet",
-        {
-          title: "Greet User",
-          description: "Greets a user by name",
-          inputSchema: InputSchema,
-          outputSchema: OutputSchema,
-        },
-        async (args: any) => ({
-          content: [{ type: "text" as const, text: `Hello, ${args.name}!` }],
-          structuredContent: { greeting: `Hello, ${args.name}!` },
-        }),
-      );
-
-      expect(tool.title).toBe("Greet User");
-      expect(tool.description).toBe("Greets a user by name");
-      expect(tool.enabled).toBe(true);
-    });
-
-    it("registered tool can be enabled and disabled", async () => {
-      await app.connect(appTransport);
-
-      const tool = app.registerTool(
-        "test-tool",
-        {
-          description: "Test tool",
-        },
-        async (_extra: any) => ({ content: [] }),
-      );
-
-      expect(tool.enabled).toBe(true);
-
-      tool.disable();
-      expect(tool.enabled).toBe(false);
-
-      tool.enable();
-      expect(tool.enabled).toBe(true);
-    });
-
-    it("registered tool can be updated", async () => {
-      await app.connect(appTransport);
-
-      const tool = app.registerTool(
-        "test-tool",
-        {
-          description: "Original description",
-        },
-        async (_extra: any) => ({ content: [] }),
-      );
-
-      expect(tool.description).toBe("Original description");
-
-      tool.update({ description: "Updated description" });
-      expect(tool.description).toBe("Updated description");
-    });
-
-    it("registered tool can be removed", async () => {
-      await app.connect(appTransport);
-
-      const tool = app.registerTool(
-        "test-tool",
-        {
-          description: "Test tool",
-        },
-        async (_extra: any) => ({ content: [] }),
-      );
-
-      tool.remove();
-      // Tool should no longer be registered (internal check)
-    });
-
-    it("registerTool throws on duplicate name", () => {
-      app.registerTool("dup", {}, async () => ({ content: [] }));
-      expect(() =>
-        app.registerTool("dup", {}, async () => ({ content: [] })),
-      ).toThrow(/already registered/);
-    });
-
-    it("enable/disable/update/remove pre-connect do not throw", () => {
-      const tool = app.registerTool("t", {}, async () => ({ content: [] }));
-      expect(() => tool.disable()).not.toThrow();
-      expect(() => tool.enable()).not.toThrow();
-      expect(() => tool.update({ description: "x" })).not.toThrow();
-      expect(() => tool.remove()).not.toThrow();
-    });
-
-    it("callback without inputSchema receives extra as first arg", async () => {
-      await app.connect(appTransport);
-      let receivedExtra: any;
-      app.registerTool("noargs", {}, async (extra: any) => {
-        receivedExtra = extra;
-        return { content: [] };
-      });
-      await bridge.callTool({ name: "noargs", arguments: {} });
-      expect(receivedExtra).toBeDefined();
-      expect(receivedExtra.mcpReq.signal).toBeInstanceOf(AbortSignal);
-    });
-
-    it("isError result skips output schema validation", async () => {
-      await app.connect(appTransport);
-      app.registerTool(
-        "errs",
-        { outputSchema: z.object({ ok: z.boolean() }) },
-        async () => ({
-          content: [{ type: "text" as const, text: "boom" }],
-          isError: true,
-        }),
-      );
-      const res = await bridge.callTool({ name: "errs", arguments: {} });
-      expect(res.isError).toBe(true);
-      expect(res.structuredContent).toBeUndefined();
-    });
-
-    it("stale handle remove() does not delete a re-registered tool", async () => {
-      const t1 = app.registerTool("phoenix", {}, async () => ({ content: [] }));
-      t1.remove();
-      app.registerTool("phoenix", {}, async () => ({ content: [] }));
-      t1.remove();
-      await app.connect(appTransport);
-      const list = await bridge.listTools({});
-      expect(list.tools.map((t) => t.name)).toContain("phoenix");
-    });
-
-    it("host omitting arguments defaults to empty object", async () => {
-      await app.connect(appTransport);
-      let received: unknown;
-      app.registerTool(
-        "noargs2",
-        { inputSchema: z.object({}) },
-        async (args) => {
-          received = args;
-          return { content: [] };
-        },
-      );
-      await bridge.callTool({ name: "noargs2" });
-      expect(received).toEqual({});
-    });
-
-    it("update({inputSchema}) is honored by handler validation", async () => {
-      await app.connect(appTransport);
-      const tool = app.registerTool(
-        "evolving",
-        { inputSchema: z.object({ a: z.string() }) },
-        async (args: any) => ({
-          content: [{ type: "text" as const, text: JSON.stringify(args) }],
-        }),
-      );
-      expect(
-        bridge.callTool({ name: "evolving", arguments: { a: 123 } }),
-      ).rejects.toThrow(/Invalid input/);
-      tool.update({ inputSchema: z.object({ a: z.number() }) });
-      const result = await bridge.callTool({
-        name: "evolving",
-        arguments: { a: 123 },
-      });
-      expect(result.content[0]).toEqual({ type: "text", text: '{"a":123}' });
-    });
-
-    it("tool throws error when disabled and called", async () => {
-      await app.connect(appTransport);
-
-      const tool = app.registerTool(
-        "test-tool",
-        {
-          description: "Test tool",
-        },
-        async (_extra: any) => ({ content: [] }),
-      );
-
-      tool.disable();
-
-      const mockExtra = {
-        signal: new AbortController().signal,
-        requestId: "test",
-        sendNotification: async () => {},
-        sendRequest: async () => ({}),
-      } as any;
-
-      expect((tool.handler as any)(mockExtra)).rejects.toThrow(
-        "Tool test-tool is disabled",
-      );
-    });
-
-    it("tool validates input schema", async () => {
-      const InputSchema = z.object({ name: z.string() });
-
-      const tool = app.registerTool(
-        "greet",
-        {
-          inputSchema: InputSchema,
-        },
-        async (args: any) => ({
-          content: [{ type: "text" as const, text: `Hello, ${args.name}!` }],
-        }),
-      );
-
-      // Create a mock RequestHandlerExtra
-      const mockExtra = {
-        signal: new AbortController().signal,
-        requestId: "test",
-        sendNotification: async () => {},
-        sendRequest: async () => ({}),
-      } as any;
-
-      // Valid input should work
-      expect(
-        (tool.handler as any)({ name: "Alice" }, mockExtra),
-      ).resolves.toBeDefined();
-
-      // Invalid input should fail
-      expect(
-        (tool.handler as any)({ invalid: "field" }, mockExtra),
-      ).rejects.toThrow("Invalid input for tool greet");
-    });
-
-    it("tool validates output schema", async () => {
-      const OutputSchema = z.object({ greeting: z.string() });
-
-      const tool = app.registerTool(
-        "greet",
-        {
-          outputSchema: OutputSchema,
-        },
-        async (_extra: any) => ({
-          content: [{ type: "text" as const, text: "Hello!" }],
-          structuredContent: { greeting: "Hello!" },
-        }),
-      );
-
-      // Create a mock RequestHandlerExtra
-      const mockExtra = {
-        signal: new AbortController().signal,
-        requestId: "test",
-        sendNotification: async () => {},
-        sendRequest: async () => ({}),
-      } as any;
-
-      // Valid output should work
-      expect((tool.handler as any)(mockExtra)).resolves.toBeDefined();
-    });
-
-    it("tool enable/disable/update/remove trigger sendToolListChanged", async () => {
-      await app.connect(appTransport);
-
-      const tool = app.registerTool(
-        "test-tool",
-        {
-          description: "Test tool",
-        },
-        async (_extra: any) => ({ content: [] }),
-      );
-
-      // The methods should not throw when connected
-      expect(() => tool.disable()).not.toThrow();
-      expect(() => tool.enable()).not.toThrow();
-      expect(() => tool.update({ description: "Updated" })).not.toThrow();
-      expect(() => tool.remove()).not.toThrow();
-    });
-  });
-
-  describe("AppBridge -> App tool requests", () => {
-    beforeEach(async () => {
-      await bridge.connect(bridgeTransport);
+    afterEach(() => {
+      warn.mockRestore();
     });
 
     it("bridge.callTool calls app.oncalltool handler", async () => {
-      // App needs tool capabilities to handle tool calls
-      const appCapabilities = { tools: {} };
-      app = new App(testAppInfo, appCapabilities, { autoResize: false });
+      app = new App(testAppInfo, { tools: {} }, { autoResize: false });
 
       const receivedCalls: unknown[] = [];
 
@@ -1077,32 +810,18 @@ describe("App <-> AppBridge integration", () => {
     });
 
     it("bridge.listTools calls app.onlisttools handler", async () => {
-      // App needs tool capabilities to handle tool list requests
-      const appCapabilities = { tools: {} };
-      app = new App(testAppInfo, appCapabilities, { autoResize: false });
+      app = new App(testAppInfo, { tools: {} }, { autoResize: false });
 
       const receivedCalls: unknown[] = [];
 
       app.onlisttools = async (params, _extra) => {
         receivedCalls.push(params);
         return {
-          tools: [
-            {
-              name: "tool1",
-              description: "First tool",
-              inputSchema: { type: "object", properties: {} },
-            },
-            {
-              name: "tool2",
-              description: "Second tool",
-              inputSchema: { type: "object", properties: {} },
-            },
-            {
-              name: "tool3",
-              description: "Third tool",
-              inputSchema: { type: "object", properties: {} },
-            },
-          ],
+          tools: ["tool1", "tool2", "tool3"].map((name) => ({
+            name,
+            description: `The ${name} tool`,
+            inputSchema: { type: "object" as const, properties: {} },
+          })),
         };
       };
 
@@ -1111,715 +830,294 @@ describe("App <-> AppBridge integration", () => {
       const result = await bridge.listTools({});
 
       expect(receivedCalls).toHaveLength(1);
-      expect(result.tools).toHaveLength(3);
-      expect(result.tools[0].name).toBe("tool1");
-      expect(result.tools[1].name).toBe("tool2");
-      expect(result.tools[2].name).toBe("tool3");
+      expect(result.tools.map((t) => t.name)).toEqual([
+        "tool1",
+        "tool2",
+        "tool3",
+      ]);
     });
-  });
 
-  describe("App tool capabilities", () => {
-    it("App with tool capabilities can handle tool calls", async () => {
-      const appCapabilities = { tools: { listChanged: true } };
-      app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-      const receivedCalls: unknown[] = [];
+    it("surfaces an error thrown by the oncalltool handler to the host", async () => {
+      app = new App(testAppInfo, { tools: {} }, { autoResize: false });
       app.oncalltool = async (params) => {
-        receivedCalls.push(params);
-        return {
-          content: [{ type: "text", text: "Success" }],
-        };
+        throw new Error(`Unknown tool: ${params.name}`);
       };
-
-      await bridge.connect(bridgeTransport);
       await app.connect(appTransport);
 
-      await bridge.callTool({
-        name: "test-tool",
-        arguments: {},
-      });
-
-      expect(receivedCalls).toHaveLength(1);
+      await expect(bridge.callTool({ name: "nope" })).rejects.toThrow(
+        "Unknown tool: nope",
+      );
     });
 
-    it("registered tool is invoked via oncalltool", async () => {
-      const appCapabilities = { tools: { listChanged: true } };
-      app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-      const tool = app.registerTool(
-        "greet",
-        {
-          description: "Greets user",
-          inputSchema: z.object({ name: z.string() }),
-        },
-        async (args: any) => ({
-          content: [{ type: "text" as const, text: `Hello, ${args.name}!` }],
-        }),
-      );
+    it("leaves declaring the tools capability to the caller: the raw handlers need it, the host sees it", async () => {
+      expect(() => {
+        app.oncalltool = async () => ({ content: [] });
+      }).toThrow(/tool capability/);
+      expect(() => {
+        app.onlisttools = async () => ({ tools: [] });
+      }).toThrow(/tool capability/);
 
-      app.oncalltool = async (params, extra) => {
-        if (params.name === "greet") {
-          return await (tool.handler as any)(params.arguments || {}, extra);
-        }
-        throw new Error(`Unknown tool: ${params.name}`);
-      };
+      const capabilities = { tools: { listChanged: true } };
+      app = new App(testAppInfo, capabilities, { autoResize: false });
+      app.oncalltool = async () => ({ content: [] });
+      await app.connect(appTransport);
+      expect(bridge.getAppCapabilities()?.tools).toEqual({ listChanged: true });
+    });
 
-      await bridge.connect(bridgeTransport);
+    it("app.sendToolListChanged() notifies the host", async () => {
+      app = new App(
+        testAppInfo,
+        { tools: { listChanged: true } },
+        { autoResize: false },
+      );
+      const received: unknown[] = [];
+      bridge.setNotificationHandler(
+        "notifications/tools/list_changed",
+        (notification) => void received.push(notification.params),
+      );
       await app.connect(appTransport);
 
-      const result = await bridge.callTool({
-        name: "greet",
-        arguments: { name: "Alice" },
-      });
+      await app.sendToolListChanged();
+      await flush();
 
-      expect(result.content).toEqual([{ type: "text", text: "Hello, Alice!" }]);
+      expect(received).toHaveLength(1);
     });
   });
 
-  describe("Automatic request handlers", () => {
+  describe("WebMCP tools (reserved Sandbox requests)", () => {
+    /** Stand-in for the Sandbox proxy's relay: answers the reserved requests. */
+    const answerWith = (
+      method: "ui/sandbox-list-tools" | "ui/sandbox-call-tool",
+      handler: (params: any) => unknown,
+    ) =>
+      app.setRequestHandler(
+        method,
+        { params: z.any(), result: z.any() },
+        handler,
+      );
+
     beforeEach(async () => {
       await bridge.connect(bridgeTransport);
     });
 
-    describe("oncalltool automatic handler", () => {
-      it("automatically calls registered tool without manual oncalltool setup", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        // Register a tool
-        app.registerTool(
-          "greet",
-          {
-            description: "Greets user",
-            inputSchema: z.object({ name: z.string() }),
-          },
-          async (args: any) => ({
-            content: [{ type: "text" as const, text: `Hello, ${args.name}!` }],
-          }),
-        );
-
-        await app.connect(appTransport);
-
-        // Call the tool through bridge - should work automatically
-        const result = await bridge.callTool({
-          name: "greet",
-          arguments: { name: "Bob" },
-        });
-
-        expect(result.content).toEqual([{ type: "text", text: "Hello, Bob!" }]);
-      });
-
-      it("throws error when calling non-existent tool", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        // Register a tool to initialize handlers
-        app.registerTool("existing-tool", {}, async (_args: any) => ({
-          content: [],
-        }));
-
-        await app.connect(appTransport);
-
-        // Try to call a tool that doesn't exist
-        expect(
-          bridge.callTool({
-            name: "nonexistent",
-            arguments: {},
-          }),
-        ).rejects.toThrow("Tool nonexistent not found");
-      });
-
-      it("handles multiple registered tools correctly", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        // Register multiple tools
-        app.registerTool(
-          "add",
-          {
-            description: "Add two numbers",
-            inputSchema: z.object({ a: z.number(), b: z.number() }),
-          },
-          async (args: any) => ({
-            content: [
-              {
-                type: "text" as const,
-                text: `Result: ${args.a + args.b}`,
-              },
-            ],
-            structuredContent: { result: args.a + args.b },
-          }),
-        );
-
-        app.registerTool(
-          "multiply",
-          {
-            description: "Multiply two numbers",
-            inputSchema: z.object({ a: z.number(), b: z.number() }),
-          },
-          async (args: any) => ({
-            content: [
-              {
-                type: "text" as const,
-                text: `Result: ${args.a * args.b}`,
-              },
-            ],
-            structuredContent: { result: args.a * args.b },
-          }),
-        );
-
-        await app.connect(appTransport);
-
-        // Call first tool
-        const addResult = await bridge.callTool({
-          name: "add",
-          arguments: { a: 5, b: 3 },
-        });
-        expect(addResult.content).toEqual([
-          { type: "text", text: "Result: 8" },
-        ]);
-
-        // Call second tool
-        const multiplyResult = await bridge.callTool({
-          name: "multiply",
-          arguments: { a: 5, b: 3 },
-        });
-        expect(multiplyResult.content).toEqual([
-          { type: "text", text: "Result: 15" },
-        ]);
-      });
-
-      it("respects tool enable/disable state", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        const tool = app.registerTool(
-          "test-tool",
-          {
-            description: "Test tool",
-          },
-          async (_args: any) => ({
-            content: [{ type: "text" as const, text: "Success" }],
-          }),
-        );
-
-        await app.connect(appTransport);
-
-        // Should work when enabled
-        expect(
-          bridge.callTool({ name: "test-tool", arguments: {} }),
-        ).resolves.toBeDefined();
-
-        // Disable tool
-        tool.disable();
-
-        // Should throw when disabled
-        expect(
-          bridge.callTool({ name: "test-tool", arguments: {} }),
-        ).rejects.toThrow("Tool test-tool is disabled");
-      });
-
-      it("validates input schema through automatic handler", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        app.registerTool(
-          "strict-tool",
-          {
-            description: "Requires specific input",
-            inputSchema: z.object({
-              required: z.string(),
-              optional: z.number().optional(),
-            }) as any,
-          },
-          async (args: any) => ({
-            content: [{ type: "text" as const, text: `Got: ${args.required}` }],
-          }),
-        );
-
-        await app.connect(appTransport);
-
-        // Valid input should work
-        expect(
-          bridge.callTool({
-            name: "strict-tool",
-            arguments: { required: "hello" },
-          }),
-        ).resolves.toBeDefined();
-
-        // Invalid input should fail
-        expect(
-          bridge.callTool({
-            name: "strict-tool",
-            arguments: { wrong: "field" },
-          }),
-        ).rejects.toThrow("Invalid input for tool strict-tool");
-      });
-
-      it("validates output schema through automatic handler", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        app.registerTool(
-          "validated-output",
-          {
-            description: "Has output validation",
-            outputSchema: z.object({
-              status: z.enum(["success", "error"]),
-            }) as any,
-          },
-          async (_args: any) => ({
-            content: [{ type: "text" as const, text: "Done" }],
-            structuredContent: { status: "success" },
-          }),
-        );
-
-        await app.connect(appTransport);
-
-        // Valid output should work
-        const result = await bridge.callTool({
-          name: "validated-output",
-          arguments: {},
-        });
-        expect(result).toBeDefined();
+    it("listWebMcpTools sends ui/sandbox-list-tools and parses a ListToolsResult", async () => {
+      const received: unknown[] = [];
+      answerWith("ui/sandbox-list-tools", (params) => {
+        received.push(params);
+        return {
+          tools: [{ name: "t", inputSchema: { type: "object" } }],
+          nextCursor: "next",
+        };
       });
+      await app.connect(appTransport);
 
-      it("works after tool is removed and re-registered", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        const tool = app.registerTool(
-          "dynamic-tool",
-          {},
-          async (_args: any) => ({
-            content: [{ type: "text" as const, text: "Version 1" }],
-          }),
-        );
-
-        await app.connect(appTransport);
-
-        // First version
-        let result = await bridge.callTool({
-          name: "dynamic-tool",
-          arguments: {},
-        });
-        expect(result.content).toEqual([{ type: "text", text: "Version 1" }]);
-
-        // Remove tool
-        tool.remove();
-
-        // Should fail after removal
-        expect(
-          bridge.callTool({ name: "dynamic-tool", arguments: {} }),
-        ).rejects.toThrow("Tool dynamic-tool not found");
-
-        // Re-register with different behavior
-        app.registerTool("dynamic-tool", {}, async (_args: any) => ({
-          content: [{ type: "text" as const, text: "Version 2" }],
-        }));
-
-        // Should work with new version
-        result = await bridge.callTool({
-          name: "dynamic-tool",
-          arguments: {},
-        });
-        expect(result.content).toEqual([{ type: "text", text: "Version 2" }]);
-      });
+      const result = await bridge.listWebMcpTools({ cursor: "c1" });
+      expect(received).toEqual([{ cursor: "c1" }]);
+      expect(result.tools.map((t) => t.name)).toEqual(["t"]);
+      expect(result.nextCursor).toBe("next");
+      await bridge.listWebMcpTools(); // params are optional
+      expect(received).toHaveLength(2);
     });
 
-    describe("onlisttools automatic handler", () => {
-      it("automatically returns list of registered tool names", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        // Register some tools
-        app.registerTool("tool1", {}, async (_args: any) => ({
-          content: [],
-        }));
-        app.registerTool("tool2", {}, async (_args: any) => ({
-          content: [],
-        }));
-        app.registerTool("tool3", {}, async (_args: any) => ({
-          content: [],
-        }));
-
-        await app.connect(appTransport);
-
-        const result = await bridge.listTools({});
-
-        expect(result.tools).toHaveLength(3);
-        expect(result.tools.map((t) => t.name)).toContain("tool1");
-        expect(result.tools.map((t) => t.name)).toContain("tool2");
-        expect(result.tools.map((t) => t.name)).toContain("tool3");
+    it("callWebMcpTool sends ui/sandbox-call-tool and parses a CallToolResult, isError included", async () => {
+      const received: any[] = [];
+      answerWith("ui/sandbox-call-tool", (params) => {
+        received.push(params);
+        return params.name === "fails"
+          ? { content: [{ type: "text", text: "no" }], isError: true }
+          : { content: [], structuredContent: { sum: 3 } };
       });
+      await app.connect(appTransport);
 
-      it("emits core MCP Tool fields (title, outputSchema only when provided)", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        app.registerTool(
-          "with-output",
-          {
-            title: "With Output",
-            description: "has structured output",
-            outputSchema: z.object({ ok: z.boolean() }),
-          },
-          async () => ({
-            content: [],
-            structuredContent: { ok: true },
-          }),
-        );
-        app.registerTool(
-          "no-output",
-          { description: "no structured output" },
-          async () => ({ content: [] }),
-        );
-
-        await app.connect(appTransport);
-        const result = await bridge.listTools({});
-        const byName = Object.fromEntries(result.tools.map((t) => [t.name, t]));
-
-        expect(byName["with-output"].title).toBe("With Output");
-        expect(byName["with-output"].inputSchema).toBeDefined();
-        expect(byName["with-output"].outputSchema).toBeDefined();
-        // outputSchema is optional in core MCP — omitted when not declared
-        expect(byName["no-output"]).not.toHaveProperty("outputSchema");
-        expect(byName["no-output"].inputSchema).toBeDefined();
-      });
-
-      it("accepts any Standard Schema implementation, not only zod", async () => {
-        // Hand-rolled StandardSchemaWithJSON — proves registerTool has no
-        // zod-specific runtime path. Any library implementing the spec
-        // (ArkType, Valibot, …) works the same way.
-        type Point = { x: number; y: number };
-        const PointSchema = {
-          "~standard": {
-            version: 1 as const,
-            vendor: "test",
-            types: undefined as
-              | undefined
-              | { readonly input: Point; readonly output: Point },
-            validate: (v: unknown) =>
-              typeof v === "object" &&
-              v !== null &&
-              typeof (v as any).x === "number" &&
-              typeof (v as any).y === "number"
-                ? { value: v as { x: number; y: number } }
-                : { issues: [{ message: "expected {x:number,y:number}" }] },
-            jsonSchema: {
-              input: () => ({
-                type: "object",
-                properties: { x: { type: "number" }, y: { type: "number" } },
-                required: ["x", "y"],
-              }),
-              output: () => ({
-                type: "object",
-                properties: { x: { type: "number" }, y: { type: "number" } },
-              }),
-            },
-          },
-        };
-
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-        app.registerTool(
-          "translate",
-          { inputSchema: PointSchema, outputSchema: PointSchema },
-          async ({ x, y }) => ({
-            content: [],
-            structuredContent: { x: x + 1, y: y + 1 },
-          }),
-        );
-        await app.connect(appTransport);
-
-        const list = await bridge.listTools({});
-        expect(list.tools[0].inputSchema).toEqual({
-          type: "object",
-          properties: { x: { type: "number" }, y: { type: "number" } },
-          required: ["x", "y"],
-        });
-        expect(list.tools[0].outputSchema).toBeDefined();
-
-        const ok = await bridge.callTool({
-          name: "translate",
-          arguments: { x: 1, y: 2 },
-        });
-        expect(ok.structuredContent).toEqual({ x: 2, y: 3 });
-
-        expect(
-          bridge.callTool({ name: "translate", arguments: { x: "bad" } }),
-        ).rejects.toThrow(/Invalid input for tool translate/);
-      });
-
-      it("rejects listTools when a tool schema does not implement Standard JSON Schema", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-        app.registerTool(
-          "broken",
-          {
-            inputSchema: {
-              "~standard": {
-                version: 1 as const,
-                vendor: "mystery",
-                validate: () => ({ value: {} }),
-              },
-            },
-          },
-          async () => ({ content: [] }),
-        );
-        await app.connect(appTransport);
-
-        expect(bridge.listTools({})).rejects.toThrow(
-          /does not implement Standard JSON Schema/,
-        );
+      expect(
+        await bridge.callWebMcpTool({ name: "add", arguments: { a: 1 } }),
+      ).toEqual({ content: [], structuredContent: { sum: 3 } });
+      expect(await bridge.callWebMcpTool({ name: "fails" })).toEqual({
+        content: [{ type: "text", text: "no" }],
+        isError: true,
       });
+      expect(received).toEqual([
+        { name: "add", arguments: { a: 1 } },
+        { name: "fails" },
+      ]);
+    });
 
-      it("returns empty list when no tools registered", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        // Register a tool to ensure handlers are initialized
-        const dummyTool = app.registerTool("dummy", {}, async () => ({
-          content: [],
-        }));
-
-        await app.connect(appTransport);
-
-        // Remove the tool after connecting
-        dummyTool.remove();
+    it("rejects when the peer does not implement the requests or answers with something else", async () => {
+      await app.connect(appTransport);
+      await expect(bridge.listWebMcpTools()).rejects.toThrow(
+        /method not found/i,
+      );
+      await expect(bridge.callWebMcpTool({ name: "t" })).rejects.toThrow(
+        /method not found/i,
+      );
 
-        const result = await bridge.listTools({});
+      answerWith("ui/sandbox-list-tools", () => ({ tools: "nope" }));
+      answerWith("ui/sandbox-call-tool", () => ({ content: "nope" }));
+      await expect(bridge.listWebMcpTools()).rejects.toThrow();
+      await expect(bridge.callWebMcpTool({ name: "t" })).rejects.toThrow();
+    });
+
+    it("onwebmcptoolschange and addEventListener fire on ui/notifications/sandbox-tools-changed", async () => {
+      const handled: unknown[] = [];
+      const listened: unknown[] = [];
+      const handler = (params: unknown) => void handled.push(params);
+      expect(bridge.onwebmcptoolschange).toBeUndefined();
+      bridge.onwebmcptoolschange = handler;
+      expect(bridge.onwebmcptoolschange).toBe(handler);
+      bridge.addEventListener(
+        "webmcptoolschange",
+        (p) => void listened.push(p),
+      );
+      await app.connect(appTransport);
 
-        expect(result.tools).toEqual([]);
-      });
+      const changed = {
+        jsonrpc: "2.0" as const,
+        method: "ui/notifications/sandbox-tools-changed",
+      };
+      await appTransport.send(changed);
+      await flush();
+      expect(handled).toHaveLength(1);
+      expect(listened).toHaveLength(1);
 
-      it("updates list when tools are added", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
+      bridge.onwebmcptoolschange = undefined;
+      expect(bridge.onwebmcptoolschange).toBeUndefined();
+      await appTransport.send(changed);
+      await flush();
+      expect(handled).toHaveLength(1);
+      expect(listened).toHaveLength(2);
+    });
+  });
 
-        await app.connect(appTransport);
+  describe("App.registerTool does not use the wire", () => {
+    let warn: ReturnType<typeof spyOn<Console, "warn">>;
 
-        // Register then remove a tool to initialize handlers
-        const dummy = app.registerTool("init", {}, async () => ({
-          content: [],
-        }));
-        dummy.remove();
-
-        // Initially no tools
-        let result = await bridge.listTools({});
-        expect(result.tools).toEqual([]);
-
-        // Add a tool
-        app.registerTool("new-tool", {}, async (_args: any) => ({
-          content: [],
-        }));
-
-        // Should now include the new tool
-        result = await bridge.listTools({});
-        expect(result.tools.map((t) => t.name)).toEqual(["new-tool"]);
-
-        // Add another tool
-        app.registerTool("another-tool", {}, async (_args: any) => ({
-          content: [],
-        }));
-
-        // Should now include both tools
-        result = await bridge.listTools({});
-        expect(result.tools).toHaveLength(2);
-        expect(result.tools.map((t) => t.name)).toContain("new-tool");
-        expect(result.tools.map((t) => t.name)).toContain("another-tool");
+    beforeEach(() => {
+      warn = spyOn(console, "warn").mockImplementation(() => {});
+      // A View whose browser (or the host) provides WebMCP.
+      Object.assign(globalThis, {
+        document: { modelContext: { registerTool: async () => {} } },
       });
+    });
 
-      it("updates list when tools are removed", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        const tool1 = app.registerTool("tool1", {}, async (_args: any) => ({
-          content: [],
-        }));
-        const tool2 = app.registerTool("tool2", {}, async (_args: any) => ({
-          content: [],
-        }));
-        app.registerTool("tool3", {}, async (_args: any) => ({
-          content: [],
-        }));
-
-        await app.connect(appTransport);
-
-        // Initially all three tools
-        let result = await bridge.listTools({});
-        expect(result.tools).toHaveLength(3);
+    afterEach(() => {
+      warn.mockRestore();
+      Reflect.deleteProperty(globalThis, "document");
+    });
 
-        // Remove one tool
-        tool2.remove();
+    it("declares no tools capability and leaves tools/list, tools/call and list_changed unanswered/unsent", async () => {
+      app = new App(testAppInfo, {}, { autoResize: false });
+      const listChanged: unknown[] = [];
+      bridge.setNotificationHandler(
+        "notifications/tools/list_changed",
+        (notification) => void listChanged.push(notification),
+      );
+      await bridge.connect(bridgeTransport);
+      await app.connect(appTransport);
 
-        // Should now have two tools
-        result = await bridge.listTools({});
-        expect(result.tools).toHaveLength(2);
-        expect(result.tools.map((t) => t.name)).toContain("tool1");
-        expect(result.tools.map((t) => t.name)).toContain("tool3");
-        expect(result.tools.map((t) => t.name)).not.toContain("tool2");
+      const tool = app.registerTool("greet", {}, async () => ({ content: [] }));
+      tool.disable();
+      tool.enable();
+      tool.update({ description: "changed" });
+      await flush();
 
-        // Remove another tool
-        tool1.remove();
+      expect(bridge.getAppCapabilities()?.tools).toBeUndefined();
+      await expect(bridge.listTools({})).rejects.toThrow(/method not found/i);
+      await expect(bridge.callTool({ name: "greet" })).rejects.toThrow(
+        /method not found/i,
+      );
+      expect(listChanged).toEqual([]);
+    });
+  });
 
-        // Should now have one tool
-        result = await bridge.listTools({});
-        expect(result.tools.map((t) => t.name)).toEqual(["tool3"]);
+  describe("sendSandboxResourceReady", () => {
+    const html = "<!DOCTYPE html><html><body>view</body></html>";
+
+    /** A host whose transport records what it sends to the sandbox. */
+    async function connectCapturingBridge(options?: {
+      modelContextPolyfill?: boolean;
+    }) {
+      const sent: Array<{ method?: string; params?: any }> = [];
+      const transport = {
+        async start() {},
+        async send(message: object) {
+          sent.push(message);
+        },
+        async close() {},
+      };
+      const capturing = new AppBridge(
+        null,
+        testHostInfo,
+        testHostCapabilities,
+        options,
+      );
+      await capturing.connect(transport);
+      return { bridge: capturing, sent };
+    }
+    /** The View HTML above has no script of its own. */
+    const countPolyfills = (text: string) =>
+      (text.match(/<script>/g) ?? []).length;
+
+    it("injects the WebMCP polyfill into the HTML exactly once by default, keeping the doctype first", async () => {
+      const { bridge, sent } = await connectCapturingBridge();
+      await bridge.sendSandboxResourceReady({ html });
+
+      expect(sent).toHaveLength(1);
+      expect(sent[0].method).toBe("ui/notifications/sandbox-resource-ready");
+      const sentHtml = sent[0].params.html as string;
+      expect(sentHtml.startsWith("<!DOCTYPE html><script>")).toBe(true);
+      expect(sentHtml.endsWith("<html><body>view</body></html>")).toBe(true);
+      expect(countPolyfills(sentHtml)).toBe(1);
+      expect(sentHtml).toBe(injectModelContextPolyfill(html));
+    });
+
+    it("injects into each send independently, never compounding", async () => {
+      const { bridge, sent } = await connectCapturingBridge();
+      await bridge.sendSandboxResourceReady({ html });
+      await bridge.sendSandboxResourceReady({ html });
+
+      expect(sent.map((m) => countPolyfills(m.params.html))).toEqual([1, 1]);
+      expect(sent[1].params.html).toBe(sent[0].params.html);
+    });
+
+    it("sends the HTML untouched when modelContextPolyfill is false", async () => {
+      const { bridge, sent } = await connectCapturingBridge({
+        modelContextPolyfill: false,
       });
+      await bridge.sendSandboxResourceReady({ html });
 
-      it("only includes enabled tools in list", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        app.registerTool("enabled-tool", {}, async (_args: any) => ({
-          content: [],
-        }));
-        const tool2 = app.registerTool(
-          "disabled-tool",
-          {},
-          async (_args: any) => ({
-            content: [],
-          }),
-        );
-
-        await app.connect(appTransport);
-
-        // Disable one tool after connecting
-        tool2.disable();
-
-        const result = await bridge.listTools({});
+      expect(sent[0].params).toEqual({ html });
+    });
 
-        // Only enabled tool should be in the list
-        expect(result.tools).toHaveLength(1);
-        expect(result.tools.map((t) => t.name)).toContain("enabled-tool");
-        expect(result.tools.map((t) => t.name)).not.toContain("disabled-tool");
+    it("injects when modelContextPolyfill is explicitly true", async () => {
+      const { bridge, sent } = await connectCapturingBridge({
+        modelContextPolyfill: true,
       });
+      await bridge.sendSandboxResourceReady({ html });
+      expect(countPolyfills(sent[0].params.html)).toBe(1);
     });
 
-    describe("Integration: automatic handlers with tool lifecycle", () => {
-      it("handles complete tool lifecycle: register -> call -> update -> call -> remove", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-        app = new App(testAppInfo, appCapabilities, { autoResize: false });
-
-        await app.connect(appTransport);
-
-        // Register tool
-        const tool = app.registerTool(
-          "counter",
-          {
-            description: "A counter tool",
-          },
-          async (_args: any) => ({
-            content: [{ type: "text" as const, text: "Count: 1" }],
-            structuredContent: { count: 1 },
-          }),
-        );
-
-        // List should include the tool
-        let listResult = await bridge.listTools({});
-        expect(listResult.tools.map((t) => t.name)).toContain("counter");
-
-        // Call the tool
-        let callResult = await bridge.callTool({
-          name: "counter",
-          arguments: {},
-        });
-        expect(callResult.content).toEqual([
-          { type: "text", text: "Count: 1" },
-        ]);
-
-        // Update tool description
-        tool.update({ description: "An updated counter tool" });
-
-        // Should still be callable
-        callResult = await bridge.callTool({
-          name: "counter",
-          arguments: {},
-        });
-        expect(callResult).toBeDefined();
-
-        // Remove tool
-        tool.remove();
-
-        // Should no longer be in list
-        listResult = await bridge.listTools({});
-        expect(listResult.tools.map((t) => t.name)).not.toContain("counter");
+    it("leaves params without a string html untouched instead of throwing", async () => {
+      const { bridge, sent } = await connectCapturingBridge();
+      const params = { html: undefined, sandbox: "allow-scripts" } as never;
+      await bridge.sendSandboxResourceReady(params);
+      expect(sent[0].params).toEqual({ sandbox: "allow-scripts" });
+    });
 
-        // Should no longer be callable
-        expect(
-          bridge.callTool({ name: "counter", arguments: {} }),
-        ).rejects.toThrow("Tool counter not found");
+    it("preserves the other params, and does not mutate the caller's object", async () => {
+      const { bridge, sent } = await connectCapturingBridge();
+      const params = Object.freeze({
+        html,
+        sandbox: "allow-scripts allow-same-origin",
+        csp: { connectDomains: ["https://api.example.com"] },
+        permissions: { camera: {} },
       });
+      await bridge.sendSandboxResourceReady(params);
 
-      it("multiple apps can have separate tool registries", async () => {
-        const appCapabilities = { tools: { listChanged: true } };
-
-        // Create two separate apps
-        const app1 = new App(
-          { name: "App1", version: "1.0.0" },
-          appCapabilities,
-          { autoResize: false },
-        );
-        const app2 = new App(
-          { name: "App2", version: "1.0.0" },
-          appCapabilities,
-          { autoResize: false },
-        );
-
-        // Create separate transports for each app
-        const [app1Transport, bridge1Transport] =
-          InMemoryTransport.createLinkedPair();
-        const [app2Transport, bridge2Transport] =
-          InMemoryTransport.createLinkedPair();
-
-        const bridge1 = new AppBridge(
-          createMockClient() as Client,
-          testHostInfo,
-          testHostCapabilities,
-        );
-        const bridge2 = new AppBridge(
-          createMockClient() as Client,
-          testHostInfo,
-          testHostCapabilities,
-        );
-
-        // Register different tools in each app
-        app1.registerTool("app1-tool", {}, async (_args: any) => ({
-          content: [{ type: "text" as const, text: "From App1" }],
-        }));
-
-        app2.registerTool("app2-tool", {}, async (_args: any) => ({
-          content: [{ type: "text" as const, text: "From App2" }],
-        }));
-
-        await bridge1.connect(bridge1Transport);
-        await bridge2.connect(bridge2Transport);
-        await app1.connect(app1Transport);
-        await app2.connect(app2Transport);
-
-        // Each app should only see its own tools
-        const list1 = await bridge1.listTools({});
-        expect(list1.tools.map((t) => t.name)).toEqual(["app1-tool"]);
-
-        const list2 = await bridge2.listTools({});
-        expect(list2.tools.map((t) => t.name)).toEqual(["app2-tool"]);
-
-        // Each app should only be able to call its own tools
-        expect(
-          bridge1.callTool({ name: "app1-tool", arguments: {} }),
-        ).resolves.toBeDefined();
-
-        expect(
-          bridge1.callTool({ name: "app2-tool", arguments: {} }),
-        ).rejects.toThrow("Tool app2-tool not found");
-
-        // Clean up
-        await app1Transport.close();
-        await bridge1Transport.close();
-        await app2Transport.close();
-        await bridge2Transport.close();
+      expect(sent[0].params).toEqual({
+        ...params,
+        html: injectModelContextPolyfill(html),
       });
+      expect(params.html).toBe(html);
     });
   });
 
diff --git a/src/app-bridge.ts b/src/app-bridge.ts
index 1ac4db485..775cdbc3d 100644
--- a/src/app-bridge.ts
+++ b/src/app-bridge.ts
@@ -31,7 +31,9 @@ import {
   type Transport,
 } from "@modelcontextprotocol/client";
 import {
+  CallToolResultSchema,
   EmptyResultSchema,
+  ListToolsResultSchema,
   LoggingMessageNotificationSchema,
 } from "@modelcontextprotocol/core";
 import { EventDispatcher, MethodRegistry } from "./events.js";
@@ -48,6 +50,8 @@ type MethodSchema = ZodObject<{
 }>;
 
 import {
+  type McpUiSandboxCallToolRequest,
+  type McpUiSandboxListToolsRequest,
   type McpUiSandboxResourceReadyNotification,
   type McpUiSizeChangedNotification,
   type McpUiToolCancelledNotification,
@@ -85,6 +89,8 @@ import {
   McpUiRequestTeardownNotificationSchema,
   McpUiSandboxProxyReadyNotification,
   McpUiSandboxProxyReadyNotificationSchema,
+  McpUiSandboxToolsChangedNotification,
+  McpUiSandboxToolsChangedNotificationSchema,
   McpUiSizeChangedNotificationSchema,
   McpUiRequestDisplayModeRequest,
   McpUiRequestDisplayModeRequestSchema,
@@ -99,6 +105,12 @@ import { RESOURCE_URI_META_KEY } from "./constants.js";
 
 type UntypedHandlerSetter = (this: unknown, ...args: unknown[]) => void;
 export { PostMessageTransport } from "./message-transport.js";
+export {
+  createModelContextRelay,
+  type ModelContextRelay,
+  type ModelContextRelayOptions,
+} from "./model-context-host.js";
+import { injectModelContextPolyfill } from "./model-context-host.js";
 
 /**
  * Extract UI resource URI from tool metadata.
@@ -204,12 +216,17 @@ export function buildAllowAttribute(
  * Options for configuring {@link AppBridge `AppBridge`} behavior.
  *
  * @property hostContext - Optional initial host context to provide to the view
+ * @property modelContextPolyfill - Whether {@link AppBridge.sendSandboxResourceReady `sendSandboxResourceReady`}
+ *   injects a WebMCP `document.modelContext` polyfill into the View HTML
+ *   (default `true`). It is a no-op where the View's document already has one.
+ *   Set to `false` if the Host provides `document.modelContext` some other way.
  *
  * @see `ProtocolOptions` from @modelcontextprotocol/client for available options
  * @see {@link McpUiHostContext `McpUiHostContext`} for the hostContext structure
  */
 export type HostOptions = Omit<ProtocolOptions, "supportedProtocolVersions"> & {
   hostContext?: McpUiHostContext;
+  modelContextPolyfill?: boolean;
 };
 
 /**
@@ -240,6 +257,7 @@ type RequestHandlerExtra = BaseContext;
 export type AppBridgeEventMap = {
   sizechange: McpUiSizeChangedNotification["params"];
   sandboxready: McpUiSandboxProxyReadyNotification["params"];
+  webmcptoolschange: McpUiSandboxToolsChangedNotification["params"];
   initialized: McpUiInitializedNotification["params"];
   requestteardown: McpUiRequestTeardownNotification["params"];
   loggingmessage: LoggingMessageNotification["params"];
@@ -307,6 +325,7 @@ export class AppBridge extends Protocol<BaseContext> {
   private _hostContext: McpUiHostContext = {};
   private _appInfo?: Implementation;
   private _initializedReceived = false;
+  private readonly _modelContextPolyfill: boolean;
   private readonly _registeredEvents = new Set<keyof AppBridgeEventMap>();
   private readonly _events = new EventDispatcher<AppBridgeEventMap>();
   private readonly _methods = new MethodRegistry();
@@ -423,6 +442,7 @@ export class AppBridge extends Protocol<BaseContext> {
   } = {
     sizechange: McpUiSizeChangedNotificationSchema,
     sandboxready: McpUiSandboxProxyReadyNotificationSchema,
+    webmcptoolschange: McpUiSandboxToolsChangedNotificationSchema,
     initialized: McpUiInitializedNotificationSchema,
     requestteardown: McpUiRequestTeardownNotificationSchema,
     loggingmessage: LoggingMessageNotificationSchema,
@@ -540,6 +560,7 @@ export class AppBridge extends Protocol<BaseContext> {
     this._ensureEventSlot("initialized");
 
     this._hostContext = options?.hostContext || {};
+    this._modelContextPolyfill = options?.modelContextPolyfill !== false;
 
     this.replaceRequestHandler(
       "ui/initialize",
@@ -750,6 +771,30 @@ export class AppBridge extends Protocol<BaseContext> {
     this.setEventHandler("sandboxready", callback);
   }
 
+  /**
+   * Called when the tools the view exposes through WebMCP change (the Sandbox
+   * proxy sends `ui/notifications/sandbox-tools-changed`). Re-list them with
+   * {@link listWebMcpTools `listWebMcpTools`}.
+   *
+   * Assigning replaces the previous handler; assigning `undefined` clears it.
+   * For several listeners use
+   * {@link addEventListener `addEventListener("webmcptoolschange", handler)`}.
+   *
+   * @see {@link McpUiSandboxToolsChangedNotification `McpUiSandboxToolsChangedNotification`} for the notification type
+   */
+  get onwebmcptoolschange():
+    | ((params: McpUiSandboxToolsChangedNotification["params"]) => void)
+    | undefined {
+    return this.getEventHandler("webmcptoolschange");
+  }
+  set onwebmcptoolschange(
+    callback:
+      | ((params: McpUiSandboxToolsChangedNotification["params"]) => void)
+      | undefined,
+  ) {
+    this.setEventHandler("webmcptoolschange", callback);
+  }
+
   /**
    * Called when the view completes initialization.
    *
@@ -1860,6 +1905,11 @@ export class AppBridge extends Protocol<BaseContext> {
    * via `ui/notifications/sandbox-proxy-ready`, the host sends this notification
    * with the HTML content to load.
    *
+   * By default the View HTML is sent with a WebMCP `document.modelContext`
+   * polyfill prepended (see {@link HostOptions.modelContextPolyfill `modelContextPolyfill`}),
+   * so Views can register tools with WebMCP in any browser. The Sandbox proxy
+   * reads them with {@link createModelContextRelay `createModelContextRelay`}.
+   *
    * @param params - HTML content and sandbox configuration:
    *   - `html`: The HTML content to load into the sandboxed iframe
    *   - `sandbox`: Optional sandbox attribute value (e.g., "allow-scripts")
@@ -1872,7 +1922,10 @@ export class AppBridge extends Protocol<BaseContext> {
   ) {
     return this.notification({
       method: "ui/notifications/sandbox-resource-ready" as const,
-      params,
+      params:
+        this._modelContextPolyfill && typeof params.html === "string"
+          ? { ...params, html: injectModelContextPolyfill(params.html) }
+          : params,
     });
   }
 
@@ -1925,6 +1978,9 @@ export class AppBridge extends Protocol<BaseContext> {
    * @param params - Tool call parameters (name and arguments)
    * @param options - Request options (timeout, abort signal, etc.)
    * @returns Promise resolving to the tool call result
+   * @deprecated This reaches only tools the View answers for itself (the
+   * deprecated `tools` app capability). Use {@link callWebMcpTool `callWebMcpTool`}
+   * for tools registered with WebMCP.
    */
   callTool(params: CallToolRequest["params"], options?: RequestOptions) {
     return this.request({ method: "tools/call", params }, options);
@@ -1938,11 +1994,62 @@ export class AppBridge extends Protocol<BaseContext> {
    * @param params - List tools parameters (may include cursor for pagination)
    * @param options - Request options (timeout, abort signal, etc.)
    * @returns Promise resolving to the list of tools
+   * @deprecated This reaches only tools the View answers for itself (the
+   * deprecated `tools` app capability). Use
+   * {@link listWebMcpTools `listWebMcpTools`} for tools registered with WebMCP.
    */
   listTools(params: ListToolsRequest["params"], options?: RequestOptions) {
     return this.request({ method: "tools/list", params }, options);
   }
 
+  /**
+   * List the tools the view exposes through WebMCP (`document.modelContext`).
+   *
+   * Sends a `ui/sandbox-list-tools` request, which the Sandbox proxy answers
+   * by reading the view's `document.modelContext` (see
+   * {@link createModelContextRelay `createModelContextRelay`}); the view never
+   * sees it. Rejects with an error if the Sandbox does not implement it.
+   *
+   * @param params - May include a pagination cursor
+   * @param options - Request options (timeout, abort signal, etc.)
+   * @returns Promise resolving to the list of tools
+   */
+  listWebMcpTools(
+    params?: McpUiSandboxListToolsRequest["params"],
+    options?: RequestOptions,
+  ) {
+    return this.request(
+      { method: "ui/sandbox-list-tools" as const, params },
+      ListToolsResultSchema,
+      options,
+    );
+  }
+
+  /**
+   * Call a tool the view exposes through WebMCP (`document.modelContext`).
+   *
+   * Sends a `ui/sandbox-call-tool` request, which the Sandbox proxy answers by
+   * executing the tool in the view (see
+   * {@link createModelContextRelay `createModelContextRelay`}). The result has
+   * an empty `content` and the value the tool returned as `structuredContent`
+   * (a non-object value `v` as `{ result: v }`); a tool that throws yields
+   * `isError: true` with its message as text.
+   *
+   * @param params - Tool call parameters (name and arguments)
+   * @param options - Request options (timeout, abort signal, etc.)
+   * @returns Promise resolving to the tool call result
+   */
+  callWebMcpTool(
+    params: McpUiSandboxCallToolRequest["params"],
+    options?: RequestOptions,
+  ) {
+    return this.request(
+      { method: "ui/sandbox-call-tool" as const, params },
+      CallToolResultSchema,
+      options,
+    );
+  }
+
   /**
    * Connect to the view via transport and optionally set up message forwarding.
    *
diff --git a/src/app-webmcp.test.ts b/src/app-webmcp.test.ts
new file mode 100644
index 000000000..b2e3d1465
--- /dev/null
+++ b/src/app-webmcp.test.ts
@@ -0,0 +1,680 @@
+import { afterEach, beforeEach, describe, expect, it, spyOn } from "bun:test";
+import { InMemoryTransport, Server } from "@modelcontextprotocol/server";
+import { z } from "zod/v4";
+
+import { App } from "./app.js";
+import type { WebMcpTool } from "./webmcp.js";
+
+/**
+ * Stand-in for `document.modelContext` with the semantics of the current
+ * WebMCP draft: `registerTool` returns a Promise, rejects duplicate names, and
+ * aborting the registration signal unregisters the tool.
+ */
+function installFakeModelContext() {
+  const tools = new Map<string, WebMcpTool>();
+  const modelContext = {
+    async registerTool(
+      tool: WebMcpTool,
+      options: { signal?: AbortSignal } = {},
+    ) {
+      if (tools.has(tool.name)) {
+        throw new DOMException(
+          `Duplicate tool name: ${tool.name}`,
+          "InvalidStateError",
+        );
+      }
+      tools.set(tool.name, tool);
+      options.signal?.addEventListener("abort", () => {
+        if (tools.get(tool.name) === tool) tools.delete(tool.name);
+      });
+    },
+  };
+  Object.assign(globalThis, { document: { modelContext } });
+  return { tools, modelContext };
+}
+
+/** Let the mirror's async schema conversion + registration settle. */
+const settle = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+const newApp = (capabilities = {}) =>
+  new App({ name: "view-app", version: "1.0.0" }, capabilities, {
+    autoResize: false,
+  });
+
+const noop = () => ({ content: [] });
+
+/** Call a mirrored tool the way a WebMCP consumer would. */
+const execute = (
+  tools: Map<string, WebMcpTool>,
+  name: string,
+  input: Record<string, unknown> = {},
+  signal: AbortSignal = new AbortController().signal,
+) => tools.get(name)!.execute(input, { signal });
+
+let warn: ReturnType<typeof spyOn<Console, "warn">>;
+beforeEach(() => {
+  warn = spyOn(console, "warn").mockImplementation(() => {});
+});
+afterEach(() => {
+  warn.mockRestore();
+  Reflect.deleteProperty(globalThis, "document");
+});
+
+const warnings = (pattern: RegExp) =>
+  warn.mock.calls.filter(([message]) => pattern.test(String(message)));
+
+describe("App.registerTool -> document.modelContext", () => {
+  describe("what is registered", () => {
+    it("exposes the tool's name, title, description, inputSchema and readOnlyHint", async () => {
+      const { tools } = installFakeModelContext();
+      newApp().registerTool(
+        "add",
+        {
+          title: "Add",
+          description: "Adds two numbers",
+          inputSchema: z.object({ a: z.number(), b: z.number() }),
+          outputSchema: z.object({ sum: z.number() }),
+          annotations: { readOnlyHint: true, destructiveHint: false },
+          _meta: { custom: true },
+        },
+        ({ a, b }) => ({
+          content: [{ type: "text", text: String(a + b) }],
+          structuredContent: { sum: a + b },
+        }),
+      );
+      await settle();
+
+      const mirrored = tools.get("add");
+      expect(mirrored).toMatchObject({
+        name: "add",
+        title: "Add",
+        description: "Adds two numbers",
+        annotations: { readOnlyHint: true },
+      });
+      expect(mirrored?.inputSchema).toMatchObject({
+        type: "object",
+        properties: { a: { type: "number" }, b: { type: "number" } },
+      });
+      // WebMCP has no outputSchema / _meta / other annotations.
+      expect(mirrored).not.toHaveProperty("outputSchema");
+      expect(mirrored).not.toHaveProperty("_meta");
+      expect(mirrored?.annotations).toEqual({ readOnlyHint: true });
+    });
+
+    it("omits inputSchema and annotations when there is nothing to carry over, and falls back to title, then name, for an empty description", async () => {
+      const { tools } = installFakeModelContext();
+      const app = newApp();
+      const annotations = { destructiveHint: true };
+      app.registerTool("plain", { description: "d", annotations }, noop);
+      app.registerTool("titled", { title: "Titled" }, noop);
+      app.registerTool("empty-titled", { title: "T2", description: "" }, noop);
+      app.registerTool("bare", { description: "" }, noop);
+      await settle();
+
+      expect(tools.get("plain")?.inputSchema).toBeUndefined();
+      expect(tools.get("plain")?.annotations).toBeUndefined();
+      expect(tools.get("titled")?.description).toBe("Titled");
+      expect(tools.get("empty-titled")?.description).toBe("T2");
+      expect(tools.get("bare")?.description).toBe("bare");
+    });
+
+    it("accepts any Standard JSON Schema implementation, not only zod", async () => {
+      const { tools } = installFakeModelContext();
+      type Point = { x: number; y: number };
+      const PointSchema = {
+        "~standard": {
+          version: 1 as const,
+          vendor: "test",
+          types: undefined as
+            | undefined
+            | { readonly input: Point; readonly output: Point },
+          validate: (v: unknown) =>
+            typeof v === "object" &&
+            v !== null &&
+            typeof (v as Point).x === "number" &&
+            typeof (v as Point).y === "number"
+              ? { value: v as Point }
+              : { issues: [{ message: "expected {x:number,y:number}" }] },
+          jsonSchema: {
+            input: () => ({
+              type: "object",
+              properties: { x: { type: "number" }, y: { type: "number" } },
+              required: ["x", "y"],
+            }),
+            output: () => ({ type: "object" }),
+          },
+        },
+      };
+      newApp().registerTool(
+        "translate",
+        { inputSchema: PointSchema, outputSchema: PointSchema },
+        ({ x, y }) => ({
+          content: [],
+          structuredContent: { x: x + 1, y: y + 1 },
+        }),
+      );
+      await settle();
+
+      expect(tools.get("translate")?.inputSchema).toEqual({
+        type: "object",
+        properties: { x: { type: "number" }, y: { type: "number" } },
+        required: ["x", "y"],
+      });
+      expect(await execute(tools, "translate", { x: 1, y: 2 })).toEqual({
+        x: 2,
+        y: 3,
+      });
+      await expect(execute(tools, "translate", { x: "bad" })).rejects.toThrow(
+        /Invalid input for tool translate/,
+      );
+    });
+
+    it("does not expose a tool whose schema cannot be serialized, and warns instead of throwing", async () => {
+      const { tools } = installFakeModelContext();
+      const app = newApp();
+      expect(() =>
+        app.registerTool(
+          "broken",
+          {
+            inputSchema: {
+              "~standard": {
+                version: 1 as const,
+                vendor: "mystery",
+                validate: () => ({ value: {} }),
+              },
+            },
+          },
+          noop,
+        ),
+      ).not.toThrow();
+      app.registerTool("fine", {}, noop);
+      await settle();
+
+      expect([...tools.keys()]).toEqual(["fine"]);
+      const failures = warnings(/could not be registered/);
+      expect(failures).toHaveLength(1);
+      expect(String(failures[0][0])).toContain('"broken"');
+      expect(String(failures[0][1])).toContain("Standard JSON Schema");
+    });
+  });
+
+  describe("execute", () => {
+    it("validates the input with the tool's schema on every call", async () => {
+      const { tools } = installFakeModelContext();
+      newApp().registerTool(
+        "greet",
+        { inputSchema: z.object({ name: z.string() }) },
+        ({ name }) => ({ content: [{ type: "text", text: `hi ${name}` }] }),
+      );
+      await settle();
+
+      expect(await execute(tools, "greet", { name: "Ada" })).toEqual({
+        content: [{ type: "text", text: "hi Ada" }],
+      });
+      await expect(execute(tools, "greet", { name: 42 })).rejects.toThrow(
+        /Invalid input for tool greet/,
+      );
+      await expect(execute(tools, "greet", {})).rejects.toThrow(
+        /Invalid input for tool greet/,
+      );
+      // Still callable after a failure.
+      expect(await execute(tools, "greet", { name: "Bob" })).toEqual({
+        content: [{ type: "text", text: "hi Bob" }],
+      });
+    });
+
+    it("returns structuredContent as the tool's result, or { content } when there is none", async () => {
+      const { tools } = installFakeModelContext();
+      const app = newApp();
+      app.registerTool("structured", {}, () => ({
+        content: [{ type: "text", text: "ignored" }],
+        structuredContent: { sum: 3 },
+      }));
+      app.registerTool("texty", {}, () => ({
+        content: [{ type: "text", text: "just text" }],
+      }));
+      await settle();
+
+      expect(await execute(tools, "structured")).toEqual({ sum: 3 });
+      expect(await execute(tools, "texty")).toEqual({
+        content: [{ type: "text", text: "just text" }],
+      });
+    });
+
+    it("rejects with the joined text of the content for an isError result", async () => {
+      const { tools } = installFakeModelContext();
+      const app = newApp();
+      app.registerTool("two", {}, () => ({
+        content: [
+          { type: "text", text: "first" },
+          { type: "image", data: "AAAA", mimeType: "image/png" },
+          { type: "text", text: "second" },
+        ],
+        isError: true,
+      }));
+      app.registerTool("empty", {}, () => ({ content: [], isError: true }));
+      await settle();
+
+      await expect(execute(tools, "two")).rejects.toThrow("first\nsecond");
+      await expect(execute(tools, "empty")).rejects.toThrow("Tool call failed");
+    });
+
+    it("rejects with the callback's own error when it throws", async () => {
+      const { tools } = installFakeModelContext();
+      newApp().registerTool("throws", {}, () => {
+        throw new Error("kaboom");
+      });
+      await settle();
+      await expect(execute(tools, "throws")).rejects.toThrow("kaboom");
+    });
+
+    it("validates structuredContent against outputSchema, but not for an isError result", async () => {
+      const { tools } = installFakeModelContext();
+      const app = newApp();
+      const outputSchema = z.object({ ok: z.boolean() });
+      app.registerTool("good", { outputSchema }, () => ({
+        content: [],
+        structuredContent: { ok: true },
+      }));
+      app.registerTool("bad", { outputSchema }, () => ({
+        content: [],
+        structuredContent: { ok: "nope" } as never,
+      }));
+      app.registerTool("errs", { outputSchema }, () => ({
+        content: [{ type: "text", text: "boom" }],
+        isError: true,
+      }));
+      await settle();
+
+      expect(await execute(tools, "good")).toEqual({ ok: true });
+      await expect(execute(tools, "bad")).rejects.toThrow(
+        /Invalid output for tool bad/,
+      );
+      await expect(execute(tools, "errs")).rejects.toThrow("boom");
+    });
+
+    it("gives the callback the parsed arguments (when it has an inputSchema) and a request context tied to each call's signal", async () => {
+      const { tools } = installFakeModelContext();
+      const seen: Array<{ id: unknown; method: string; signal: AbortSignal }> =
+        [];
+      const app = newApp();
+      app.registerTool("probe", {}, (extra) => {
+        seen.push(extra.mcpReq);
+        return noop();
+      });
+      let parsed: unknown;
+      app.registerTool(
+        "args",
+        { inputSchema: z.object({ n: z.number().default(7) }) },
+        (args, extra) => {
+          parsed = args;
+          seen.push(extra.mcpReq);
+          return noop();
+        },
+      );
+      await settle();
+
+      const first = new AbortController();
+      const second = new AbortController();
+      await execute(tools, "probe", {}, first.signal);
+      await execute(tools, "args", {}, second.signal);
+
+      expect(parsed).toEqual({ n: 7 });
+      expect(seen.map((s) => s.method)).toEqual(["tools/call", "tools/call"]);
+      expect(seen[0].signal).toBe(first.signal);
+      expect(seen[1].signal).toBe(second.signal);
+      expect(typeof seen[0].id).toBe("string");
+      expect(seen[0].id).not.toBe(seen[1].id);
+    });
+  });
+
+  describe("RegisteredAppTool handle", () => {
+    it("re-syncs the registration on disable / enable / update / remove", async () => {
+      const { tools } = installFakeModelContext();
+      const registered = newApp().registerTool(
+        "tool",
+        { description: "v1" },
+        noop,
+      );
+      await settle();
+      expect(tools.get("tool")?.description).toBe("v1");
+
+      registered.disable();
+      await settle();
+      expect(tools.has("tool")).toBe(false);
+
+      registered.enable();
+      await settle();
+      expect(tools.get("tool")?.description).toBe("v1");
+
+      registered.update({ description: "v2", title: "T2" });
+      await settle();
+      expect(tools.get("tool")).toMatchObject({
+        description: "v2",
+        title: "T2",
+      });
+
+      registered.update({ annotations: { readOnlyHint: true } });
+      await settle();
+      expect(tools.get("tool")?.annotations).toEqual({ readOnlyHint: true });
+
+      registered.remove();
+      await settle();
+      expect(tools.has("tool")).toBe(false);
+    });
+
+    it("honors update({ inputSchema }) in the exposed schema and in validation", async () => {
+      const { tools } = installFakeModelContext();
+      const registered = newApp().registerTool(
+        "evolving",
+        { inputSchema: z.object({ a: z.string() }) },
+        (args: any) => ({
+          content: [{ type: "text", text: JSON.stringify(args) }],
+        }),
+      );
+      await settle();
+      await expect(execute(tools, "evolving", { a: 123 })).rejects.toThrow(
+        /Invalid input/,
+      );
+
+      registered.update({ inputSchema: z.object({ a: z.number() }) });
+      await settle();
+
+      expect(tools.get("evolving")?.inputSchema).toMatchObject({
+        properties: { a: { type: "number" } },
+      });
+      expect(await execute(tools, "evolving", { a: 123 })).toEqual({
+        content: [{ type: "text", text: '{"a":123}' }],
+      });
+    });
+
+    it("keeps only the latest state when changed several times in a row", async () => {
+      const { tools } = installFakeModelContext();
+      const registered = newApp().registerTool(
+        "busy",
+        { description: "v0", inputSchema: z.object({}) },
+        noop,
+      );
+      registered.update({ description: "v1" });
+      registered.disable();
+      registered.enable();
+      registered.update({ description: "v2" });
+      await settle();
+
+      expect([...tools.keys()]).toEqual(["busy"]);
+      expect(tools.get("busy")?.description).toBe("v2");
+      expect(warnings(/could not be registered/)).toHaveLength(0);
+    });
+
+    it("rejects a duplicate name, but allows the name again after remove()", async () => {
+      const { tools } = installFakeModelContext();
+      const app = newApp();
+      const first = app.registerTool("dup", { description: "one" }, noop);
+      expect(() => app.registerTool("dup", {}, noop)).toThrow(
+        /already registered/,
+      );
+
+      first.remove();
+      app.registerTool("dup", { description: "two" }, noop);
+      await settle();
+      expect(tools.get("dup")?.description).toBe("two");
+    });
+
+    it("ignores remove() from a stale handle after the name was re-registered", async () => {
+      const { tools } = installFakeModelContext();
+      const app = newApp();
+      const stale = app.registerTool("phoenix", { description: "old" }, noop);
+      stale.remove();
+      app.registerTool("phoenix", { description: "new" }, noop);
+      stale.remove();
+      await settle();
+
+      expect(tools.get("phoenix")?.description).toBe("new");
+    });
+
+    it("rejects the handler when the tool is disabled", async () => {
+      installFakeModelContext();
+      const registered = newApp().registerTool("t", {}, noop);
+      registered.disable();
+      await expect((registered.handler as any)({})).rejects.toThrow(
+        "Tool t is disabled",
+      );
+    });
+
+    it("stays usable when there is no document.modelContext", async () => {
+      const app = newApp();
+      const registered = app.registerTool(
+        "offline",
+        { description: "v1", inputSchema: z.object({ n: z.number() }) },
+        ({ n }) => ({ content: [{ type: "text", text: String(n) }] }),
+      );
+
+      expect(() => registered.disable()).not.toThrow();
+      expect(registered.enabled).toBe(false);
+      expect(() => registered.enable()).not.toThrow();
+      expect(registered.enabled).toBe(true);
+      expect(() => registered.update({ description: "v2" })).not.toThrow();
+      expect(registered.description).toBe("v2");
+      expect(
+        await (registered.handler as any)({ n: 5 }, { mcpReq: {} }),
+      ).toEqual({ content: [{ type: "text", text: "5" }] });
+      expect(() => registered.remove()).not.toThrow();
+      // The name is free again.
+      expect(() => app.registerTool("offline", {}, noop)).not.toThrow();
+    });
+  });
+
+  describe("when WebMCP cannot take the tool", () => {
+    it("does not throw, warns once, and leaves a natively registered tool of the same name alone", async () => {
+      const { tools, modelContext } = installFakeModelContext();
+      const native: WebMcpTool = {
+        name: "taken",
+        description: "native",
+        execute: async () => "native",
+      };
+      await modelContext.registerTool(native);
+
+      const app = newApp();
+      let registered!: ReturnType<App["registerTool"]>;
+      expect(() => {
+        registered = app.registerTool("taken", {}, noop);
+      }).not.toThrow();
+      await settle();
+
+      expect(tools.get("taken")).toBe(native);
+      const failures = warnings(/could not be registered/);
+      expect(failures).toHaveLength(1);
+      expect(String(failures[0][0])).toContain('"taken"');
+      expect(failures[0][1]).toMatchObject({ name: "InvalidStateError" });
+
+      // Changing the handle never disturbs the native tool.
+      registered.update({ description: "mine" });
+      registered.disable();
+      registered.remove();
+      await settle();
+      expect(tools.get("taken")).toBe(native);
+    });
+
+    it("warns once per App when document.modelContext is missing, and not when there is one", async () => {
+      const app = newApp();
+      expect(() => app.registerTool("a", {}, noop)).not.toThrow();
+      app.registerTool("b", {}, noop);
+      expect(warnings(/document\.modelContext is not available/)).toHaveLength(
+        1,
+      );
+      newApp().registerTool("c", {}, noop);
+      expect(warnings(/document\.modelContext is not available/)).toHaveLength(
+        2,
+      );
+
+      warn.mockClear();
+      installFakeModelContext();
+      newApp().registerTool("d", {}, noop);
+      await settle();
+      expect(warnings(/is not available/)).toHaveLength(0);
+    });
+
+    it.each([
+      ["document without modelContext", { document: {} }],
+      [
+        "a modelContext without registerTool",
+        { document: { modelContext: {} } },
+      ],
+      ["no document", {}],
+    ])("treats %s as missing", (_label, globals) => {
+      Object.assign(globalThis, globals);
+      newApp().registerTool("a", {}, noop);
+      expect(warnings(/document\.modelContext is not available/)).toHaveLength(
+        1,
+      );
+    });
+  });
+
+  describe("deprecation warnings", () => {
+    it("warns once per App instance about registerTool", () => {
+      installFakeModelContext();
+      const app = newApp();
+      app.registerTool("a", {}, noop);
+      app.registerTool("b", {}, noop);
+      expect(warnings(/registerTool\(\) is deprecated/)).toHaveLength(1);
+      expect(String(warnings(/deprecated/)[0][0])).toContain("WebMCP");
+
+      newApp().registerTool("c", {}, noop);
+      expect(warnings(/registerTool\(\) is deprecated/)).toHaveLength(2);
+    });
+
+    it.each(["oncalltool", "onlisttools"] as const)(
+      "warns once per App instance when app.%s is assigned, but not when it is cleared",
+      (prop) => {
+        const app = newApp({ tools: {} });
+        const pattern = new RegExp(`App\\.${prop} is deprecated`);
+
+        (app as any)[prop] = undefined;
+        expect(warnings(pattern)).toHaveLength(0);
+
+        (app as any)[prop] = async () => ({ content: [], tools: [] });
+        (app as any)[prop] = async () => ({ content: [], tools: [] });
+        expect(warnings(pattern)).toHaveLength(1);
+
+        const other = newApp({ tools: {} });
+        (other as any)[prop] = async () => ({ content: [], tools: [] });
+        expect(warnings(pattern)).toHaveLength(2);
+      },
+    );
+  });
+
+  describe("App lifecycle", () => {
+    async function connectToHost(app: App) {
+      const [appTransport, hostTransport] =
+        InMemoryTransport.createLinkedPair();
+      const host = new Server(
+        { name: "host", version: "0.0.0" },
+        { capabilities: {} },
+      );
+      let appCapabilities: Record<string, unknown> | undefined;
+      const toolListChanged: unknown[] = [];
+      host.setRequestHandler(
+        "ui/initialize",
+        { params: z.any(), result: z.any() },
+        (params: any) => {
+          appCapabilities = params.appCapabilities;
+          return {
+            protocolVersion: "2026-01-26",
+            hostCapabilities: {},
+            hostInfo: { name: "host", version: "0.0.0" },
+            hostContext: {},
+          };
+        },
+      );
+      host.setNotificationHandler(
+        "notifications/tools/list_changed",
+        (notification: unknown) => void toolListChanged.push(notification),
+      );
+      await host.connect(hostTransport);
+      await app.connect(appTransport);
+      await settle();
+      return {
+        host,
+        toolListChanged,
+        appCapabilities: () => appCapabilities,
+      };
+    }
+
+    it("unregisters every tool when the App closes", async () => {
+      const { tools } = installFakeModelContext();
+      const app = newApp();
+      app.registerTool("a", {}, noop);
+      app.registerTool("b", { inputSchema: z.object({}) }, noop);
+      const { host } = await connectToHost(app);
+      expect([...tools.keys()].sort()).toEqual(["a", "b"]);
+
+      await app.close();
+      expect(tools.size).toBe(0);
+      await host.close();
+    });
+
+    it("lets a callback send requests and notifications to the host through the App", async () => {
+      const { tools } = installFakeModelContext();
+      const app = newApp();
+      app.registerTool("ctx", {}, async (extra) => {
+        await extra.mcpReq.send({ method: "ping" });
+        await extra.mcpReq.notify({
+          method: "notifications/tools/list_changed",
+        });
+        return noop();
+      });
+      const { host, toolListChanged } = await connectToHost(app);
+
+      await execute(tools, "ctx");
+      await settle();
+      expect(toolListChanged).toHaveLength(1);
+      await host.close();
+    });
+
+    it("does not declare the tools capability, and does not serve tools/list or tools/call", async () => {
+      const { tools } = installFakeModelContext();
+      const app = newApp();
+      app.registerTool("viewtool", {}, noop);
+      const { host, appCapabilities } = await connectToHost(app);
+
+      expect(appCapabilities()).not.toHaveProperty("tools");
+      await expect(
+        host.request({ method: "tools/list", params: {} }),
+      ).rejects.toThrow(/method not found/i);
+      await expect(
+        host.request({
+          method: "tools/call",
+          params: { name: "viewtool", arguments: {} },
+        }),
+      ).rejects.toThrow(/method not found/i);
+      // ...yet the tool is reachable through WebMCP.
+      expect(tools.has("viewtool")).toBe(true);
+      await host.close();
+    });
+
+    it("passes through the tools capability the caller declares, without adding one itself", async () => {
+      installFakeModelContext();
+      const declared = newApp({ tools: { listChanged: true } });
+      declared.registerTool("a", {}, noop);
+      const { host, appCapabilities } = await connectToHost(declared);
+      expect(appCapabilities()?.tools).toEqual({ listChanged: true });
+      await host.close();
+    });
+
+    it("does not send tools/list_changed over the wire when registered tools change", async () => {
+      installFakeModelContext();
+      const app = newApp({ tools: { listChanged: true } });
+      const { host, toolListChanged } = await connectToHost(app);
+
+      const registered = app.registerTool("a", {}, noop);
+      registered.disable();
+      registered.enable();
+      registered.update({ description: "x" });
+      registered.remove();
+      await settle();
+
+      expect(toolListChanged).toEqual([]);
+      await host.close();
+    });
+  });
+});
diff --git a/src/app.examples.ts b/src/app.examples.ts
index 7d475efa0..352aea256 100644
--- a/src/app.examples.ts
+++ b/src/app.examples.ts
@@ -85,7 +85,7 @@ function App_constructor_basic() {
   //#region App_constructor_basic
   const app = new App(
     { name: "MyApp", version: "1.0.0" },
-    { tools: { listChanged: true } }, // capabilities
+    { availableDisplayModes: ["inline"] }, // capabilities
     { autoResize: true }, // options
   );
   //#endregion App_constructor_basic
diff --git a/src/app.test.ts b/src/app.test.ts
index 8420e81ea..990c56917 100644
--- a/src/app.test.ts
+++ b/src/app.test.ts
@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it } from "bun:test";
+import { afterEach, describe, expect, it, spyOn } from "bun:test";
 import {
   InMemoryTransport,
   Server,
@@ -144,19 +144,29 @@ describe("App base MCP SDK v2 Protocol migration", () => {
     });
   });
 
-  it("preserves registered App tools with the base MCP SDK v2 Client handler context", async () => {
+  it("preserves App tool handlers with the base MCP SDK v2 Client handler context", async () => {
     const pair = await connectPair();
     connected.push(pair);
     let receivedSignal: AbortSignal | undefined;
-
-    pair.app.registerTool(
-      "greet",
-      { description: "Greets a person" },
-      async (extra) => {
+    const warn = spyOn(console, "warn").mockImplementation(() => {});
+
+    try {
+      pair.app.onlisttools = async () => ({
+        tools: [
+          {
+            name: "greet",
+            description: "Greets a person",
+            inputSchema: { type: "object" as const, properties: {} },
+          },
+        ],
+      });
+      pair.app.oncalltool = async (_params, extra) => {
         receivedSignal = extra.mcpReq.signal;
         return { content: [{ type: "text", text: "hello" }] };
-      },
-    );
+      };
+    } finally {
+      warn.mockRestore();
+    }
 
     const listed = await pair.server.request({
       method: "tools/list",
diff --git a/src/app.ts b/src/app.ts
index 89c6c35e7..d82553256 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -40,6 +40,11 @@ export type {
 export { EventDispatcher } from "./events.js";
 
 import { PostMessageTransport } from "./message-transport.js";
+import {
+  callToolResultText,
+  getWebMcpModelContext,
+  type WebMcpModelContext,
+} from "./webmcp.js";
 import {
   LATEST_PROTOCOL_VERSION,
   McpUiAppCapabilities,
@@ -88,23 +93,6 @@ type MethodSchema = ZodObject<{
   params: ZodType;
 }>;
 
-function mergeAppCapabilities(
-  base: McpUiAppCapabilities,
-  additional: McpUiAppCapabilities,
-): McpUiAppCapabilities {
-  const result = { ...base, ...additional };
-  if (additional.experimental !== undefined) {
-    result.experimental = {
-      ...base.experimental,
-      ...additional.experimental,
-    };
-  }
-  if (additional.tools !== undefined) {
-    result.tools = { ...base.tools, ...additional.tools };
-  }
-  return result;
-}
-
 export type {
   StandardSchemaV1,
   StandardSchemaWithJSON,
@@ -307,6 +295,10 @@ export class App extends Protocol<BaseContext> {
   private _hostInfo?: Implementation;
   private _hostContext?: McpUiHostContext;
   private _registeredTools: { [name: string]: RegisteredAppTool } = {};
+  /** Tools currently mirrored into `document.modelContext`, by name. */
+  private readonly _webMcpRegistrations = new Map<string, AbortController>();
+  private _webMcpCallCount = 0;
+  private readonly _warned = new Set<string>();
   private _initializedSent = false;
   private readonly _registeredEvents = new Set<keyof AppEventMap>();
   private readonly _events = new EventDispatcher<AppEventMap>();
@@ -535,7 +527,7 @@ export class App extends Protocol<BaseContext> {
    * ```ts source="./app.examples.ts#App_constructor_basic"
    * const app = new App(
    *   { name: "MyApp", version: "1.0.0" },
-   *   { tools: { listChanged: true } }, // capabilities
+   *   { availableDisplayModes: ["inline"] }, // capabilities
    *   { autoResize: true }, // options
    * );
    * ```
@@ -570,18 +562,27 @@ export class App extends Protocol<BaseContext> {
     return ctx;
   }
 
-  private registerAppCapabilities(capabilities: McpUiAppCapabilities): void {
-    if (this.transport) {
-      throw new Error(
-        "Cannot register capabilities after transport is established",
-      );
-    }
-    this._appCapabilities = mergeAppCapabilities(
-      this._appCapabilities,
-      capabilities,
-    );
-  }
-
+  /**
+   * Register a tool that the host can list and call.
+   *
+   * @deprecated Use `document.modelContext.registerTool()`
+   * ({@link https://webmachinelearning.github.io/webmcp/ WebMCP}) instead, as
+   * {@link https://github.com/modelcontextprotocol/ext-apps/issues/797 #797}
+   * converges View-registered tools on it. See the "Tools exposed by the View
+   * (WebMCP)" section of the 3.x migration guide.
+   *
+   * This is a thin wrapper over `document.modelContext.registerTool()`, which
+   * the host provides (natively, or via a polyfill it injects into the View's
+   * HTML). This App no longer serves the tool over `tools/list` /
+   * `tools/call` or declares the `tools` app capability; without a
+   * `document.modelContext` the tool is not exposed and a warning is logged.
+   *
+   * The callback keeps returning a `CallToolResult`: `structuredContent` (or
+   * `{ content }` when absent) becomes the WebMCP result, and `isError: true`
+   * rejects with the text of its content. Input is validated with
+   * `inputSchema` on every call. `outputSchema` only validates the result, and
+   * `_meta` and all annotations but `readOnlyHint` are not exposed.
+   */
   registerTool<
     OutputArgs extends undefined | StandardSchemaV1 = undefined,
     InputArgs extends undefined | StandardSchemaV1 = undefined,
@@ -601,11 +602,7 @@ export class App extends Protocol<BaseContext> {
       throw new Error(`Tool ${name} is already registered`);
     }
     const app = this;
-    const notify = () => {
-      if (app._initializedSent && app._appCapabilities.tools?.listChanged) {
-        void app.sendToolListChanged();
-      }
-    };
+    const notify = () => app.syncWebMcpTool(name);
     // Arity is fixed at registration time even if inputSchema is later
     // update()d, since cb's signature can't change.
     const cbTakesArgs = config.inputSchema !== undefined;
@@ -669,71 +666,129 @@ export class App extends Protocol<BaseContext> {
 
     this._registeredTools[name] = registeredTool;
 
-    // Auto-register tools capability so setRequestHandler's capability check
-    // passes. Mirrors McpServer.registerTool behavior — callers shouldn't need
-    // to declare { tools: {} } in the constructor just to use registerTool.
-    // Only do this pre-connect; post-connect the capability was already
-    // advertised (or wasn't) and can't change.
-    if (!this._appCapabilities.tools && !this.transport) {
-      this.registerAppCapabilities({ tools: { listChanged: true } });
-    }
-
-    this.ensureToolHandlersInitialized();
+    this.warnDeprecated("registerTool()");
     notify();
     return registeredTool;
   }
 
-  private _toolHandlersInitialized = false;
-  private ensureToolHandlersInitialized(): void {
-    if (this._toolHandlersInitialized) {
+  /**
+   * Bring the `document.modelContext` mirror of the tool registered under
+   * `name` in line with its current state: (re-)registered when present and
+   * enabled, unregistered otherwise.
+   */
+  private syncWebMcpTool(name: string): void {
+    this._webMcpRegistrations.get(name)?.abort();
+    this._webMcpRegistrations.delete(name);
+
+    const tool = this._registeredTools[name];
+    if (!tool?.enabled) return;
+    const modelContext = getWebMcpModelContext();
+    if (!modelContext) {
+      this.warnOnce(
+        "no-model-context",
+        "document.modelContext is not available, so tools registered with " +
+          "App.registerTool() are not exposed to the host. The host is " +
+          "expected to provide it (natively or via a polyfill injected into " +
+          "the View's HTML).",
+      );
       return;
     }
-    this._toolHandlersInitialized = true;
 
-    this.oncalltool = async (params, extra) => {
-      const tool = this._registeredTools[params.name];
-      if (!tool) {
-        throw new Error(`Tool ${params.name} not found`);
-      }
-      return tool.handler(params.arguments, extra);
-    };
-    this.onlisttools = async (_params, _extra) => {
-      const tools: Tool[] = await Promise.all(
-        Object.entries(this._registeredTools)
-          .filter(([_, tool]) => tool.enabled)
-          .map(async ([name, tool]) => {
-            const result: Tool = {
-              name,
-              title: tool.title,
-              description: tool.description,
-              inputSchema: (tool.inputSchema
-                ? await standardSchemaToJsonSchema(tool.inputSchema, "input")
-                : {
-                    type: "object" as const,
-                    properties: {},
-                  }) as Tool["inputSchema"],
-            };
-            // outputSchema is optional in core MCP — only emit when the app
-            // provided one, otherwise hosts would assume structuredContent.
-            if (tool.outputSchema) {
-              result.outputSchema = (await standardSchemaToJsonSchema(
-                tool.outputSchema,
-                "output",
-              )) as Tool["outputSchema"];
-            }
-            if (tool.annotations) {
-              result.annotations = tool.annotations;
-            }
-            if (tool._meta) {
-              result._meta = tool._meta;
-            }
-            return result;
-          }),
+    const controller = new AbortController();
+    this._webMcpRegistrations.set(name, controller);
+    void this.mirrorToWebMcp(name, tool, modelContext, controller.signal);
+  }
+
+  private warnDeprecated(api: string): void {
+    this.warnOnce(
+      api,
+      `App.${api} is deprecated: expose tools with document.modelContext.registerTool() (WebMCP) instead.`,
+    );
+  }
+
+  private warnOnce(key: string, message: string): void {
+    if (this._warned.has(key)) return;
+    this._warned.add(key);
+    console.warn(`[MCP Apps] ${message}`);
+  }
+
+  private async mirrorToWebMcp(
+    name: string,
+    tool: RegisteredAppTool,
+    modelContext: WebMcpModelContext,
+    signal: AbortSignal,
+  ): Promise<void> {
+    try {
+      const inputSchema = tool.inputSchema
+        ? await standardSchemaToJsonSchema(tool.inputSchema, "input")
+        : undefined;
+      if (signal.aborted) return;
+      await modelContext.registerTool(
+        {
+          name,
+          title: tool.title,
+          description: tool.description || tool.title || name,
+          inputSchema,
+          annotations:
+            tool.annotations?.readOnlyHint === undefined
+              ? undefined
+              : { readOnlyHint: tool.annotations.readOnlyHint },
+          execute: async (input, options) => {
+            const result = await tool.handler(
+              input,
+              this.buildWebMcpContext(options.signal),
+            );
+            if (result.isError) throw new Error(callToolResultText(result));
+            return result.structuredContent ?? { content: result.content };
+          },
+        },
+        { signal },
       );
-      return { tools };
+    } catch (error) {
+      // A failed registration (invalid name, unserializable schema, duplicate…)
+      // means the tool does not exist for the host.
+      if (!signal.aborted) {
+        console.warn(
+          `[MCP Apps] Tool "${name}" could not be registered with document.modelContext and is not exposed to the host:`,
+          error,
+        );
+      }
+    }
+  }
+
+  /**
+   * Handler context for a tool call that arrived through WebMCP rather than a
+   * `tools/call` request: same shape as the wire path, with a synthetic
+   * request id and `send`/`notify` going out over this App's own transport.
+   */
+  private buildWebMcpContext(signal: AbortSignal): RequestHandlerExtra {
+    return {
+      mcpReq: {
+        id: `webmcp-${++this._webMcpCallCount}`,
+        method: "tools/call",
+        signal,
+        requestState: () => undefined,
+        send: ((...args: [never, ...never[]]) =>
+          (this.request as (...a: unknown[]) => unknown)(
+            ...args,
+          )) as RequestHandlerExtra["mcpReq"]["send"],
+        notify: (notification) => this.notification(notification),
+      },
     };
   }
 
+  protected override _onclose(): void {
+    for (const controller of this._webMcpRegistrations.values()) {
+      controller.abort();
+    }
+    this._webMcpRegistrations.clear();
+    super._onclose();
+  }
+
+  /**
+   * @deprecated WebMCP announces tool changes itself (`toolchange`); only
+   * useful with the deprecated `oncalltool` / `onlisttools` handlers.
+   */
   async sendToolListChanged(
     params: ToolListChangedNotification["params"] = {},
   ): Promise<void> {
@@ -1127,11 +1182,14 @@ export class App extends Protocol<BaseContext> {
    *   throw new Error(`Unknown tool: ${params.name}`);
    * };
    * ```
+   *
+   * @deprecated Expose tools with `document.modelContext.registerTool()` (WebMCP) instead; see {@link registerTool `registerTool`}.
    */
   private _oncalltool?: (
     params: CallToolRequest["params"],
     extra: RequestHandlerExtra,
   ) => Promise<CallToolResult>;
+  /** @deprecated Expose tools with `document.modelContext.registerTool()` (WebMCP) instead; see {@link registerTool `registerTool`}. */
   get oncalltool() {
     return this._oncalltool;
   }
@@ -1143,6 +1201,7 @@ export class App extends Protocol<BaseContext> {
         ) => Promise<CallToolResult>)
       | undefined,
   ) {
+    if (callback) this.warnDeprecated("oncalltool");
     this.warnIfRequestHandlerReplaced("oncalltool", this._oncalltool, callback);
     this._oncalltool = callback;
     this.replaceRequestHandler("tools/call", (request, extra) => {
@@ -1194,11 +1253,14 @@ export class App extends Protocol<BaseContext> {
    * ```
    *
    * @see {@link oncalltool `oncalltool`} for handling tool execution
+   *
+   * @deprecated Expose tools with `document.modelContext.registerTool()` (WebMCP) instead; see {@link registerTool `registerTool`}.
    */
   private _onlisttools?: (
     params: ListToolsRequest["params"],
     extra: RequestHandlerExtra,
   ) => Promise<ListToolsResult>;
+  /** @deprecated Expose tools with `document.modelContext.registerTool()` (WebMCP) instead; see {@link registerTool `registerTool`}. */
   get onlisttools() {
     return this._onlisttools;
   }
@@ -1210,6 +1272,7 @@ export class App extends Protocol<BaseContext> {
         ) => Promise<ListToolsResult>)
       | undefined,
   ) {
+    if (callback) this.warnDeprecated("onlisttools");
     this.warnIfRequestHandlerReplaced(
       "onlisttools",
       this._onlisttools,
diff --git a/src/generated/schema.json b/src/generated/schema.json
index 246ed7d9b..c72f3fdd3 100644
--- a/src/generated/schema.json
+++ b/src/generated/schema.json
@@ -4391,6 +4391,59 @@
       },
       "additionalProperties": {}
     },
+    "McpUiSandboxCallToolRequest": {
+      "$schema": "https://json-schema.org/draft/2020-12/schema",
+      "type": "object",
+      "properties": {
+        "method": {
+          "type": "string",
+          "const": "ui/sandbox-call-tool"
+        },
+        "params": {
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string",
+              "description": "Name of the tool to call."
+            },
+            "arguments": {
+              "description": "Arguments of the call.",
+              "type": "object",
+              "propertyNames": {
+                "type": "string"
+              },
+              "additionalProperties": {}
+            }
+          },
+          "required": ["name"],
+          "additionalProperties": false
+        }
+      },
+      "required": ["method", "params"],
+      "additionalProperties": false
+    },
+    "McpUiSandboxListToolsRequest": {
+      "$schema": "https://json-schema.org/draft/2020-12/schema",
+      "type": "object",
+      "properties": {
+        "method": {
+          "type": "string",
+          "const": "ui/sandbox-list-tools"
+        },
+        "params": {
+          "type": "object",
+          "properties": {
+            "cursor": {
+              "description": "Pagination cursor from a previous result.",
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        }
+      },
+      "required": ["method"],
+      "additionalProperties": false
+    },
     "McpUiSandboxProxyReadyNotification": {
       "$schema": "https://json-schema.org/draft/2020-12/schema",
       "type": "object",
@@ -4501,6 +4554,23 @@
       "required": ["method", "params"],
       "additionalProperties": false
     },
+    "McpUiSandboxToolsChangedNotification": {
+      "$schema": "https://json-schema.org/draft/2020-12/schema",
+      "type": "object",
+      "properties": {
+        "method": {
+          "type": "string",
+          "const": "ui/notifications/sandbox-tools-changed"
+        },
+        "params": {
+          "type": "object",
+          "properties": {},
+          "additionalProperties": false
+        }
+      },
+      "required": ["method"],
+      "additionalProperties": false
+    },
     "McpUiSizeChangedNotification": {
       "$schema": "https://json-schema.org/draft/2020-12/schema",
       "type": "object",
diff --git a/src/generated/schema.test.ts b/src/generated/schema.test.ts
index 57d989fd0..e11478a9a 100644
--- a/src/generated/schema.test.ts
+++ b/src/generated/schema.test.ts
@@ -55,6 +55,18 @@ export type McpUiResourcePermissionsSchemaInferredType = z.infer<
   typeof generated.McpUiResourcePermissionsSchema
 >;
 
+export type McpUiSandboxListToolsRequestSchemaInferredType = z.infer<
+  typeof generated.McpUiSandboxListToolsRequestSchema
+>;
+
+export type McpUiSandboxCallToolRequestSchemaInferredType = z.infer<
+  typeof generated.McpUiSandboxCallToolRequestSchema
+>;
+
+export type McpUiSandboxToolsChangedNotificationSchemaInferredType = z.infer<
+  typeof generated.McpUiSandboxToolsChangedNotificationSchema
+>;
+
 export type McpUiSizeChangedNotificationSchemaInferredType = z.infer<
   typeof generated.McpUiSizeChangedNotificationSchema
 >;
@@ -213,6 +225,24 @@ expectType<spec.McpUiResourcePermissions>(
 expectType<McpUiResourcePermissionsSchemaInferredType>(
   {} as spec.McpUiResourcePermissions,
 );
+expectType<spec.McpUiSandboxListToolsRequest>(
+  {} as McpUiSandboxListToolsRequestSchemaInferredType,
+);
+expectType<McpUiSandboxListToolsRequestSchemaInferredType>(
+  {} as spec.McpUiSandboxListToolsRequest,
+);
+expectType<spec.McpUiSandboxCallToolRequest>(
+  {} as McpUiSandboxCallToolRequestSchemaInferredType,
+);
+expectType<McpUiSandboxCallToolRequestSchemaInferredType>(
+  {} as spec.McpUiSandboxCallToolRequest,
+);
+expectType<spec.McpUiSandboxToolsChangedNotification>(
+  {} as McpUiSandboxToolsChangedNotificationSchemaInferredType,
+);
+expectType<McpUiSandboxToolsChangedNotificationSchemaInferredType>(
+  {} as spec.McpUiSandboxToolsChangedNotification,
+);
 expectType<spec.McpUiSizeChangedNotification>(
   {} as McpUiSizeChangedNotificationSchemaInferredType,
 );
diff --git a/src/generated/schema.ts b/src/generated/schema.ts
index 214b227c2..00b92aab3 100644
--- a/src/generated/schema.ts
+++ b/src/generated/schema.ts
@@ -338,6 +338,58 @@ export const McpUiResourcePermissionsSchema = z.object({
     ),
 });
 
+/**
+ * @description Request (Host -> Sandbox proxy) for the tools the View exposes
+ * through WebMCP (`document.modelContext`). Answered by the Sandbox proxy, not
+ * forwarded to the View. The result is a `ListToolsResult`.
+ * @internal
+ * @see {@link app-bridge!AppBridge.listWebMcpTools `AppBridge.listWebMcpTools`} for the method that sends this request
+ */
+export const McpUiSandboxListToolsRequestSchema = z.object({
+  method: z.literal("ui/sandbox-list-tools"),
+  params: z
+    .object({
+      /** @description Pagination cursor from a previous result. */
+      cursor: z
+        .string()
+        .optional()
+        .describe("Pagination cursor from a previous result."),
+    })
+    .optional(),
+});
+
+/**
+ * @description Request (Host -> Sandbox proxy) to call a tool the View exposes
+ * through WebMCP. Answered by the Sandbox proxy, not forwarded to the View. The
+ * result is a `CallToolResult`: `content` is empty and `structuredContent` is
+ * the value the tool returned.
+ * @internal
+ * @see {@link app-bridge!AppBridge.callWebMcpTool `AppBridge.callWebMcpTool`} for the method that sends this request
+ */
+export const McpUiSandboxCallToolRequestSchema = z.object({
+  method: z.literal("ui/sandbox-call-tool"),
+  params: z.object({
+    /** @description Name of the tool to call. */
+    name: z.string().describe("Name of the tool to call."),
+    /** @description Arguments of the call. */
+    arguments: z
+      .record(z.string(), z.unknown())
+      .optional()
+      .describe("Arguments of the call."),
+  }),
+});
+
+/**
+ * @description Notification (Sandbox proxy -> Host) that the tools the View
+ * exposes through WebMCP changed.
+ * @internal
+ * @see {@link app-bridge!AppBridge.onwebmcptoolschange `AppBridge.onwebmcptoolschange`}
+ */
+export const McpUiSandboxToolsChangedNotificationSchema = z.object({
+  method: z.literal("ui/notifications/sandbox-tools-changed"),
+  params: z.object({}).optional(),
+});
+
 /**
  * @description Notification of UI size changes (View -> Host).
  * @see {@link app!App.sendSizeChanged `App.sendSizeChanged`} for the method to send this from View
@@ -598,7 +650,11 @@ export const McpUiAppCapabilitiesSchema = z.object({
     )
     .optional()
     .describe("Experimental features keyed by identifier."),
-  /** @description App exposes MCP-style tools that the host can call. */
+  /**
+   * @description App exposes MCP-style tools that the host can call.
+   * @deprecated Expose tools with WebMCP (`document.modelContext.registerTool()`)
+   *   instead. Hosts should not gate `tools/list` / `tools/call` on this capability.
+   */
   tools: z
     .object({
       /** @description App supports tools/list_changed notifications. */
diff --git a/src/model-context-host.test.ts b/src/model-context-host.test.ts
new file mode 100644
index 000000000..cd2899753
--- /dev/null
+++ b/src/model-context-host.test.ts
@@ -0,0 +1,1309 @@
+import { afterEach, beforeEach, describe, expect, it, spyOn } from "bun:test";
+import {
+  InMemoryTransport,
+  type JSONRPCMessage,
+  type Transport,
+} from "@modelcontextprotocol/client";
+import { z } from "zod/v4";
+
+import { App } from "./app.js";
+import { AppBridge, createModelContextRelay } from "./app-bridge.js";
+import {
+  injectModelContextPolyfill,
+  MODEL_CONTEXT_POLYFILL_SOURCE,
+} from "./model-context-host.js";
+
+/** Wait for pending microtasks/timers to complete. */
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+/**
+ * Runs the polyfill the way a View does: as plain script text in the global
+ * scope, with no access to anything in this module.
+ */
+const install = (doc: object) => (0, eval)(MODEL_CONTEXT_POLYFILL_SOURCE)(doc);
+
+/** A getter that answers `first` once and `later` from then on. */
+const flipping = (first: unknown, later: unknown) => {
+  let reads = 0;
+  return { get: () => (reads++ === 0 ? first : later), enumerable: true };
+};
+
+// ── The polyfill ──────────────────────────────────────────────────────────
+
+/** Installs the polyfill on a fake document and returns its modelContext. */
+function setup() {
+  const doc: any = {
+    defaultView: { fake: "window" },
+    location: { origin: "http://view.test" },
+  };
+  install(doc);
+  const toolchanges = { count: 0 };
+  doc.modelContext.addEventListener("toolchange", () => toolchanges.count++);
+  return { doc, modelContext: doc.modelContext, toolchanges };
+}
+
+const tool = (name: string, extra: object = {}) => ({
+  name,
+  description: `The ${name} tool`,
+  execute: async () => ({ content: [{ type: "text", text: name }] }),
+  ...extra,
+});
+
+const toolNames = async (modelContext: any) =>
+  (await modelContext.getTools()).map((t: any) => t.name);
+
+describe("the WebMCP polyfill", () => {
+  it("leaves a native or foreign modelContext alone", () => {
+    for (const foreign of [{}, { registerTool() {} }, null, "x"]) {
+      const doc: any = { modelContext: foreign };
+      install(doc);
+      expect(doc.modelContext).toBe(foreign);
+    }
+  });
+
+  it("replaces its own earlier installation, so a rewritten document does not keep the previous page's tools", async () => {
+    const { doc, modelContext: first, toolchanges } = setup();
+    const controller = new AbortController();
+    await first.registerTool(tool("stale"), { signal: controller.signal });
+    expect(toolchanges.count).toBe(1);
+
+    install(doc); // e.g. a second document.open() + write()
+    const second = doc.modelContext;
+    expect(second).not.toBe(first);
+    expect(await second.getTools()).toEqual([]);
+
+    // The old page's leftovers cannot disturb the new registry or its listeners.
+    const fired = { count: 0 };
+    second.addEventListener("toolchange", () => fired.count++);
+    await second.registerTool(tool("stale"));
+    controller.abort();
+    expect(await toolNames(second)).toEqual(["stale"]);
+    expect(fired.count).toBe(1);
+  });
+
+  describe("registerTool", () => {
+    it("rejects bad names, empty descriptions and duplicates (InvalidStateError) and a missing execute (TypeError)", async () => {
+      const { modelContext } = setup();
+      await modelContext.registerTool(tool("ok"));
+      const cases: Array<[object, string]> = [
+        [tool("has space"), "InvalidStateError"],
+        [tool(""), "InvalidStateError"],
+        [tool("x".repeat(129)), "InvalidStateError"],
+        [tool("ok"), "InvalidStateError"],
+        [tool("empty", { description: "" }), "InvalidStateError"],
+        [tool("noexec", { execute: undefined }), "TypeError"],
+        [tool("noexec", { execute: "nope" }), "TypeError"],
+      ];
+      for (const [bad, errorName] of cases) {
+        const error = await modelContext.registerTool(bad).catch((e: any) => e);
+        expect(error.name).toBe(errorName);
+      }
+      expect(await toolNames(modelContext)).toEqual(["ok"]);
+    });
+
+    it("rejects, registering nothing, for an aborted signal or a schema that is not JSON", async () => {
+      const { modelContext } = setup();
+      const circular: any = {};
+      circular.self = circular;
+      await expect(
+        modelContext.registerTool(tool("a"), {
+          signal: AbortSignal.abort(new Error("nope")),
+        }),
+      ).rejects.toThrow("nope");
+      await expect(
+        modelContext.registerTool(tool("b", { inputSchema: circular })),
+      ).rejects.toThrow();
+      expect(await modelContext.getTools()).toEqual([]);
+    });
+
+    it("reads each member of the tool once, so a getter cannot register one thing and show another", async () => {
+      const { modelContext } = setup();
+      const sneaky: any = { execute: async () => "ok" };
+      Object.defineProperties(sneaky, {
+        name: flipping("good", "bad name!"),
+        description: flipping("first", "second"),
+        inputSchema: flipping({ type: "object" }, { type: "string" }),
+        annotations: flipping({ readOnlyHint: true }, {}),
+      });
+      await modelContext.registerTool(sneaky);
+
+      const [listed] = await modelContext.getTools();
+      expect(listed).toMatchObject({
+        name: "good",
+        description: "first",
+        inputSchema: { type: "object" },
+        annotations: { readOnlyHint: true },
+      });
+      expect(await modelContext.executeTool(listed, {})).toBe('"ok"');
+    });
+
+    it("keeps working when the ontoolchange handler throws, rethrowing its error asynchronously", async () => {
+      const { modelContext } = setup();
+      modelContext.ontoolchange = () => {
+        throw new Error("handler boom");
+      };
+      const rethrows: Array<() => void> = [];
+      const realSetTimeout = globalThis.setTimeout;
+      globalThis.setTimeout = ((fn: () => void) =>
+        void rethrows.push(fn)) as never;
+      try {
+        const controller = new AbortController();
+        await modelContext.registerTool(tool("a"), {
+          signal: controller.signal,
+        });
+        expect(await toolNames(modelContext)).toEqual(["a"]);
+        controller.abort();
+        expect(await toolNames(modelContext)).toEqual([]);
+      } finally {
+        globalThis.setTimeout = realSetTimeout;
+      }
+      expect(rethrows).toHaveLength(2);
+      expect(rethrows[0]).toThrow("handler boom");
+    });
+  });
+
+  it("fires toolchange once per change, also for ontoolchange, and lets a name be reused after unregistering", async () => {
+    const { modelContext, toolchanges } = setup();
+    const events: string[] = [];
+    modelContext.ontoolchange = (e: Event) => events.push(e.type);
+    const controller = new AbortController();
+    await modelContext.registerTool(tool("a"), { signal: controller.signal });
+    expect(toolchanges.count).toBe(1);
+
+    controller.abort();
+    controller.abort(); // no further change
+    expect(toolchanges.count).toBe(2);
+    expect(events).toEqual(["toolchange", "toolchange"]);
+
+    await modelContext.registerTool(tool("a"));
+    expect(await toolNames(modelContext)).toEqual(["a"]);
+  });
+
+  it("getTools returns copies sorted by name, with window and origin and without execute", async () => {
+    const { doc, modelContext } = setup();
+    await modelContext.registerTool(
+      tool("b", { title: "B", annotations: { readOnlyHint: true } }),
+    );
+    await modelContext.registerTool(
+      tool("a", { inputSchema: { type: "object", properties: {} } }),
+    );
+
+    const [a, b] = await modelContext.getTools();
+    expect(a).toEqual({
+      name: "a",
+      description: "The a tool",
+      inputSchema: { type: "object", properties: {} },
+      window: doc.defaultView,
+      origin: "http://view.test",
+    });
+    expect(b).toMatchObject({
+      title: "B",
+      annotations: { readOnlyHint: true },
+    });
+    expect("execute" in b).toBe(false);
+
+    a.inputSchema.properties.injected = {}; // does not reach the registry
+    a.description = "changed";
+    expect((await modelContext.getTools())[0]).toMatchObject({
+      description: "The a tool",
+      inputSchema: { type: "object", properties: {} },
+    });
+  });
+
+  describe("executeTool", () => {
+    it("runs the tool and resolves with the JSON string of its result", async () => {
+      const { modelContext } = setup();
+      const seen: any[] = [];
+      await modelContext.registerTool(
+        tool("echo", {
+          execute: async (input: object, options: { signal: AbortSignal }) => {
+            seen.push([input, options.signal instanceof AbortSignal]);
+            return { structuredContent: { n: 1 } };
+          },
+        }),
+      );
+      await modelContext.registerTool(
+        tool("nothing", { execute: async () => {} }),
+      );
+      const [echo, nothing] = await modelContext.getTools();
+
+      expect(
+        JSON.parse(await modelContext.executeTool(echo, { x: 1 })),
+      ).toEqual({
+        structuredContent: { n: 1 },
+      });
+      expect(seen).toEqual([[{ x: 1 }, true]]);
+      expect(await modelContext.executeTool(nothing, {})).toBe("null");
+    });
+
+    it("rejects when execute throws, and for unknown tools", async () => {
+      const { modelContext } = setup();
+      await modelContext.registerTool(
+        tool("boom", {
+          execute: async () => {
+            throw new Error("kaboom");
+          },
+        }),
+      );
+      const [boom] = await modelContext.getTools();
+      await expect(modelContext.executeTool(boom, {})).rejects.toThrow(
+        "kaboom",
+      );
+      await expect(
+        modelContext.executeTool({ name: "missing" }, {}),
+      ).rejects.toBeInstanceOf(DOMException);
+    });
+
+    it("hands execute a JSON copy of the input, and rejects input that is not JSON", async () => {
+      const { modelContext } = setup();
+      const seen: any[] = [];
+      await modelContext.registerTool(
+        tool("t", {
+          execute: async (input: any) => {
+            seen.push(input);
+            input.nested.n = 99;
+            return "ok";
+          },
+        }),
+      );
+      const [t] = await modelContext.getTools();
+      const input = { nested: { n: 1 }, dropped: undefined };
+
+      await modelContext.executeTool(t, input);
+      expect(seen[0]).toEqual({ nested: { n: 99 } });
+      expect(seen[0]).not.toBe(input);
+      expect(input.nested.n).toBe(1);
+
+      const cyclic: any = {};
+      cyclic.self = cyclic;
+      for (const bad of [() => 1, { n: 10n }, cyclic]) {
+        await expect(modelContext.executeTool(t, bad)).rejects.toThrow();
+      }
+      expect(seen).toHaveLength(1);
+    });
+
+    it("does not cancel a running execution when the tool is unregistered", async () => {
+      const { modelContext } = setup();
+      const controller = new AbortController();
+      let release!: () => void;
+      const gate = new Promise<void>((resolve) => (release = resolve));
+      await modelContext.registerTool(
+        tool("slow", {
+          execute: async () => {
+            await gate;
+            return "done";
+          },
+        }),
+        { signal: controller.signal },
+      );
+      const [slow] = await modelContext.getTools();
+
+      const running = modelContext.executeTool(slow, {});
+      controller.abort();
+      release();
+      expect(await running).toBe('"done"');
+    });
+  });
+});
+
+// ── injectModelContextPolyfill ────────────────────────────────────────────
+
+describe("injectModelContextPolyfill", () => {
+  const script = `<script>(${MODEL_CONTEXT_POLYFILL_SOURCE})(document)</script>`;
+
+  it("adds the polyfill source as a single inline script that cannot be ended or escaped early", () => {
+    expect(injectModelContextPolyfill("")).toBe(script);
+    expect(MODEL_CONTEXT_POLYFILL_SOURCE).not.toMatch(
+      /<\/script|<script|<!--/i,
+    );
+  });
+
+  it("puts the script first when there is no doctype, leaving the HTML untouched after it", () => {
+    const html = "<html><body><p>hi</p></body></html>";
+    expect(injectModelContextPolyfill(html)).toBe(script + html);
+  });
+
+  it.each([
+    ["<!DOCTYPE html>"],
+    ["<!doctype html>"],
+    ['<!DocType HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">'],
+    ["\n  \t<!DOCTYPE html>"],
+    ["\uFEFF<!DOCTYPE html>"],
+    ["<!-- c --><!DOCTYPE html>"],
+    ["\uFEFF\n<!-- a --> <!-- b -->\n<!doctype html>"],
+  ])("keeps the View's own doctype ahead of the script: %j", (doctype) => {
+    const rest = "\n<html><head></head><body></body></html>";
+    expect(injectModelContextPolyfill(doctype + rest)).toBe(
+      doctype + script + rest,
+    );
+  });
+
+  it("does not treat a doctype-lookalike later in the document as the doctype", () => {
+    for (const html of [
+      "<html><body><!doctype html></body></html>",
+      "<!-- <!doctype html> --><html></html>",
+    ]) {
+      expect(injectModelContextPolyfill(html)).toBe(script + html);
+    }
+  });
+
+  it("produces a script that installs a working modelContext", async () => {
+    const body = /^<script>([\s\S]*)<\/script>$/.exec(
+      injectModelContextPolyfill(""),
+    )![1];
+    const doc: any = { defaultView: {}, location: { origin: "http://v" } };
+    new Function("document", body)(doc);
+
+    await doc.modelContext.registerTool(tool("echo"));
+    const [listed] = await doc.modelContext.getTools();
+    expect(JSON.parse(await doc.modelContext.executeTool(listed, {}))).toEqual({
+      content: [{ type: "text", text: "echo" }],
+    });
+  });
+
+  describe("on adversarial input (the HTML is untrusted and this runs in the Host)", () => {
+    it.each([
+      ["50k BOMs", "\uFEFF".repeat(50_000) + "x"],
+      ["50k empty comments", "<!---->".repeat(50_000) + "x"],
+      ["10MB of whitespace", " ".repeat(10_000_000) + "x"],
+      ["an unterminated comment and 1MB", "<!--" + "a".repeat(1_000_000)],
+      ["50k unterminated doctypes", "<!doctype ".repeat(50_000)],
+    ])("stays fast and injects first for %s", (_label, html) => {
+      const started = performance.now();
+      const out = injectModelContextPolyfill(html);
+      expect(performance.now() - started).toBeLessThan(250);
+      expect(out).toBe(script + html);
+    });
+
+    it("still finds a doctype behind a megabyte of whitespace", () => {
+      const doctype = " ".repeat(1_000_000) + "<!DOCTYPE html>";
+      const started = performance.now();
+      expect(injectModelContextPolyfill(doctype + "<p>")).toBe(
+        doctype + script + "<p>",
+      );
+      expect(performance.now() - started).toBeLessThan(250);
+    });
+  });
+});
+
+// ── createModelContextRelay ───────────────────────────────────────────────
+
+/** Stand-in for the View's `document.modelContext` (consumer side of WebMCP). */
+class FakeModelContext extends EventTarget {
+  tools: any[] = [];
+  getTools: () => Promise<any> = async () => this.tools;
+  executeTool: (tool: any, input?: object) => Promise<any> = async () => "{}";
+}
+
+function setupRelay() {
+  const win = { name: "view" };
+  const modelContext = new FakeModelContext();
+  const state: { doc: any } = { doc: { defaultView: win, modelContext } };
+  const posted: any[] = [];
+  const relay = createModelContextRelay({
+    getViewDocument: () => state.doc,
+    postToHost: (message) => void posted.push(message),
+  });
+
+  /** Send one host message; resolves with what the relay did about it. */
+  const send = async (message: unknown) => {
+    const before = posted.length;
+    const handled = relay.handleHostMessage(message);
+    await flush();
+    return { handled, responses: posted.slice(before) };
+  };
+  return { win, modelContext, state, posted, relay, send };
+}
+
+const listRequest = (id: number | string = 1) => ({
+  jsonrpc: "2.0",
+  id,
+  method: "ui/sandbox-list-tools",
+  params: {},
+});
+const callRequest = (
+  name: unknown,
+  args?: unknown,
+  id: number | string = 1,
+) => ({
+  jsonrpc: "2.0",
+  id,
+  method: "ui/sandbox-call-tool",
+  params: { name, arguments: args },
+});
+
+/** What the View sends the Host once it is initialized. */
+const initialized = { jsonrpc: "2.0", method: "ui/notifications/initialized" };
+
+/** The names in the `ui/sandbox-list-tools` response at the end of `responses`. */
+const listedNames = (responses: any[]) =>
+  responses[0].result.tools.map((t: any) => t.name);
+
+/** Throws like a hostile or broken View would. */
+const badToString = (): never => {
+  throw new Error("boom");
+};
+const throws = (error: unknown) => async () => {
+  throw error;
+};
+/** A document object with a getter for `prop` that throws. */
+const throwingGetter = (prop: string) =>
+  Object.defineProperty({ defaultView: {} }, prop, { get: badToString });
+const fn = () => {};
+const withModelContext = (members: object) => () => ({ modelContext: members });
+
+/** View documents whose modelContext the relay cannot use. */
+const unusableDocs: Array<[string, () => unknown]> = [
+  ["no document", () => null],
+  ["no modelContext", () => ({})],
+  ["a modelContext that is not an object", withModelContext("nope" as never)],
+  [
+    "a modelContext without getTools",
+    withModelContext({ executeTool: fn, addEventListener: fn }),
+  ],
+  [
+    "a modelContext without addEventListener",
+    withModelContext({ getTools: fn, executeTool: fn }),
+  ],
+  ["a modelContext getter that throws", () => throwingGetter("modelContext")],
+];
+
+describe("createModelContextRelay", () => {
+  describe("ui/sandbox-list-tools", () => {
+    it("maps the View's tools, defaulting inputSchema and adding title/annotations only when present", async () => {
+      const { modelContext, win, send } = setupRelay();
+      modelContext.tools = [
+        { name: "bare", description: "d", window: win },
+        {
+          name: "full",
+          title: "Full",
+          description: "all the things",
+          inputSchema: {
+            type: "object",
+            properties: { a: { type: "string" } },
+          },
+          annotations: { readOnlyHint: true, destructiveHint: true },
+          window: win,
+          origin: "http://view.test",
+          execute: () => {},
+        },
+        { name: "rw", description: "rw", annotations: { readOnlyHint: false } },
+      ];
+
+      const { handled, responses } = await send(listRequest(9));
+
+      expect(handled).toBe(true);
+      const empty = { type: "object", properties: {} };
+      expect(responses).toEqual([
+        {
+          jsonrpc: "2.0",
+          id: 9,
+          result: {
+            tools: [
+              { name: "bare", description: "d", inputSchema: empty },
+              {
+                name: "full",
+                title: "Full",
+                description: "all the things",
+                inputSchema: {
+                  type: "object",
+                  properties: { a: { type: "string" } },
+                },
+                annotations: { readOnlyHint: true },
+              },
+              {
+                name: "rw",
+                description: "rw",
+                inputSchema: empty,
+                annotations: { readOnlyHint: false },
+              },
+            ],
+          },
+        },
+      ]);
+    });
+
+    it("only lists tools registered by the View's own window", async () => {
+      const { modelContext, win, send } = setupRelay();
+      modelContext.tools = [
+        { name: "mine", description: "d", window: win },
+        { name: "sibling-frame", description: "d", window: { name: "other" } },
+        { name: "no-window", description: "d" },
+      ];
+      expect(listedNames((await send(listRequest())).responses)).toEqual([
+        "mine",
+        "no-window",
+      ]);
+    });
+
+    it("hands the Host a deep copy of plain JSON, never View-realm objects", async () => {
+      const { modelContext, send } = setupRelay();
+      const inputSchema: any = {
+        type: "object",
+        properties: { a: { type: "string" } },
+        fn: () => "not JSON",
+        undef: undefined,
+      };
+      let getterCalls = 0;
+      Object.defineProperty(inputSchema.properties, "computed", {
+        enumerable: true,
+        get() {
+          getterCalls++;
+          return { type: "number" };
+        },
+      });
+      modelContext.tools = [{ name: "t", description: "d", inputSchema }];
+
+      const { responses } = await send(listRequest());
+      const copy = responses[0].result.tools[0].inputSchema;
+
+      expect(copy).toEqual({
+        type: "object",
+        properties: { a: { type: "string" }, computed: { type: "number" } },
+      });
+      // The getter became a data property; function/undefined members are gone.
+      expect(getterCalls).toBe(1);
+      expect(
+        Object.getOwnPropertyDescriptor(copy.properties, "computed"),
+      ).toMatchObject({ value: { type: "number" } });
+      expect("fn" in copy).toBe(false);
+      // Later changes in the View do not reach what the Host received.
+      inputSchema.properties.a.type = "hacked";
+      expect(copy.properties.a.type).toBe("string");
+    });
+
+    describe("a malformed tool descriptor from the View", () => {
+      const good = { name: "good", description: "d" };
+      const cyclic: any = { type: "object" };
+      cyclic.self = cyclic;
+      const throwing = { name: "throws" };
+      Object.defineProperty(throwing, "description", {
+        enumerable: true,
+        get() {
+          throw new Error("boom");
+        },
+      });
+
+      const throwingWindow = { name: "win", description: "d" };
+      Object.defineProperty(throwingWindow, "window", {
+        get() {
+          throw new Error("boom");
+        },
+      });
+
+      it.each([
+        ["a numeric name", { name: 5, description: "d" }],
+        ["a null name", { name: null, description: "d" }],
+        ["an object name", { name: { a: 1 }, description: "d" }],
+        ["a name with a space", { name: "has space", description: "d" }],
+        ["an empty name", { name: "", description: "d" }],
+        ["a non-ASCII name", { name: "café", description: "d" }],
+        ["a 129-char name", { name: "x".repeat(129), description: "d" }],
+        ["a 1080-char name", { name: "x".repeat(1080), description: "d" }],
+        ["no description", { name: "nodesc" }],
+        ["a numeric description", { name: "num", description: 5 }],
+        ["an object description", { name: "obj", description: { a: 1 } }],
+        ["a getter that throws", throwing],
+        [
+          "a cyclic schema",
+          { name: "cyc", description: "d", inputSchema: cyclic },
+        ],
+        [
+          "a BigInt in its schema",
+          { name: "big", description: "d", inputSchema: { max: 10n } },
+        ],
+        [
+          "an inputSchema string that is not JSON",
+          { name: "badjson", description: "d", inputSchema: "object" },
+        ],
+        ["a null entry", null],
+        ["a window getter that throws", throwingWindow],
+      ])(
+        "(%s) is dropped from the list without failing it, and cannot be called",
+        async (_label, bad) => {
+          const { modelContext, send } = setupRelay();
+          modelContext.tools = [bad, good];
+          modelContext.executeTool = async () => {
+            throw new Error("must not run");
+          };
+
+          expect(listedNames((await send(listRequest())).responses)).toEqual([
+            "good",
+          ]);
+          const { responses } = await send(callRequest((bad as any)?.name));
+          expect(responses[0].error).toMatchObject({ code: -32602 });
+        },
+      );
+
+      it("has its unusable fields ignored, and its schema made a valid MCP one, when the tool is otherwise valid", async () => {
+        const { modelContext, send } = setupRelay();
+        const empty = { type: "object", properties: {} };
+        const point = { a: { type: "number" } };
+        const cases: Array<[Record<string, unknown>, Record<string, unknown>]> =
+          [
+            [{ title: 5, inputSchema: null }, {}],
+            [{ title: {}, inputSchema: [1, 2] }, {}],
+            [{ title: "" }, {}],
+            [{ annotations: { readOnlyHint: "yes" } }, {}],
+            [{ annotations: "read-only" }, {}],
+            [{ annotations: null }, {}],
+            // A schema without `type: "object"` is made one; the View's keys stay.
+            [{ inputSchema: {} }, {}],
+            [{ inputSchema: { properties: point } }, { properties: point }],
+            [
+              { inputSchema: { type: "string", required: ["a"] } },
+              { required: ["a"] },
+            ],
+            // Chrome reports the schema as a JSON string.
+            [
+              { inputSchema: JSON.stringify({ properties: point }) },
+              { properties: point },
+            ],
+            [{ inputSchema: '"x"' }, {}],
+            [{ inputSchema: "[1]" }, {}],
+          ];
+        modelContext.tools = cases.map(([fields], i) => ({
+          name: `t${i}`,
+          description: "d",
+          ...fields,
+        }));
+
+        const { responses } = await send(listRequest());
+        expect(responses[0].result.tools).toEqual(
+          cases.map(([, schema], i) => ({
+            name: `t${i}`,
+            description: "d",
+            inputSchema: { ...empty, ...schema },
+          })),
+        );
+      });
+
+      it("is read once, so a getter cannot pass validation and then report something else", async () => {
+        const { modelContext, send } = setupRelay();
+        const sneaky: any = { description: "d" };
+        Object.defineProperties(sneaky, {
+          name: flipping("good", "bad name!"),
+          title: flipping("first", 42),
+        });
+        modelContext.tools = [sneaky];
+
+        const { responses } = await send(listRequest());
+        expect(responses[0].result.tools).toEqual([
+          {
+            name: "good",
+            title: "first",
+            description: "d",
+            inputSchema: { type: "object", properties: {} },
+          },
+        ]);
+      });
+    });
+  });
+
+  describe("ui/sandbox-call-tool", () => {
+    const withTool = (execute: (tool: any, input?: object) => Promise<any>) => {
+      const ctx = setupRelay();
+      ctx.modelContext.tools = [{ name: "t", description: "d" }];
+      ctx.modelContext.executeTool = execute;
+      return ctx;
+    };
+
+    it("runs the tool with a copy of the call's arguments (none meaning {}) and returns an object result as structuredContent", async () => {
+      const inputs: any[] = [];
+      let executed: unknown;
+      const ctx = withTool(async (tool, input) => {
+        executed = tool;
+        inputs.push(input);
+        return JSON.stringify({ sum: 3 });
+      });
+      const args = { a: 1, nested: { n: 2 } };
+
+      const { handled, responses } = await ctx.send(
+        callRequest("t", args, "req-1"),
+      );
+      await ctx.send(callRequest("t"));
+
+      expect(handled).toBe(true);
+      expect(executed).toBe(ctx.modelContext.tools[0]);
+      expect(inputs).toEqual([args, {}]);
+      expect(inputs[0]).not.toBe(args);
+      expect(responses).toEqual([
+        {
+          jsonrpc: "2.0",
+          id: "req-1",
+          result: { content: [], structuredContent: { sum: 3 } },
+        },
+      ]);
+    });
+
+    it.each([
+      ["a number", "42", 42],
+      ["a string", '"hello"', "hello"],
+      ["an array", "[1,2]", [1, 2]],
+      ["null", "null", null],
+      ["an empty string (a tool that returns nothing)", "", null],
+      ["raw text, as Chrome returns a string", "hello", "hello"],
+      ["truncated JSON, as raw text", '{"a":', '{"a":'],
+      ["undefined", undefined, null],
+      ['the string "undefined" (native void)', "undefined", null],
+    ])(
+      "wraps %s result as { result } in structuredContent",
+      async (_label, json, value) => {
+        const { send } = withTool(async () => json);
+        const { responses } = await send(callRequest("t"));
+        expect(responses[0].result).toEqual({
+          content: [],
+          structuredContent: { result: value },
+        });
+      },
+    );
+
+    it.each([
+      ["an Error", new Error("kaboom"), "kaboom"],
+      [
+        "an error-like object from the View",
+        { message: "from view" },
+        "from view",
+      ],
+      ["a string", "plain string", "plain string"],
+      ["null", null, "null"],
+      [
+        "an object whose message getter throws",
+        throwingGetter("message"),
+        "Tool call failed",
+      ],
+      [
+        "an object that cannot be stringified",
+        { toString: badToString },
+        "Tool call failed",
+      ],
+    ])(
+      "reports a tool rejecting with %s as an isError result",
+      async (_label, reason, text) => {
+        const { send } = withTool(throws(reason));
+        const { responses } = await send(callRequest("t", {}, 5));
+        expect(responses).toEqual([
+          {
+            jsonrpc: "2.0",
+            id: 5,
+            result: { content: [{ type: "text", text }], isError: true },
+          },
+        ]);
+      },
+    );
+
+    it.each([["executeTool throwing synchronously", () => badToString()]])(
+      "reports %s as an isError result instead of forwarding anything",
+      async (_label, execute) => {
+        const { send } = withTool(execute);
+        const { responses } = await send(callRequest("t", {}, "id-1"));
+        expect(responses).toHaveLength(1);
+        expect(responses[0].id).toBe("id-1");
+        expect(responses[0].result).toMatchObject({
+          isError: true,
+          content: [{ type: "text", text: expect.any(String) }],
+        });
+        expect(responses[0].result).not.toHaveProperty("structuredContent");
+      },
+    );
+
+    it.each([[{ evil: () => 1 }], [{ a: 1 }], [42], [null]])(
+      "reports a non-string result (%p) as an isError result, never forwarding the value",
+      async (returned) => {
+        const { send } = withTool(async () => returned);
+        const { responses } = await send(callRequest("t", {}, "id-2"));
+        expect(responses).toEqual([
+          {
+            jsonrpc: "2.0",
+            id: "id-2",
+            result: {
+              content: [
+                {
+                  type: "text",
+                  text: "The tool did not return a serializable result",
+                },
+              ],
+              isError: true,
+            },
+          },
+        ]);
+      },
+    );
+
+    it("passes string input when the implementation reports schemas as JSON strings (as Chrome does), an object otherwise", async () => {
+      const run = async (tools: Record<string, unknown>[]) => {
+        const inputs: unknown[] = [];
+        const ctx = setupRelay();
+        ctx.modelContext.tools = tools;
+        ctx.modelContext.executeTool = async (_tool, input) => {
+          inputs.push(input);
+          return "{}";
+        };
+        for (const { name } of tools) {
+          await ctx.send(callRequest(name as string, { a: 1 }));
+        }
+        return inputs;
+      };
+
+      // One string schema is enough: it is the implementation's generation,
+      // also for a tool that has no schema to show it.
+      expect(
+        await run([
+          {
+            name: "native",
+            description: "d",
+            inputSchema: '{"type":"object"}',
+          },
+          { name: "none", description: "d" },
+        ]),
+      ).toEqual(['{"a":1}', '{"a":1}']);
+      expect(
+        await run([
+          { name: "spec", description: "d", inputSchema: { type: "object" } },
+          { name: "none", description: "d" },
+        ]),
+      ).toEqual([{ a: 1 }, { a: 1 }]);
+    });
+
+    it("answers -32602 for an unknown tool, a tool of another frame, and missing params or name", async () => {
+      const ctx = withTool(throws(new Error("must not run")));
+      ctx.modelContext.tools.push({
+        name: "foreign",
+        description: "d",
+        window: {},
+      });
+
+      const { responses } = await ctx.send(callRequest("nope", {}, 8));
+      expect(responses).toEqual([
+        {
+          jsonrpc: "2.0",
+          id: 8,
+          error: { code: -32602, message: "Tool nope not found" },
+        },
+      ]);
+      for (const message of [
+        callRequest("foreign"),
+        { jsonrpc: "2.0", id: 1, method: "ui/sandbox-call-tool" },
+        callRequest(undefined),
+        callRequest({ not: "a string" }),
+      ]) {
+        const { handled, responses } = await ctx.send(message);
+        expect(handled).toBe(true);
+        expect(responses[0].error.code).toBe(-32602);
+      }
+    });
+
+    it("keeps concurrent calls apart, answering each under its own id", async () => {
+      let releaseSlow!: () => void;
+      const ctx = withTool(async (tool) => {
+        if (tool.name === "slow")
+          await new Promise<void>((resolve) => (releaseSlow = resolve));
+        return JSON.stringify({ tool: tool.name });
+      });
+      ctx.modelContext.tools = [
+        { name: "slow", description: "d" },
+        { name: "fast", description: "d" },
+      ];
+
+      ctx.relay.handleHostMessage(callRequest("slow", {}, "a"));
+      ctx.relay.handleHostMessage(callRequest("fast", {}, 0));
+      await flush();
+      expect(ctx.posted.map((m) => m.id)).toEqual([0]);
+      releaseSlow();
+      await flush();
+      expect(ctx.posted.map((m) => [m.id, m.result.structuredContent])).toEqual(
+        [
+          [0, { tool: "fast" }],
+          ["a", { tool: "slow" }],
+        ],
+      );
+    });
+  });
+
+  describe("handleHostMessage", () => {
+    it.each([
+      ["another request", { jsonrpc: "2.0", id: 1, method: "ui/initialize" }],
+      ["a notification", { jsonrpc: "2.0", method: "ui/notifications/x" }],
+      [
+        "a sandbox-list-tools notification (no id)",
+        { jsonrpc: "2.0", method: "ui/sandbox-list-tools" },
+      ],
+      // Left for a View that answers these itself (the deprecated `tools` capability).
+      ["a tools/list request", { jsonrpc: "2.0", id: 1, method: "tools/list" }],
+      [
+        "a tools/call request",
+        { jsonrpc: "2.0", id: 1, method: "tools/call", params: { name: "t" } },
+      ],
+      ["a response", { jsonrpc: "2.0", id: 1, result: {} }],
+      ["null", null],
+      ["an array", [listRequest()]],
+    ])("returns false and posts nothing for %s", async (_label, message) => {
+      const { send } = setupRelay();
+      const { handled, responses } = await send(message);
+      expect(handled).toBe(false);
+      expect(responses).toEqual([]);
+    });
+
+    it.each(unusableDocs)(
+      "leaves tools requests for the View to answer when there is %s",
+      async (_label, makeDoc) => {
+        const ctx = setupRelay();
+        ctx.state.doc = makeDoc();
+        for (const message of [listRequest(), callRequest("t")]) {
+          const { handled, responses } = await ctx.send(message);
+          expect(handled).toBe(false);
+          expect(responses).toEqual([]);
+        }
+      },
+    );
+
+    it("treats a throwing getViewDocument (e.g. a cross-origin iframe) as inaccessible", () => {
+      const relay = createModelContextRelay({
+        getViewDocument: () => {
+          throw new DOMException("cross-origin", "SecurityError");
+        },
+        postToHost: () => {},
+      });
+      expect(relay.handleHostMessage(listRequest())).toBe(false);
+      expect(() => relay.handleViewMessage(initialized)).not.toThrow();
+    });
+  });
+
+  describe("handleViewMessage (watching the View's tools)", () => {
+    const toolsChanged = {
+      jsonrpc: "2.0",
+      method: "ui/notifications/sandbox-tools-changed",
+    };
+
+    it("tells the Host whenever the View's tools change once the View is initialized, once per change however often that is seen", () => {
+      const ctx = setupRelay();
+      ctx.relay.handleViewMessage(initialized);
+      ctx.relay.handleViewMessage(initialized);
+      ctx.modelContext.dispatchEvent(new Event("toolchange"));
+      ctx.modelContext.dispatchEvent(new Event("toolchange"));
+      expect(ctx.posted).toEqual([toolsChanged, toolsChanged]);
+    });
+
+    it("follows a real polyfill, including its being replaced, and stops reporting the old instance", async () => {
+      const doc: any = { defaultView: {} };
+      install(doc);
+      const oldContext = doc.modelContext;
+      const posted: unknown[] = [];
+      const relay = createModelContextRelay({
+        getViewDocument: () => doc,
+        postToHost: (m) => void posted.push(m),
+      });
+      relay.handleViewMessage(initialized);
+      const controller = new AbortController();
+      await oldContext.registerTool(tool("a"), { signal: controller.signal });
+      controller.abort();
+      expect(posted).toEqual([toolsChanged, toolsChanged]);
+
+      install(doc); // the View's document was written again
+      relay.handleViewMessage(initialized);
+      posted.length = 0;
+      await doc.modelContext.registerTool(tool("new"));
+      expect(posted).toEqual([toolsChanged]);
+
+      posted.length = 0;
+      await oldContext.registerTool(tool("ghost")); // leftover from the old page
+      expect(posted).toEqual([]);
+    });
+
+    it.each([
+      ...unusableDocs,
+      [
+        "an addEventListener that throws",
+        () => ({
+          modelContext: Object.assign(new FakeModelContext(), {
+            addEventListener: badToString,
+          }),
+        }),
+      ],
+    ] as Array<[string, () => unknown]>)(
+      "does not throw for %s, and recovers with a usable one",
+      (_label, makeDoc) => {
+        const ctx = setupRelay();
+        const good = ctx.state.doc;
+        ctx.state.doc = makeDoc();
+        expect(() => ctx.relay.handleViewMessage(initialized)).not.toThrow();
+
+        ctx.state.doc = good;
+        ctx.relay.handleViewMessage(initialized);
+        ctx.modelContext.dispatchEvent(new Event("toolchange"));
+        expect(ctx.posted).toEqual([toolsChanged]);
+      },
+    );
+
+    it("still attaches to the new modelContext when detaching from the old one throws", () => {
+      const ctx = setupRelay();
+      ctx.relay.handleViewMessage(initialized);
+      ctx.modelContext.removeEventListener = badToString;
+
+      const replacement = new FakeModelContext();
+      ctx.state.doc = { defaultView: {}, modelContext: replacement };
+      expect(() => ctx.relay.handleViewMessage(initialized)).not.toThrow();
+      replacement.dispatchEvent(new Event("toolchange"));
+      expect(ctx.posted).toEqual([toolsChanged]);
+    });
+  });
+
+  describe("against a hostile or broken View", () => {
+    // Stops a getTools that answers fine once, as the relay's check of it does.
+    const flippingGetTools = (mc: FakeModelContext) =>
+      Object.defineProperty(mc, "getTools", {
+        ...flipping(mc.getTools, undefined),
+        configurable: true,
+      });
+
+    it.each([
+      [
+        "getTools rejects",
+        (mc: FakeModelContext) => (mc.getTools = throws(new Error("no"))),
+      ],
+      [
+        "getTools throws synchronously",
+        (mc: FakeModelContext) => (mc.getTools = badToString as never),
+      ],
+      [
+        "getTools does not resolve to a list",
+        (mc: FakeModelContext) => (mc.getTools = async () => null),
+      ],
+      ["getTools is gone by the time it is called", flippingGetTools],
+    ])(
+      "answers every accepted request with a JSON-RPC internal error when %s",
+      async (_label, sabotage) => {
+        for (const message of [listRequest("x"), callRequest("t", {}, "x")]) {
+          const ctx = setupRelay();
+          sabotage(ctx.modelContext);
+          const { handled, responses } = await ctx.send(message);
+          expect(handled).toBe(true);
+          expect(responses).toEqual([
+            {
+              jsonrpc: "2.0",
+              id: "x",
+              error: { code: -32603, message: "Internal error" },
+            },
+          ]);
+        }
+      },
+    );
+
+    it("never answers for a View that hangs, and never throws", async () => {
+      const ctx = setupRelay();
+      ctx.modelContext.tools = [{ name: "t", description: "d" }];
+
+      ctx.modelContext.getTools = () => new Promise(() => {});
+      expect(ctx.relay.handleHostMessage(listRequest())).toBe(true);
+
+      ctx.modelContext.getTools = async () => ctx.modelContext.tools;
+      ctx.modelContext.executeTool = () => new Promise(() => {});
+      expect(ctx.relay.handleHostMessage(callRequest("t"))).toBe(true);
+
+      await flush();
+      expect(ctx.posted).toEqual([]);
+    });
+
+    it("does not leave an unhandled rejection when the Host cannot be reached", async () => {
+      const unhandled: unknown[] = [];
+      const onUnhandled = (reason: unknown) => void unhandled.push(reason);
+      process.on("unhandledRejection", onUnhandled);
+      try {
+        const ctx = setupRelay();
+        const relay = createModelContextRelay({
+          getViewDocument: () => ctx.state.doc,
+          postToHost: badToString,
+        });
+        expect(relay.handleHostMessage(listRequest())).toBe(true);
+        await flush();
+        await flush();
+        expect(unhandled).toEqual([]);
+      } finally {
+        process.off("unhandledRejection", onUnhandled);
+      }
+    });
+  });
+});
+
+// ── End to end ────────────────────────────────────────────────────────────
+
+describe("App.registerTool -> injected polyfill -> relay -> AppBridge", () => {
+  let warn: ReturnType<typeof spyOn<Console, "warn">>;
+  beforeEach(() => {
+    // App.registerTool() and the raw tool handlers log deprecation warnings.
+    warn = spyOn(console, "warn").mockImplementation(() => {});
+  });
+  afterEach(() => {
+    warn.mockRestore();
+    Reflect.deleteProperty(globalThis, "document");
+  });
+
+  /**
+   * A View (`App`) behind a sandbox proxy: the proxy runs the polyfill the Host
+   * injected into the View's HTML, lets the relay see every message in both
+   * directions, and forwards what the relay does not answer.
+   */
+  async function connect(setUpView: (app: App) => void, appCapabilities = {}) {
+    const doc: any = { defaultView: {}, location: { origin: "null" } };
+    Object.assign(globalThis, { document: doc });
+
+    const [appTransport, proxyToApp] = InMemoryTransport.createLinkedPair();
+    const relay = createModelContextRelay({
+      getViewDocument: () => doc,
+      postToHost: (message) =>
+        hostTransport.onmessage?.(message as JSONRPCMessage),
+    });
+    const hostTransport: Transport = {
+      async start() {},
+      async send(message) {
+        if (
+          "method" in message &&
+          message.method === "ui/notifications/sandbox-resource-ready"
+        ) {
+          // What the sandbox page does with the HTML: write it to the View.
+          const { html } = message.params as { html: string };
+          const script = /<script>([\s\S]*?)<\/script>/.exec(html)![1];
+          new Function("document", script)(doc);
+        } else if (!relay.handleHostMessage(message)) {
+          await proxyToApp.send(message);
+        }
+      },
+      async close() {
+        await proxyToApp.close();
+      },
+    };
+    proxyToApp.onmessage = (message) => {
+      relay.handleViewMessage(message);
+      hostTransport.onmessage?.(message);
+    };
+    await proxyToApp.start();
+
+    const bridge = new AppBridge(null, { name: "host", version: "1.0.0" }, {});
+    const toolsChanged: unknown[] = [];
+    bridge.onwebmcptoolschange = (params) => void toolsChanged.push(params);
+    await bridge.connect(hostTransport);
+    await bridge.sendSandboxResourceReady({ html: "<p>view</p>" });
+
+    const app = new App({ name: "view", version: "1.0.0" }, appCapabilities, {
+      autoResize: false,
+    });
+    setUpView(app);
+    await app.connect(appTransport);
+    await flush();
+    return { app, bridge, toolsChanged };
+  }
+
+  it("lists and calls a View's registerTool tools although the View never declared the tools capability", async () => {
+    const { bridge } = await connect((app) => {
+      app.registerTool(
+        "add",
+        {
+          title: "Add",
+          description: "Adds numbers",
+          inputSchema: z.object({ a: z.number(), b: z.number() }),
+          annotations: { readOnlyHint: true },
+        },
+        ({ a, b }) => ({
+          content: [{ type: "text", text: "ignored" }],
+          structuredContent: { sum: a + b },
+        }),
+      );
+      app.registerTool("boom", {}, () => ({
+        content: [{ type: "text", text: "it broke" }],
+        isError: true,
+      }));
+      app.registerTool("hello", {}, () => ({
+        content: [{ type: "text", text: "hello" }],
+      }));
+    });
+
+    expect(bridge.getAppCapabilities()?.tools).toBeUndefined();
+
+    const { tools } = await bridge.listWebMcpTools();
+    expect(tools.map((t) => t.name).sort()).toEqual(["add", "boom", "hello"]);
+    expect(tools.find((t) => t.name === "add")).toMatchObject({
+      title: "Add",
+      description: "Adds numbers",
+      annotations: { readOnlyHint: true },
+      inputSchema: {
+        type: "object",
+        properties: { a: { type: "number" }, b: { type: "number" } },
+      },
+    });
+
+    expect(
+      await bridge.callWebMcpTool({ name: "add", arguments: { a: 2, b: 3 } }),
+    ).toEqual({ content: [], structuredContent: { sum: 5 } });
+    expect(await bridge.callWebMcpTool({ name: "boom" })).toEqual({
+      content: [{ type: "text", text: "it broke" }],
+      isError: true,
+    });
+    expect(
+      (await bridge.callWebMcpTool({ name: "hello" })).structuredContent,
+    ).toEqual({ content: [{ type: "text", text: "hello" }] });
+    const invalid = await bridge.callWebMcpTool({
+      name: "add",
+      arguments: { a: "x" },
+    });
+    expect(invalid.isError).toBe(true);
+    expect(invalid.content[0]).toMatchObject({
+      text: expect.stringContaining("Invalid input for tool add"),
+    });
+    await expect(bridge.callWebMcpTool({ name: "missing" })).rejects.toThrow(
+      /not found/,
+    );
+  });
+
+  it("notifies the Host when the View's tools change once the View is initialized", async () => {
+    const { app, bridge, toolsChanged } = await connect(() => {});
+    const listened: unknown[] = [];
+    bridge.addEventListener("webmcptoolschange", (p) => void listened.push(p));
+    expect((await bridge.listWebMcpTools()).tools).toEqual([]);
+    expect(toolsChanged).toEqual([]);
+
+    const tool = app.registerTool("late", {}, () => ({ content: [] }));
+    await flush();
+    expect(toolsChanged).toHaveLength(1);
+    expect(listened).toHaveLength(1);
+    expect((await bridge.listWebMcpTools()).tools.map((t) => t.name)).toEqual([
+      "late",
+    ]);
+
+    tool.disable();
+    await flush();
+    expect(toolsChanged).toHaveLength(2);
+    expect((await bridge.listWebMcpTools()).tools).toEqual([]);
+  });
+
+  it("keeps serving a legacy View's own tools/list and tools/call next to the WebMCP tools", async () => {
+    const { bridge } = await connect(
+      (app) => {
+        app.onlisttools = async () => ({
+          tools: [
+            {
+              name: "legacy",
+              inputSchema: { type: "object" as const, properties: {} },
+            },
+          ],
+        });
+        app.oncalltool = async (params) => ({
+          content: [{ type: "text", text: `legacy ${params.name}` }],
+        });
+      },
+      { tools: { listChanged: true } },
+    );
+
+    // Answered by the View itself, not intercepted by the relay...
+    expect((await bridge.listTools({})).tools.map((t) => t.name)).toEqual([
+      "legacy",
+    ]);
+    expect((await bridge.callTool({ name: "legacy" })).content).toEqual([
+      { type: "text", text: "legacy legacy" },
+    ]);
+    // ...while the reserved requests are answered by the relay (no WebMCP tools).
+    expect((await bridge.listWebMcpTools()).tools).toEqual([]);
+    await expect(bridge.callWebMcpTool({ name: "legacy" })).rejects.toThrow(
+      /not found/,
+    );
+  });
+});
diff --git a/src/model-context-host.ts b/src/model-context-host.ts
new file mode 100644
index 000000000..12b9aafbb
--- /dev/null
+++ b/src/model-context-host.ts
@@ -0,0 +1,440 @@
+import {
+  SANDBOX_CALL_TOOL_METHOD,
+  SANDBOX_LIST_TOOLS_METHOD,
+  SANDBOX_TOOLS_CHANGED_METHOD,
+} from "./spec.types.js";
+
+/**
+ * Host-side WebMCP support: backfills `document.modelContext` into a View
+ * whose browser lacks it, and relays the View's WebMCP tools to the Host as the
+ * reserved `ui/sandbox-list-tools` / `ui/sandbox-call-tool` requests and
+ * `ui/notifications/sandbox-tools-changed`.
+ *
+ * A View cannot polyfill WebMCP by itself: a registry only the View can see is
+ * useless to the Host. So the Host side provides it: {@link AppBridge}
+ * injects the polyfill into the View HTML it sends to the Sandbox, and the
+ * Sandbox proxy (the one party that is same-origin with the View) uses
+ * {@link createModelContextRelay} to read from it.
+ *
+ * WebMCP: https://webmachinelearning.github.io/webmcp/
+ */
+
+/**
+ * Minimal stand-in for https://github.com/webmachinelearning/webmcp-polyfill:
+ * just enough of the WebMCP `document.modelContext` API for a Host to read the
+ * tools a View registers. No cross-frame support: `exposedTo` is accepted and
+ * ignored. A native `document.modelContext` (or another Host's polyfill) is
+ * left untouched, but this polyfill replaces an earlier instance of itself,
+ * since `document.open()` keeps expando properties of a document that is
+ * written again.
+ *
+ * This is deliberately a source string, not a function serialized with
+ * `Function.prototype.toString()`: a Host bundles this SDK with its own
+ * toolchain, which may rewrite a function body with helpers that do not exist
+ * in the View (esbuild `keepNames`, downleveled `async`, coverage counters).
+ * Keep it plain ES2017 that needs no transformation.
+ *
+ * @internal
+ */
+export const MODEL_CONTEXT_POLYFILL_SOURCE = `(function (doc) {
+  const OWN = Symbol.for("@modelcontextprotocol/ext-apps.modelContextPolyfill");
+  if ("modelContext" in doc && !(doc.modelContext && doc.modelContext[OWN])) return;
+
+  const NAME = /^[A-Za-z0-9_.-]{1,128}$/;
+  const invalid = (message) => new DOMException(message, "InvalidStateError");
+  // name -> { json snapshot of the descriptor (getTools returns deep copies), execute }
+  const registry = new Map();
+  let ontoolchange = null;
+  const fireToolChange = (target) => {
+    const event = new Event("toolchange");
+    target.dispatchEvent(event);
+    if (ontoolchange) {
+      try {
+        ontoolchange.call(target, event);
+      } catch (error) {
+        setTimeout(() => { throw error; });
+      }
+    }
+  };
+
+  class ModelContext extends EventTarget {
+    get ontoolchange() {
+      return ontoolchange;
+    }
+    set ontoolchange(handler) {
+      ontoolchange = typeof handler === "function" ? handler : null;
+    }
+
+    async registerTool(tool, options = {}) {
+      const { signal } = options;
+      if (signal && signal.aborted) throw signal.reason;
+      // Read each member once: a hostile View can make a getter answer differently.
+      const { name, title, description, inputSchema, annotations, execute } = tool;
+      if (typeof name !== "string" || !NAME.test(name)) throw invalid("Invalid tool name: " + name);
+      if (!description) throw invalid("Tool description must not be empty");
+      if (typeof execute !== "function") throw new TypeError("Tool execute must be a function");
+      if (registry.has(name)) throw invalid("Duplicate tool name: " + name);
+      // Throws if inputSchema is not JSON-serializable.
+      const json = JSON.stringify({ name, title, description, inputSchema, annotations });
+      const entry = { json, execute };
+      registry.set(name, entry);
+      if (signal) {
+        signal.addEventListener("abort", () => {
+          if (registry.get(name) === entry) {
+            registry.delete(name);
+            fireToolChange(this);
+          }
+        });
+      }
+      fireToolChange(this);
+    }
+
+    async getTools() {
+      return [...registry.values()]
+        .map(({ json }) => ({ ...JSON.parse(json), window: doc.defaultView, origin: doc.location && doc.location.origin }))
+        .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
+    }
+
+    async executeTool(tool, input = {}, options = {}) {
+      const entry = registry.get(tool.name);
+      if (!entry) throw invalid("Unknown tool: " + tool.name);
+      const signal = options.signal || new AbortController().signal;
+      if (signal.aborted) throw signal.reason;
+      // Unregistering mid-flight does not cancel a running execution.
+      // Like native: the tool gets a copy made in the View's own realm.
+      const result = await entry.execute(JSON.parse(JSON.stringify(input)), { signal });
+      const json = JSON.stringify(result);
+      return json === undefined ? "null" : json;
+    }
+  }
+
+  const modelContext = new ModelContext();
+  Object.defineProperty(modelContext, OWN, { value: true });
+  Object.defineProperty(doc, "modelContext", { value: modelContext, configurable: true, enumerable: true });
+})`;
+
+/**
+ * Length of the doctype at the start of `html`, counting what may precede one
+ * (BOM, whitespace, comments), or 0 if there is none. A linear scan: this runs
+ * in the Host on untrusted HTML, so no backtracking regex.
+ */
+function leadingDoctypeEnd(html: string): number {
+  const whitespace = /\s*/y; // \s includes the BOM
+  const doctype = /<!doctype[^>]*>/iy;
+  let i = 0;
+  for (;;) {
+    whitespace.lastIndex = i;
+    whitespace.test(html);
+    i = whitespace.lastIndex;
+    if (!html.startsWith("<!--", i)) break;
+    const end = html.indexOf("-->", i + 4);
+    if (end < 0) return 0;
+    i = end + 3;
+  }
+  doctype.lastIndex = i;
+  return doctype.test(html) ? doctype.lastIndex : 0;
+}
+
+/**
+ * Prepend the WebMCP polyfill to View HTML so it runs before the View's own
+ * scripts. The View's own doctype (if any) stays first, so its rendering mode
+ * is unchanged. The polyfill is a no-op where `document.modelContext` already
+ * exists (natively, or from a polyfill the Host injected itself).
+ *
+ * @internal {@link AppBridge.sendSandboxResourceReady} does this by default.
+ */
+export function injectModelContextPolyfill(html: string): string {
+  const at = leadingDoctypeEnd(html);
+  return (
+    html.slice(0, at) +
+    `<script>(${MODEL_CONTEXT_POLYFILL_SOURCE})(document)</script>` +
+    html.slice(at)
+  );
+}
+
+// ── Sandbox-side relay ────────────────────────────────────────────────────
+
+/** The subset of a WebMCP `RegisteredTool` the relay reads. */
+interface WebMcpRegisteredTool {
+  name: string;
+  title?: string;
+  description: string;
+  inputSchema?: Record<string, unknown>;
+  annotations?: { readOnlyHint?: boolean };
+  window?: unknown;
+}
+
+/** The subset of WebMCP's consumer-side `ModelContext` the relay uses. */
+interface WebMcpConsumer extends EventTarget {
+  getTools(): Promise<WebMcpRegisteredTool[]>;
+  executeTool(tool: WebMcpRegisteredTool, input?: object): Promise<string>;
+}
+
+export interface ModelContextRelayOptions {
+  /**
+   * The View's document, or `null` while it is not (yet) accessible, e.g. when
+   * the iframe's `sandbox` lacks `allow-same-origin`. While it is, the relay
+   * leaves requests for the View to answer.
+   */
+  getViewDocument(): Document | null | undefined;
+  /** Send a JSON-RPC message to the Host (mind the target origin). */
+  postToHost(message: Record<string, unknown>): void;
+}
+
+export interface ModelContextRelay {
+  /**
+   * Call for each message the Host sends towards the View. Answers the
+   * reserved `ui/sandbox-list-tools` and `ui/sandbox-call-tool` requests from
+   * the View's `document.modelContext` and returns `true`; the caller must not
+   * forward those to the View. Returns `false` for everything else (including
+   * `tools/list` / `tools/call`, which a View with the deprecated `tools`
+   * capability answers itself), and while the View's document or
+   * `modelContext` is not accessible.
+   */
+  handleHostMessage(data: unknown): boolean;
+  /**
+   * Call for each message the View sends towards the Host (before forwarding
+   * it). Once the View sends `ui/notifications/initialized`, the relay starts
+   * telling the Host (`ui/notifications/sandbox-tools-changed`) when the View's
+   * tools change. It never consumes a message.
+   */
+  handleViewMessage(data: unknown): void;
+}
+
+const INITIALIZED = "ui/notifications/initialized";
+const INVALID_PARAMS = -32602;
+const INTERNAL_ERROR = -32603;
+
+// Everything read from the View comes from another realm: copy it so the
+// Host only ever sees plain JSON.
+const plain = <T>(value: T): T => JSON.parse(JSON.stringify(value));
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+/**
+ * The value behind an `executeTool()` result string. Implementations answer
+ * with a tool's return value as JSON, except that a string may come back raw
+ * (not JSON-quoted) and nothing as "" or "undefined".
+ */
+function parseToolResult(json: unknown): unknown {
+  if (json === undefined || json === "" || json === "undefined") return null;
+  // The View controls what executeTool() resolves with: only text is a result.
+  if (typeof json !== "string") {
+    throw new TypeError("The tool did not return a serializable result");
+  }
+  try {
+    return JSON.parse(json);
+  } catch {
+    return json;
+  }
+}
+
+const TOOL_NAME = /^[A-Za-z0-9_.-]{1,128}$/;
+
+/**
+ * Reads a View's tool descriptor into a plain MCP `Tool`, or `undefined` if it
+ * is malformed. The View is untrusted: never rely on the types it reports, and
+ * read every member once (a getter may answer differently the second time).
+ */
+function toMcpTool(tool: WebMcpRegisteredTool) {
+  try {
+    const { name, title, description, annotations } = tool;
+    let schema: unknown = tool.inputSchema;
+    const readOnlyHint = annotations?.readOnlyHint;
+    if (
+      typeof name !== "string" ||
+      !TOOL_NAME.test(name) ||
+      typeof description !== "string"
+    ) {
+      return undefined;
+    }
+    // Some implementations report the schema as a JSON string.
+    if (typeof schema === "string") schema = JSON.parse(schema);
+    return plain({
+      name,
+      ...(typeof title === "string" && title !== "" && { title }),
+      description,
+      // MCP requires a schema of `type: "object"`; WebMCP does not.
+      inputSchema: {
+        properties: {},
+        ...(isPlainObject(schema) ? schema : {}),
+        type: "object",
+      },
+      ...(typeof readOnlyHint === "boolean" && {
+        annotations: { readOnlyHint },
+      }),
+    }) as { name: string } & Record<string, unknown>;
+  } catch {
+    return undefined;
+  }
+}
+
+/** An error's message; the View's errors are not `instanceof Error` here. */
+function messageOf(error: unknown): string {
+  try {
+    return String((error as { message?: unknown } | null)?.message ?? error);
+  } catch {
+    return "Tool call failed";
+  }
+}
+
+/**
+ * Sandbox-side bridge between the View's WebMCP `document.modelContext` and
+ * the Host's `tools/list` / `tools/call` / `notifications/tools/list_changed`.
+ *
+ * Only the Sandbox proxy should use this: it is same-origin with the View,
+ * whereas a Host page is not, so it cannot reach into the View itself. The Host
+ * reaches it with `bridge.listWebMcpTools()` / `bridge.callWebMcpTool()`; the
+ * plain `tools/list` / `tools/call` of `bridge.listTools()` / `callTool()` keep
+ * going to the View.
+ *
+ * A tool's result is returned as `structuredContent` (a non-object value `v`
+ * as `{ result: v }`) with empty `content`; a failing tool yields
+ * `isError: true` with its message as text.
+ *
+ * The View is untrusted: its tool descriptors are validated and copied, and a
+ * request always gets a response. Limits on the number of tools or the size of
+ * results are the Host's to enforce on what it receives. Use a fresh inner
+ * iframe for every View: a View can leave its own `document.modelContext`
+ * behind in a document that is written again, where it would be read as the
+ * next View's.
+ */
+export function createModelContextRelay({
+  getViewDocument,
+  postToHost,
+}: ModelContextRelayOptions): ModelContextRelay {
+  let watching: { consumer: WebMcpConsumer; listener: () => void } | undefined;
+
+  const viewTools = async (doc: Document, consumer: WebMcpConsumer) =>
+    // Native getTools() also returns tools of other frames of the page.
+    (await consumer.getTools()).filter((tool) => {
+      try {
+        return tool.window === undefined || tool.window === doc.defaultView;
+      } catch {
+        return false; // malformed entry (null, throwing getter): drop it
+      }
+    });
+
+  async function answer(
+    doc: Document,
+    consumer: WebMcpConsumer,
+    method: string,
+    params: any,
+  ): Promise<Record<string, unknown>> {
+    const viewOwn = await viewTools(doc, consumer);
+    const tools = viewOwn.flatMap((tool) => {
+      const mcp = toMcpTool(tool);
+      return mcp ? [{ tool, mcp }] : [];
+    });
+    if (method === SANDBOX_LIST_TOOLS_METHOD) {
+      return { result: { tools: tools.map(({ mcp }) => mcp) } };
+    }
+
+    const name = params?.name;
+    const found = tools.find(({ mcp }) => mcp.name === name);
+    if (!found) {
+      return {
+        error: { code: INVALID_PARAMS, message: `Tool ${name} not found` },
+      };
+    }
+    try {
+      const args = plain(params.arguments ?? {});
+      const json = await consumer.executeTool(
+        found.tool,
+        // Chrome's current implementation reports schemas as JSON strings and
+        // takes the input as one too (the spec has objects for both). That is
+        // a property of the implementation, which a tool without a schema does
+        // not show: look at all of the View's tools.
+        viewOwn.some((t) => typeof t?.inputSchema === "string")
+          ? (JSON.stringify(args) as unknown as object)
+          : args,
+      );
+      const value = parseToolResult(json);
+      return {
+        result: {
+          content: [],
+          structuredContent: isPlainObject(value) ? value : { result: value },
+        },
+      };
+    } catch (error) {
+      return {
+        result: {
+          content: [{ type: "text", text: messageOf(error) }],
+          isError: true,
+        },
+      };
+    }
+  }
+
+  // The View controls its `document.modelContext` (it can replace it with a
+  // throwing getter, say), so anything that goes wrong while reading it just
+  // means "not accessible": requests are then left for the caller to forward.
+  const viewConsumer = () => {
+    try {
+      const doc = getViewDocument();
+      const modelContext = (
+        doc as { modelContext?: unknown } | null | undefined
+      )?.modelContext as Partial<WebMcpConsumer> | undefined;
+      return doc &&
+        typeof modelContext?.getTools === "function" &&
+        typeof modelContext.executeTool === "function" &&
+        typeof modelContext.addEventListener === "function"
+        ? { doc, consumer: modelContext as WebMcpConsumer }
+        : undefined;
+    } catch {
+      return undefined;
+    }
+  };
+
+  function watch() {
+    const view = viewConsumer();
+    if (!view || view.consumer === watching?.consumer) return;
+    const listener = () =>
+      postToHost({
+        jsonrpc: "2.0",
+        method: SANDBOX_TOOLS_CHANGED_METHOD,
+      });
+    // The View's document was written again: stop listening to the old one
+    // (whatever it is, it must not keep us from attaching to the new one).
+    try {
+      watching?.consumer.removeEventListener("toolchange", watching.listener);
+    } catch {}
+    try {
+      view.consumer.addEventListener("toolchange", listener);
+      watching = { consumer: view.consumer, listener };
+    } catch {
+      watching = undefined;
+    }
+  }
+
+  return {
+    handleHostMessage(data) {
+      const { id, method, params } = (data ?? {}) as Record<string, any>;
+      if (
+        id === undefined ||
+        (method !== SANDBOX_LIST_TOOLS_METHOD &&
+          method !== SANDBOX_CALL_TOOL_METHOD)
+      ) {
+        return false;
+      }
+      const view = viewConsumer();
+      if (!view) return false;
+      void answer(view.doc, view.consumer, method, params)
+        // A hostile View must not leave the Host's request unanswered.
+        .catch(() => ({
+          error: { code: INTERNAL_ERROR, message: "Internal error" },
+        }))
+        .then((response) => postToHost({ jsonrpc: "2.0", id, ...response }))
+        // Nobody to tell if the Host cannot be reached.
+        .catch(() => {});
+      return true;
+    },
+
+    handleViewMessage(data) {
+      if ((data as { method?: unknown } | null)?.method === INITIALIZED) {
+        watch();
+      }
+    },
+  };
+}
diff --git a/src/spec.types.ts b/src/spec.types.ts
index 0c4539637..c6e3d28c4 100644
--- a/src/spec.types.ts
+++ b/src/spec.types.ts
@@ -258,6 +258,50 @@ export interface McpUiSandboxResourceReadyNotification {
   };
 }
 
+/**
+ * @description Request (Host -> Sandbox proxy) for the tools the View exposes
+ * through WebMCP (`document.modelContext`). Answered by the Sandbox proxy, not
+ * forwarded to the View. The result is a `ListToolsResult`.
+ * @internal
+ * @see {@link app-bridge!AppBridge.listWebMcpTools `AppBridge.listWebMcpTools`} for the method that sends this request
+ */
+export interface McpUiSandboxListToolsRequest {
+  method: "ui/sandbox-list-tools";
+  params?: {
+    /** @description Pagination cursor from a previous result. */
+    cursor?: string;
+  };
+}
+
+/**
+ * @description Request (Host -> Sandbox proxy) to call a tool the View exposes
+ * through WebMCP. Answered by the Sandbox proxy, not forwarded to the View. The
+ * result is a `CallToolResult`: `content` is empty and `structuredContent` is
+ * the value the tool returned.
+ * @internal
+ * @see {@link app-bridge!AppBridge.callWebMcpTool `AppBridge.callWebMcpTool`} for the method that sends this request
+ */
+export interface McpUiSandboxCallToolRequest {
+  method: "ui/sandbox-call-tool";
+  params: {
+    /** @description Name of the tool to call. */
+    name: string;
+    /** @description Arguments of the call. */
+    arguments?: { [key: string]: unknown };
+  };
+}
+
+/**
+ * @description Notification (Sandbox proxy -> Host) that the tools the View
+ * exposes through WebMCP changed.
+ * @internal
+ * @see {@link app-bridge!AppBridge.onwebmcptoolschange `AppBridge.onwebmcptoolschange`}
+ */
+export interface McpUiSandboxToolsChangedNotification {
+  method: "ui/notifications/sandbox-tools-changed";
+  params?: {};
+}
+
 /**
  * @description Notification of UI size changes (View -> Host).
  * @see {@link app!App.sendSizeChanged `App.sendSizeChanged`} for the method to send this from View
@@ -538,7 +582,11 @@ export interface McpUiHostCapabilities {
 export interface McpUiAppCapabilities {
   /** @description Experimental features keyed by identifier. */
   experimental?: Record<string, object>;
-  /** @description App exposes MCP-style tools that the host can call. */
+  /**
+   * @description App exposes MCP-style tools that the host can call.
+   * @deprecated Expose tools with WebMCP (`document.modelContext.registerTool()`)
+   *   instead. Hosts should not gate `tools/list` / `tools/call` on this capability.
+   */
   tools?: {
     /** @description App supports tools/list_changed notifications. */
     listChanged?: boolean;
@@ -819,6 +867,12 @@ export const SANDBOX_PROXY_READY_METHOD: McpUiSandboxProxyReadyNotification["met
   "ui/notifications/sandbox-proxy-ready";
 export const SANDBOX_RESOURCE_READY_METHOD: McpUiSandboxResourceReadyNotification["method"] =
   "ui/notifications/sandbox-resource-ready";
+export const SANDBOX_LIST_TOOLS_METHOD: McpUiSandboxListToolsRequest["method"] =
+  "ui/sandbox-list-tools";
+export const SANDBOX_CALL_TOOL_METHOD: McpUiSandboxCallToolRequest["method"] =
+  "ui/sandbox-call-tool";
+export const SANDBOX_TOOLS_CHANGED_METHOD: McpUiSandboxToolsChangedNotification["method"] =
+  "ui/notifications/sandbox-tools-changed";
 export const SIZE_CHANGED_METHOD: McpUiSizeChangedNotification["method"] =
   "ui/notifications/size-changed";
 export const TOOL_INPUT_METHOD: McpUiToolInputNotification["method"] =
diff --git a/src/types.ts b/src/types.ts
index e4ed629c4..c8f838678 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -48,8 +48,11 @@ import type {
   McpUiRequestTeardownNotification,
   McpUiResourceTeardownRequest,
   McpUiResourceTeardownResult,
+  McpUiSandboxCallToolRequest,
+  McpUiSandboxListToolsRequest,
   McpUiSandboxProxyReadyNotification,
   McpUiSandboxResourceReadyNotification,
+  McpUiSandboxToolsChangedNotification,
   McpUiSizeChangedNotification,
   McpUiToolCancelledNotification,
   McpUiToolInputNotification,
@@ -64,8 +67,11 @@ export {
   OPEN_LINK_METHOD,
   DOWNLOAD_FILE_METHOD,
   MESSAGE_METHOD,
+  SANDBOX_CALL_TOOL_METHOD,
+  SANDBOX_LIST_TOOLS_METHOD,
   SANDBOX_PROXY_READY_METHOD,
   SANDBOX_RESOURCE_READY_METHOD,
+  SANDBOX_TOOLS_CHANGED_METHOD,
   SIZE_CHANGED_METHOD,
   TOOL_INPUT_METHOD,
   TOOL_INPUT_PARTIAL_METHOD,
@@ -91,8 +97,11 @@ export {
   type McpUiMessageResult,
   type McpUiUpdateModelContextRequest,
   type McpUiSupportedContentBlockModalities,
+  type McpUiSandboxCallToolRequest,
+  type McpUiSandboxListToolsRequest,
   type McpUiSandboxProxyReadyNotification,
   type McpUiSandboxResourceReadyNotification,
+  type McpUiSandboxToolsChangedNotification,
   type McpUiSizeChangedNotification,
   type McpUiToolInputNotification,
   type McpUiToolInputPartialNotification,
@@ -132,8 +141,11 @@ export {
   McpUiMessageResultSchema,
   McpUiUpdateModelContextRequestSchema,
   McpUiSupportedContentBlockModalitiesSchema,
+  McpUiSandboxCallToolRequestSchema,
+  McpUiSandboxListToolsRequestSchema,
   McpUiSandboxProxyReadyNotificationSchema,
   McpUiSandboxResourceReadyNotificationSchema,
+  McpUiSandboxToolsChangedNotificationSchema,
   McpUiSizeChangedNotificationSchema,
   McpUiToolInputNotificationSchema,
   McpUiToolInputPartialNotificationSchema,
diff --git a/src/webmcp.ts b/src/webmcp.ts
new file mode 100644
index 000000000..656c6c91b
--- /dev/null
+++ b/src/webmcp.ts
@@ -0,0 +1,62 @@
+/**
+ * Structural subset of the WebMCP `ModelContext` API
+ * (https://webmachinelearning.github.io/webmcp/) that the SDK needs in order to
+ * mirror {@link App.registerTool `App.registerTool`} tools into
+ * `document.modelContext`.
+ *
+ * Declared locally (rather than depending on `webmcp-types`) so the SDK adds
+ * neither a dependency nor ambient DOM type augmentations for consumers.
+ *
+ * @internal
+ */
+export interface WebMcpTool {
+  name: string;
+  title?: string;
+  description: string;
+  inputSchema?: Record<string, unknown>;
+  annotations?: { readOnlyHint?: boolean };
+  execute(
+    input: Record<string, unknown>,
+    options: { signal: AbortSignal },
+  ): Promise<unknown>;
+}
+
+/** @internal */
+export interface WebMcpModelContext {
+  /**
+   * Resolves once the tool is registered; rejects if it cannot be (duplicate
+   * or invalid name, insecure context, permissions policy, …). Aborting
+   * `options.signal` unregisters the tool.
+   */
+  registerTool(
+    tool: WebMcpTool,
+    options?: { signal?: AbortSignal },
+  ): Promise<void>;
+}
+
+/**
+ * The document's WebMCP `modelContext`, if the browser provides one natively
+ * or the host injected a polyfill into the View's HTML.
+ *
+ * @internal
+ */
+export function getWebMcpModelContext(): WebMcpModelContext | undefined {
+  const modelContext = (
+    globalThis as { document?: { modelContext?: Partial<WebMcpModelContext> } }
+  ).document?.modelContext;
+  return typeof modelContext?.registerTool === "function"
+    ? (modelContext as WebMcpModelContext)
+    : undefined;
+}
+
+/** The text blocks of a `CallToolResult`, joined (used as an error message). */
+export function callToolResultText(result: {
+  content: Array<{ type: string; text?: string }>;
+}): string {
+  return (
+    result.content
+      .filter((block) => block.type === "text")
+      .map((block) => block.text)
+      .join("\n") || "Tool call failed"
+  );
+}
diff --git a/src/wire-compat.test.ts b/src/wire-compat.test.ts
index 762ac77a9..e424f20b2 100644
--- a/src/wire-compat.test.ts
+++ b/src/wire-compat.test.ts
@@ -7,7 +7,7 @@
  * wire protocol is meant to be unchanged across the major bump; the few
  * host-side error deltas are pinned here so they stay deliberate.
  */
-import { describe, it, expect, afterEach } from "bun:test";
+import { describe, it, expect, afterEach, spyOn } from "bun:test";
 import {
   Client,
   InMemoryTransport,
@@ -477,13 +477,26 @@ describe("wire compatibility: 2.x App with a 1.x host", () => {
 
   it("answers 1.x tools/list (no params) and tools/call requests from the host", async () => {
     const { channel } = await handshake({ tools: { listChanged: true } });
-    app.registerTool(
-      "viewtool",
-      { description: "view tool", inputSchema: z.object({ x: z.number() }) },
-      async ({ x }) => ({
-        content: [{ type: "text", text: `view got ${x}` }],
-      }),
-    );
+    // registerTool() no longer serves tools over the wire (it goes through
+    // WebMCP); a View that still answers them does so with the raw handlers.
+    const warn = spyOn(console, "warn").mockImplementation(() => {});
+    app.onlisttools = async () => ({
+      tools: [
+        {
+          name: "viewtool",
+          description: "view tool",
+          inputSchema: {
+            type: "object",
+            properties: { x: { type: "number" } },
+            required: ["x"],
+          },
+        },
+      ],
+    });
+    app.oncalltool = async (params) => ({
+      content: [{ type: "text", text: `view got ${params.arguments?.x}` }],
+    });
+    warn.mockRestore();
     await flush();
     const mark = channel.sent.length;
 
diff --git a/tests/e2e/app-tools.spec.ts b/tests/e2e/app-tools.spec.ts
new file mode 100644
index 000000000..eaa333df4
--- /dev/null
+++ b/tests/e2e/app-tools.spec.ts
@@ -0,0 +1,122 @@
+import { test, expect, type Page, type Locator } from "@playwright/test";
+
+/**
+ * Tools a View exposes to the Host through WebMCP (`document.modelContext`).
+ *
+ * The path under test, end to end in a real browser: the View registers tools →
+ * `AppBridge` injected a `document.modelContext` polyfill into its HTML → the
+ * sandbox proxy (same-origin with the View) answers the reserved
+ * `ui/sandbox-list-tools` / `ui/sandbox-call-tool` requests with
+ * `createModelContextRelay` → basic-host lists and calls them with
+ * `listWebMcpTools()` / `callWebMcpTool()` and shows them in its "App tools"
+ * panel.
+ */
+
+/** Load a server's UI tool in basic-host and wait for the app iframe. */
+async function loadServer(page: Page, serverName: string) {
+  await page.goto("/?theme=hide");
+  await expect(page.locator("select").first()).toBeEnabled({ timeout: 30000 });
+  await page.locator("select").first().selectOption({ label: serverName });
+  await page.click('button:has-text("Call Tool")');
+  await expect(
+    page.frameLocator("iframe").first().locator("iframe"),
+  ).toBeVisible({ timeout: 30000 });
+}
+
+/** The (collapsed) "App tools" panel, once the host has listed the tools. */
+async function appToolsPanel(page: Page, count: number): Promise<Locator> {
+  const panel = page.locator('[class*="collapsiblePanel"]', {
+    hasText: "App tools (WebMCP)",
+  });
+  await expect(panel).toContainText(`${count} tool`, { timeout: 30000 });
+  await panel.locator('[class*="collapsibleHeader"]').click();
+  return panel;
+}
+
+/** Call one of the listed tools with the given JSON input; returns its result. */
+async function callAppTool(panel: Locator, name: string, input: unknown) {
+  const row = panel
+    .locator('div[class*="appTool"]')
+    .filter({
+      has: panel.page().locator('[class*="appToolName"]', { hasText: name }),
+    })
+    .first();
+  await row.getByLabel(`${name} input JSON`).fill(JSON.stringify(input));
+  await row.getByRole("button", { name: "Call" }).click();
+  const result = row.locator("pre");
+  await expect(result).toBeVisible({ timeout: 15000 });
+  return JSON.parse((await result.textContent()) ?? "null");
+}
+
+test.describe("Tools exposed by a View (WebMCP)", () => {
+  test("a View registering with document.modelContext: list and call", async ({
+    page,
+  }) => {
+    await loadServer(page, "Budget Allocator Server");
+    const panel = await appToolsPanel(page, 5);
+
+    for (const name of [
+      "get-allocations",
+      "get-benchmark-comparison",
+      "set-allocation",
+      "set-company-stage",
+      "set-total-budget",
+    ]) {
+      await expect(panel).toContainText(name);
+    }
+
+    // What execute() returned is the result's structuredContent, with no text.
+    const allocations = await callAppTool(panel, "get-allocations", {});
+    expect(allocations.content).toEqual([]);
+    expect(allocations.isError).toBeUndefined();
+    expect(allocations.structuredContent.totalBudget).toEqual(
+      expect.any(Number),
+    );
+    expect(
+      Object.keys(allocations.structuredContent.allocations).length,
+    ).toBeGreaterThan(0);
+
+    // Invalid input is rejected by the View's own validation: isError + message.
+    const invalid = await callAppTool(panel, "set-allocation", {
+      categoryId: "no-such-category",
+      percent: 500,
+    });
+    expect(invalid.isError).toBe(true);
+    expect(invalid.content[0].type).toBe("text");
+  });
+
+  test("a throwing tool is an isError result; a returning one is structuredContent", async ({
+    page,
+  }) => {
+    await loadServer(page, "Debug MCP App Server");
+    const panel = await appToolsPanel(page, 2);
+
+    const echo = await callAppTool(panel, "view-echo", { message: "hello" });
+    expect(echo.isError).toBeUndefined();
+    expect(echo.structuredContent.message).toBe("hello");
+
+    const failure = await callAppTool(panel, "view-fail", {});
+    expect(failure.isError).toBe(true);
+    expect(failure.content[0].text).toEqual(expect.any(String));
+  });
+
+  test("the deprecated App.registerTool still reaches the host, with one warning", async ({
+    page,
+  }) => {
+    const warnings: string[] = [];
+    page.on("console", (message) => {
+      if (message.type() === "warning") warnings.push(message.text());
+    });
+
+    await loadServer(page, "ShaderToy Server");
+    const panel = await appToolsPanel(page, 2);
+    await expect(panel).toContainText("set-shader-source");
+    await expect(panel).toContainText("get-shader-info");
+
+    // One-time warning per App instance, however many tools it registers.
+    const deprecations = warnings.filter((text) =>
+      text.includes("App.registerTool() is deprecated"),
+    );
+    expect(deprecations).toHaveLength(1);
+  });
+});
diff --git a/typedoc.config.mjs b/typedoc.config.mjs
index c9b947602..c0b9d2eda 100644
--- a/typedoc.config.mjs
+++ b/typedoc.config.mjs
@@ -20,6 +20,7 @@ const config = {
     "docs/csp-cors.md",
     "docs/migrate_from_openai_apps.md",
     "docs/migrate-to-2.md",
+    "docs/migrate-to-3.md",
   ],
   entryPoints: [
     "src/server/index.ts",