Merge origin/main - use new _meta.ui format

Author: ochafik

docs/quickstart.md

@@ -97,7 +97,10 @@ Create `server.ts`:
 ```typescript
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
-import { RESOURCE_URI_META_KEY } from "@modelcontextprotocol/ext-apps";
+import {
+  RESOURCE_MIME_TYPE,
+  type McpUiToolMeta,
+} from "@modelcontextprotocol/ext-apps";
 import cors from "cors";
 import express from "express";
 import fs from "node:fs/promises";
@@ -119,7 +122,7 @@ server.registerTool(
     description: "Returns the current server time.",
     inputSchema: {},
     outputSchema: { time: z.string() },
-    _meta: { [RESOURCE_URI_META_KEY]: resourceUri }, // Links tool to UI
+    _meta: { ui: { resourceUri } as McpUiToolMeta }, // Links tool to UI
   },
   async () => {
     const time = new Date().toISOString();

examples/basic-host/src/implementation.ts

@@ -1,4 +1,4 @@
-import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY, type McpUiSandboxProxyReadyNotification, AppBridge, PostMessageTransport } from "@modelcontextprotocol/ext-apps/app-bridge";
+import { RESOURCE_MIME_TYPE, getToolUiResourceUri, type McpUiSandboxProxyReadyNotification, AppBridge, PostMessageTransport } from "@modelcontextprotocol/ext-apps/app-bridge";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
 import type { CallToolResult, Tool } from "@modelcontextprotocol/sdk/types.js";
@@ -77,7 +77,7 @@ export function callTool(
 
   const toolCallInfo: ToolCallInfo = { serverInfo, tool, input, resultPromise };
 
-  const uiResourceUri = getUiResourceUri(tool);
+  const uiResourceUri = getToolUiResourceUri(tool);
   if (uiResourceUri) {
     toolCallInfo.appResourcePromise = getUiResource(serverInfo, uiResourceUri);
   }
@@ -86,16 +86,6 @@ export function callTool(
 }
 
 
-function getUiResourceUri(tool: Tool): string | undefined {
-  const uri = tool._meta?.[RESOURCE_URI_META_KEY];
-  if (typeof uri === "string" && uri.startsWith("ui://")) {
-    return uri;
-  } else if (uri !== undefined) {
-    throw new Error(`Invalid UI resource URI: ${JSON.stringify(uri)}`);
-  }
-}
-
-
 async function getUiResource(serverInfo: ServerInfo, uri: string): Promise<UiResourceData> {
   log.info("Reading UI resource:", uri);
   const resource = await serverInfo.client.readResource({ uri });

examples/budget-allocator-server/README.md

@@ -47,7 +47,7 @@ Exposes a single `get-budget-data` tool that returns:
 - Historical data (~120 data points) - 24 months of allocation history per category
 - Industry benchmarks (~60 data points) - Aggregated percentile data by company stage
 
-The tool is linked to a UI resource via `_meta[RESOURCE_URI_META_KEY]`.
+The tool is linked to a UI resource via `_meta.ui.resourceUri`.
 
 ### App (`src/mcp-app.ts`)
 

examples/customer-segmentation-server/README.md

@@ -48,7 +48,7 @@ Exposes a single `get-customer-data` tool that returns:
 - Segment summary with counts and colors for each group
 - Optional segment filter parameter
 
-The tool is linked to a UI resource via `_meta[RESOURCE_URI_META_KEY]`.
+The tool is linked to a UI resource via `_meta.ui.resourceUri`.
 
 ### App (`src/mcp-app.ts`)
 

examples/scenario-modeler-server/README.md

@@ -47,7 +47,7 @@ Exposes a single `get-scenario-data` tool that returns:
 - Default input values for the sliders
 - Optionally computes custom projections when `customInputs` are provided
 
-The tool is linked to a UI resource via `_meta[RESOURCE_URI_META_KEY]`.
+The tool is linked to a UI resource via `_meta.ui.resourceUri`.
 
 ### App (`src/`)
 

examples/system-monitor-server/README.md

@@ -46,7 +46,7 @@ Exposes a single `get-system-stats` tool that returns:
 - Memory usage (used/total/percentage)
 - System info (hostname, platform, uptime)
 
-The tool is linked to a UI resource via `_meta[RESOURCE_URI_META_KEY]`.
+The tool is linked to a UI resource via `_meta.ui.resourceUri`.
 
 ### App (`src/mcp-app.ts`)
 

examples/system-monitor-server/src/mcp-app.ts

@@ -260,7 +260,7 @@ const app = new App({ name: "System Monitor", version: "1.0.0" });
 async function fetchStats(): Promise<void> {
   try {
     const result = await app.callServerTool({
-      name: "get-system-stats",
+      name: "refresh-stats", // Use app-only tool for polling
       arguments: {},
     });
 

specification/draft/apps.mdx

@@ -245,21 +245,35 @@ Example:
 
 ### Resource Discovery
 
-Tools are associated with UI resources through the `_meta` field:
+Tools are associated with UI resources through the `_meta.ui` field:
 
 ```typescript
