refactor: pass permissions through loadSandboxProxy like csp

- Add permissions parameter to loadSandboxProxy in implementation.ts
- Build iframe allow attribute from permissions instead of hardcoding
- Update sandbox.ts to not hardcode allow attribute (set via notification)
- Add microphone + clipboardWrite permissions to transcript-server resource
- Update README to reflect permission configuration via resource _meta.ui

Author: ochafik

examples/basic-host/src/implementation.ts

@@ -119,16 +119,34 @@ async function getUiResource(serverInfo: ServerInfo, uri: string): Promise<UiRes
 }
 
 
+// Build iframe allow attribute from permissions
+function buildAllowAttribute(permissions?: McpUiResourcePermissions): string {
+  if (!permissions) return "";
+
+  const allowList: string[] = [];
+  if (permissions.camera) allowList.push("camera");
+  if (permissions.microphone) allowList.push("microphone");
+  if (permissions.geolocation) allowList.push("geolocation");
+  if (permissions.clipboardWrite) allowList.push("clipboard-write");
+
+  return allowList.join("; ");
+}
+
 export function loadSandboxProxy(
   iframe: HTMLIFrameElement,
   csp?: McpUiResourceCsp,
+  permissions?: McpUiResourcePermissions,
 ): Promise<boolean> {
   // Prevent reload
   if (iframe.src) return Promise.resolve(false);
 
   iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
-  // Allow microphone and clipboard for apps that need audio input or copy functionality
-  iframe.setAttribute("allow", "microphone; clipboard-write");
+
+  // Set Permission Policy allow attribute based on requested permissions
+  const allowAttribute = buildAllowAttribute(permissions);
+  if (allowAttribute) {
+    iframe.setAttribute("allow", allowAttribute);
+  }
 
   const readyNotification: McpUiSandboxProxyReadyNotification["method"] =
     "ui/notifications/sandbox-proxy-ready";

examples/basic-host/src/index.tsx

@@ -264,10 +264,10 @@ function AppIFramePanel({ toolCallInfo, isDestroying, onTeardownComplete }: AppI
   useEffect(() => {
     const iframe = iframeRef.current!;
 
-    // First get CSP from resource, then load sandbox with CSP in query param
-    // This ensures CSP is set via HTTP headers (tamper-proof)
-    toolCallInfo.appResourcePromise.then(({ csp }) => {
-      loadSandboxProxy(iframe, csp).then((firstTime) => {
+    // First get CSP and permissions from resource, then load sandbox
+    // CSP is set via HTTP headers (tamper-proof), permissions via iframe allow attribute
+    toolCallInfo.appResourcePromise.then(({ csp, permissions }) => {
+      loadSandboxProxy(iframe, csp, permissions).then((firstTime) => {
         // The `firstTime` check guards against React Strict Mode's double
         // invocation (mount → unmount → remount simulation in development).
         // Outside of Strict Mode, this `useEffect` runs only once per

examples/basic-host/src/sandbox.ts

@@ -43,8 +43,8 @@ try {
 const inner = document.createElement("iframe");
 inner.style = "width:100%; height:100%; border:none;";
 inner.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
-// Allow microphone and clipboard for apps that need audio input or copy functionality
-inner.setAttribute("allow", "microphone; clipboard-write");
+// Note: allow attribute is set later when receiving sandbox-resource-ready notification
+// based on the permissions requested by the app
 document.body.appendChild(inner);
 
 const RESOURCE_READY_NOTIFICATION: McpUiSandboxResourceReadyNotification["method"] =

examples/transcript-server/README.md

@@ -76,7 +76,7 @@ transcript-server/
 
 ## Notes
 
-- **Microphone Permission**: Requires `allow="microphone"` on the sandbox iframe (configured in `basic-host/src/sandbox.ts`)
+- **Microphone Permission**: Requires `allow="microphone"` on the sandbox iframe (configured via `permissions: { microphone: {} }` in the resource `_meta.ui`)
 - **Browser Support**: Web Speech API is well-supported in Chrome/Edge, with Safari support. Firefox has limited support.
 - **Continuous Mode**: Recognition automatically restarts when it ends, for seamless transcription
 

examples/transcript-server/server.ts

@@ -70,6 +70,12 @@ export function createServer(): McpServer {
             uri: RESOURCE_URI,
             mimeType: RESOURCE_MIME_TYPE,
             text: html,
+            _meta: {
+              ui: {
+                // Request microphone for Web Speech API, clipboard for copy button
+                permissions: { microphone: {}, clipboardWrite: {} },
+              },
+            },
           },
         ],
       };