docs: add tool visibility and restructure _meta.ui (#131)

* docs: add tool visibility and restructure _meta.ui

- Restructure tool metadata: `_meta["ui/resourceUri"]` → `_meta.ui.resourceUri`
- Add `visibility` array field: ["model"], ["apps"], or ["model", "apps"]
- Default ["model"] preserves standard MCP behavior
- ["apps"] enables widget-only tools hidden from agent
- Add McpUiToolMeta interface for type safety
- Add Design Decision #4 explaining approach vs OpenAI's two-field model

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* address PR review comments

- Change default visibility to ["model", "apps"]
- Add deprecation notice for flat ui/resourceUri format
- Add McpUiToolMeta and McpUiToolVisibility to spec.types.ts
- Improve tools/list and tools/call behavior wording

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* chore: regenerate schemas for McpUiToolMeta types

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* feat: tool visibility and nested _meta.ui format

- Rename visibility "apps" → "app" in McpUiToolVisibility type
- Add _meta.ui.resourceUri nested format (deprecate flat format)
- Add getToolUiResourceUri() utility with backward compatibility
- Add visibility demo to system-monitor-server:
  - get-system-stats: visibility ["model"] with resourceUri
  - refresh-stats: visibility ["app"] (app-only polling)
- Update all example servers to use new _meta.ui format
- Add 11 unit tests for getToolUiResourceUri()

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* chore: regenerate schemas with updated dependencies

* feat: export McpUiToolMeta type and add type annotations

- Export McpUiToolMeta and McpUiToolVisibility types from types.ts
- Export corresponding Zod schemas (McpUiToolMetaSchema, McpUiToolVisibilitySchema)
- Add `as McpUiToolMeta` type annotations to all example servers
- Update docs/quickstart.md with proper typing

Ensures type safety for `_meta.ui` tool metadata across the codebase.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* feat: add server helpers and optional connect() transport

Add `src/server/` with convenience functions for registering MCP App tools
and resources:

- `registerAppTool(server, name, config, handler)`
- `registerAppResource(server, name, uri, config, callback)`

The `transport` parameter in `App.connect()` is now optional, defaulting to
`PostMessageTransport(window.parent)`.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Update src/server/index.ts

Co-authored-by: Jonathan Hefner <[email protected]>

* feat: update McpUiAppToolConfig to support both _meta.ui and flat formats

* refactor: simplify server helper imports

* docs: add deprecation notice and improve resourceUri documentation

* feat: add backward compat normalization in registerAppTool

- If _meta.ui.resourceUri is set, also set legacy flat key
- If legacy flat key is set, also set _meta.ui.resourceUri
- Preserves existing visibility when merging
- Does not overwrite if both formats already set

* refactor: avoid mutating config arg in registerAppTool

* style: format with prettier

---------

Co-authored-by: Claude <[email protected]>
Co-authored-by: Olivier Chafik <[email protected]>
Co-authored-by: Jonathan Hefner <[email protected]>

Author: 4 people

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
 
@@ -1132,7 +1174,7 @@ if (hasUISupport) {
     description: "Get weather with interactive dashboard",
     inputSchema: { /* ... */ },
     _meta: {
-      "ui/resourceUri": "ui://weather-server/dashboard"
+      ui: { resourceUri: "ui://weather-server/dashboard" }
     }
   });
 } else {
@@ -1241,6 +1283,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",
+      );
+    });
+  });
+});