@mcp-use/cli 3.2.1-canary.9 → 3.3.0-canary.20

package/dist/index.js

@@ -2775,6 +2775,10 @@ async function captureScreenshot(opts) {
       }
     }
   };
+  const DEFAULT_VIEWPORT_WIDTH = 1280;
+  const DEFAULT_VIEWPORT_HEIGHT = 2e3;
+  const viewportWidth = Math.max(opts.width ?? 0, DEFAULT_VIEWPORT_WIDTH);
+  const viewportHeight = Math.max(opts.height ?? 0, DEFAULT_VIEWPORT_HEIGHT);
   try {
     let wsUrl;
     if (opts.cdpUrl) {
@@ -2796,7 +2800,7 @@ async function captureScreenshot(opts) {
         "--disable-gpu",
         "--hide-scrollbars",
         "--mute-audio",
-        `--window-size=${opts.width},${opts.height}`,
+        `--window-size=${viewportWidth},${viewportHeight}`,
         "about:blank"
       ];
       child = spawn(opts.chromePath, chromeArgs, {
@@ -2864,8 +2868,8 @@ async function captureScreenshot(opts) {
     await cdp.send(
       "Emulation.setDeviceMetricsOverride",
       {
-        width: opts.width,
-        height: opts.height,
+        width: viewportWidth,
+        height: viewportHeight,
         deviceScaleFactor: opts.deviceScaleFactor ?? 1,
         mobile: false
       },
@@ -2915,21 +2919,36 @@ async function captureScreenshot(opts) {
     if (opts.delayMs && opts.delayMs > 0) {
       await new Promise((res) => setTimeout(res, opts.delayMs));
     }
+    const rectResult = await cdp.send(
+      "Runtime.evaluate",
+      {
+        expression: `(() => {
+          const d = document.body.dataset;
+          const n = (s) => { const v = parseFloat(s ?? ""); return Number.isFinite(v) ? v : undefined; };
+          return { x: n(d.viewX), y: n(d.viewY), width: n(d.viewWidth), height: n(d.viewHeight) };
+        })()`,
+        returnByValue: true
+      },
+      sessionId
+    );
+    const rect = rectResult.result?.value ?? {};
+    const clip = {
+      x: rect.x ?? 0,
+      y: rect.y ?? 0,
+      width: opts.width ?? (rect.width && rect.width > 0 ? rect.width : viewportWidth),
+      height: opts.height ?? (rect.height && rect.height > 0 ? rect.height : viewportHeight),
+      scale: 1
+    };
     const shot = await cdp.send(
       "Page.captureScreenshot",
       {
         format: "png",
-        clip: {
-          x: 0,
-          y: 0,
-          width: opts.width,
-          height: opts.height,
-          scale: 1
-        }
+        clip
       },
       sessionId
     );
     writeFileSync(opts.outputPath, Buffer.from(shot.data, "base64"));
+    return { width: clip.width, height: clip.height };
   } finally {
     cleanup();
   }
@@ -3058,16 +3077,13 @@ function detectToolResourceUri(tool) {
   return uiMeta?.resourceUri ?? meta["openai/outputTemplate"] ?? null;
 }
 async function captureToolScreenshot(inputs, options = {}) {
-  const width = options.width ?? 800;
-  const height = options.height ?? 600;
+  const { width, height } = options;
   const theme = options.theme ?? "light";
   const timeoutMs = options.timeoutMs ?? 3e4;
   const delayMs = options.delayMs ?? 0;
   const chromePath = options.cdpUrl ? void 0 : resolveChromePath();
   const view = extractViewName(inputs.resourceUri);
   const devOptions = {
-    width: String(width),
-    height: String(height),
     theme,
     timeout: String(timeoutMs),
     inspector: options.inspector,
@@ -3087,10 +3103,13 @@ async function captureToolScreenshot(inputs, options = {}) {
     };
     const previewUrl = new URL(`/inspector/preview/${view}`, devHandle.url);
     previewUrl.searchParams.set("theme", theme);
+    if (width !== void 0) {
+      previewUrl.searchParams.set("width", String(width));
+    }
     const ts = timestampSuffix();
     const outputPath = path6.resolve(options.output ?? `./${view}-${ts}.png`);
     await mkdir2(path6.dirname(outputPath), { recursive: true });
-    await captureScreenshot({
+    const captured = await captureScreenshot({
       url: previewUrl.toString(),
       width,
       height,
@@ -3104,7 +3123,12 @@ async function captureToolScreenshot(inputs, options = {}) {
       bundle,
       deviceScaleFactor: options.deviceScaleFactor
     });
-    return { outputPath, width, height, view };
+    return {
+      outputPath,
+      width: captured.width,
+      height: captured.height,
+      view
+    };
   } finally {
     killChild(devHandle?.child);
   }
@@ -3234,9 +3258,10 @@ function timestampSuffix(date = /* @__PURE__ */ new Date()) {
   return `${datePart}_${timePart}`;
 }
 function extractViewName(resourceUri) {
-  const m = resourceUri.match(/^ui:\/\/widget\/(.+)$/);
-  if (!m) return resourceUri;
-  return m[1].replace(/\.html$/, "").replace(/\.[0-9a-f]+$/i, "");
+  const m = resourceUri.match(/^ui:\/\/([^/]+)\/(.+)$/);
+  if (!m) return encodeURIComponent(resourceUri);
+  const name = m[2].replace(/\.html$/, "").replace(/\.[0-9a-f]+$/i, "");
+  return m[1] === "widget" ? name : `${m[1]}-${name}`;
 }
 function parseDimension(raw, name) {
   const n = parseInt(raw, 10);
@@ -3336,8 +3361,8 @@ async function screenshotCommand(options, argsList, context) {
       exitCode = 1;
       return;
     }
-    const width = parseDimension(options.width, "width");
-    const height = parseDimension(options.height, "height");
+    const width = options.width !== void 0 ? parseDimension(options.width, "width") : void 0;
+    const height = options.height !== void 0 ? parseDimension(options.height, "height") : void 0;
     const navTimeout = parseInt(options.timeout, 10) || 3e4;
     const delayMs = options.delay ? parseInt(options.delay, 10) : 0;
     const deviceScaleFactor = options.deviceScaleFactor ? parseDeviceScaleFactor(options.deviceScaleFactor) : void 0;
@@ -3446,7 +3471,13 @@ function withCommonScreenshotOptions(cmd) {
   ).option(
     "--tool <name>",
     "Tool to call. Its UI resource is rendered with the result."
-  ).option("--width <px>", "Browser viewport width in pixels.", "800").option("--height <px>", "Browser viewport height in pixels.", "600").option(
+  ).option(
+    "--width <px>",
+    "Output image width in pixels. When omitted, fits the widget's natural width. When set, the widget renders at this width (overrides the inline-mode 768px cap)."
+  ).option(
+    "--height <px>",
+    "Output image height in pixels. When omitted, fits the widget's natural height."
+  ).option(
     "--device-scale-factor <n>",
     "Device pixel ratio for rendering (e.g. 2 for Retina). Output PNG is (width \xD7 dsf) \xD7 (height \xD7 dsf). Must be > 0 and <= 4."
   ).option(
@@ -7137,6 +7168,16 @@ A new release of ${source_default.bold(PACKAGE_NAME)} is available: ${source_def
   }
 }
 
+// src/utils/widget-paths.ts
+function getWidgetAssetBase(mcpUrl, widgetName) {
+  const widgetPath = `/mcp-use/widgets/${widgetName}/`;
+  if (!mcpUrl) {
+    return widgetPath;
+  }
+  const origin = mcpUrl.replace(/\/+$/, "");
+  return `${origin}${widgetPath}`;
+}
+
 // src/index.ts
 var program = new Command7();
 var packageContent = readFileSync2(
@@ -7627,7 +7668,7 @@ if (container && Component) {
       "widgets",
       widgetName
     );
-    const baseUrl = mcpUrl ? `${mcpUrl}/${widgetName}/` : `/mcp-use/widgets/${widgetName}/`;
+    const baseUrl = getWidgetAssetBase(mcpUrl, widgetName);
     let widgetMetadata = {};
     try {
       const metadataTempDir = path11.join(
@@ -7943,7 +7984,9 @@ export default {
         try {
           const htmlPath = path11.join(outDir, "index.html");
           let html = await fs11.readFile(htmlPath, "utf8");
-          const injectionScript = `<script>window.__getFile = (filename) => { return "${mcpUrl}/${widgetName}/"+filename }; window.__mcpPublicUrl = "${mcpServerUrl}/mcp-use/public"; window.__mcpPublicAssetsUrl = "${mcpUrl}/public";</script>`;
+          const widgetAssetBase = getWidgetAssetBase(mcpUrl, widgetName);
+          const mcpOrigin = mcpUrl ? mcpUrl.replace(/\/+$/, "") : mcpServerUrl;
+          const injectionScript = `<script>window.__getFile = (filename) => { return "${widgetAssetBase}"+filename }; window.__mcpPublicUrl = "${mcpServerUrl}/mcp-use/public"; window.__mcpPublicAssetsUrl = "${mcpOrigin}/mcp-use/public";</script>`;
           if (!html.includes("window.__mcpPublicUrl")) {
             html = html.replace(
               /<head[^>]*>/i,