diff --git a/.husky/pre-commit b/.husky/pre-commit
index b0d5ff537..187294403 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -15,8 +15,9 @@ if grep -E '"resolved": "https?://' package-lock.json | grep -v registry.npmjs.o
 fi
 
 # Capture staged files so we only re-stage what the user intended to commit
-# (avoids sweeping unrelated WIP into the commit)
-STAGED=$(git diff --name-only --cached)
+# (avoids sweeping unrelated WIP into the commit). Exclude deletions since
+# they can't be re-added from the working tree.
+STAGED=$(git diff --name-only --cached --diff-filter=ACMR)
 
 npm run build:all
 npm run prettier:fix
diff --git a/.prettierignore b/.prettierignore
index 6d5fc6f1d..c51df7b99 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -5,4 +5,5 @@ examples/basic-server-*/**/*.tsx
 examples/quickstart/**/*.ts
 **/vendor/**
 **/.build/**
+**/.claude/**
 SKILL.md
diff --git a/examples/budget-allocator-server/server.ts b/examples/budget-allocator-server/server.ts
index e52291825..04fba11fe 100755
--- a/examples/budget-allocator-server/server.ts
+++ b/examples/budget-allocator-server/server.ts
@@ -269,7 +269,7 @@ export function createServer(): McpServer {
     {
       title: "Get Budget Data",
       description:
-        "Returns budget configuration with 24 months of historical allocations and industry benchmarks by company stage",
+        "Returns budget configuration with 24 months of historical allocations and industry benchmarks by company stage. The widget is interactive and exposes tools for reading/modifying allocations, adjusting budgets, and comparing against industry benchmarks.",
       inputSchema: {},
       outputSchema: BudgetDataResponseSchema,
       _meta: { ui: { resourceUri } },
diff --git a/examples/budget-allocator-server/src/mcp-app.ts b/examples/budget-allocator-server/src/mcp-app.ts
index 4e8c62df5..c5d8cb1d1 100644
--- a/examples/budget-allocator-server/src/mcp-app.ts
+++ b/examples/budget-allocator-server/src/mcp-app.ts
@@ -3,6 +3,7 @@
  */
 import { App, type McpUiHostContext } from "@modelcontextprotocol/ext-apps";
 import { Chart, registerables } from "chart.js";
+import { z } from "zod";
 import "./global.css";
 import "./mcp-app.css";
 
@@ -626,6 +627,295 @@ 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 () => {
+    if (!state.config) {
+      return {
+        content: [
+          { type: "text" as const, text: "Error: Configuration not loaded" },
+        ],
+        isError: true,
+      };
+    }
+
+    const allocations: Record<string, { percent: number; amount: number }> = {};
+    for (const category of state.config.categories) {
+      const percent = state.allocations.get(category.id) ?? 0;
+      allocations[category.id] = {
+        percent,
+        amount: (percent / 100) * state.totalBudget,
+      };
+    }
+
+    const result = {
+      totalBudget: state.totalBudget,
+      currency: state.config.currency,
+      currencySymbol: state.config.currencySymbol,
+      selectedStage: state.selectedStage,
+      allocations,
+      categories: state.config.categories.map((c) => ({
+        id: c.id,
+        name: c.name,
+        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., 'rd', 'sales', 'marketing', 'ops', 'ga')",
+        ),
+      percent: z
+        .number()
+        .min(0)
+        .max(100)
+        .describe("Allocation percentage (0-100)"),
+    }),
+  },
+  async (args) => {
+    if (!state.config) {
+      return {
+        content: [
+          { type: "text" as const, text: "Error: Configuration not loaded" },
+        ],
+        isError: true,
+      };
+    }
+
+    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,
+      };
+    }
+
+    handleSliderChange(args.categoryId, args.percent);
+
+    // Also update the slider UI
+    const slider = document.querySelector(
+      `.slider-row[data-category-id="${args.categoryId}"] .slider`,
+    ) as HTMLInputElement | null;
+    if (slider) {
+      slider.value = String(args.percent);
+    }
+
+    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()})`,
+        },
+      ],
+    };
+  },
+);
+
+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) => {
+    if (!state.config) {
+      return {
+        content: [
+          { type: "text" as const, text: "Error: Configuration not loaded" },
+        ],
+        isError: true,
+      };
+    }
+
+    state.totalBudget = args.amount;
+
+    // Update the budget selector if this amount is a preset
+    const budgetSelector = document.getElementById(
+      "budget-selector",
+    ) as HTMLSelectElement | null;
+    if (budgetSelector) {
+      const option = Array.from(budgetSelector.options).find(
+        (opt) => parseInt(opt.value) === args.amount,
+      );
+      if (option) {
+        budgetSelector.value = String(args.amount);
+      }
+    }
+
+    updateAllSliderAmounts();
+    updateStatusBar();
+    updateComparisonSummary();
+
+    return {
+      content: [
+        {
+          type: "text" as const,
+          text: `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 (seed, series_a, series_b, growth)",
+    inputSchema: z.object({
+      stage: z.string().describe("Company stage ID"),
+    }),
+  },
+  async (args) => {
+    if (!state.analytics) {
+      return {
+        content: [
+          { type: "text" as const, text: "Error: Analytics not loaded" },
+        ],
+        isError: true,
+      };
+    }
+
+    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,
+      };
+    }
+
+    state.selectedStage = args.stage;
+
+    // Update the stage selector UI
+    const stageSelector = document.getElementById(
+      "stage-selector",
+    ) as HTMLSelectElement | null;
+    if (stageSelector) {
+      stageSelector.value = args.stage;
+    }
+
+    // Update all badges and summary
+    if (state.config) {
+      for (const category of state.config.categories) {
+        updatePercentileBadge(category.id);
+      }
+      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",
+  },
+  async () => {
+    if (!state.config || !state.analytics) {
+      return {
+        content: [{ type: "text" as const, text: "Error: Data not loaded" }],
+        isError: true,
+      };
+    }
+
+    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,
+      };
+    }
+
+    const comparison: Record<
+      string,
+      { current: number; p25: number; p50: number; p75: number; status: string }
+    > = {};
+
+    for (const category of state.config.categories) {
+      const current = state.allocations.get(category.id) ?? 0;
+      const benchmarkData = benchmark.categoryBenchmarks[category.id];
+      let status = "within range";
+      if (current < benchmarkData.p25) status = "below p25";
+      else if (current > benchmarkData.p75) status = "above p75";
+
+      comparison[category.id] = {
+        current,
+        p25: benchmarkData.p25,
+        p50: benchmarkData.p50,
+        p75: benchmarkData.p75,
+        status,
+      };
+    }
+
+    const result = {
+      stage: state.selectedStage,
+      comparison,
+    };
+
+    return {
+      content: [
+        { type: "text" as const, text: JSON.stringify(result, null, 2) },
+      ],
+      structuredContent: result,
+    };
+  },
+);
+
 // Handle theme changes
 window
   .matchMedia("(prefers-color-scheme: dark)")