+interface McpUiToolMeta {
+  /** URI of UI resource for rendering tool results */
+  resourceUri?: string;
+  /**
+   * Who can access this tool. Default: ["model", "app"]
+   * - "model": Tool visible to and callable by the agent
+   * - "app": Tool callable by the app from this server only
+   */
+  visibility?: Array<"model" | "app">;
+}
+
 interface Tool {
   name: string;
   description: string;
   inputSchema: object;
   _meta?: {
-    // Required: URI of the UI resource to use for rendering
+    ui?: McpUiToolMeta;
+    /** @deprecated Use `ui.resourceUri` instead. Will be removed before GA. */
     "ui/resourceUri"?: string;
   };
 }
 ```
 
-Example:
+> **Deprecation notice:** The flat `_meta["ui/resourceUri"]` format is deprecated. Use `_meta.ui.resourceUri` instead. The deprecated format will be removed before GA.
+
+Example (tool visible to both model and app):
 
 ```json
 {
@@ -272,20 +286,48 @@ Example:
     }
   },
   "_meta": {
-    "ui/resourceUri": "ui://weather-server/dashboard-template"
+    "ui": {
+      "resourceUri": "ui://weather-server/dashboard-template",
+      "visibility": ["model", "app"]
+    }
+  }
+}
+```
+
+Example (app-only tool, hidden from model):
+
+```json
+{
+  "name": "refresh_dashboard",
+  "description": "Refresh dashboard data",
+  "inputSchema": { "type": "object" },
+  "_meta": {
+    "ui": {
+      "resourceUri": "ui://weather-server/dashboard-template",
+      "visibility": ["app"]
+    }
   }
 }
 ```
 
 #### Behavior:
 
-- If `ui/resourceUri` is present and host supports MCP Apps, host renders tool results using the specified UI resource
+- If `ui.resourceUri` is present and host supports MCP Apps, host renders tool results using the specified UI resource
 - If host does not support MCP Apps, tool behaves as standard tool (text-only fallback)
 - Resource MUST exist on the server
-- Host MUST use `resources/read` to fetch the referenced resource URI.
+- Host MUST use `resources/read` to fetch the referenced resource URI
 - Host MAY prefetch and cache UI resource content for performance optimization
 - Since UI resources are primarily discovered through tool metadata, Servers MAY omit UI-only resources from `resources/list` and `notifications/resources/list_changed`
 
+#### Visibility:
+
+- `visibility` defaults to `["model", "app"]` if omitted
+- `"model"`: Tool is visible to and callable by the agent
+- `"app"`: Tool is callable by the app from the same server connection only
+- **tools/list behavior:** Host MUST NOT include tools in the agent's tool list when their visibility does not include `"model"` (e.g., `visibility: ["app"]`)
+- **tools/call behavior:** Host MUST reject `tools/call` requests from apps for tools that don't include `"app"` in visibility
+- Cross-server tool calls are always blocked for app-only tools
+
 #### Benefits:
 
 - **Performance:** Host can preload templates before tool execution
@@ -879,7 +921,7 @@ sequenceDiagram
 
   autonumber
   S -->> H: resources/list (includes ui:// resources)
-  S -->> H: tools/list (includes tools with ui/resourceUri metadata)
+  S -->> H: tools/list (includes tools with _meta.ui metadata)
 ```
 
 #### 2. UI Initialization (Desktop/Native Hosts)
@@ -893,7 +935,7 @@ sequenceDiagram
 
   autonumber
   par UI Tool call
