mcp-use 2.0.0-beta.21 → 2.0.0-beta.22

package/dist/config.d.ts

@@ -14,13 +14,13 @@ export interface InspectorOptions {
     enabled?: boolean;
     /**
      * Full replacement URL for the inspector bundle script (FastAPI's
-     * `swagger_js_url` analog). The shell's `<script type="module">` loads
-     * exactly this URL, so it must point at a complete copy of the
+     * `swagger_js_url` analog). When set, the shell's `<script type="module">`
+     * loads exactly this URL, so it must point at a complete copy of the
      * `@mcp-use/inspector` CDN bundle (`dist/cdn/inspector.js`) — self-host it
      * for air-gapped environments where the public CDN is unreachable.
      *
-     * @defaultValue The mcp-use CDN URL for the `@mcp-use/inspector` bundle,
-     * pinned to the current version.
+     * @defaultValue The latest `@mcp-use/inspector` beta, resolved to one exact
+     * asset version in the browser before the bundle loads.
      */
     assetsUrl?: string;
     /**
@@ -185,12 +185,12 @@ interface BaseServerConfig {
      *
      * @remarks
      * Follows the FastAPI `/docs` model: the server itself ships only a tiny
-     * dependency-free HTML page whose `<script type="module">` loads the
-     * `@mcp-use/inspector` bundle from a CDN (pinned to the current inspector
-     * version), so the UI updates independently of SDK releases and adds
-     * nothing to the install. The page tells the inspector to connect to this
-     * server's MCP endpoint at `basePath`, deriving the URL from the browser's
-     * own origin.
+     * dependency-free HTML page whose inline module loader resolves the latest
+     * `@mcp-use/inspector` beta to one exact CDN release before loading it, so
+     * the UI updates independently of SDK releases without mixing asset
+     * versions or adding anything to the install. The page tells the inspector
+     * to connect to this server's MCP endpoint at `basePath`, deriving the URL
+     * from the browser's own origin.
      *
      * Enabled by default; set `{ enabled: false }` to disable the route, or
      * pass `{ assetsUrl }` to load the bundle from a self-hosted copy instead

package/dist/index.js

@@ -764,17 +764,11 @@ function normalizeMcpMiddlewarePattern(raw) {
 // src/inspector-shell.ts
 var INSPECTOR_TAG = "beta";
 var DEFAULT_INSPECTOR_ASSETS_URL = `https://cdn.jsdelivr.net/npm/@mcp-use/inspector@${INSPECTOR_TAG}/dist/cdn/inspector.js`;
+var INSPECTOR_VERSION_RESOLVER_URL = `https://data.jsdelivr.com/v1/packages/npm/@mcp-use/inspector/resolved?specifier=${INSPECTOR_TAG}`;
+var INSPECTOR_CDN_PACKAGE_URL = "https://cdn.jsdelivr.net/npm/@mcp-use/inspector";
 function inspectorStylesUrl(assetsUrl) {
   return assetsUrl.replace(/\.js(?=$|[?#])/, ".css");
 }
-function isDefaultJsdelivrInspectorUrl(url) {
-  return url.startsWith("https://cdn.jsdelivr.net/npm/@mcp-use/inspector@");
-}
-function withInspectorCacheBust(assetsUrl) {
-  if (!isDefaultJsdelivrInspectorUrl(assetsUrl)) return assetsUrl;
-  const sep = assetsUrl.includes("?") ? "&" : "?";
-  return `${assetsUrl}${sep}cb=${crypto.randomUUID()}`;
-}
 function matchesInspectorShellPath(pathname, basePath) {
   const prefix = pathUnderBase(basePath, "inspector");
   if (pathname !== prefix && !pathname.startsWith(`${prefix}/`)) {
@@ -789,6 +783,53 @@ function escapeHtml(value) {
 function serializeForInlineScript(value) {
   return JSON.stringify(value).replaceAll("<", "\\u003c");
 }
+function renderDefaultInspectorAssetLoader() {
+  return `<script type="module">
+      const resolverUrl = ${serializeForInlineScript(INSPECTOR_VERSION_RESOLVER_URL)};
+      const packageUrl = ${serializeForInlineScript(INSPECTOR_CDN_PACKAGE_URL)};
+      const versionPattern = /^\\d+\\.\\d+\\.\\d+(?:-[0-9A-Za-z.-]+)?(?:\\+[0-9A-Za-z.-]+)?$/;
+
+      try {
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 10_000);
+        let response;
+        try {
+          response = await fetch(resolverUrl, { signal: controller.signal });
+        } finally {
+          clearTimeout(timeout);
+        }
+        if (!response.ok) {
+          throw new Error(\`Inspector version resolver returned HTTP \${response.status}\`);
+        }
+
+        const resolved = await response.json();
+        if (
+          resolved?.name !== "@mcp-use/inspector" ||
+          typeof resolved.version !== "string" ||
+          !versionPattern.test(resolved.version)
+        ) {
+          throw new Error("Inspector version resolver returned an invalid release");
+        }
+
+        const version = resolved.version;
+        const assetBase = \`\${packageUrl}@\${version}/dist/cdn\`;
+        const stylesheet = document.createElement("link");
+        stylesheet.rel = "stylesheet";
+        stylesheet.href = \`\${assetBase}/inspector.css\`;
+        document.head.append(stylesheet);
+
+        window.__INSPECTOR_VERSION__ = version;
+        await import(\`\${assetBase}/inspector.js\`);
+      } catch (error) {
+        console.error("[Inspector] Failed to load the latest Inspector release:", error);
+        document.querySelector(".mcp-boot-spinner")?.remove();
+        const label = document.querySelector(".mcp-boot-label");
+        if (label) {
+          label.textContent = "Unable to load Inspector. Reload to try again.";
+        }
+      }
+    </script>`;
+}
 function renderInspectorShell(options) {
   const {
     serverName,
@@ -800,10 +841,13 @@ function renderInspectorShell(options) {
   } = options;
   const serializedBasePath = serializeForInlineScript(basePath);
   const serializedManufactChatUrl = manufactChatUrl ? serializeForInlineScript(manufactChatUrl) : null;
-  const rawUrl = assetsUrl ?? DEFAULT_INSPECTOR_ASSETS_URL;
-  const bundleUrl = withInspectorCacheBust(rawUrl);
-  const scriptSrc = escapeHtml(bundleUrl);
-  const stylesHref = escapeHtml(inspectorStylesUrl(bundleUrl));
+  const usesDefaultAssets = assetsUrl === void 0;
+  const customScriptSrc = assetsUrl === void 0 ? null : escapeHtml(assetsUrl);
+  const customStylesHref = assetsUrl === void 0 ? null : escapeHtml(inspectorStylesUrl(assetsUrl));
+  const assetPreconnects = usesDefaultAssets ? `    <link rel="preconnect" href="https://data.jsdelivr.com" crossorigin />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />` : "";
+  const stylesheetTag = customStylesHref !== null ? `    <link rel="stylesheet" href="${customStylesHref}" />` : "";
+  const assetLoader = usesDefaultAssets ? renderDefaultInspectorAssetLoader() : `<script type="module" src="${customScriptSrc}"></script>`;
   return `<!doctype html>
 <html lang="en">
   <head>
@@ -813,11 +857,12 @@ function renderInspectorShell(options) {
     ${faviconHref !== void 0 ? `<link rel="icon"${faviconType !== void 0 ? ` type="${escapeHtml(faviconType)}"` : ""} href="${escapeHtml(faviconHref)}" />` : ""}
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+${assetPreconnects}
     <link
       href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="${stylesHref}" />
+${stylesheetTag}
     <style>
       :root { color-scheme: light dark; }
       html, body { height: 100%; margin: 0; background-color: #f3f3f3; }
@@ -912,7 +957,7 @@ function renderInspectorShell(options) {
         }
       })();
     </script>
-    <script type="module" src="${scriptSrc}"></script>
+    ${assetLoader}
   </body>
 </html>
 `;