diff --git a/examples/map-server/server.ts b/examples/map-server/server.ts
index 540d35c4d..10125a641 100644
--- a/examples/map-server/server.ts
+++ b/examples/map-server/server.ts
@@ -147,7 +147,7 @@ export function createServer(): McpServer {
     {
       title: "Show Map",
       description:
-        "Display an interactive world map zoomed to a specific bounding box. Use the GeoCode tool to find the bounding box of a location.",
+        "Display an interactive world map zoomed to a specific bounding box. Use the GeoCode tool to find the bounding box of a location. The widget is interactive and exposes tools for navigation (fly to locations) and querying the current view.",
       inputSchema: {
         west: z
           .number()
diff --git a/examples/map-server/src/mcp-app.ts b/examples/map-server/src/mcp-app.ts
index 4fda13284..39d7c2a22 100644
--- a/examples/map-server/src/mcp-app.ts
+++ b/examples/map-server/src/mcp-app.ts
@@ -7,6 +7,7 @@
  */
 import { App } from "@modelcontextprotocol/ext-apps";
 import type { ContentBlock } from "@modelcontextprotocol/sdk/spec.types.js";
+import { z } from "zod";
 
 // TypeScript declaration for Cesium loaded from CDN
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -559,6 +560,76 @@ function setViewToBoundingBox(cesiumViewer: any, bbox: BoundingBox): void {
   );
 }
 
+/**
+ * Fly camera to view a bounding box with animation
+ */
+function flyToBoundingBox(
+  cesiumViewer: any,
+  bbox: BoundingBox,
+  duration = 2,
+): Promise<void> {
+  return new Promise((resolve) => {
+    const { destination, centerLon, centerLat, height } =
+      calculateDestination(bbox);
+
+    log.info("flyTo destination:", centerLon, centerLat, "height:", height);
+
+    cesiumViewer.camera.flyTo({
+      destination,
+      orientation: {
+        heading: 0,
+        pitch: Cesium.Math.toRadians(-90), // Look straight down
+        roll: 0,
+      },
+      duration,
+      complete: () => {
+        log.info(
+          "flyTo complete, camera height:",
+          cesiumViewer.camera.positionCartographic.height,
+        );
+        resolve();
+      },
+      cancel: () => {
+        log.warn("flyTo cancelled");
+        resolve();
+      },
+    });
+  });
+}
+
+// Label element for displaying location info
+let labelElement: HTMLDivElement | null = null;
+
+/**
+ * Set or clear the label displayed on the map
+ */
+function setLabel(text?: string): void {
+  if (!labelElement) {
+    labelElement = document.createElement("div");
+    labelElement.style.cssText = `
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      background: rgba(0, 0, 0, 0.7);
+      color: white;
+      padding: 8px 12px;
+      border-radius: 4px;
+      font-family: sans-serif;
+      font-size: 14px;
+      z-index: 100;
+      pointer-events: none;
+    `;
+    document.body.appendChild(labelElement);
+  }
+
+  if (text) {
+    labelElement.textContent = text;
+    labelElement.style.display = "block";
+  } else {
+    labelElement.style.display = "none";
+  }
+}
+
 /**
  * Wait for globe tiles to finish loading
  */
@@ -801,57 +872,110 @@ app.ontoolinput = async (params) => {
   }
 };
 
-/*
-  Register tools for the model to interact w/ this component
-  Needs https://github.com/modelcontextprotocol/ext-apps/pull/72
-*/
-// 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) => {
-//     if (!viewer) {
-//       return {
-//         content: [
-//           { type: "text" as const, text: "Error: Viewer not initialized" },
-//         ],
-//         isError: true,
-//       };
-//     }
-
-//     const bbox: BoundingBox = {
-//       west: args.west,
-//       south: args.south,
-//       east: args.east,
-//       north: args.north,
-//     };
-
-//     await flyToBoundingBox(viewer, bbox, args.duration ?? 2);
-//     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})` : ""}`,
-//         },
-//       ],
-//     };
-//   },
-// );
+// 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) => {
+    if (!viewer) {
+      return {
+        content: [
+          { type: "text" as const, text: "Error: Viewer not initialized" },
+        ],
+        isError: true,
+      };
+    }
+
+    const bbox: BoundingBox = {
+      west: args.west,
+      south: args.south,
+      east: args.east,
+      north: args.north,
+    };
+
+    await flyToBoundingBox(viewer, bbox, args.duration ?? 2);
+    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})` : ""}`,
+        },
+      ],
+    };
+  },
+);
+
+app.registerTool(
+  "get-current-view",
+  {
+    title: "Get Current View",
+    description:
+      "Get the current camera position and bounding box visible on the globe",
+  },
+  async () => {
+    if (!viewer) {
+      return {
+        content: [
+          { type: "text" as const, text: "Error: Viewer not initialized" },
+        ],
+        isError: true,
+      };
+    }
+
+    const camera = viewer.camera;
+    const positionCartographic = camera.positionCartographic;
+    const latitude = Cesium.Math.toDegrees(positionCartographic.latitude);
+    const longitude = Cesium.Math.toDegrees(positionCartographic.longitude);
+    const height = positionCartographic.height;
+
+    // Get the visible bounding box
+    const rectangle = viewer.camera.computeViewRectangle();
+    let bbox = null;
+    if (rectangle) {
+      bbox = {
+        west: Cesium.Math.toDegrees(rectangle.west),
+        south: Cesium.Math.toDegrees(rectangle.south),
+        east: Cesium.Math.toDegrees(rectangle.east),
+        north: Cesium.Math.toDegrees(rectangle.north),
+      };
+    }
+
+    const viewData = {
+      camera: {
+        latitude,
+        longitude,
+        height,
+      },
+      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/pdf-server/server.ts b/examples/pdf-server/server.ts
index 5bc2502f4..c8cc12ffc 100644
--- a/examples/pdf-server/server.ts
+++ b/examples/pdf-server/server.ts
@@ -1225,7 +1225,7 @@ export function createServer(options: CreateServerOptions = {}): McpServer {
       description: disableInteract
         ? `Show and render a PDF in a read-only viewer.
 
-Use this tool when the user wants to view or read a PDF. The renderer displays the document for viewing.
+Use this tool when the user wants to view or read a PDF. The renderer displays the document for viewing. The widget exposes app-registered tools for page navigation, text extraction, searching, and zoom control.
 
 Accepts local files (use list_pdfs), client MCP root directories, or any HTTPS URL.`
         : `Open a PDF in an interactive viewer. Call this ONCE per PDF.
diff --git a/examples/pdf-server/src/mcp-app.ts b/examples/pdf-server/src/mcp-app.ts
index 6a59407c1..9bae889ba 100644
--- a/examples/pdf-server/src/mcp-app.ts
+++ b/examples/pdf-server/src/mcp-app.ts
@@ -14,6 +14,7 @@ import {
 } from "@modelcontextprotocol/ext-apps";
 import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
 import type { ContentBlock } from "@modelcontextprotocol/sdk/spec.types.js";
+import { z } from "zod";
 import * as pdfjsLib from "pdfjs-dist";
 import { AnnotationLayer, AnnotationMode, TextLayer } from "pdfjs-dist";
 import "pdfjs-dist/web/pdf_viewer.css";
@@ -2328,17 +2329,21 @@ async function renderPageOffscreen(pageNum: number): Promise<string> {
   return dataUrl.split(",")[1];
 }
 
-async function handleGetPages(cmd: {
-  requestId: string;
-  intervals: Array<{ start?: number; end?: number }>;
-  getText: boolean;
-  getScreenshots: boolean;
-}): Promise<void> {
-  const allPages = expandIntervals(cmd.intervals);
+/**
+ * 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.
+ */
+async function collectPageData(
+  intervals: Array<{ start?: number; end?: number }>,
+  getText: boolean,
+  getScreenshots: boolean,
+): Promise<Array<{ page: number; text?: string; image?: string }>> {
+  const allPages = expandIntervals(intervals);
   const pages = allPages.slice(0, MAX_GET_PAGES);
 
   log.info(
-    `get_pages: ${pages.length} pages (${pages[0]}..${pages[pages.length - 1]}), text=${cmd.getText}, screenshots=${cmd.getScreenshots}`,
+    `collectPageData: ${pages.length} pages (${pages[0]}..${pages[pages.length - 1]}), text=${getText}, screenshots=${getScreenshots}`,
   );
 
   const results: Array<{
@@ -2352,7 +2357,7 @@ async function handleGetPages(cmd: {
       page: pageNum,
     };
 
-    if (cmd.getText) {
+    if (getText) {
       // Use cached text if available, otherwise extract on the fly
       let text = pageTextCache.get(pageNum);
       if (text == null && pdfDocument) {
@@ -2365,7 +2370,7 @@ async function handleGetPages(cmd: {
           pageTextCache.set(pageNum, text);
         } catch (err) {
           log.error(
-            `get_pages: text extraction failed for page ${pageNum}:`,
+            `collectPageData: text extraction failed for page ${pageNum}:`,
             err,
           );
           text = "";
@@ -2374,17 +2379,35 @@ async function handleGetPages(cmd: {
       entry.text = text ?? "";
     }
 
-    if (cmd.getScreenshots) {
+    if (getScreenshots) {
       try {
         entry.image = await renderPageOffscreen(pageNum);
       } catch (err) {
-        log.error(`get_pages: screenshot failed for page ${pageNum}:`, err);
+        log.error(
+          `collectPageData: screenshot failed for page ${pageNum}:`,
+          err,
+        );
       }
     }
 
     results.push(entry);
   }
 
+  return results;
+}
+
+async function handleGetPages(cmd: {
+  requestId: string;
+  intervals: Array<{ start?: number; end?: number }>;
+  getText: boolean;
+  getScreenshots: boolean;
+}): Promise<void> {
+  const results = await collectPageData(
+    cmd.intervals,
+    cmd.getText,
+    cmd.getScreenshots,
+  );
+
   // Submit results back to server
   try {
     await app.callServerTool({
@@ -4439,6 +4462,397 @@ app.onteardown = async () => {
 
 app.onhostcontextchanged = handleHostContextChanged;
 
+// =============================================================================
+// App-registered 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.
+// =============================================================================
+
+/** Shared zod shapes mirroring server.ts interact schema. */
+const FormFieldSchema = z.object({
+  name: z.string(),
+  value: z.union([z.string(), z.boolean()]),
+});
+const PageIntervalSchema = z.object({
+  start: z.number().min(1).optional(),
+  end: z.number().min(1).optional(),
+});
+
+/** Dispatch a command via processCommands and return a text result. */
+async function runCommand(
+  cmd: PdfCommand,
+  okText: string,
+): Promise<CallToolResult> {
+  if (!pdfDocument) {
+    return {
+      content: [{ type: "text" as const, text: "Error: No document loaded" }],
+      isError: true,
+    };
+  }
+  await processCommands([cmd]);
+  return { content: [{ type: "text" as const, text: okText }] };
+}
+
+app.registerTool(
+  "get-document-info",
+  {
+    title: "Get Document Info",
+    description:
+      "Get information about the current PDF document including title, current page, total pages, and zoom level",
+  },
+  async () => {
+    if (!pdfDocument) {
+      return {
+        content: [{ type: "text" as const, text: "Error: No document loaded" }],
+        isError: true,
+      };
+    }
+    const info = {
+      title: pdfTitle || "Untitled",
+      url: pdfUrl,
+      currentPage,
+      totalPages,
+      scale,
+      displayMode: currentDisplayMode,
+    };
+    return {
+      content: [{ type: "text" as const, text: JSON.stringify(info, null, 2) }],
+      structuredContent: info,
+    };
+  },
+);
+
+app.registerTool(
+  "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)"),
+    }),
+  },
+  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,
+      };
+    }
+    return runCommand(
+      { type: "navigate", page },
+      `Navigated to page ${page}/${totalPages}`,
+    );
+  },
+);
+
+app.registerTool(
+  "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"),
+    }),
+  },
+  async ({ query }) =>
+    runCommand(
+      { type: "search", query },
+      `Searched for "${query}": ${allMatches.length} match(es)`,
+    ),
+);
+
+app.registerTool(
+  "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"),
+    }),
+  },
+  async ({ query }) =>
+    runCommand(
+      { type: "find", query },
+      `Found ${allMatches.length} match(es) for "${query}"`,
+    ),
+);
+
+app.registerTool(
+  "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)"),
+    }),
+  },
+  async ({ matchIndex }) => {
+    if (allMatches.length === 0) {
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: "Error: No search results. Call search or find first.",
+          },
+        ],
+        isError: true,
+      };
+    }
+    if (matchIndex >= allMatches.length) {
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: `Error: matchIndex ${matchIndex} out of range (0-${allMatches.length - 1})`,
+          },
+        ],
+        isError: true,
+      };
+    }
+    return runCommand(
+      { type: "search_navigate", matchIndex },
+      `Jumped to match ${matchIndex + 1}/${allMatches.length} on page ${allMatches[matchIndex].pageNum}`,
+    );
+  },
+);
+
+app.registerTool(
+  "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)"),
+    }),
+  },
+  async ({ scale }) =>
+    runCommand(
+      { type: "zoom", scale },
+      `Zoom set to ${Math.round(scale * 100)}%`,
+    ),
+);
+
+app.registerTool(
+  "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.)",
+        ),
+    }),
+  },
+  async ({ annotations }) =>
+    runCommand(
+      {
+        type: "add_annotations",
+        annotations: annotations as PdfAnnotationDef[],
+      },
+      `Added ${annotations.length} annotation(s)`,
+    ),
+);
+
+app.registerTool(
+  "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."),
+    }),
+  },
+  async ({ annotations }) =>
+    runCommand(
+      {
+        type: "update_annotations",
+        annotations: annotations as Extract<
+          PdfCommand,
+          { type: "update_annotations" }
+        >["annotations"],
+      },
+      `Updated ${annotations.length} annotation(s)`,
+    ),
+);
+
+app.registerTool(
+  "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"),
+    }),
+  },
+  async ({ ids }) =>
+    runCommand(
+      { type: "remove_annotations", ids },
+      `Removed ${ids.length} annotation(s)`,
+    ),
+);
+
+app.registerTool(
+  "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"),
+    }),
+  },
+  async ({ query, page, color, content }) => {
+    const id = `ht_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+    return runCommand(
+      { type: "highlight_text", id, query, page, color, content },
+      `Highlighted "${query}"${page ? ` on page ${page}` : ""} (id: ${id})`,
+    );
+  },
+);
+
+app.registerTool(
+  "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",
+        ),
+    }),
+  },
+  async ({ fields }) =>
+    runCommand(
+      { type: "fill_form", fields },
+      `Filled ${fields.length} field(s): ${fields.map((f) => f.name).join(", ")}`,
+    ),
+);
+
+app.registerTool(
+  "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.",
+        ),
+    }),
+  },
+  async ({ page, intervals }) => {
+    if (!pdfDocument) {
+      return {
+        content: [{ type: "text" as const, text: "Error: No document loaded" }],
+        isError: true,
+      };
+    }
+    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 },
+    };
+  },
+);
+
+app.registerTool(
+  "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"),
+    }),
+  },
+  async ({ page }) => {
+    if (!pdfDocument) {
+      return {
+        content: [{ type: "text" as const, text: "Error: No document loaded" }],
+        isError: true,
+      };
+    }
+    const data = 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,
+    };
+  },
+);
+
 // Connect to host
 app.connect().then(() => {
   log.info("Connected to host");
diff --git a/examples/shadertoy-server/server.ts b/examples/shadertoy-server/server.ts
index a4bfe9e00..5238c40b7 100644
--- a/examples/shadertoy-server/server.ts
+++ b/examples/shadertoy-server/server.ts
@@ -63,7 +63,9 @@ LIMITATIONS - Do NOT use:
 - VR features (mainVR not available)
 
 For procedural noise:
-  float hash(vec2 p) { return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }`;
+  float hash(vec2 p) { return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }
+
+The widget is interactive and exposes tools for updating shader source code and querying compilation status. Compilation errors are sent to model context automatically.`;
 
 const DEFAULT_FRAGMENT_SHADER = `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     vec2 uv = fragCoord / iResolution.xy;
diff --git a/examples/shadertoy-server/src/mcp-app.ts b/examples/shadertoy-server/src/mcp-app.ts
index 546de5afa..7cbb849da 100644
--- a/examples/shadertoy-server/src/mcp-app.ts
+++ b/examples/shadertoy-server/src/mcp-app.ts
@@ -7,6 +7,7 @@ import {
   applyHostStyleVariables,
   applyDocumentTheme,
 } from "@modelcontextprotocol/ext-apps";
+import { z } from "zod";
 import "./global.css";
 import "./mcp-app.css";
 import ShaderToyLite, {
@@ -39,7 +40,8 @@ const log = {
 // Get element references
 const mainEl = document.querySelector(".main") as HTMLElement;
 const canvas = document.getElementById("canvas") as HTMLCanvasElement;
-const codePreview = document.getElementById("code-preview") as HTMLPreElement;
+// TODO: code-preview streaming toggle was removed when ontoolinputpartial was
+// dropped during app-tool refactor — element still exists in HTML, restore if needed
 const fullscreenBtn = document.getElementById(
   "fullscreen-btn",
 ) as HTMLButtonElement;
@@ -100,6 +102,39 @@ fullscreenBtn.addEventListener("click", toggleFullscreen);
 // ShaderToyLite instance
 let shaderToy: ShaderToyLiteInstance | null = null;
 
+// Track current shader sources
+let currentShaderSources: ShaderInput = {
+  fragmentShader: "",
+};
+
+// Track compilation status
+interface CompilationStatus {
+  success: boolean;
+  errors: string[];
+  timestamp: number;
+}
+let lastCompilationStatus: CompilationStatus = {
+  success: true,
+  errors: [],
+  timestamp: Date.now(),
+};
+
+// Intercept console.error to capture shader compilation errors
+const originalConsoleError = console.error.bind(console);
+const capturedErrors: string[] = [];
+console.error = (...args: unknown[]) => {
+  originalConsoleError(...args);
+  // Capture shader compilation errors
+  const message = args.map((arg) => String(arg)).join(" ");
+  if (
+    message.includes("Shader compilation failed") ||
+    message.includes("Program initialization failed") ||
+    message.includes("Failed to compile")
+  ) {
+    capturedErrors.push(message);
+  }
+};
+
 // Create app instance
 const app = new App({ name: "ShaderToy Renderer", version: "1.0.0" });
 
@@ -111,35 +146,18 @@ app.onteardown = async () => {
   return {};
 };
 
-app.ontoolinputpartial = (params) => {
-  // Show code preview, hide canvas
-  codePreview.classList.add("visible");
-  canvas.classList.add("hidden");
-  const code = params.arguments?.fragmentShader;
-  codePreview.textContent = typeof code === "string" ? code : "";
-  codePreview.scrollTop = codePreview.scrollHeight;
-};
-
-app.ontoolinput = (params) => {
-  log.info("Received shader input");
-
-  // Hide code preview, show canvas
-  codePreview.classList.remove("visible");
-  canvas.classList.remove("hidden");
-
-  if (!isShaderInput(params.arguments)) {
-    log.error("Invalid tool input");
-    return;
-  }
-
-  const { fragmentShader, common, bufferA, bufferB, bufferC, bufferD } =
-    params.arguments;
+// Helper function to compile shader and update status
+function compileAndUpdateStatus(input: ShaderInput): void {
+  // Clear captured errors before compilation
+  capturedErrors.length = 0;
 
   // Initialize ShaderToyLite if needed
   if (!shaderToy) {
     shaderToy = new ShaderToyLite("canvas");
   }
 
+  const { fragmentShader, common, bufferA, bufferB, bufferC, bufferD } = input;
+
   // Set common code (shared across all shaders)
   shaderToy.setCommon(common || "");
 
@@ -167,6 +185,45 @@ app.ontoolinput = (params) => {
   });
 
   shaderToy.play();
+
+  // Update compilation status
+  const hasErrors = capturedErrors.length > 0;
+  lastCompilationStatus = {
+    success: !hasErrors,
+    errors: [...capturedErrors],
+    timestamp: Date.now(),
+  };
+
+  // Store current sources
+  currentShaderSources = { ...input };
+
+  // Send compilation status to model context if there are errors
+  if (hasErrors) {
+    app
+      .updateModelContext({
+        content: [
+          {
+            type: "text",
+            text: `Shader compilation failed:\n${capturedErrors.join("\n")}`,
+          },
+        ],
+        structuredContent: {
+          compilationStatus: lastCompilationStatus,
+        },
+      })
+      .catch((err) => log.error("Failed to update model context:", err));
+  }
+}
+
+app.ontoolinput = (params) => {
+  log.info("Received shader input");
+
+  if (!isShaderInput(params.arguments)) {
+    log.error("Invalid tool input");
+    return;
+  }
+
+  compileAndUpdateStatus(params.arguments);
   log.info("Setup complete");
 };
 
@@ -174,6 +231,97 @@ app.onerror = log.error;
 
 app.onhostcontextchanged = handleHostContextChanged;
 
+// Register tool: set-shader-source
+app.registerTool(
+  "set-shader-source",
+  {
+    title: "Set Shader Source",
+    description:
+      "Update the shader source code. Compiles and runs the new shader immediately.",
+    inputSchema: z.object({
+      fragmentShader: z
+        .string()
+        .describe("The main fragment shader source code (mainImage function)"),
+      common: z
+        .string()
+        .optional()
+        .describe("Common code shared across all shaders"),
+      bufferA: z
+        .string()
+        .optional()
+        .describe("Buffer A shader source (for multi-pass rendering)"),
+      bufferB: z
+        .string()
+        .optional()
+        .describe("Buffer B shader source (for multi-pass rendering)"),
+      bufferC: z
+        .string()
+        .optional()
+        .describe("Buffer C shader source (for multi-pass rendering)"),
+      bufferD: z
+        .string()
+        .optional()
+        .describe("Buffer D shader source (for multi-pass rendering)"),
+    }),
+  },
+  async (args) => {
+    log.info("set-shader-source tool called");
+
+    compileAndUpdateStatus(args);
+
+    const result = lastCompilationStatus.success
+      ? "Shader compiled and running successfully."
+      : `Shader compilation failed:\n${lastCompilationStatus.errors.join("\n")}`;
+
+    return {
+      content: [{ type: "text" as const, text: result }],
+      structuredContent: {
+        success: lastCompilationStatus.success,
+        errors: lastCompilationStatus.errors,
+        timestamp: lastCompilationStatus.timestamp,
+      },
+    };
+  },
+);
+
+// Register tool: get-shader-info
+app.registerTool(
+  "get-shader-info",
+  {
+    title: "Get Shader Info",
+    description: "Get the current shader source code and compilation status.",
+  },
+  async () => {
+    log.info("get-shader-info tool called");
+
+    const hasShader = currentShaderSources.fragmentShader.length > 0;
+    const isPlaying = shaderToy?.isPlaying() ?? false;
+
+    let statusText = "";
+    if (!hasShader) {
+      statusText = "No shader loaded.";
+    } else if (lastCompilationStatus.success) {
+      statusText = `Shader is ${isPlaying ? "running" : "paused"}.`;
+    } else {
+      statusText = `Shader has compilation errors:\n${lastCompilationStatus.errors.join("\n")}`;
+    }
+
+    return {
+      content: [
+        {
+          type: "text" as const,
+          text: `${statusText}\n\nCurrent fragment shader:\n${currentShaderSources.fragmentShader || "(none)"}`,
+        },
+      ],
+      structuredContent: {
+        sources: currentShaderSources,
+        compilationStatus: lastCompilationStatus,
+        isPlaying,
+      },
+    };
+  },
+);
+
 // Pause/resume shader based on visibility
 const observer = new IntersectionObserver((entries) => {
   entries.forEach((entry) => {
diff --git a/examples/threejs-server/src/mcp-app-wrapper.tsx b/examples/threejs-server/src/mcp-app-wrapper.tsx
index 9ef24d263..211ff0c57 100644
--- a/examples/threejs-server/src/mcp-app-wrapper.tsx
+++ b/examples/threejs-server/src/mcp-app-wrapper.tsx
@@ -7,8 +7,9 @@
 import type { App, McpUiHostContext } from "@modelcontextprotocol/ext-apps";
 import { useApp } from "@modelcontextprotocol/ext-apps/react";
 import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
-import { StrictMode, useState, useEffect } from "react";
+import { StrictMode, useState, useCallback, useEffect, useRef } from "react";
 import { createRoot } from "react-dom/client";
+import { z } from "zod";
 import ThreeJSApp from "./threejs-app.tsx";
 import "./global.css";
 
@@ -16,6 +17,20 @@ import "./global.css";
 // Types
 // =============================================================================
 
+/**
+ * Scene state tracked for view interaction tools.
+ */
+export interface SceneState {
+  /** Current Three.js code */
+  code: string | null;
+  /** Canvas height */
+  height: number;
+  /** Last error message if any */
+  error: string | null;
+  /** Whether the scene is currently rendering */
+  isRendering: boolean;
+}
+
 /**
  * Props passed to the view component.
  * This interface can be reused for other views.
@@ -31,6 +46,104 @@ export interface ViewProps<TToolInput = Record<string, unknown>> {
   toolResult: CallToolResult | null;
   /** Host context (theme, dimensions, locale, etc.) */
   hostContext: McpUiHostContext | null;
+  /** Call a tool on the MCP server */
+  callServerTool: App["callServerTool"];
+  /** Send a message to the host's chat */
+  sendMessage: App["sendMessage"];
+  /** Request the host to open a URL */
+  openLink: App["openLink"];
+  /** Send log messages to the host */
+  sendLog: App["sendLog"];
+  /** Callback to report scene errors */
+  onSceneError: (error: string | null) => void;
+  /** Callback to report scene is rendering */
+  onSceneRendering: (isRendering: boolean) => void;
+}
+
+// =============================================================================
+// Widget Interaction Tools
+// =============================================================================
+
+/**
+ * Registers widget interaction tools on the App instance.
+ * These tools allow the model to interact with the Three.js scene.
+ */
+function registerWidgetTools(
+  app: App,
+  sceneStateRef: React.RefObject<SceneState>,
+): void {
+  // Tool: set-scene-source - Update the scene source/configuration
+  app.registerTool(
+    "set-scene-source",
+    {
+      title: "Set Scene Source",
+      description:
+        "Update the Three.js scene source code. The code will be executed in a sandboxed environment with access to THREE, OrbitControls, EffectComposer, RenderPass, UnrealBloomPass, canvas, width, and height.",
+      inputSchema: z.object({
+        code: z.string().describe("JavaScript code to render the 3D scene"),
+        height: z
+          .number()
+          .int()
+          .positive()
+          .optional()
+          .describe("Height in pixels (optional, defaults to current)"),
+      }),
+      outputSchema: z.object({
+        success: z.boolean(),
+        code: z.string(),
+        height: z.number(),
+      }),
+    },
+    async (args) => {
+      // Update scene state
+      sceneStateRef.current.code = args.code;
+      if (args.height !== undefined) {
+        sceneStateRef.current.height = args.height;
+      }
+      sceneStateRef.current.error = null;
+
+      const result = {
+        success: true,
+        code: args.code,
+        height: sceneStateRef.current.height,
+      };
+
+      return {
+        content: [{ type: "text" as const, text: JSON.stringify(result) }],
+        structuredContent: result,
+      };
+    },
+  );
+
+  // Tool: get-scene-info - Get current scene state and any errors
+  app.registerTool(
+    "get-scene-info",
+    {
+      title: "Get Scene Info",
+      description:
+        "Get the current Three.js scene state including source code, dimensions, rendering status, and any errors.",
+      outputSchema: z.object({
+        code: z.string().nullable(),
+        height: z.number(),
+        error: z.string().nullable(),
+        isRendering: z.boolean(),
+      }),
+    },
+    async () => {
+      const state = sceneStateRef.current;
+      const result = {
+        code: state.code,
+        height: state.height,
+        error: state.error,
+        isRendering: state.isRendering,
+      };
+
+      return {
+        content: [{ type: "text" as const, text: JSON.stringify(result) }],
+        structuredContent: result,
+      };
+    },
+  );
 }
 
 // =============================================================================
@@ -48,14 +161,38 @@ function McpAppWrapper() {
   const [toolResult, setToolResult] = useState<CallToolResult | null>(null);
   const [hostContext, setHostContext] = useState<McpUiHostContext | null>(null);
 
+  // Scene state for widget interaction tools
+  const sceneStateRef = useRef<SceneState>({
+    code: null,
+    height: 400,
+    error: null,
+    isRendering: false,
+  });
+
+  // Reference to app for tools to access updateModelContext
+  const appRef = useRef<App | null>(null);
+
   const { app, error } = useApp({
     appInfo: { name: "Three.js View", version: "1.0.0" },
-    capabilities: {},
+    capabilities: { tools: {} },
     onAppCreated: (app) => {
+      appRef.current = app;
+
+      // Register widget interaction tools before connect()
+      registerWidgetTools(app, sceneStateRef);
+
       // Complete tool input (streaming finished)
       app.ontoolinput = (params) => {
-        setToolInputs(params.arguments as Record<string, unknown>);
+        const args = params.arguments as Record<string, unknown>;
+        setToolInputs(args);
         setToolInputsPartial(null);
+        // Update scene state from tool input
+        if (typeof args.code === "string") {
+          sceneStateRef.current.code = args.code;
+        }
+        if (typeof args.height === "number") {
+          sceneStateRef.current.height = args.height;
+        }
       };
       // Partial tool input (streaming in progress)
       app.ontoolinputpartial = (params) => {
@@ -110,6 +247,51 @@ function McpAppWrapper() {
     }
   }, [app]);
 
+  // Memoized callbacks that forward to app methods
+  const callServerTool = useCallback<App["callServerTool"]>(
+    (params, options) => app!.callServerTool(params, options),
+    [app],
+  );
+  const sendMessage = useCallback<App["sendMessage"]>(
+    (params, options) => app!.sendMessage(params, options),
+    [app],
+  );
+  const openLink = useCallback<App["openLink"]>(
+    (params, options) => app!.openLink(params, options),
+    [app],
+  );
+  const sendLog = useCallback<App["sendLog"]>(
+    (params) => app!.sendLog(params),
+    [app],
+  );
+
+  // Callback for scene to report errors
+  const onSceneError = useCallback((sceneError: string | null) => {
+    sceneStateRef.current.error = sceneError;
+
+    // Send errors to model context for awareness
+    if (sceneError && appRef.current) {
+      appRef.current.updateModelContext({
+        content: [
+          {
+            type: "text" as const,
+            text: `Three.js Scene Error: ${sceneError}`,
+          },
+        ],
+        structuredContent: {
+          type: "scene_error",
+          error: sceneError,
+          timestamp: new Date().toISOString(),
+        },
+      });
+    }
+  }, []);
+
+  // Callback for scene to report rendering state
+  const onSceneRendering = useCallback((isRendering: boolean) => {
+    sceneStateRef.current.isRendering = isRendering;
+  }, []);
+
   if (error) {
     return <div className="error">Error: {error.message}</div>;
   }
@@ -125,6 +307,12 @@ function McpAppWrapper() {
       toolInputsPartial={toolInputsPartial}
       toolResult={toolResult}
       hostContext={hostContext}
+      callServerTool={callServerTool}
+      sendMessage={sendMessage}
+      openLink={openLink}
+      sendLog={sendLog}
+      onSceneError={onSceneError}
+      onSceneRendering={onSceneRendering}
     />
   );
 }
diff --git a/examples/threejs-server/src/threejs-app.tsx b/examples/threejs-server/src/threejs-app.tsx
index 1de585f9e..2e2b44520 100644
--- a/examples/threejs-server/src/threejs-app.tsx
+++ b/examples/threejs-server/src/threejs-app.tsx
@@ -200,6 +200,12 @@ export default function ThreeJSApp({
   toolInputs,
   toolInputsPartial,
   hostContext,
+  callServerTool: _callServerTool,
+  sendMessage: _sendMessage,
+  openLink: _openLink,
+  sendLog: _sendLog,
+  onSceneError,
+  onSceneRendering,
 }: ThreeJSAppProps) {
   const [error, setError] = useState<string | null>(null);
   const [currentDisplayMode, setCurrentDisplayMode] = useState<
@@ -304,6 +310,9 @@ export default function ThreeJSApp({
     animControllerRef.current = createAnimationController();
 
     setError(null);
+    onSceneError(null);
+    onSceneRendering(true);
+
     const w = containerWidth || containerRef.current.offsetWidth || 800;
     const h = isFullscreen && hostHeight > 0 ? hostHeight : height;
     executeThreeCode(
diff --git a/examples/wiki-explorer-server/server.ts b/examples/wiki-explorer-server/server.ts
index fe2e89b53..59d5e18ee 100644
--- a/examples/wiki-explorer-server/server.ts
+++ b/examples/wiki-explorer-server/server.ts
@@ -86,7 +86,7 @@ export function createServer(): McpServer {
     {
       title: "Get First-Degree Links",
       description:
-        "Returns all Wikipedia pages that the given page links to directly.",
+        "Returns all Wikipedia pages that the given page links to directly. The widget is interactive and exposes tools for exploring the graph (expanding nodes to see their links), searching for articles, and querying visible nodes.",
       inputSchema: z.object({
         url: z
           .string()
diff --git a/examples/wiki-explorer-server/src/mcp-app.ts b/examples/wiki-explorer-server/src/mcp-app.ts
index 69bec05d4..6eb88e5db 100644
--- a/examples/wiki-explorer-server/src/mcp-app.ts
+++ b/examples/wiki-explorer-server/src/mcp-app.ts
@@ -3,6 +3,7 @@
  */
 import { App, type McpUiHostContext } from "@modelcontextprotocol/ext-apps";
 import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
+import { z } from "zod";
 import {
   forceCenter,
   forceCollide,
@@ -397,6 +398,347 @@ function handleHostContextChanged(ctx: McpUiHostContext) {
 
 app.onhostcontextchanged = handleHostContextChanged;
 
+// =============================================================================
+// Widget Interaction Tools
+// =============================================================================
+
+// Tool: Search for a Wikipedia article and navigate to it
+app.registerTool(
+  "search-article",
+  {
+    title: "Search Article",
+    description:
+      "Search for a Wikipedia article and add it to the graph as the new starting point",
+    inputSchema: z.object({
+      query: z.string().describe("Search query for Wikipedia article"),
+    }),
+  },
+  async (args) => {
+    const { query } = args as { query: string };
+
+    // Construct Wikipedia search URL that redirects to the article
+    const searchUrl = `https://en.wikipedia.org/wiki/Special:Search?go=Go&search=${encodeURIComponent(query)}`;
+
+    // Use the server tool to fetch the article
+    const result = await app.callServerTool({
+      name: "get-first-degree-links",
+      arguments: { url: searchUrl },
+    });
+
+    // Clear existing graph and start fresh with this article
+    graphData.nodes = [];
+    graphData.links = [];
+
+    const response = result.structuredContent as unknown as ToolResponse;
+    if (response && response.page) {
+      initialUrl = response.page.url;
+      addNode(response.page.url, response.page.title, "default", {
+        x: 0,
+        y: 0,
+      });
+      graph.warmupTicks(100);
+      handleToolResultData(result);
+      graph.centerAt(0, 0, 500);
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: `Navigated to article: ${response.page.title}`,
+          },
+        ],
+        structuredContent: {
+          success: true,
+          article: response.page,
+          linksFound: response.links?.length ?? 0,
+        },
+      };
+    }
+
+    return {
+      content: [
+        { type: "text" as const, text: `Could not find article for: ${query}` },
+      ],
+      structuredContent: {
+        success: false,
+        error: "Article not found",
+      },
+    };
+  },
+);
+
+// Tool: Get information about the currently displayed article
+app.registerTool(
+  "get-current-article",
+  {
+    title: "Get Current Article",
+    description:
+      "Get information about the currently selected or initial article in the graph",
+  },
+  async () => {
+    const currentUrl = selectedNodeUrl || initialUrl;
+
+    if (!currentUrl) {
+      return {
+        content: [
+          { type: "text" as const, text: "No article is currently selected" },
+        ],
+        structuredContent: {
+          hasSelection: false,
+          article: null,
+        },
+      };
+    }
+
+    const node = graphData.nodes.find((n) => n.url === currentUrl);
+
+    if (!node) {
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: "Selected article not found in graph",
+          },
+        ],
+        structuredContent: {
+          hasSelection: false,
+          article: null,
+        },
+      };
+    }
+
+    return {
+      content: [
+        {
+          type: "text" as const,
+          text: `Current article: ${node.title}\nURL: ${node.url}\nState: ${node.state}`,
+        },
+      ],
+      structuredContent: {
+        hasSelection: true,
+        article: {
+          url: node.url,
+          title: node.title,
+          state: node.state,
+          isExpanded: node.state === "expanded",
+          hasError: node.state === "error",
+          errorMessage: node.errorMessage,
+        },
+      },
+    };
+  },
+);
+
+// Tool: Highlight a specific node in the graph
+app.registerTool(
+  "highlight-node",
+  {
+    title: "Highlight Node",
+    description:
+      "Highlight and center on a specific node in the graph by title or URL",
+    inputSchema: z.object({
+      identifier: z
+        .string()
+        .describe("The title or URL of the node to highlight"),
+    }),
+  },
+  async (args) => {
+    const { identifier } = args as { identifier: string };
+    const lowerIdentifier = identifier.toLowerCase();
+
+    // Find node by title (case-insensitive partial match) or exact URL
+    const node = graphData.nodes.find(
+      (n) =>
+        n.url === identifier || n.title.toLowerCase().includes(lowerIdentifier),
+    );
+
+    if (!node) {
+      return {
+        content: [
+          { type: "text" as const, text: `Node not found: ${identifier}` },
+        ],
+        structuredContent: {
+          success: false,
+          error: "Node not found in graph",
+          availableNodes: graphData.nodes.map((n) => n.title),
+        },
+      };
+    }
+
+    // Center on the node and select it
+    selectedNodeUrl = node.url;
+    if (node.x !== undefined && node.y !== undefined) {
+      graph.centerAt(node.x, node.y, 500);
+      graph.zoom(2, 500);
+    }
+
+    return {
+      content: [
+        { type: "text" as const, text: `Highlighted node: ${node.title}` },
+      ],
+      structuredContent: {
+        success: true,
+        node: {
+          url: node.url,
+          title: node.title,
+          state: node.state,
+        },
+      },
+    };
+  },
+);
+
+// Tool: Expand a node to show its linked pages
+app.registerTool(
+  "expand-node",
+  {
+    title: "Expand Node",
+    description:
+      "Expand a node to fetch and display all Wikipedia pages it links to. This is the core way to explore the graph.",
+    inputSchema: z.object({
+      identifier: z.string().describe("The title or URL of the node to expand"),
+    }),
+  },
+  async (args) => {
+    const { identifier } = args as { identifier: string };
+    const lowerIdentifier = identifier.toLowerCase();
+
+    // Find node by title (case-insensitive partial match) or exact URL
+    const node = graphData.nodes.find(
+      (n) =>
+        n.url === identifier || n.title.toLowerCase().includes(lowerIdentifier),
+    );
+
+    if (!node) {
+      return {
+        content: [
+          { type: "text" as const, text: `Node not found: ${identifier}` },
+        ],
+        structuredContent: {
+          success: false,
+          error: "Node not found in graph",
+          availableNodes: graphData.nodes.map((n) => n.title),
+        },
+      };
+    }
+
+    if (node.state === "expanded") {
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: `Node "${node.title}" is already expanded`,
+          },
+        ],
+        structuredContent: {
+          success: true,
+          alreadyExpanded: true,
+          node: { url: node.url, title: node.title },
+        },
+      };
+    }
+
+    if (node.state === "error") {
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: `Node "${node.title}" has an error: ${node.errorMessage}`,
+          },
+        ],
+        structuredContent: {
+          success: false,
+          error: node.errorMessage,
+        },
+      };
+    }
+
+    try {
+      // Fetch the linked pages using the server tool
+      const result = await app.callServerTool({
+        name: "get-first-degree-links",
+        arguments: { url: node.url },
+      });
+
+      graph.warmupTicks(0);
+      handleToolResultData(result);
+
+      const response = result.structuredContent as unknown as ToolResponse;
+      const linksAdded = response?.links?.length ?? 0;
+
+      // Center on the expanded node
+      if (node.x !== undefined && node.y !== undefined) {
+        graph.centerAt(node.x, node.y, 500);
+      }
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: `Expanded "${node.title}" - found ${linksAdded} linked articles`,
+          },
+        ],
+        structuredContent: {
+          success: true,
+          node: { url: node.url, title: node.title },
+          linksAdded,
+        },
+      };
+    } catch (e) {
+      setNodeState(node.url, "error", "Request failed");
+      updateGraph();
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: `Failed to expand "${node.title}": ${e instanceof Error ? e.message : String(e)}`,
+          },
+        ],
+        structuredContent: {
+          success: false,
+          error: String(e),
+        },
+      };
+    }
+  },
+);
+
+// Tool: Get list of currently visible nodes in the graph
+app.registerTool(
+  "get-visible-nodes",
+  {
+    title: "Get Visible Nodes",
+    description: "Get a list of all nodes currently visible in the graph",
+  },
+  async () => {
+    const nodes = graphData.nodes.map((n) => ({
+      url: n.url,
+      title: n.title,
+      state: n.state,
+      isExpanded: n.state === "expanded",
+      hasError: n.state === "error",
+    }));
+
+    const expandedCount = nodes.filter((n) => n.isExpanded).length;
+    const errorCount = nodes.filter((n) => n.hasError).length;
+
+    return {
+      content: [
+        {
+          type: "text" as const,
+          text: `Graph contains ${nodes.length} nodes:\n${nodes.map((n) => `- ${n.title} (${n.state})`).join("\n")}`,
+        },
+      ],
+      structuredContent: {
+        totalNodes: nodes.length,
+        expandedNodes: expandedCount,
+        errorNodes: errorCount,
+        nodes,
+      },
+    };
+  },
+);
+
 // Connect to host
 app.connect().then(() => {
   const ctx = app.getHostContext();
diff --git a/specification/draft/apps.mdx b/specification/draft/apps.mdx
index 6c810d632..c4cff4c66 100644
--- a/specification/draft/apps.mdx
+++ b/specification/draft/apps.mdx
@@ -506,11 +506,23 @@ If the Host is a web page, it MUST wrap the View and communicate with it through
 
 ### Standard MCP Messages
 
-UI iframes can use the following subset of standard MCP protocol messages:
+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)
 
 **Tools:**
 
-- `tools/call` - Execute a tool on the MCP server
+- `tools/call` - Execute a tool (bidirectional)
+  - **App → Host**: Call server tool via host proxy
+  - **Host → App**: Call app-registered tool
+- `tools/list` - List available tools (bidirectional)
+  - **App → Host**: List server tools
+  - **Host → App**: 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
 
 **Resources:**
 
@@ -1188,6 +1200,92 @@ 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
 
+#### Requests (Host → App)
+
+When Apps declare the `tools` capability, the Host can send standard MCP tool requests to the App:
+
+`tools/call` - Execute an App-registered tool
+
+```typescript
+// Request (Host → App)
+{
+  jsonrpc: "2.0",
+  id: 1,
+  method: "tools/call",
+  params: {
+    name: string,        // Name of app-registered tool to execute
+    arguments?: object   // Tool arguments (validated against inputSchema)
+  }
+}
+
+// Success Response (App → Host)
+{
+  jsonrpc: "2.0",
+  id: 1,
+  result: {
+    content: Array<ContentBlock>,  // Result for model context
+    structuredContent?: object,    // Optional structured data for UI
+    isError?: boolean,             // True if tool execution failed
+    _meta?: object                 // Optional metadata
+  }
+}
+
+// Error Response
+{
+  jsonrpc: "2.0",
+  id: 1,
+  error: {
+    code: number,
+    message: string
+  }
+}
+```
+
+**App Behavior:**
+- Apps MUST implement `oncalltool` handler if they declare `tools` capability
+- Apps SHOULD validate tool names and arguments
+- Apps MAY use `app.registerTool()` SDK helper for automatic validation
+- Apps SHOULD return `isError: true` for tool execution failures
+
+`tools/list` - List App-registered tools
+
+```typescript
+// Request (Host → App)
+{
+  jsonrpc: "2.0",
+  id: 2,
+  method: "tools/list",
+  params: {
+    cursor?: string  // Optional pagination cursor
+  }
+}
+
+// Response (App → Host)
+{
+  jsonrpc: "2.0",
+  id: 2,
+  result: {
+    tools: Array<Tool>,  // List of available tools
+    nextCursor?: string  // Pagination cursor if more tools exist
+  }
+}
+```
+
+**Tool Structure:**
+```typescript
+interface Tool {
+  name: string;                    // Unique tool identifier
+  description?: string;            // Human-readable description
+  inputSchema: object;             // JSON Schema for arguments
+  annotations?: ToolAnnotations;   // MCP tool annotations (e.g., readOnlyHint)
+}
+```
+
+**App Behavior:**
+- Apps MUST implement `onlisttools` handler if they declare `tools` capability
+- Apps SHOULD return complete tool metadata including schemas
+- Apps MAY filter tools based on context or permissions
+
 #### Notifications (Host → View)
 
 `ui/notifications/tool-input` - Host MUST send this notification with the complete tool arguments after the View's initialize request completes.
@@ -1599,6 +1697,443 @@ This pattern enables interactive, self-updating views.
 
 Note: Tools with `visibility: ["app"]` are hidden from the agent but remain callable by apps via `tools/call`. This enables UI-only interactions (refresh buttons, form submissions) without exposing implementation details to the model. See the Visibility section under Resource Discovery for details.
 
+### App-Provided Tools
+
+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
+
+Without tool registration, apps are black boxes to the model:
+- Model sees visual output (screenshots) but not semantic state
+- Model cannot query app state without DOM parsing
+- Model cannot discover what operations are available
+
+With tool registration, apps expose semantic interfaces:
+- Model discovers available operations via `tools/list`
+- Model queries app state via tools (e.g., `get_board_state`)
+- Model executes actions via tools (e.g., `make_move`)
+- Apps provide structured data instead of requiring HTML/CSS interpretation
+
+This is a different model from approaches where apps keep the model informed through side channels (e.g., OAI Apps SDK sending widget state changes to the model, MCP-UI adding tool call results to chat history). Instead, the agent actively queries app state and executes operations through tools.
+
+#### App Tool Registration
+
+Apps register tools using the SDK's `registerTool()` method:
+
+```typescript
+import { App } from '@modelcontextprotocol/ext-apps';
+import { z } from 'zod';
+
+const app = new App(
+  { name: "TicTacToe", version: "1.0.0" },
+  { tools: { listChanged: true } }  // Declare tool capability
+);
+
+// Register a tool with schema validation
+const moveTool = app.registerTool(
+  "tictactoe_move",
+  {
+    description: "Make a move in the tic-tac-toe game",
+    inputSchema: z.object({
+      position: z.number().int().min(0).max(8),
+      player: z.enum(['X', 'O'])
+    }),
+    outputSchema: z.object({
+      board: z.array(z.string()).length(9),
+      winner: z.enum(['X', 'O', 'draw', null]).nullable()
+    }),
+    annotations: {
+      readOnlyHint: false  // This tool has side effects
+    }
+  },
+  async (params) => {
+    // Validate and execute move
+    const newBoard = makeMove(params.position, params.player);
+    const winner = checkWinner(newBoard);
+
+    return {
+      content: [{
+        type: "text",
+        text: `Move made at position ${params.position}`
+      }],
+      structuredContent: {
+        board: newBoard,
+        winner
+      }
+    };
+  }
+);
+
+await app.connect(new PostMessageTransport(window.parent));
+```
+
+**Registration Options:**
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `name` | string | Yes | Unique tool identifier |
+| `description` | string | No | Human-readable description for agent |
+| `inputSchema` | Zod schema or JSON Schema | No | Validates arguments |
+| `outputSchema` | Zod schema | No | Validates return value |
+| `annotations` | ToolAnnotations | No | MCP tool hints (e.g., `readOnlyHint`) |
+| `_meta` | object | No | Custom metadata |
+
+Apps can also implement tool handling manually without the SDK:
+
+```javascript
+app.oncalltool = async (params, extra) => {
+  if (params.name === "tictactoe_move") {
+    // Manual validation
+    if (typeof params.arguments?.position !== 'number') {
+      throw new Error("Invalid position");
+    }
+
+    // Execute tool
+    const newBoard = makeMove(params.arguments.position, params.arguments.player);
+
+    return {
+      content: [{ type: "text", text: "Move made" }],
+      structuredContent: { board: newBoard }
+    };
+  }
+
+  throw new Error(`Unknown tool: ${params.name}`);
+};
+
+app.onlisttools = async () => {
+  return {
+    tools: [
+      {
+        name: "tictactoe_move",
+        description: "Make a move in the game",
+        inputSchema: {
+          type: "object",
+          properties: {
+            position: { type: "number", minimum: 0, maximum: 8 },
+            player: { type: "string", enum: ["X", "O"] }
+          },
+          required: ["position", "player"]
+        }
+      }
+    ]
+  };
+};
+```
+
+#### Tool Lifecycle
+
+Registered tools support dynamic lifecycle management:
+
+**Enable/Disable:**
+
+```typescript
+const tool = app.registerTool("my_tool", config, callback);
+
+// Disable tool (hide from tools/list)
+tool.disable();
+
+// Re-enable tool
+tool.enable();
+```
+
+When a tool is disabled/enabled, the app automatically sends `notifications/tools/list_changed` (if the app declared `listChanged: true` capability).
+
+**Update:**
+
+```typescript
+// Update tool description or schema
+tool.update({
+  description: "New description",
+  inputSchema: newSchema
+});
+```
+
+Updates also trigger `notifications/tools/list_changed`.
+
+**Remove:**
+
+```typescript
+// Permanently remove tool
+tool.remove();
+```
+
+#### Schema Validation
+
+The SDK provides automatic schema validation using Zod:
+
+**Input Validation:**
+
+```typescript
+app.registerTool(
+  "search",
+  {
+    inputSchema: z.object({
+      query: z.string().min(1).max(100),
+      limit: z.number().int().positive().default(10)
+    })
+  },
+  async (params) => {
+    // params.query is guaranteed to be a string (1-100 chars)
+    // params.limit is guaranteed to be a positive integer (default 10)
+    return performSearch(params.query, params.limit);
+  }
+);
+```
+
+If the host sends invalid arguments, the tool automatically returns an error before the callback is invoked.
+
+**Output Validation:**
+
+```typescript
+app.registerTool(
+  "get_status",
+  {
+    outputSchema: z.object({
+      status: z.enum(['ready', 'busy', 'error']),
+      timestamp: z.string().datetime()
+    })
+  },
+  async () => {
+    return {
+      content: [{ type: "text", text: "Status retrieved" }],
+      structuredContent: {
+        status: 'ready',
+        timestamp: new Date().toISOString()
+      }
+    };
+  }
+);
+```
+
+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 (no DOM parsing)
+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 without DOM parsing
+
+**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).
@@ -1669,15 +2204,104 @@ if (uiCap?.mimeTypes?.includes(RESOURCE_MIME_TYPE)) {
 - Tools MUST return meaningful content array even when UI is available
 - Servers MAY register different tool variants based on host capabilities
 
+#### App (Guest UI) Capabilities
+
+Apps advertise their capabilities in the `ui/initialize` request to the host. When an app supports tool registration, it includes the `tools` capability:
+
+```json
+{
+  "method": "ui/initialize",
+  "params": {
+    "appInfo": {
+      "name": "TicTacToe",
+      "version": "1.0.0"
+    },
+    "appCapabilities": {
+      "tools": {
+        "listChanged": true
+      }
+    }
+  }
+}
+```
+
+The host responds with its own capabilities, including support for proxying server tools:
+
+```json
+{
+  "result": {
+    "hostInfo": {
+      "name": "claude-desktop",
+      "version": "1.0.0"
+    },
+    "hostCapabilities": {
+      "serverTools": {
+        "listChanged": true
+      },
+      "openLinks": {},
+      "logging": {}
+    }
+  }
+}
+```
+
+**App Capability: `tools`**
+
+When present, the app can register tools that the host and agent can call.
+
+- `listChanged` (boolean, optional): If `true`, the app will send `notifications/tools/list_changed` when tools are added, removed, or modified
+
+**Host Capability: `serverTools`**
+
+When present, the host can proxy calls from the app to MCP server tools.
+
+- `listChanged` (boolean, optional): If `true`, the host will send `notifications/tools/list_changed` when server tools change
+
+These capabilities are independent - an app can have one, both, or neither.
+
+**TypeScript Types:**
+
+```typescript
+interface McpUiAppCapabilities {
+  tools?: {
+    listChanged?: boolean;
+  };
+}
+
+interface McpUiHostCapabilities {
+  serverTools?: {
+    listChanged?: boolean;
+  };
+  openLinks?: {};
+  logging?: {};
+}
+```
+
 ### Extensibility
 
-This specification defines the Minimum Viable Product (MVP) for MCP Apps. Future extensions may include:
+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
+  - Bidirectional tool flow (Apps consume server tools AND provide app tools)
+  - Full lifecycle management (enable/disable/update/remove)
+  - Schema validation with Zod
+  - Tool list change notifications
 
 **Content Types (deferred from MVP):**
 
 - `externalUrl`: Embed external web applications (e.g., `text/uri-list`)
 
-**Advanced Features (see Future Considerations):**
+**Advanced Tool Features (future extensions):**
+
+- Tool namespacing standards and conventions
+- Standardized permission model specifications
+- Tool categories/tags for organization
+- Cross-app tool composition
+- Tool marketplace/discovery mechanisms
+
+**Other Advanced Features (see Future Considerations):**
 
 - Support multiple UI resources in a tool response
 - State persistence and restoration
@@ -1777,6 +2401,37 @@ This proposal synthesizes feedback from the UI CWG and MCP-UI community, host im
 - **Boolean `private` flag:** Simpler but less flexible; doesn't express model-only tools.
 - **Flat `ui/visibility` key:** Rejected in favor of nested structure for consistency with future `_meta.ui` fields.
 
+#### 6. App Tool Registration Support
+
+**Decision:** Enable Apps to register tools using standard MCP `tools/call` and `tools/list` messages, making tools flow bidirectionally between Apps and Hosts.
+
+**Rationale:**
+
+- **Semantic introspection:** Apps can expose their state and operations in structured, machine-readable format without requiring agents to parse DOM or interpret visual elements
+- **Protocol reuse:** Reuses existing MCP tool infrastructure (`tools/call`, `tools/list`, `notifications/tools/list_changed`) instead of inventing new message types
+- **WebMCP alignment:** Brings WebMCP's vision of "JavaScript functions as tools" to MCP Apps while staying MCP-native
+- **Agent-driven interaction:** Enables agents to actively query app state and command app operations, rather than apps pushing state updates via custom messages
+- **Bidirectional symmetry:** Apps act as both MCP clients (calling server tools) and MCP servers (providing app tools), creating clean architectural symmetry
+- **Use case coverage:** Enables interactive games, stateful forms, complex workflows, and reusable widgets
+
+**Alternatives considered:**
+
+- **Custom app-action API:** Rejected because it would duplicate MCP's existing tool infrastructure and create parallel protocol semantics. Using standard `tools/call` means automatic compatibility with future MCP features and better ecosystem integration.
+- **Server-side proxy tools:** Apps could expose operations by having the server register proxy tools that communicate back to the app. Rejected because it doesn't leverage the app's JavaScript execution environment, adds unnecessary round-trips, and couples app functionality to server implementation.
+- **Resources instead of tools:** Apps could expose state via `resources/read` rather than tools. Rejected because resources have wrong semantics (passive data retrieval vs. active operations), don't support parameters well, and don't convey operational intent.
+
+**Security implications:**
+
+Apps are forward-deployed emanations of server tools, running in the client context. Hosts should consider how to handle tool call approval:
+
+- Per-app-instance approval (confirm each time a specific app instance calls a tool)
+- Per-server approval (approve all apps from a trusted server)
+- Per-tool approval (approve based on tool semantics and annotations)
+- Clear attribution showing which app instance is calling a tool
+- Audit trails for app tool calls
+
+See [Security Implications: App-Provided Tools Security](#5-app-provided-tools-security) for detailed considerations.
+
 ### Backward Compatibility
 
 The proposal builds on the existing core protocol. There are no incompatibilities.
@@ -1869,6 +2524,83 @@ const allowAttribute = allowList.join(' ');
 - Host SHOULD warn users when UI requires external domain access
 - Host MAY implement global domain allowlists/blocklists
 
+#### 5. App-Provided Tools Security
+
+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:**
+
+App-provided tools introduce additional approval considerations:
+
+- **Tool description accuracy:** Apps may describe tools in ways that don't fully capture side effects
+- **Namespace conflicts:** Apps could register tools with names conflicting with server tools
+- **Resource consumption:** Apps could register many tools or implement slow callbacks
+- **Data validation:** Tool results should match declared schemas
+- **Semantic clarity:** Tool operations should be clear from their descriptions
+
+**Approval Granularity:**
+
+Hosts have discretion in how they handle app tool call approval:
+
+1. **Per-app-instance approval:** Confirm each time a specific app instance's tool is called
+2. **Per-server approval:** Trust all apps from servers the user has approved
+3. **Per-tool approval:** Approve based on tool annotations (e.g., `readOnlyHint`)
+4. **Hybrid approaches:** Combine strategies (e.g., auto-approve read-only tools from trusted servers)
+
+**Host Protections:**
+
+Hosts SHOULD implement the following protections for app-provided tools:
+
+1. **Clear Attribution:**
+   - Display tool source in agent's tool list (e.g., "Tool from TicTacToe App")
+   - Visually distinguish app tools from server tools in UI
+   - Show app name and version in tool call confirmations
+
+2. **User Confirmation:**
+   - Require explicit user approval for tools with `readOnlyHint: false`
+   - Consider auto-approving tools with `readOnlyHint: true` after review
+   - Implement per-app permission settings (always allow, always deny, ask)
+
+3. **Namespace Management:**
+   - Recommend or enforce tool name prefixes (e.g., `app:move`, `tictactoe:move`)
+   - Prevent apps from registering tool names that conflict with server tools
+   - Document namespace conventions for app developers
+
+4. **Resource Limits:**
+   - 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
+
+5. **Audit Trail:**
+   - Log all app tool registrations with timestamps
+   - Log all app tool calls with arguments and results
+   - Provide audit interface for users to review app tool activity
+
+6. **Result Validation:**
+   - Validate tool results match declared schemas
+   - Sanitize result content before displaying to user or agent
+   - Reject results that appear malicious (e.g., phishing content)
+
+**Permission Model:**
+
+Hosts MAY implement different permission levels based on tool annotations:
+
+| Annotation          | Recommended Permission | Example           |
+|---------------------|------------------------|-------------------|
+| `readOnlyHint: true`| Auto-approve (with caution) | `get_board_state()` |
+| `readOnlyHint: false` | User confirmation required | `make_move()` |
+| No annotation       | User confirmation required (safe default) | Any tool |
+
+**App Tool Lifecycle:**
+
+App tools MUST be tied to the app's lifecycle:
+
+- Tools become available only after app sends `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
+
 ### Other risks
 
 - **Social engineering:** UI can still display misleading content. Hosts should clearly indicate sandboxed UI boundaries.
diff --git a/src/app-bridge.test.ts b/src/app-bridge.test.ts
index c1f4612ce..dff4ea072 100644
--- a/src/app-bridge.test.ts
+++ b/src/app-bridge.test.ts
@@ -12,6 +12,7 @@ import {
   ResourceListChangedNotificationSchema,
   ToolListChangedNotificationSchema,
 } from "@modelcontextprotocol/sdk/types.js";
+import { z } from "zod/v4";
 
 import { App } from "./app";
 import {
@@ -689,6 +690,856 @@ describe("App <-> AppBridge integration", () => {
     });
   });
 
+  describe("App tool registration", () => {
+    beforeEach(async () => {
+      // App needs tool capabilities to register tools
+      app = new App(testAppInfo, { tools: {} }, { autoResize: false });
+      await bridge.connect(bridgeTransport);
+    });
+
+    it("registerTool creates a registered tool", async () => {
+      const InputSchema = z.object({ name: z.string() }) as any;
+      const OutputSchema = z.object({ greeting: z.string() }) as any;
+
+      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("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;
+
+      await 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() }) as any;
+
+      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
+      await expect(
+        (tool.handler as any)({ name: "Alice" }, mockExtra),
+      ).resolves.toBeDefined();
+
+      // Invalid input should fail
+      await 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() }) as any;
+
+      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
+      await 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);
+    });
+
+    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 });
+
+      const receivedCalls: unknown[] = [];
+
+      app.oncalltool = async (params) => {
+        receivedCalls.push(params);
+        return {
+          content: [{ type: "text", text: `Executed: ${params.name}` }],
+        };
+      };
+
+      await app.connect(appTransport);
+
+      const result = await bridge.callTool({
+        name: "test-tool",
+        arguments: { foo: "bar" },
+      });
+
+      expect(receivedCalls).toHaveLength(1);
+      expect(receivedCalls[0]).toMatchObject({
+        name: "test-tool",
+        arguments: { foo: "bar" },
+      });
+      expect(result.content).toEqual([
+        { type: "text", text: "Executed: test-tool" },
+      ]);
+    });
+
+    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 });
+
+      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: {} },
+            },
+          ],
+        };
+      };
+
+      await app.connect(appTransport);
+
+      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");
+    });
+  });
+
+  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[] = [];
+      app.oncalltool = async (params) => {
+        receivedCalls.push(params);
+        return {
+          content: [{ type: "text", text: "Success" }],
+        };
+      };
+
+      await bridge.connect(bridgeTransport);
+      await app.connect(appTransport);
+
+      await bridge.callTool({
+        name: "test-tool",
+        arguments: {},
+      });
+
+      expect(receivedCalls).toHaveLength(1);
+    });
+
+    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() }) as any,
+        },
+        async (args: any) => ({
+          content: [{ type: "text" as const, text: `Hello, ${args.name}!` }],
+        }),
+      );
+
+      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}`);
+      };
+
+      await bridge.connect(bridgeTransport);
+      await app.connect(appTransport);
+
+      const result = await bridge.callTool({
+        name: "greet",
+        arguments: { name: "Alice" },
+      });
+
+      expect(result.content).toEqual([{ type: "text", text: "Hello, Alice!" }]);
+    });
+  });
+
+  describe("Automatic request handlers", () => {
+    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() }) as any,
+          },
+          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
+        await 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() }) as any,
+          },
+          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() }) as any,
+          },
+          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
+        await expect(
+          bridge.callTool({ name: "test-tool", arguments: {} }),
+        ).resolves.toBeDefined();
+
+        // Disable tool
+        tool.disable();
+
+        // Should throw when disabled
+        await 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
+        await expect(
+          bridge.callTool({
+            name: "strict-tool",
+            arguments: { required: "hello" },
+          }),
+        ).resolves.toBeDefined();
+
+        // Invalid input should fail
+        await 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("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
+        await 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" }]);
+      });
+    });
+
+    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("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();
+
+        const result = await bridge.listTools({});
+
+        expect(result.tools).toEqual([]);
+      });
+
+      it("updates list when tools are added", async () => {
+        const appCapabilities = { tools: { listChanged: true } };
+        app = new App(testAppInfo, appCapabilities, { autoResize: false });
+
+        await app.connect(appTransport);
+
+        // 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");
+      });
+
+      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: [],
+        }));
+        const tool3 = 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);
+
+        // Remove one tool
+        tool2.remove();
+
+        // 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");
+
+        // Remove another tool
+        tool1.remove();
+
+        // Should now have one tool
+        result = await bridge.listTools({});
+        expect(result.tools.map((t) => t.name)).toEqual(["tool3"]);
+      });
+
+      it("only includes enabled tools in list", async () => {
+        const appCapabilities = { tools: { listChanged: true } };
+        app = new App(testAppInfo, appCapabilities, { autoResize: false });
+
+        const tool1 = 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({});
+
+        // 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");
+      });
+    });
+
+    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");
+
+        // Should no longer be callable
+        await expect(
+          bridge.callTool({ name: "counter", arguments: {} }),
+        ).rejects.toThrow("Tool counter not found");
+      });
+
+      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
+        await expect(
+          bridge1.callTool({ name: "app1-tool", arguments: {} }),
+        ).resolves.toBeDefined();
+
+        await 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();
+      });
+    });
+  });
+
   describe("AppBridge without MCP client (manual handlers)", () => {
     let app: App;
     let bridge: AppBridge;
@@ -1222,3 +2073,179 @@ describe("isToolVisibilityAppOnly", () => {
     });
   });
 });