-    H ->> S: tools/call to Tool with ui/resourceUri metadata
+    H ->> S: tools/call to Tool with _meta.ui metadata
   and UI initialization
     alt Desktop/Native hosts
       H ->> H: Render Guest UI in an iframe (HTML from the ui:// resource)
@@ -1079,7 +1121,7 @@ await client.callTool("get_weather", { location: "New York" });
 
 This pattern enables interactive, self-updating widgets.
 
-Note: The called tool may not appear in `tools/list` responses. MCP servers MAY expose private tools specifically designed for UI interaction that are not visible to the agent. UI implementations SHOULD attempt to call tools by name regardless of discoverability. The specification for Private Tools will be covered in a future SEP.
+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.
 
 ### Client\<\>Server Capability Negotiation
 
@@ -1123,7 +1165,7 @@ Future versions may add additional settings:
 Servers SHOULD check client (host would-be) capabilities before registering UI-enabled tools:
 
 ```typescript
-import { registerAppTool, RESOURCE_URI_META_KEY } from "@modelcontextprotocol/ext-apps/server";
+import { registerAppTool } from "@modelcontextprotocol/ext-apps/server";
 
 const hasUISupport =
   clientCapabilities?.extensions?.["io.modelcontextprotocol/ui"]?.mimeTypes?.includes("text/html;profile=mcp-app");
@@ -1134,7 +1176,7 @@ if (hasUISupport) {
     description: "Get weather with interactive dashboard",
     inputSchema: { /* ... */ },
     _meta: {
-      [RESOURCE_URI_META_KEY]: "ui://weather-server/dashboard"
+      ui: { resourceUri: "ui://weather-server/dashboard" }
     }
   }, async (args) => { /* ... */ });
 } else {
@@ -1242,6 +1284,24 @@ This proposal synthesizes feedback from the UI CWG and MCP-UI community, host im
 - **Inline styles in tool results:** Rejected; separating theming from data enables caching and updates
 - **CSS-in-JS injection:** Rejected; framework-specific and security concerns with injected code
 
+#### 5. Tool Visibility via Metadata
+
+**Decision:** Use `_meta.ui.visibility` array to control tool accessibility between model and app.
+
+**Rationale:**
+
+- Nested `_meta.ui` structure groups all UI-related metadata cleanly
+- Array format (`["model", "app"]`) allows flexible combinations
+- Default `["model", "app"]` allows both agent and app to access tools
+- `"app"` scope is per-server, preventing cross-server tool calls
+- Cleaner than OpenAI's two-field approach (`widgetAccessible` + `visibility`)
+
+**Alternatives considered:**
+
+- **Two separate fields:** OpenAI uses `widgetAccessible` and `visibility` separately. Rejected as redundant; single `visibility` array covers all cases.
+- **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.
+
 ### Backward Compatibility
 
 The proposal builds on the existing core protocol. There are no incompatibilities.

src/app-bridge.test.ts

@@ -14,7 +14,11 @@ import {
 } from "@modelcontextprotocol/sdk/types.js";
 
 import { App } from "./app";
-import { AppBridge, type McpUiHostCapabilities } from "./app-bridge";
+import {
+  AppBridge,
+  getToolUiResourceUri,
+  type McpUiHostCapabilities,
+} from "./app-bridge";
 
 /** Wait for pending microtasks to complete */
 const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
@@ -707,3 +711,107 @@ describe("App <-> AppBridge integration", () => {
     });
   });
 });
+
+describe("getToolUiResourceUri", () => {
+  describe("new nested format (_meta.ui.resourceUri)", () => {
+    it("extracts resourceUri from _meta.ui.resourceUri", () => {
+      const tool = {
+        name: "test-tool",
+        _meta: {
+          ui: { resourceUri: "ui://server/app.html" },
+        },
+      };
+      expect(getToolUiResourceUri(tool)).toBe("ui://server/app.html");
+    });
+
+    it("extracts resourceUri when visibility is also present", () => {
+      const tool = {
+        name: "test-tool",
+        _meta: {
+          ui: {
+            resourceUri: "ui://server/app.html",
+            visibility: ["model"],
+          },
+        },
+      };
+      expect(getToolUiResourceUri(tool)).toBe("ui://server/app.html");
+    });
+  });
+
+  describe("deprecated flat format (_meta['ui/resourceUri'])", () => {
+    it("extracts resourceUri from deprecated format", () => {
+      const tool = {
+        name: "test-tool",
+        _meta: { "ui/resourceUri": "ui://server/app.html" },
+      };
+      expect(getToolUiResourceUri(tool)).toBe("ui://server/app.html");
+    });
+  });
+
+  describe("format precedence", () => {
+    it("prefers new nested format over deprecated format", () => {
+      const tool = {
+        name: "test-tool",
+        _meta: {
+          ui: { resourceUri: "ui://server/new.html" },
+          "ui/resourceUri": "ui://server/old.html",
+        },
+      };
+      expect(getToolUiResourceUri(tool)).toBe("ui://server/new.html");
+    });
+  });
+
+  describe("missing resourceUri", () => {
+    it("returns undefined when no resourceUri in empty _meta", () => {
+      const tool = { name: "test-tool", _meta: {} };
+      expect(getToolUiResourceUri(tool)).toBeUndefined();
+    });
+
+    it("returns undefined when _meta is missing", () => {
+      const tool = {} as { _meta?: Record<string, unknown> };
+      expect(getToolUiResourceUri(tool)).toBeUndefined();
+    });
+
+    it("returns undefined for app-only tools with visibility but no resourceUri", () => {
+      const tool = {
+        name: "refresh-stats",
+        _meta: {
+          ui: { visibility: ["app"] },
+        },
+      };
+      expect(getToolUiResourceUri(tool)).toBeUndefined();
+    });
+  });
+
+  describe("validation", () => {
+    it("throws for invalid URI (not starting with ui://)", () => {
+      const tool = {
+        name: "test-tool",
+        _meta: { ui: { resourceUri: "https://example.com" } },
+      };
+      expect(() => getToolUiResourceUri(tool)).toThrow(
+        "Invalid UI resource URI",
+      );
+    });
+
+    it("throws for non-string resourceUri", () => {
+      const tool = {
+        name: "test-tool",
+        _meta: { ui: { resourceUri: 123 } },
+      };
+      expect(() => getToolUiResourceUri(tool)).toThrow(
+        "Invalid UI resource URI",
+      );
+    });
+
+    it("throws for null resourceUri", () => {
+      const tool = {
+        name: "test-tool",
+        _meta: { ui: { resourceUri: null } },
+      };
+      expect(() => getToolUiResourceUri(tool)).toThrow(
+        "Invalid UI resource URI",
+      );
+    });
+  });
+});