@mcp-ts/sdk 1.3.9 → 1.4.0

package/dist/client/vue.js

@@ -312,19 +312,31 @@ function useMcp(options) {
         break;
       }
       case "auth_required": {
-        if (event.authUrl) {
-          onLog?.("info", `OAuth required - redirecting to ${event.authUrl}`, { authUrl: event.authUrl });
-          if (!suppressAuthRedirectSessions.value.has(event.sessionId)) {
-            if (onRedirect) {
-              onRedirect(event.authUrl);
-            } else if (typeof window !== "undefined") {
-              window.location.href = event.authUrl;
-            }
+        const url2 = (event.authUrl || "").trim();
+        if (!url2) {
+          onLog?.("error", "OAuth required but authorization URL is missing", { sessionId: event.sessionId });
+          const index2 = connections.value.findIndex((c) => c.sessionId === event.sessionId);
+          if (index2 !== -1) {
+            connections.value[index2] = {
+              ...connections.value[index2],
+              state: "FAILED",
+              error: "OAuth authorization URL not available",
+              authUrl: void 0
+            };
+          }
+          break;
+        }
+        onLog?.("info", `OAuth required - redirecting to ${url2}`, { authUrl: url2 });
+        if (!suppressAuthRedirectSessions.value.has(event.sessionId)) {
+          if (onRedirect) {
+            onRedirect(url2);
+          } else if (typeof window !== "undefined") {
+            window.location.href = url2;
           }
         }
         const index = connections.value.findIndex((c) => c.sessionId === event.sessionId);
         if (index !== -1) {
-          connections.value[index] = { ...connections.value[index], state: "AUTHENTICATING", authUrl: event.authUrl };
+          connections.value[index] = { ...connections.value[index], state: "AUTHENTICATING", authUrl: url2 };
         }
         break;
       }
@@ -533,22 +545,88 @@ function useMcp(options) {
     sseClient: clientRef.value
   };
 }
-var HOST_INFO = { name: "mcp-ts-host", version: "1.0.0" };
-var SANDBOX_PERMISSIONS = [
-  "allow-scripts",
-  // Required for app JavaScript execution
-  "allow-forms",
-  // Required for form submissions
-  "allow-same-origin",
-  // Required for Blob URL correctness
-  "allow-modals",
-  // Required for dialogs/alerts
-  "allow-popups",
-  // Required for opening links
-  "allow-downloads"
-  // Required for file downloads
-].join(" ");
-var MCP_URI_SCHEMES = ["ui://", "mcp-app://"];
+
+// src/client/core/constants.ts
+var SANDBOX_PROXY_READY_METHOD = "ui/notifications/sandbox-proxy-ready";
+var SANDBOX_RESOURCE_READY_METHOD = "ui/notifications/sandbox-resource-ready";
+var APP_HOST_DEFAULTS = {
+  /** Default timeout for waiting for the sandbox proxy to be ready (ms). */
+  SANDBOX_TIMEOUT_MS: 1e4,
+  /** Default host info reported to guest apps. */
+  HOST_INFO: { name: "mcp-ts-host", version: "1.0.0" },
+  /** Supported MCP App URI schemes. */
+  URI_SCHEMES: ["ui://", "mcp-app://"],
+  /** Default theme for the host context. */
+  THEME: "dark",
+  /** Default platform for the host context. */
+  PLATFORM: "web",
+  /** Default max height for the iframe container (px). */
+  MAX_HEIGHT: 6e3
+};
+
+// src/client/utils/app-host-utils.ts
+var DEFAULT_SANDBOX_TIMEOUT_MS = APP_HOST_DEFAULTS.SANDBOX_TIMEOUT_MS;
+async function setupSandboxProxyIframe(iframe, sandboxProxyUrl) {
+  iframe.style.width = "100%";
+  iframe.style.height = "100%";
+  iframe.style.border = "none";
+  iframe.style.backgroundColor = "transparent";
+  iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-downloads");
+  const onReady = new Promise((resolve, reject) => {
+    let settled = false;
+    const cleanup = () => {
+      window.removeEventListener("message", messageListener);
+      iframe.removeEventListener("error", errorListener);
+    };
+    const timeoutId = setTimeout(() => {
+      if (!settled) {
+        settled = true;
+        cleanup();
+        reject(new Error("Timed out waiting for sandbox proxy iframe to be ready"));
+      }
+    }, DEFAULT_SANDBOX_TIMEOUT_MS);
+    const messageListener = (event) => {
+      if (event.source === iframe.contentWindow) {
+        if (event.data?.method === SANDBOX_PROXY_READY_METHOD) {
+          if (!settled) {
+            settled = true;
+            clearTimeout(timeoutId);
+            cleanup();
+            resolve();
+          }
+        }
+      }
+    };
+    const errorListener = () => {
+      if (!settled) {
+        settled = true;
+        clearTimeout(timeoutId);
+        cleanup();
+        reject(new Error("Failed to load sandbox proxy iframe"));
+      }
+    };
+    window.addEventListener("message", messageListener);
+    iframe.addEventListener("error", errorListener);
+  });
+  iframe.src = sandboxProxyUrl.href;
+  return { onReady };
+}
+
+// src/client/core/app-host.ts
+var DEFAULT_MCP_APP_CSP = {
+  "default-src": "'self'",
+  "script-src": "'self' 'unsafe-inline' 'unsafe-eval' https: blob:",
+  "style-src": "'self' 'unsafe-inline' https:",
+  "connect-src": "'self' https: wss:",
+  "img-src": "'self' data: https: blob:",
+  "font-src": "'self' data: https:",
+  "media-src": "'self' https: blob:",
+  "frame-src": "'none'",
+  "object-src": "'none'",
+  "base-uri": "'self'"
+};
+var HOST_INFO = APP_HOST_DEFAULTS.HOST_INFO;
+var MCP_URI_SCHEMES = APP_HOST_DEFAULTS.URI_SCHEMES;
 var AppHost = class {
   constructor(client, iframe, options) {
     this.client = client;
@@ -557,10 +635,12 @@ var AppHost = class {
     __publicField(this, "sessionId");
     __publicField(this, "resourceCache", /* @__PURE__ */ new Map());
     __publicField(this, "debug");
-    /** Callback for app messages (e.g., chat messages from the app) */
+    __publicField(this, "sandboxConfig");
+    __publicField(this, "options");
     __publicField(this, "onAppMessage");
-    this.debug = options?.debug ?? false;
-    this.configureSandbox();
+    this.options = options || {};
+    this.debug = this.options.debug ?? false;
+    this.sandboxConfig = this.options.sandbox;
     this.bridge = this.initializeBridge();
   }
   // ============================================
@@ -587,19 +667,35 @@ var AppHost = class {
     }
   }
   /**
-   * Launch an MCP App from a URL or MCP resource URI.
+   * Launch an MCP App from a URL, MCP resource URI, or RAW HTML.
    * Loads the HTML first, then establishes bridge connection.
    */
-  async launch(url, sessionId) {
+  async launch(source, sessionId) {
     if (sessionId) this.sessionId = sessionId;
     const initializedPromise = this.onAppReady();
-    if (this.isMcpUri(url)) {
-      await this.launchMcpApp(url);
-    } else {
-      this.iframe.src = url;
+    let htmlToRender = source.html;
+    if (!htmlToRender && source.uri) {
+      if (this.isMcpUri(source.uri)) {
+        htmlToRender = await this.readMcpAppHtml(source.uri);
+      }
+    }
+    if (!htmlToRender && source.uri && !this.isMcpUri(source.uri)) {
+      this.iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-downloads");
+      this.iframe.src = source.uri;
+      await this.onIframeReady();
+      await this.connectBridge();
+    } else if (htmlToRender) {
+      if (!this.sandboxConfig) {
+        throw new Error("Sandbox configuration requires a proxy URL to render HTML safely.");
+      }
+      await this.launchSandboxedHtml(htmlToRender, this.sandboxConfig);
+      await this.connectBridge();
+      this.log("Sending HTML resource to sandbox proxy (MCP Apps notification)");
+      await this.bridge.sendSandboxResourceReady({
+        html: htmlToRender,
+        csp: this.sandboxConfig.csp
+      });
     }
-    await this.onIframeReady();
-    await this.connectBridge();
     this.log("Waiting for app initialization");
     await Promise.race([
       initializedPromise,
@@ -610,6 +706,19 @@ var AppHost = class {
     ]);
     this.log("App launched and ready");
   }
+  // Set host context manually
+  setHostContext(context) {
+    this.options.hostContext = context;
+    if (this.bridge) {
+      this.bridge.setHostContext(context);
+    }
+  }
+  // Send streaming inputs manually
+  sendToolInputPartial(params) {
+    if (this.bridge) {
+      this.bridge.sendToolInputPartial(params);
+    }
+  }
   /**
    * Wait for app to signal initialization complete
    */
@@ -660,14 +769,17 @@ var AppHost = class {
     this.log("Sending tool cancellation to app");
     this.bridge.sendToolCancelled({ reason });
   }
+  /**
+   * Tell the guest UI the resource is being torn down (unload / cleanup).
+   * Forwards to {@link AppBridge.teardownResource} on `@modelcontextprotocol/ext-apps/app-bridge`.
+   */
+  teardownResource(params = {}) {
+    this.log("Sending resource teardown to app");
+    this.bridge.teardownResource(params);
+  }
   // ============================================
   // Private: Initialization
   // ============================================
-  configureSandbox() {
-    if (this.iframe.sandbox.value !== SANDBOX_PERMISSIONS) {
-      this.iframe.sandbox.value = SANDBOX_PERMISSIONS;
-    }
-  }
   initializeBridge() {
     const bridge = new appBridge.AppBridge(
       null,
@@ -676,12 +788,10 @@ var AppHost = class {
         openLinks: {},
         serverTools: {},
         logging: {},
-        // Declare support for model context updates
         updateModelContext: { text: {} }
       },
       {
-        // Initial host context
-        hostContext: {
+        hostContext: this.options.hostContext || {
           theme: "dark",
           platform: "web",
           containerDimensions: { maxHeight: 6e3 },
@@ -690,19 +800,56 @@ var AppHost = class {
         }
       }
     );
+    bridge.fallbackRequestHandler = this.options.onFallbackRequest;
     bridge.oncalltool = (params) => this.handleToolCall(params);
-    bridge.onopenlink = this.handleOpenLink.bind(this);
-    bridge.onmessage = this.handleMessage.bind(this);
-    bridge.onloggingmessage = (params) => this.log(`App log [${params.level}]: ${params.data}`);
+    if (this.options.onReadResource) {
+      bridge.onreadresource = async (params) => {
+        const resp = await this.options.onReadResource(params.uri);
+        return {
+          contents: resp.contents.map((c) => ({
+            uri: params.uri,
+            text: c.text,
+            blob: c.blob
+          }))
+        };
+      };
+    }
+    bridge.onopenlink = async (params, extra) => {
+      if (this.options.onOpenLink) {
+        return await this.options.onOpenLink(params, extra);
+      }
+      return this.handleOpenLink(params);
+    };
+    bridge.onmessage = async (params, extra) => {
+      if (this.options.onMessage) {
+        return await this.options.onMessage(params, extra);
+      }
+      return this.handleMessage(params);
+    };
+    bridge.onloggingmessage = (params) => {
+      this.log(`App log [${params.level}]: ${params.data}`);
+      if (this.options.onLoggingMessage) {
+        this.options.onLoggingMessage(params);
+      }
+    };
     bridge.onupdatemodelcontext = async () => ({});
-    bridge.onsizechange = async ({ width, height }) => {
-      if (height !== void 0) this.iframe.style.height = `${height}px`;
-      if (width !== void 0) this.iframe.style.minWidth = `min(${width}px, 100%)`;
+    bridge.onsizechange = async (params) => {
+      const { width, height } = params;
+      if (height !== void 0 && height > 0) {
+        this.iframe.style.height = `${height}px`;
+      }
+      if (width !== void 0 && width > 0) this.iframe.style.minWidth = `min(${width}px, 100%)`;
+      if (this.options.onSizeChanged) {
+        this.options.onSizeChanged(params);
+      }
       return {};
     };
-    bridge.onrequestdisplaymode = async (params) => ({
-      mode: params.mode === "fullscreen" ? "fullscreen" : "inline"
-    });
+    bridge.onrequestdisplaymode = async (params, extra) => {
+      if (this.options.onRequestDisplayMode) {
+        return await this.options.onRequestDisplayMode(params, extra);
+      }
+      return { mode: params.mode === "fullscreen" ? "fullscreen" : "inline" };
+    };
     return bridge;
   }
   async connectBridge() {
@@ -716,6 +863,9 @@ var AppHost = class {
       this.log("Bridge connected successfully");
     } catch (error) {
       this.log("Bridge connection failed", "error");
+      if (this.options.onError) {
+        this.options.onError(error instanceof Error ? error : new Error(String(error)));
+      }
       throw error;
     }
   }
@@ -723,8 +873,11 @@ var AppHost = class {
   // Private: Bridge Event Handlers
   // ============================================
   async handleToolCall(params) {
-    if (!this.client.isConnected()) {
-      throw new Error("Client disconnected");
+    if (this.options.onCallTool) {
+      return await this.options.onCallTool(params);
+    }
+    if (!this.client || !this.client.isConnected()) {
+      throw new Error("Client disconnected or not provided");
     }
     const sessionId = await this.getSessionId();
     if (!sessionId) {
@@ -748,13 +901,19 @@ var AppHost = class {
   // ============================================
   // Private: Resource Loading
   // ============================================
-  async launchMcpApp(uri) {
-    if (!this.client.isConnected()) {
-      throw new Error("Client must be connected");
+  async launchSandboxedHtml(html, config) {
+    const sandboxUrlString = config.url instanceof URL ? config.url.href : config.url;
+    const url = new URL(sandboxUrlString, globalThis.location?.href);
+    if (config.csp && Object.keys(config.csp).length > 0) {
+      url.searchParams.set("csp", JSON.stringify(config.csp));
     }
+    const { onReady } = await setupSandboxProxyIframe(this.iframe, url);
+    await onReady;
+  }
+  async readMcpAppHtml(uri) {
     const sessionId = await this.getSessionId();
-    if (!sessionId) {
-      throw new Error("No active session");
+    if (!sessionId && !this.options.onReadResource) {
+      throw new Error("No active session.");
     }
     const response = await this.fetchResourceWithCache(sessionId, uri);
     if (!response?.contents?.length) {
@@ -765,10 +924,18 @@ var AppHost = class {
     if (!html) {
       throw new Error(`Invalid content in resource: ${uri}`);
     }
-    const blob = new Blob([html], { type: "text/html" });
-    this.iframe.src = URL.createObjectURL(blob);
+    return html;
   }
   async fetchResourceWithCache(sessionId, uri) {
+    if (this.options.onReadResource) {
+      return await this.options.onReadResource(uri);
+    }
+    if (!sessionId) {
+      throw new Error("No active session");
+    }
+    if (!this.client) {
+      throw new Error("No client to read resource from");
+    }
     if (this.hasClientCache()) {
       return this.client.getOrFetchResource(sessionId, uri);
     }
@@ -781,8 +948,11 @@ var AppHost = class {
   }
   async preloadResource(uri) {
     try {
+      if (this.options.onReadResource) {
+        return await this.options.onReadResource(uri);
+      }
       const sessionId = await this.getSessionId();
-      if (!sessionId) return null;
+      if (!sessionId || !this.client) return null;
       return await this.client.readResource(sessionId, uri);
     } catch (error) {
       this.log(`Preload failed for ${uri}`, "warn");
@@ -794,6 +964,7 @@ var AppHost = class {
   // ============================================
   async getSessionId() {
     if (this.sessionId) return this.sessionId;
+    if (!this.client) return void 0;
     const result = await this.client.getSessions();
     return result.sessions?.[0]?.sessionId;
   }
@@ -801,6 +972,7 @@ var AppHost = class {
     return MCP_URI_SCHEMES.some((scheme) => url.startsWith(scheme));
   }
   hasClientCache() {
+    if (!this.client) return false;
     return "getOrFetchResource" in this.client && typeof this.client.getOrFetchResource === "function";
   }
   extractUiResourceUri(tool) {
@@ -830,7 +1002,11 @@ var AppHost = class {
   }
 };
 
+exports.APP_HOST_DEFAULTS = APP_HOST_DEFAULTS;
 exports.AppHost = AppHost;
+exports.DEFAULT_MCP_APP_CSP = DEFAULT_MCP_APP_CSP;
+exports.SANDBOX_PROXY_READY_METHOD = SANDBOX_PROXY_READY_METHOD;
+exports.SANDBOX_RESOURCE_READY_METHOD = SANDBOX_RESOURCE_READY_METHOD;
 exports.SSEClient = SSEClient;
 exports.useMcp = useMcp;
 //# sourceMappingURL=vue.js.map