+
+describe("addEventListener / removeEventListener", () => {
+  let app: App;
+  let bridge: AppBridge;
+  let appTransport: InMemoryTransport;
+  let bridgeTransport: InMemoryTransport;
+
+  beforeEach(async () => {
+    [appTransport, bridgeTransport] = InMemoryTransport.createLinkedPair();
+    app = new App(testAppInfo, {}, { autoResize: false });
+    bridge = new AppBridge(
+      createMockClient() as Client,
+      testHostInfo,
+      testHostCapabilities,
+    );
+    await bridge.connect(bridgeTransport);
+  });
+
+  afterEach(async () => {
+    await appTransport.close();
+    await bridgeTransport.close();
+  });
+
+  it("App.addEventListener fires multiple listeners for the same event", async () => {
+    const a: unknown[] = [];
+    const b: unknown[] = [];
+    app.addEventListener("hostcontextchanged", (p) => a.push(p));
+    app.addEventListener("hostcontextchanged", (p) => b.push(p));
+
+    await app.connect(appTransport);
+    bridge.setHostContext({ theme: "dark" });
+    await flush();
+
+    expect(a).toEqual([{ theme: "dark" }]);
+    expect(b).toEqual([{ theme: "dark" }]);
+  });
+
+  it("App notification setters replace (DOM onclick model)", async () => {
+    const a: unknown[] = [];
+    const b: unknown[] = [];
+    app.ontoolinput = (p) => a.push(p);
+    app.ontoolinput = (p) => b.push(p);
+
+    await app.connect(appTransport);
+    await bridge.sendToolInput({ arguments: { x: 1 } });
+    await flush();
+
+    // Second assignment replaced the first (like el.onclick)
+    expect(a).toEqual([]);
+    expect(b).toEqual([{ arguments: { x: 1 } }]);
+  });
+
+  it("App notification setter coexists with addEventListener", async () => {
+    const a: unknown[] = [];
+    const b: unknown[] = [];
+    app.ontoolinput = (p) => a.push(p);
+    app.addEventListener("toolinput", (p) => b.push(p));
+
+    await app.connect(appTransport);
+    await bridge.sendToolInput({ arguments: { x: 1 } });
+    await flush();
+
+    // Both the on* handler and addEventListener listener fire
+    expect(a).toEqual([{ arguments: { x: 1 } }]);
+    expect(b).toEqual([{ arguments: { x: 1 } }]);
+  });
+
+  it("App notification getter returns the on* handler", () => {
+    expect(app.ontoolinput).toBeUndefined();
+    const handler = () => {};
+    app.ontoolinput = handler;
+    expect(app.ontoolinput).toBe(handler);
+  });
+
+  it("App notification setter can be cleared with undefined", async () => {
+    const a: unknown[] = [];
+    app.ontoolinput = (p) => a.push(p);
+    app.ontoolinput = undefined;
+
+    await app.connect(appTransport);
+    await bridge.sendToolInput({ arguments: { x: 1 } });
+    await flush();
+
+    expect(a).toEqual([]);
+    expect(app.ontoolinput).toBeUndefined();
+  });
+
+  it("App.removeEventListener stops a listener from firing", async () => {
+    const a: unknown[] = [];
+    const listener = (p: unknown) => a.push(p);
+    app.addEventListener("toolinput", listener);
+    app.removeEventListener("toolinput", listener);
+
+    await app.connect(appTransport);
+    await bridge.sendToolInput({ arguments: {} });
+    await flush();
+
+    expect(a).toEqual([]);
+  });
+
+  it("App.onEventDispatch merges hostcontext before listeners fire", async () => {
+    let seen: unknown;
+    app.addEventListener("hostcontextchanged", () => {
+      seen = app.getHostContext();
+    });
+
+    await app.connect(appTransport);
+    bridge.setHostContext({ theme: "dark" });
+    await flush();
+
+    expect(seen).toEqual({ theme: "dark" });
+  });
+
+  it("AppBridge.addEventListener fires multiple listeners", async () => {
+    let a = 0;
+    let b = 0;
+    bridge.addEventListener("initialized", () => a++);
+    bridge.addEventListener("initialized", () => b++);
+
+    await app.connect(appTransport);
+
+    expect(a).toBe(1);
+    expect(b).toBe(1);
+  });
+
+  it("on* request setters have replace semantics (no throw)", () => {
+    app.onteardown = async () => ({});
+    // Second assignment replaces — does not throw
+    expect(() => {
+      app.onteardown = async () => ({});
+    }).not.toThrow();
+  });
+
+  it("on* request setters have getters", () => {
+    expect(app.onteardown).toBeUndefined();
+    const handler = async () => ({});
+    app.onteardown = handler;
+    expect(app.onteardown).toBe(handler);
+  });
+
+  it("direct setRequestHandler throws when called twice", () => {
+    const bridge2 = new AppBridge(
+      createMockClient() as Client,
+      testHostInfo,
+      testHostCapabilities,
+    );
+    bridge2.setRequestHandler(
+      // @ts-expect-error — exercising throw path with raw schema
+      { shape: { method: { value: "test/method" } } },
+      () => ({}),
+    );
+    expect(() => {
+      bridge2.setRequestHandler(
+        // @ts-expect-error — exercising throw path with raw schema
+        { shape: { method: { value: "test/method" } } },
+        () => ({}),
+      );
+    }).toThrow(/already registered/);
+  });
+
+  it("direct setNotificationHandler throws for event-mapped methods", () => {
+    const app2 = new App(testAppInfo, {}, { autoResize: false });
+    // toolinput is in the EventMap — once addEventListener or on* is used,
+    // direct setNotificationHandler should throw
+    app2.addEventListener("toolinput", () => {});
+    expect(() => {
+      app2.setNotificationHandler(
+        // @ts-expect-error — exercising throw path with raw schema
+        {
+          shape: { method: { value: "ui/notifications/tool-input" } },
+        },
+        () => {},
+      );
+    }).toThrow(/already registered/);
+  });
+});
diff --git a/src/app-bridge.ts b/src/app-bridge.ts
index d409fc068..a53af153c 100644
--- a/src/app-bridge.ts
+++ b/src/app-bridge.ts
@@ -19,6 +19,9 @@ import {
   ListResourceTemplatesRequestSchema,
   ListResourceTemplatesResult,
   ListResourceTemplatesResultSchema,
+  ListToolsRequest,
+  ListToolsRequestSchema,
+  ListToolsResultSchema,
   LoggingMessageNotification,
   LoggingMessageNotificationSchema,
   PingRequest,
@@ -36,10 +39,10 @@ import {
   ToolListChangedNotificationSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import {
-  Protocol,
   ProtocolOptions,
   RequestOptions,
 } from "@modelcontextprotocol/sdk/shared/protocol.js";
+import { ProtocolWithEvents } from "./events";
 
 import {
   type AppNotification,
@@ -223,6 +226,23 @@ type RequestHandlerExtra = Parameters<
   Parameters<AppBridge["setRequestHandler"]>[1]
 >[1];
 
+/**
+ * Event name → listener `params` type for {@link AppBridge.addEventListener `AppBridge.addEventListener`}.
+ *
+ * Each key is a notification event. Calling `addEventListener` with a key
+ * appends a listener; all listeners fire in insertion order when the
+ * corresponding notification arrives from the view.
+ *
+ * @see {@link AppBridge.addEventListener `AppBridge.addEventListener`}
+ */
+export type AppBridgeEventMap = {
+  sizechange: McpUiSizeChangedNotification["params"];
+  sandboxready: McpUiSandboxProxyReadyNotification["params"];
+  initialized: McpUiInitializedNotification["params"];
+  requestteardown: McpUiRequestTeardownNotification["params"];
+  loggingmessage: LoggingMessageNotification["params"];
+};
+
 /**
  * Host-side bridge for communicating with a single View ({@link app!App `App`}).
  *
@@ -280,15 +300,24 @@ type RequestHandlerExtra = Parameters<
  * await bridge.connect(transport);
  * ```
  */
-export class AppBridge extends Protocol<
+export class AppBridge extends ProtocolWithEvents<
   AppRequest,
   AppNotification,
-  AppResult
+  AppResult,
+  AppBridgeEventMap
 > {
   private _appCapabilities?: McpUiAppCapabilities;
   private _hostContext: McpUiHostContext = {};
   private _appInfo?: Implementation;
 
+  protected readonly eventSchemas = {
+    sizechange: McpUiSizeChangedNotificationSchema,
+    sandboxready: McpUiSandboxProxyReadyNotificationSchema,
+    initialized: McpUiInitializedNotificationSchema,
+    requestteardown: McpUiRequestTeardownNotificationSchema,
+    loggingmessage: LoggingMessageNotificationSchema,
+  };
+
   /**
    * Create a new AppBridge instance.
    *
@@ -343,10 +372,13 @@ export class AppBridge extends Protocol<
 
     // Default handler for requestDisplayMode - returns current mode from host context.
     // Hosts can override this by setting bridge.onrequestdisplaymode = ...
-    this.setRequestHandler(McpUiRequestDisplayModeRequestSchema, (request) => {
-      const currentMode = this._hostContext.displayMode ?? "inline";
-      return { mode: currentMode };
-    });
+    this.replaceRequestHandler(
+      McpUiRequestDisplayModeRequestSchema,
+      (request) => {
+        const currentMode = this._hostContext.displayMode ?? "inline";
+        return { mode: currentMode };
+      },
+    );
   }
 
   /**
@@ -443,12 +475,17 @@ export class AppBridge extends Protocol<
    * @see {@link McpUiSizeChangedNotification `McpUiSizeChangedNotification`} for the notification type
    * @see {@link app!App.sendSizeChanged `App.sendSizeChanged`} - the View method that sends these notifications
    */
+  get onsizechange():
+    | ((params: McpUiSizeChangedNotification["params"]) => void)
+    | undefined {
+    return this.getEventHandler("sizechange");
+  }
   set onsizechange(
-    callback: (params: McpUiSizeChangedNotification["params"]) => void,
+    callback:
+      | ((params: McpUiSizeChangedNotification["params"]) => void)
+      | undefined,
   ) {
-    this.setNotificationHandler(McpUiSizeChangedNotificationSchema, (n) =>
-      callback(n.params),
-    );
+    this.setEventHandler("sizechange", callback);
   }
 
   /**
@@ -481,12 +518,17 @@ export class AppBridge extends Protocol<
    * @see {@link McpUiSandboxProxyReadyNotification `McpUiSandboxProxyReadyNotification`} for the notification type
    * @see {@link sendSandboxResourceReady `sendSandboxResourceReady`} for sending content to the sandbox
    */
+  get onsandboxready():
+    | ((params: McpUiSandboxProxyReadyNotification["params"]) => void)
+    | undefined {
+    return this.getEventHandler("sandboxready");
+  }
   set onsandboxready(
-    callback: (params: McpUiSandboxProxyReadyNotification["params"]) => void,
+    callback:
+      | ((params: McpUiSandboxProxyReadyNotification["params"]) => void)
+      | undefined,
   ) {
-    this.setNotificationHandler(McpUiSandboxProxyReadyNotificationSchema, (n) =>
-      callback(n.params),
-    );
+    this.setEventHandler("sandboxready", callback);
   }
 
   /**
@@ -506,12 +548,17 @@ export class AppBridge extends Protocol<
    * @see {@link McpUiInitializedNotification `McpUiInitializedNotification`} for the notification type
    * @see {@link sendToolInput `sendToolInput`} for sending tool arguments to the View
    */
+  get oninitialized():
+    | ((params: McpUiInitializedNotification["params"]) => void)
+    | undefined {
+    return this.getEventHandler("initialized");
+  }
   set oninitialized(
-    callback: (params: McpUiInitializedNotification["params"]) => void,
+    callback:
+      | ((params: McpUiInitializedNotification["params"]) => void)
+      | undefined,
   ) {
-    this.setNotificationHandler(McpUiInitializedNotificationSchema, (n) =>
-      callback(n.params),
-    );
+    this.setEventHandler("initialized", callback);
   }
 
   /**
@@ -548,18 +595,31 @@ export class AppBridge extends Protocol<
    * @see {@link McpUiMessageRequest `McpUiMessageRequest`} for the request type
    * @see {@link McpUiMessageResult `McpUiMessageResult`} for the result type
    */
+  private _onmessage?: (
+    params: McpUiMessageRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<McpUiMessageResult>;
+
+  get onmessage() {
+    return this._onmessage;
+  }
   set onmessage(
-    callback: (
-      params: McpUiMessageRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<McpUiMessageResult>,
+    callback:
+      | ((
+          params: McpUiMessageRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<McpUiMessageResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(
-      McpUiMessageRequestSchema,
-      async (request, extra) => {
-        return callback(request.params, extra);
-      },
-    );
+    this._onmessage = callback;
+    if (callback) {
+      this.replaceRequestHandler(
+        McpUiMessageRequestSchema,
+        async (request, extra) => {
+          return callback(request.params, extra);
+        },
+      );
+    }
   }
 
   /**
@@ -605,18 +665,31 @@ export class AppBridge extends Protocol<
    * @see {@link McpUiOpenLinkRequest `McpUiOpenLinkRequest`} for the request type
    * @see {@link McpUiOpenLinkResult `McpUiOpenLinkResult`} for the result type
    */
+  private _onopenlink?: (
+    params: McpUiOpenLinkRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<McpUiOpenLinkResult>;
+
+  get onopenlink() {
+    return this._onopenlink;
+  }
   set onopenlink(
-    callback: (
-      params: McpUiOpenLinkRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<McpUiOpenLinkResult>,
+    callback:
+      | ((
+          params: McpUiOpenLinkRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<McpUiOpenLinkResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(
-      McpUiOpenLinkRequestSchema,
-      async (request, extra) => {
-        return callback(request.params, extra);
-      },
-    );
+    this._onopenlink = callback;
+    if (callback) {
+      this.replaceRequestHandler(
+        McpUiOpenLinkRequestSchema,
+        async (request, extra) => {
+          return callback(request.params, extra);
+        },
+      );
+    }
   }
 
   /**
@@ -661,18 +734,31 @@ export class AppBridge extends Protocol<
    * @see {@link McpUiDownloadFileRequest `McpUiDownloadFileRequest`} for the request type
    * @see {@link McpUiDownloadFileResult `McpUiDownloadFileResult`} for the result type
    */
+  private _ondownloadfile?: (
+    params: McpUiDownloadFileRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<McpUiDownloadFileResult>;
+
+  get ondownloadfile() {
+    return this._ondownloadfile;
+  }
   set ondownloadfile(
-    callback: (
-      params: McpUiDownloadFileRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<McpUiDownloadFileResult>,
+    callback:
+      | ((
+          params: McpUiDownloadFileRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<McpUiDownloadFileResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(
-      McpUiDownloadFileRequestSchema,
-      async (request, extra) => {
-        return callback(request.params, extra);
-      },
-    );
+    this._ondownloadfile = callback;
+    if (callback) {
+      this.replaceRequestHandler(
+        McpUiDownloadFileRequestSchema,
+        async (request, extra) => {
+          return callback(request.params, extra);
+        },
+      );
+    }
   }
 
   /**
@@ -701,13 +787,17 @@ export class AppBridge extends Protocol<
    * @see {@link McpUiRequestTeardownNotification `McpUiRequestTeardownNotification`} for the notification type
    * @see {@link teardownResource `teardownResource`} for initiating teardown
    */
+  get onrequestteardown():
+    | ((params: McpUiRequestTeardownNotification["params"]) => void)
+    | undefined {
+    return this.getEventHandler("requestteardown");
+  }
   set onrequestteardown(
-    callback: (params: McpUiRequestTeardownNotification["params"]) => void,
+    callback:
+      | ((params: McpUiRequestTeardownNotification["params"]) => void)
+      | undefined,
   ) {
-    this.setNotificationHandler(
-      McpUiRequestTeardownNotificationSchema,
-      (request) => callback(request.params),
-    );
+    this.setEventHandler("requestteardown", callback);
   }
 
   /**
@@ -742,18 +832,31 @@ export class AppBridge extends Protocol<
    * @see {@link McpUiRequestDisplayModeRequest `McpUiRequestDisplayModeRequest`} for the request type
    * @see {@link McpUiRequestDisplayModeResult `McpUiRequestDisplayModeResult`} for the result type
    */
+  private _onrequestdisplaymode?: (
+    params: McpUiRequestDisplayModeRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<McpUiRequestDisplayModeResult>;
+
+  get onrequestdisplaymode() {
+    return this._onrequestdisplaymode;
+  }
   set onrequestdisplaymode(
-    callback: (
-      params: McpUiRequestDisplayModeRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<McpUiRequestDisplayModeResult>,
+    callback:
+      | ((
+          params: McpUiRequestDisplayModeRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<McpUiRequestDisplayModeResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(
-      McpUiRequestDisplayModeRequestSchema,
-      async (request, extra) => {
-        return callback(request.params, extra);
-      },
-    );
+    this._onrequestdisplaymode = callback;
+    if (callback) {
+      this.replaceRequestHandler(
+        McpUiRequestDisplayModeRequestSchema,
+        async (request, extra) => {
+          return callback(request.params, extra);
+        },
+      );
+    }
   }
 
   /**
@@ -782,15 +885,17 @@ export class AppBridge extends Protocol<
    * };
    * ```
    */
+  get onloggingmessage():
+    | ((params: LoggingMessageNotification["params"]) => void)
+    | undefined {
+    return this.getEventHandler("loggingmessage");
+  }
   set onloggingmessage(
-    callback: (params: LoggingMessageNotification["params"]) => void,
+    callback:
+      | ((params: LoggingMessageNotification["params"]) => void)
+      | undefined,
   ) {
-    this.setNotificationHandler(
-      LoggingMessageNotificationSchema,
-      async (notification) => {
-        callback(notification.params);
-      },
-    );
+    this.setEventHandler("loggingmessage", callback);
   }
 
   /**
@@ -819,18 +924,31 @@ export class AppBridge extends Protocol<
    *
    * @see {@link McpUiUpdateModelContextRequest `McpUiUpdateModelContextRequest`} for the request type
    */
+  private _onupdatemodelcontext?: (
+    params: McpUiUpdateModelContextRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<EmptyResult>;
+
+  get onupdatemodelcontext() {
+    return this._onupdatemodelcontext;
+  }
   set onupdatemodelcontext(
-    callback: (
-      params: McpUiUpdateModelContextRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<EmptyResult>,
+    callback:
+      | ((
+          params: McpUiUpdateModelContextRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<EmptyResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(
-      McpUiUpdateModelContextRequestSchema,
-      async (request, extra) => {
-        return callback(request.params, extra);
-      },
-    );
+    this._onupdatemodelcontext = callback;
+    if (callback) {
+      this.replaceRequestHandler(
+        McpUiUpdateModelContextRequestSchema,
+        async (request, extra) => {
+          return callback(request.params, extra);
+        },
+      );
+    }
   }
 
   /**
@@ -859,15 +977,31 @@ export class AppBridge extends Protocol<
    * @see `CallToolRequest` from @modelcontextprotocol/sdk for the request type
    * @see `CallToolResult` from @modelcontextprotocol/sdk for the result type
    */
+  private _oncalltool?: (
+    params: CallToolRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<CallToolResult>;
+
+  get oncalltool() {
+    return this._oncalltool;
+  }
   set oncalltool(
-    callback: (
-      params: CallToolRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<CallToolResult>,
+    callback:
+      | ((
+          params: CallToolRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<CallToolResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(CallToolRequestSchema, async (request, extra) => {
-      return callback(request.params, extra);
-    });
+    this._oncalltool = callback;
+    if (callback) {
+      this.replaceRequestHandler(
+        CallToolRequestSchema,
+        async (request, extra) => {
+          return callback(request.params, extra);
+        },
+      );
+    }
   }
 
   /**
@@ -922,18 +1056,31 @@ export class AppBridge extends Protocol<
    * @see `ListResourcesRequest` from @modelcontextprotocol/sdk for the request type
    * @see `ListResourcesResult` from @modelcontextprotocol/sdk for the result type
    */
+  private _onlistresources?: (
+    params: ListResourcesRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<ListResourcesResult>;
+
+  get onlistresources() {
+    return this._onlistresources;
+  }
   set onlistresources(
-    callback: (
-      params: ListResourcesRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<ListResourcesResult>,
+    callback:
+      | ((
+          params: ListResourcesRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<ListResourcesResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(
-      ListResourcesRequestSchema,
-      async (request, extra) => {
-        return callback(request.params, extra);
-      },
-    );
+    this._onlistresources = callback;
+    if (callback) {
+      this.replaceRequestHandler(
+        ListResourcesRequestSchema,
+        async (request, extra) => {
+          return callback(request.params, extra);
+        },
+      );
+    }
   }
 
   /**
@@ -962,18 +1109,31 @@ export class AppBridge extends Protocol<
    * @see `ListResourceTemplatesRequest` from @modelcontextprotocol/sdk for the request type
    * @see `ListResourceTemplatesResult` from @modelcontextprotocol/sdk for the result type
    */
+  private _onlistresourcetemplates?: (
+    params: ListResourceTemplatesRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<ListResourceTemplatesResult>;
+
+  get onlistresourcetemplates() {
+    return this._onlistresourcetemplates;
+  }
   set onlistresourcetemplates(
-    callback: (
-      params: ListResourceTemplatesRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<ListResourceTemplatesResult>,
+    callback:
+      | ((
+          params: ListResourceTemplatesRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<ListResourceTemplatesResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(
-      ListResourceTemplatesRequestSchema,
-      async (request, extra) => {
-        return callback(request.params, extra);
-      },
-    );
+    this._onlistresourcetemplates = callback;
+    if (callback) {
+      this.replaceRequestHandler(
+        ListResourceTemplatesRequestSchema,
+        async (request, extra) => {
+          return callback(request.params, extra);
+        },
+      );
+    }
   }
 
   /**
@@ -1002,18 +1162,31 @@ export class AppBridge extends Protocol<
    * @see `ReadResourceRequest` from @modelcontextprotocol/sdk for the request type
    * @see `ReadResourceResult` from @modelcontextprotocol/sdk for the result type
    */
+  private _onreadresource?: (
+    params: ReadResourceRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<ReadResourceResult>;
+
+  get onreadresource() {
+    return this._onreadresource;
+  }
   set onreadresource(
-    callback: (
-      params: ReadResourceRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<ReadResourceResult>,
+    callback:
+      | ((
+          params: ReadResourceRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<ReadResourceResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(
-      ReadResourceRequestSchema,
-      async (request, extra) => {
-        return callback(request.params, extra);
-      },
-    );
+    this._onreadresource = callback;
+    if (callback) {
+      this.replaceRequestHandler(
+        ReadResourceRequestSchema,
+        async (request, extra) => {
+          return callback(request.params, extra);
+        },
+      );
+    }
   }
 
   /**
@@ -1070,15 +1243,31 @@ export class AppBridge extends Protocol<
    * @see `ListPromptsRequest` from @modelcontextprotocol/sdk for the request type
    * @see `ListPromptsResult` from @modelcontextprotocol/sdk for the result type
    */
+  private _onlistprompts?: (
+    params: ListPromptsRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<ListPromptsResult>;
+
+  get onlistprompts() {
+    return this._onlistprompts;
+  }
   set onlistprompts(
-    callback: (
-      params: ListPromptsRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<ListPromptsResult>,
+    callback:
+      | ((
+          params: ListPromptsRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<ListPromptsResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(ListPromptsRequestSchema, async (request, extra) => {
-      return callback(request.params, extra);
-    });
+    this._onlistprompts = callback;
+    if (callback) {
+      this.replaceRequestHandler(
+        ListPromptsRequestSchema,
+        async (request, extra) => {
+          return callback(request.params, extra);
+        },
+      );
+    }
   }
 
   /**
@@ -1450,6 +1639,22 @@ export class AppBridge extends Protocol<
   /** @deprecated Use {@link teardownResource `teardownResource`} instead */
   sendResourceTeardown: AppBridge["teardownResource"] = this.teardownResource;
 
+  callTool(params: CallToolRequest["params"], options?: RequestOptions) {
+    return this.request(
+      { method: "tools/call", params },
+      CallToolResultSchema,
+      options,
+    );
+  }
+
+  listTools(params: ListToolsRequest["params"], options?: RequestOptions) {
+    return this.request(
+      { method: "tools/list", params },
+      ListToolsResultSchema,
+      options,
+    );
+  }
+
   /**
    * Connect to the view via transport and optionally set up message forwarding.
    *
diff --git a/src/app.examples.ts b/src/app.examples.ts
index 1d12c5b22..e84a272f3 100644
--- a/src/app.examples.ts
+++ b/src/app.examples.ts
@@ -303,7 +303,23 @@ function App_onlisttools_returnTools(app: App) {
   //#region App_onlisttools_returnTools
   app.onlisttools = async (params, extra) => {
     return {
-      tools: ["greet", "calculate", "format"],
+      tools: [
+        {
+          name: "greet",
+          description: "Greet the user",
+          inputSchema: { type: "object" as const },
+        },
+        {
+          name: "calculate",
+          description: "Perform a calculation",
+          inputSchema: { type: "object" as const },
+        },
+        {
+          name: "format",
+          description: "Format text",
+          inputSchema: { type: "object" as const },
+        },
+      ],
     };
   };
   //#endregion App_onlisttools_returnTools
diff --git a/src/app.ts b/src/app.ts
index 5d4879e8d..da4052562 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,8 +1,9 @@
 import {
   type RequestOptions,
-  Protocol,
+  mergeCapabilities,
   ProtocolOptions,
 } from "@modelcontextprotocol/sdk/shared/protocol.js";
+import { ProtocolWithEvents } from "./events";
 
 import {
   CallToolRequest,
@@ -16,11 +17,15 @@ import {
   ListResourcesResultSchema,
   ListToolsRequest,
   ListToolsRequestSchema,
+  ListToolsResult,
   LoggingMessageNotification,
   PingRequestSchema,
   ReadResourceRequest,
   ReadResourceResult,
   ReadResourceResultSchema,
+  Tool,
+  ToolAnnotations,
+  ToolListChangedNotification,
 } from "@modelcontextprotocol/sdk/types.js";
 import { AppNotification, AppRequest, AppResult } from "./types";
 import { PostMessageTransport } from "./message-transport";
@@ -58,6 +63,12 @@ import {
   McpUiRequestDisplayModeResultSchema,
 } from "./types";
 import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
+import { safeParseAsync } from "zod/v4";
+import {
+  RegisteredTool,
+  ToolCallback,
+} from "@modelcontextprotocol/sdk/server/mcp.js";
+import { z, ZodSchema } from "zod/v4";
 
 export { PostMessageTransport } from "./message-transport";
 export * from "./types";
@@ -159,6 +170,23 @@ type RequestHandlerExtra = Parameters<
   Parameters<App["setRequestHandler"]>[1]
 >[1];
 
+/**
+ * Event name → listener `params` type for {@link App.addEventListener `App.addEventListener`}.
+ *
+ * Each key is a notification event. Calling `addEventListener` with a key
+ * appends a listener; all listeners fire in insertion order when the
+ * corresponding `ui/notifications/*` message arrives.
+ *
+ * @see {@link App.addEventListener `App.addEventListener`}
+ */
+export type AppEventMap = {
+  toolinput: McpUiToolInputNotification["params"];
+  toolinputpartial: McpUiToolInputPartialNotification["params"];
+  toolresult: McpUiToolResultNotification["params"];
+  toolcancelled: McpUiToolCancelledNotification["params"];
+  hostcontextchanged: McpUiHostContextChangedNotification["params"];
+};
+
 /**
  * Main class for MCP Apps to communicate with their host.
  *
@@ -180,26 +208,29 @@ type RequestHandlerExtra = Parameters<
  * 3. **Interactive**: Send requests, receive notifications, call tools
  * 4. **Teardown**: Host sends teardown request before unmounting
  *
- * ## Inherited Methods
+ * ## Handler Registration
+ *
+ * As a subclass of `Protocol`, `App` inherits:
+ * - `setRequestHandler()` / `setNotificationHandler()` — register a single
+ *   handler per method. Calling either twice for the same method throws.
  *
- * As a subclass of `Protocol`, `App` inherits key methods for handling communication:
- * - `setRequestHandler()` - Register handlers for requests from host
- * - `setNotificationHandler()` - Register handlers for notifications from host
+ * For notifications, prefer {@link addEventListener `addEventListener`} /
+ * {@link removeEventListener `removeEventListener`} — these support multiple
+ * listeners per event.
  *
  * @see `Protocol` from @modelcontextprotocol/sdk for all inherited methods
  *
  * ## Notification Setters
  *
- * For common notifications, the `App` class provides convenient setter properties
- * that simplify handler registration:
+ * For common notifications, the `App` class also provides setter properties:
  * - `ontoolinput` - Complete tool arguments from host
  * - `ontoolinputpartial` - Streaming partial tool arguments
  * - `ontoolresult` - Tool execution results
  * - `ontoolcancelled` - Tool execution was cancelled by user or host
  * - `onhostcontextchanged` - Host context changes (theme, locale, etc.)
  *
- * These setters are convenience wrappers around `setNotificationHandler()`.
- * Both patterns work; use whichever fits your coding style better.
+ * These follow DOM conventions: assigning replaces the previous handler
+ * (like `el.onclick`), and coexists with {@link addEventListener `addEventListener`}.
  *
  * @example Basic usage with PostMessageTransport
  * ```ts source="./app.examples.ts#App_basicUsage"
@@ -216,10 +247,33 @@ type RequestHandlerExtra = Parameters<
  * await app.connect();
  * ```
  */
-export class App extends Protocol<AppRequest, AppNotification, AppResult> {
+export class App extends ProtocolWithEvents<
+  AppRequest,
+  AppNotification,
+  AppResult,
+  AppEventMap
+> {
   private _hostCapabilities?: McpUiHostCapabilities;
   private _hostInfo?: Implementation;
   private _hostContext?: McpUiHostContext;
+  private _registeredTools: { [name: string]: RegisteredTool } = {};
+
+  protected readonly eventSchemas = {
+    toolinput: McpUiToolInputNotificationSchema,
+    toolinputpartial: McpUiToolInputPartialNotificationSchema,
+    toolresult: McpUiToolResultNotificationSchema,
+    toolcancelled: McpUiToolCancelledNotificationSchema,
+    hostcontextchanged: McpUiHostContextChangedNotificationSchema,
+  };
+
+  protected override onEventDispatch<K extends keyof AppEventMap>(
+    event: K,
+    params: AppEventMap[K],
+  ): void {
+    if (event === "hostcontextchanged") {
+      this._hostContext = { ...this._hostContext, ...params };
+    }
+  }
 
   /**
    * Create a new MCP App instance.
@@ -249,9 +303,166 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
       return {};
     });
 
-    // Set up default handler to update _hostContext when notifications arrive.
-    // Users can override this by setting onhostcontextchanged.
-    this.onhostcontextchanged = () => {};
+    // Eagerly register the hostcontextchanged dispatcher so that
+    // onEventDispatch merges incoming context into _hostContext even if the
+    // user never sets onhostcontextchanged or adds a listener.
+    this.setEventHandler("hostcontextchanged", undefined);
+  }
+
+  private registerCapabilities(capabilities: McpUiAppCapabilities): void {
+    if (this.transport) {
+      throw new Error(
+        "Cannot register capabilities after transport is established",
+      );
+    }
+    this._capabilities = mergeCapabilities(this._capabilities, capabilities);
+  }
+
+  registerTool<
+    OutputArgs extends ZodSchema,
+    InputArgs extends undefined | ZodSchema = undefined,
+  >(
+    name: string,
+    config: {
+      title?: string;
+      description?: string;
+      inputSchema?: InputArgs;
+      outputSchema?: OutputArgs;
+      annotations?: ToolAnnotations;
+      _meta?: Record<string, unknown>;
+    },
+    cb: ToolCallback<InputArgs>,
+  ): RegisteredTool {
+    const app = this;
+    const registeredTool: RegisteredTool = {
+      title: config.title,
+      description: config.description,
+      inputSchema: config.inputSchema,
+      outputSchema: config.outputSchema,
+      annotations: config.annotations,
+      _meta: config._meta,
+      enabled: true,
+      enable(): void {
+        this.enabled = true;
+        app.sendToolListChanged();
+      },
+      disable(): void {
+        this.enabled = false;
+        app.sendToolListChanged();
+      },
+      update(updates) {
+        Object.assign(this, updates);
+        app.sendToolListChanged();
+      },
+      remove() {
+        delete app._registeredTools[name];
+        app.sendToolListChanged();
+      },
+      handler: (async (args: any, extra: RequestHandlerExtra) => {
+        if (!registeredTool.enabled) {
+          throw new Error(`Tool ${name} is disabled`);
+        }
+        if (config.inputSchema) {
+          const parseResult = await safeParseAsync(
+            config.inputSchema as any,
+            args,
+          );
+          if (!parseResult.success) {
+            throw new Error(
+              `Invalid input for tool ${name}: ${parseResult.error}`,
+            );
+          }
+          args = parseResult.data;
+        }
+        const result = await cb(args, extra as any);
+        if (config.outputSchema) {
+          const parseResult = await safeParseAsync(
+            config.outputSchema as any,
+            result.structuredContent,
+          );
+          if (!parseResult.success) {
+            throw new Error(
+              `Invalid output for tool ${name}: ${parseResult.error}`,
+            );
+          }
+        }
+        return result;
+      }) as any,
+    };
+
+    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._capabilities.tools && !this.transport) {
+      this.registerCapabilities({ tools: { listChanged: true } });
+    }
+
+    this.ensureToolHandlersInitialized();
+    return registeredTool;
+  }
+
+  private _toolHandlersInitialized = false;
+  private ensureToolHandlersInitialized(): void {
+    if (this._toolHandlersInitialized) {
+      return;
+    }
+    this._toolHandlersInitialized = true;
+
+    // Register via replaceRequestHandler so users can still override with
+    // their own oncalltool/onlisttools after calling registerTool.
+    this.replaceRequestHandler(
+      CallToolRequestSchema,
+      async (request, extra) => {
+        const tool = this._registeredTools[request.params.name];
+        if (!tool) {
+          throw new Error(`Tool ${request.params.name} not found`);
+        }
+        return (tool.handler as any)(request.params.arguments as any, extra);
+      },
+    );
+    this.replaceRequestHandler(ListToolsRequestSchema, async () => {
+      const tools: Tool[] = Object.entries(this._registeredTools)
+        .filter(([_, tool]) => tool.enabled)
+        .map(([name, tool]) => {
+          const result: Tool = {
+            name,
+            title: tool.title,
+            description: tool.description,
+            inputSchema: (tool.inputSchema
+              ? z.toJSONSchema(tool.inputSchema as ZodSchema)
+              : {
+                  type: "object" as const,
+                  properties: {},
+                }) as Tool["inputSchema"],
+          };
+          if (tool.outputSchema) {
+            result.outputSchema = z.toJSONSchema(
+              tool.outputSchema as ZodSchema,
+            ) as Tool["outputSchema"];
+          }
+          if (tool.annotations) {
+            result.annotations = tool.annotations;
+          }
+          if (tool._meta) {
+            result._meta = tool._meta;
+          }
+          return result;
+        });
+      return { tools };
+    });
+  }
+
+  async sendToolListChanged(
+    params: ToolListChangedNotification["params"] = {},
+  ): Promise<void> {
+    await this.notification(<ToolListChangedNotification>{
+      method: "notifications/tools/list_changed",
+      params,
+    });
   }
 
   /**
@@ -339,12 +550,13 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * sends a tool's complete arguments. This is sent after a tool call begins
    * and before the tool result is available.
    *
-   * This setter is a convenience wrapper around `setNotificationHandler()` that
-   * automatically handles the notification schema and extracts the params for you.
+   * This setter has DOM-style replace semantics (like `el.onclick`).
+   * Assigning replaces the previous handler; assigning `undefined` clears
+   * it. {@link addEventListener `addEventListener`} listeners are unaffected.
    *
    * Register handlers before calling {@link connect `connect`} to avoid missing notifications.
    *
-   * @param callback - Function called with the tool input params ({@link McpUiToolInputNotification.params `McpUiToolInputNotification.params`})
+   * @param callback - Function called with the tool input params ({@link McpUiToolInputNotification.params `McpUiToolInputNotification.params`}), or `undefined` to clear
    *
    * @example
    * ```ts source="./app.examples.ts#App_ontoolinput_setter"
@@ -356,15 +568,20 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * await app.connect();
    * ```
    *
-   * @see {@link setNotificationHandler `setNotificationHandler`} for the underlying method
+   * @see {@link addEventListener `addEventListener`} for multi-listener support
    * @see {@link McpUiToolInputNotification `McpUiToolInputNotification`} for the notification structure
    */
+  get ontoolinput():
+    | ((params: McpUiToolInputNotification["params"]) => void)
+    | undefined {
+    return this.getEventHandler("toolinput");
+  }
   set ontoolinput(
-    callback: (params: McpUiToolInputNotification["params"]) => void,
+    callback:
+      | ((params: McpUiToolInputNotification["params"]) => void)
+      | undefined,
   ) {
-    this.setNotificationHandler(McpUiToolInputNotificationSchema, (n) =>
-      callback(n.params),
-    );
+    this.setEventHandler("toolinput", callback);
   }
 
   /**
@@ -379,12 +596,13 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * (e.g., the last item in an array may be truncated). Use partial data only
    * for preview UI, not for critical operations.
    *
-   * This setter is a convenience wrapper around `setNotificationHandler()` that
-   * automatically handles the notification schema and extracts the params for you.
+   * This setter has DOM-style replace semantics (like `el.onclick`).
+   * Assigning replaces the previous handler; assigning `undefined` clears
+   * it. {@link addEventListener `addEventListener`} listeners are unaffected.
    *
    * Register handlers before calling {@link connect `connect`} to avoid missing notifications.
    *
-   * @param callback - Function called with each partial tool input update ({@link McpUiToolInputPartialNotification.params `McpUiToolInputPartialNotification.params`})
+   * @param callback - Function called with each partial tool input update ({@link McpUiToolInputPartialNotification.params `McpUiToolInputPartialNotification.params`}), or `undefined` to clear
    *
    * @example Progressive rendering of tool arguments
    * ```ts source="./app.examples.ts#App_ontoolinputpartial_progressiveRendering"
@@ -404,16 +622,21 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * };
    * ```
    *
-   * @see {@link setNotificationHandler `setNotificationHandler`} for the underlying method
+   * @see {@link addEventListener `addEventListener`} for multi-listener support
    * @see {@link McpUiToolInputPartialNotification `McpUiToolInputPartialNotification`} for the notification structure
    * @see {@link ontoolinput `ontoolinput`} for the complete tool input handler
    */
+  get ontoolinputpartial():
+    | ((params: McpUiToolInputPartialNotification["params"]) => void)
+    | undefined {
+    return this.getEventHandler("toolinputpartial");
+  }
   set ontoolinputpartial(
-    callback: (params: McpUiToolInputPartialNotification["params"]) => void,
+    callback:
+      | ((params: McpUiToolInputPartialNotification["params"]) => void)
+      | undefined,
   ) {
-    this.setNotificationHandler(McpUiToolInputPartialNotificationSchema, (n) =>
-      callback(n.params),
-    );
+    this.setEventHandler("toolinputpartial", callback);
   }
 
   /**
@@ -423,12 +646,13 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * sends the result of a tool execution. This is sent after the tool completes
    * on the MCP server, allowing your app to display the results or update its state.
    *
-   * This setter is a convenience wrapper around `setNotificationHandler()` that
-   * automatically handles the notification schema and extracts the params for you.
+   * This setter has DOM-style replace semantics (like `el.onclick`).
+   * Assigning replaces the previous handler; assigning `undefined` clears
+   * it. {@link addEventListener `addEventListener`} listeners are unaffected.
    *
    * Register handlers before calling {@link connect `connect`} to avoid missing notifications.
    *
-   * @param callback - Function called with the tool result ({@link McpUiToolResultNotification.params `McpUiToolResultNotification.params`})
+   * @param callback - Function called with the tool result ({@link McpUiToolResultNotification.params `McpUiToolResultNotification.params`}), or `undefined` to clear
    *
    * @example Display tool execution results
    * ```ts source="./app.examples.ts#App_ontoolresult_displayResults"
@@ -441,16 +665,21 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * };
    * ```
    *
-   * @see {@link setNotificationHandler `setNotificationHandler`} for the underlying method
+   * @see {@link addEventListener `addEventListener`} for multi-listener support
    * @see {@link McpUiToolResultNotification `McpUiToolResultNotification`} for the notification structure
    * @see {@link ontoolinput `ontoolinput`} for the initial tool input handler
    */
+  get ontoolresult():
+    | ((params: McpUiToolResultNotification["params"]) => void)
+    | undefined {
+    return this.getEventHandler("toolresult");
+  }
   set ontoolresult(
-    callback: (params: McpUiToolResultNotification["params"]) => void,
+    callback:
+      | ((params: McpUiToolResultNotification["params"]) => void)
+      | undefined,
   ) {
-    this.setNotificationHandler(McpUiToolResultNotificationSchema, (n) =>
-      callback(n.params),
-    );
+    this.setEventHandler("toolresult", callback);
   }
 
   /**
@@ -461,12 +690,13 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * including user action, sampling error, classifier intervention, or other
    * interruptions. Apps should update their state and display appropriate feedback.
    *
-   * This setter is a convenience wrapper around `setNotificationHandler()` that
-   * automatically handles the notification schema and extracts the params for you.
+   * This setter has DOM-style replace semantics (like `el.onclick`).
+   * Assigning replaces the previous handler; assigning `undefined` clears
+   * it. {@link addEventListener `addEventListener`} listeners are unaffected.
    *
    * Register handlers before calling {@link connect `connect`} to avoid missing notifications.
    *
-   * @param callback - Function called when tool execution is cancelled. Receives optional cancellation reason — see {@link McpUiToolCancelledNotification.params `McpUiToolCancelledNotification.params`}.
+   * @param callback - Function called when tool execution is cancelled. Receives optional cancellation reason — see {@link McpUiToolCancelledNotification.params `McpUiToolCancelledNotification.params`}. Pass `undefined` to clear.
    *
    * @example Handle tool cancellation
    * ```ts source="./app.examples.ts#App_ontoolcancelled_handleCancellation"
@@ -476,16 +706,21 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * };
    * ```
    *
-   * @see {@link setNotificationHandler `setNotificationHandler`} for the underlying method
+   * @see {@link addEventListener `addEventListener`} for multi-listener support
    * @see {@link McpUiToolCancelledNotification `McpUiToolCancelledNotification`} for the notification structure
    * @see {@link ontoolresult `ontoolresult`} for successful tool completion
    */
+  get ontoolcancelled():
+    | ((params: McpUiToolCancelledNotification["params"]) => void)
+    | undefined {
+    return this.getEventHandler("toolcancelled");
+  }
   set ontoolcancelled(
-    callback: (params: McpUiToolCancelledNotification["params"]) => void,
+    callback:
+      | ((params: McpUiToolCancelledNotification["params"]) => void)
+      | undefined,
   ) {
-    this.setNotificationHandler(McpUiToolCancelledNotificationSchema, (n) =>
-      callback(n.params),
-    );
+    this.setEventHandler("toolcancelled", callback);
   }
 
   /**
@@ -496,8 +731,9 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * other environmental updates. Apps should respond by updating their UI
    * accordingly.
    *
-   * This setter is a convenience wrapper around `setNotificationHandler()` that
-   * automatically handles the notification schema and extracts the params for you.
+   * This setter has DOM-style replace semantics (like `el.onclick`).
+   * Assigning replaces the previous handler; assigning `undefined` clears
+   * it. {@link addEventListener `addEventListener`} listeners are unaffected.
    *
    * Notification params are automatically merged into the internal host context
    * before the callback is invoked. This means {@link getHostContext `getHostContext`} will
@@ -505,7 +741,7 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    *
    * Register handlers before calling {@link connect `connect`} to avoid missing notifications.
    *
-   * @param callback - Function called with the updated host context
+   * @param callback - Function called with the updated host context, or `undefined` to clear
    *
    * @example Respond to theme changes
    * ```ts source="./app.examples.ts#App_onhostcontextchanged_respondToTheme"
@@ -518,21 +754,21 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * };
    * ```
    *
-   * @see {@link setNotificationHandler `setNotificationHandler`} for the underlying method
+   * @see {@link addEventListener `addEventListener`} for multi-listener support
    * @see {@link McpUiHostContextChangedNotification `McpUiHostContextChangedNotification`} for the notification structure
    * @see {@link McpUiHostContext `McpUiHostContext`} for the full context structure
    */
+  get onhostcontextchanged():
+    | ((params: McpUiHostContextChangedNotification["params"]) => void)
+    | undefined {
+    return this.getEventHandler("hostcontextchanged");
+  }
   set onhostcontextchanged(
-    callback: (params: McpUiHostContextChangedNotification["params"]) => void,
+    callback:
+      | ((params: McpUiHostContextChangedNotification["params"]) => void)
+      | undefined,
   ) {
-    this.setNotificationHandler(
-      McpUiHostContextChangedNotificationSchema,
-      (n) => {
-        // Merge the partial update into the stored context
-        this._hostContext = { ...this._hostContext, ...n.params };
-        callback(n.params);
-      },
-    );
+    this.setEventHandler("hostcontextchanged", callback);
   }
 
   /**
@@ -566,16 +802,29 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * @see {@link setRequestHandler `setRequestHandler`} for the underlying method
    * @see {@link McpUiResourceTeardownRequest `McpUiResourceTeardownRequest`} for the request structure
    */
+  private _onteardown?: (
+    params: McpUiResourceTeardownRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => McpUiResourceTeardownResult | Promise<McpUiResourceTeardownResult>;
+
+  get onteardown() {
+    return this._onteardown;
+  }
   set onteardown(
-    callback: (
-      params: McpUiResourceTeardownRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => McpUiResourceTeardownResult | Promise<McpUiResourceTeardownResult>,
+    callback:
+      | ((
+          params: McpUiResourceTeardownRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => McpUiResourceTeardownResult | Promise<McpUiResourceTeardownResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(
-      McpUiResourceTeardownRequestSchema,
-      (request, extra) => callback(request.params, extra),
-    );
+    this._onteardown = callback;
+    if (callback) {
+      this.replaceRequestHandler(
+        McpUiResourceTeardownRequestSchema,
+        (request, extra) => callback(request.params, extra),
+      );
+    }
   }
 
   /**
@@ -609,15 +858,28 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    *
    * @see {@link setRequestHandler `setRequestHandler`} for the underlying method
    */
+  private _oncalltool?: (
+    params: CallToolRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<CallToolResult>;
+
+  get oncalltool() {
+    return this._oncalltool;
+  }
   set oncalltool(
-    callback: (
-      params: CallToolRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<CallToolResult>,
+    callback:
+      | ((
+          params: CallToolRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<CallToolResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(CallToolRequestSchema, (request, extra) =>
-      callback(request.params, extra),
-    );
+    this._oncalltool = callback;
+    if (callback) {
+      this.replaceRequestHandler(CallToolRequestSchema, (request, extra) =>
+        callback(request.params, extra),
+      );
+    }
   }
 
   /**
@@ -642,7 +904,23 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * ```ts source="./app.examples.ts#App_onlisttools_returnTools"
    * app.onlisttools = async (params, extra) => {
    *   return {
-   *     tools: ["greet", "calculate", "format"],
+   *     tools: [
+   *       {
+   *         name: "greet",
+   *         description: "Greet the user",
+   *         inputSchema: { type: "object" as const },
+   *       },
+   *       {
+   *         name: "calculate",
+   *         description: "Perform a calculation",
+   *         inputSchema: { type: "object" as const },
+   *       },
+   *       {
+   *         name: "format",
+   *         description: "Format text",
+   *         inputSchema: { type: "object" as const },
+   *       },
+   *     ],
    *   };
    * };
    * ```
@@ -650,15 +928,28 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * @see {@link setRequestHandler `setRequestHandler`} for the underlying method
    * @see {@link oncalltool `oncalltool`} for handling tool execution
    */
+  private _onlisttools?: (
+    params: ListToolsRequest["params"],
+    extra: RequestHandlerExtra,
+  ) => Promise<ListToolsResult>;
+
+  get onlisttools() {
+    return this._onlisttools;
+  }
   set onlisttools(
-    callback: (
-      params: ListToolsRequest["params"],
-      extra: RequestHandlerExtra,
-    ) => Promise<{ tools: string[] }>,
+    callback:
+      | ((
+          params: ListToolsRequest["params"],
+          extra: RequestHandlerExtra,
+        ) => Promise<ListToolsResult>)
+      | undefined,
   ) {
-    this.setRequestHandler(ListToolsRequestSchema, (request, extra) =>
-      callback(request.params, extra),
-    );
+    this._onlisttools = callback;
+    if (callback) {
+      this.replaceRequestHandler(ListToolsRequestSchema, (request, extra) =>
+        callback(request.params, extra),
+      );
+    }
   }
 
   /**
diff --git a/src/events.ts b/src/events.ts
new file mode 100644
index 000000000..37cbe10e2
--- /dev/null
+++ b/src/events.ts
@@ -0,0 +1,255 @@
+import { Protocol } from "@modelcontextprotocol/sdk/shared/protocol.js";
+import {
+  Request,
+  Notification,
+  Result,
+} from "@modelcontextprotocol/sdk/types.js";
+import { ZodLiteral, ZodObject } from "zod/v4";
+
+type MethodSchema = ZodObject<{ method: ZodLiteral<string> }>;
+
+/**
+ * Per-event state: a singular `on*` handler (replace semantics) plus a
+ * listener array (`addEventListener` semantics), mirroring the DOM model
+ * where `el.onclick` and `el.addEventListener("click", …)` coexist.
+ */
+interface EventSlot<T = unknown> {
+  onHandler?: ((params: T) => void) | undefined;
+  listeners: ((params: T) => void)[];
+}
+
+/**
+ * Intermediate base class that adds DOM-style event support on top of the
+ * MCP SDK's `Protocol`.
+ *
+ * The base `Protocol` class stores one handler per method:
+ * `setRequestHandler()` and `setNotificationHandler()` replace any existing
+ * handler for the same method silently. This class introduces a two-channel
+ * event model inspired by the DOM:
+ *
+ * ### Singular `on*` handler (like `el.onclick`)
+ *
+ * Subclasses expose `get`/`set` pairs that delegate to
+ * {@link setEventHandler `setEventHandler`} /
+ * {@link getEventHandler `getEventHandler`}. Assigning replaces the previous
+ * handler; assigning `undefined` clears it. `addEventListener` listeners are
+ * unaffected.
+ *
+ * ### Multi-listener (`addEventListener` / `removeEventListener`)
+ *
+ * Append to a per-event listener array. Listeners fire in insertion order
+ * after the singular `on*` handler.
+ *
+ * ### Dispatch order
+ *
+ * When a notification arrives for a mapped event:
+ * 1. {@link onEventDispatch `onEventDispatch`} (subclass side-effects)
+ * 2. The singular `on*` handler (if set)
+ * 3. All `addEventListener` listeners in insertion order
+ *
+ * ### Double-set protection
+ *
+ * Direct calls to {@link setRequestHandler `setRequestHandler`} /
+ * {@link setNotificationHandler `setNotificationHandler`} throw if a handler
+ * for the same method has already been registered (through any path), so
+ * accidental overwrites surface as errors instead of silent bugs.
+ *
+ * @typeParam EventMap - Maps event names to the listener's `params` type.
+ */
+export abstract class ProtocolWithEvents<
+  SendRequestT extends Request,
+  SendNotificationT extends Notification,
+  SendResultT extends Result,
+  EventMap extends Record<string, unknown>,
+> extends Protocol<SendRequestT, SendNotificationT, SendResultT> {
+  private _registeredMethods = new Set<string>();
+  private _eventSlots = new Map<keyof EventMap, EventSlot>();
+
+  /**
+   * Event name → notification schema. Subclasses populate this so that
+   * the event system can lazily register a dispatcher with the correct
+   * schema on first use.
+   */
+  protected abstract readonly eventSchemas: {
+    [K in keyof EventMap]: MethodSchema;
+  };
+
+  /**
+   * Called once per incoming notification, before any handlers or listeners
+   * fire. Subclasses may override to perform side effects such as merging
+   * notification params into cached state.
+   */
+  protected onEventDispatch<K extends keyof EventMap>(
+    _event: K,
+    _params: EventMap[K],
+  ): void {}
+
+  // ── Event system (DOM model) ────────────────────────────────────────
+
+  /**
+   * Lazily create the event slot and register a single dispatcher with the
+   * base `Protocol`. The dispatcher fans out to the `on*` handler and all
+   * `addEventListener` listeners.
+   */
+  private _ensureEventSlot<K extends keyof EventMap>(
+    event: K,
+  ): EventSlot<EventMap[K]> {
+    let slot = this._eventSlots.get(event) as
+      | EventSlot<EventMap[K]>
+      | undefined;
+    if (!slot) {
+      const schema = this.eventSchemas[event];
+      if (!schema) {
+        throw new Error(`Unknown event: ${String(event)}`);
+      }
+      slot = { listeners: [] };
+      this._eventSlots.set(event, slot as EventSlot);
+
+      // Claim this method so direct setNotificationHandler calls throw.
+      const method = schema.shape.method.value;
+      this._registeredMethods.add(method);
+
+      const s = slot; // stable reference for the closure
+      super.setNotificationHandler(schema, (n) => {
+        const params = (n as { params: EventMap[K] }).params;
+        this.onEventDispatch(event, params);
+        // 1. Singular on* handler
+        s.onHandler?.(params);
+        // 2. addEventListener listeners — snapshot to tolerate removal during
+        //    dispatch (e.g., a listener that calls removeEventListener on itself)
+        for (const l of [...s.listeners]) l(params);
+      });
+    }
+    return slot;
+  }
+
+  /**
+   * Set or clear the singular `on*` handler for an event.
+   *
+   * Replace semantics — like the DOM's `el.onclick = fn`. Assigning
+   * `undefined` clears the handler without affecting `addEventListener`
+   * listeners.
+   */
+  protected setEventHandler<K extends keyof EventMap>(
+    event: K,
+    handler: ((params: EventMap[K]) => void) | undefined,
+  ): void {
+    this._ensureEventSlot(event).onHandler = handler;
+  }
+
+  /**
+   * Get the singular `on*` handler for an event, or `undefined` if none is
+   * set. `addEventListener` listeners are not reflected here.
+   */
+  protected getEventHandler<K extends keyof EventMap>(
+    event: K,
+  ): ((params: EventMap[K]) => void) | undefined {
+    return (this._eventSlots.get(event) as EventSlot<EventMap[K]> | undefined)
+      ?.onHandler;
+  }
+
+  /**
+   * Add a listener for a notification event.
+   *
+   * Unlike the singular `on*` handler, calling this multiple times appends
+   * listeners rather than replacing them. All registered listeners fire in
+   * insertion order after the `on*` handler when the notification arrives.
+   *
+   * Registration is lazy: the first call (for a given event, from either
+   * this method or the `on*` setter) registers a dispatcher with the base
+   * `Protocol`.
+   *
+   * @param event - Event name (a key of the `EventMap` type parameter).
+   * @param handler - Listener invoked with the notification `params`.
+   */
+  addEventListener<K extends keyof EventMap>(
+    event: K,
+    handler: (params: EventMap[K]) => void,
+  ): void {
+    this._ensureEventSlot(event).listeners.push(handler);
+  }
+
+  /**
+   * Remove a previously registered event listener. The dispatcher stays
+   * registered even if the listener array becomes empty; future
+   * notifications simply have no listeners to call.
+   */
+  removeEventListener<K extends keyof EventMap>(
+    event: K,
+    handler: (params: EventMap[K]) => void,
+  ): void {
+    const slot = this._eventSlots.get(event) as
+      | EventSlot<EventMap[K]>
+      | undefined;
+    if (!slot) return;
+    const idx = slot.listeners.indexOf(handler);
+    if (idx !== -1) slot.listeners.splice(idx, 1);
+  }
+
+  // ── Handler registration with double-set protection ─────────────────
+
+  // The two overrides below are arrow-function class fields rather than
+  // prototype methods so that Protocol's constructor — which registers its
+  // own ping/cancelled/progress handlers via `this.setRequestHandler`
+  // before our fields initialize — hits the base implementation and skips
+  // tracking. Converting these to proper methods would crash with
+  // `_registeredMethods` undefined during super().
+
+  /**
+   * Registers a request handler. Throws if a handler for the same method
+   * has already been registered — use the `on*` setter (replace semantics)
+   * or `addEventListener` (multi-listener) for notification events.
+   *
+   * @throws {Error} if a handler for this method is already registered.
+   */
+  override setRequestHandler: Protocol<
+    SendRequestT,
+    SendNotificationT,
+    SendResultT
+  >["setRequestHandler"] = (schema, handler) => {
+    this._assertMethodNotRegistered(schema, "setRequestHandler");
+    super.setRequestHandler(schema, handler);
+  };
+
+  /**
+   * Registers a notification handler. Throws if a handler for the same
+   * method has already been registered — use the `on*` setter (replace
+   * semantics) or `addEventListener` (multi-listener) for mapped events.
+   *
+   * @throws {Error} if a handler for this method is already registered.
+   */
+  override setNotificationHandler: Protocol<
+    SendRequestT,
+    SendNotificationT,
+    SendResultT
+  >["setNotificationHandler"] = (schema, handler) => {
+    this._assertMethodNotRegistered(schema, "setNotificationHandler");
+    super.setNotificationHandler(schema, handler);
+  };
+
+  /**
+   * Replace a request handler, bypassing double-set protection. Used by
+   * `on*` request-handler setters that need replace semantics.
+   */
+  protected replaceRequestHandler: Protocol<
+    SendRequestT,
+    SendNotificationT,
+    SendResultT
+  >["setRequestHandler"] = (schema, handler) => {
+    const method = (schema as MethodSchema).shape.method.value;
+    this._registeredMethods.add(method);
+    super.setRequestHandler(schema, handler);
+  };
+
+  private _assertMethodNotRegistered(schema: unknown, via: string): void {
+    const method = (schema as MethodSchema).shape.method.value;
+    if (this._registeredMethods.has(method)) {
+      throw new Error(
+        `Handler for "${method}" already registered (via ${via}). ` +
+          `Use addEventListener() to attach multiple listeners, ` +
+          `or the on* setter for replace semantics.`,
+      );
+    }
+    this._registeredMethods.add(method);
+  }
+}
diff --git a/src/react/useHostStyles.ts b/src/react/useHostStyles.ts
index 72247f752..e380efae9 100644
--- a/src/react/useHostStyles.ts
+++ b/src/react/useHostStyles.ts
@@ -77,7 +77,7 @@ export function useHostStyleVariables(
       return;
     }
 
-    app.onhostcontextchanged = (params) => {
+    const listener = (params: McpUiHostContext) => {
       if (params.theme) {
         applyDocumentTheme(params.theme);
       }
@@ -85,6 +85,8 @@ export function useHostStyleVariables(
         applyHostStyleVariables(params.styles.variables);
       }
     };
+    app.addEventListener("hostcontextchanged", listener);
+    return () => app.removeEventListener("hostcontextchanged", listener);
   }, [app]);
 }
 
@@ -145,11 +147,13 @@ export function useHostFonts(
       return;
     }
 
-    app.onhostcontextchanged = (params) => {
+    const listener = (params: McpUiHostContext) => {
       if (params.styles?.css?.fonts) {
         applyHostFonts(params.styles.css.fonts);
       }
     };
+    app.addEventListener("hostcontextchanged", listener);
+    return () => app.removeEventListener("hostcontextchanged", listener);
   }, [app]);
 }