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

package/dist/commands/screenshot.d.ts

@@ -22,7 +22,16 @@ interface CaptureToolScreenshotInputs {
     resourceUri: string;
 }
 interface CaptureToolScreenshotOptions {
+    /**
+     * Desired output width in CSS pixels. When omitted, the screenshot fits the
+     * widget's natural rendered width. When set, also overrides the inline-mode
+     * 768px max-width cap so the widget renders at the requested width.
+     */
     width?: number;
+    /**
+     * Desired output height in CSS pixels. When omitted, the screenshot fits the
+     * widget's natural rendered height.
+     */
     height?: number;
     theme?: "light" | "dark";
     output?: string;
@@ -46,7 +55,9 @@ interface CaptureToolScreenshotOptions {
 }
 interface CaptureToolScreenshotResult {
     outputPath: string;
+    /** Final clip width in CSS pixels (what the PNG visually represents). */
     width: number;
+    /** Final clip height in CSS pixels. */
     height: number;
     view: string;
 }

package/dist/commands/screenshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screenshot.d.ts","sourceRoot":"","sources":["../../src/commands/screenshot.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAwCjD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAa5D;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAOtE;AAaD;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,GAAG,SAAS,GAAG,IAAI,GAC3D,MAAM,GAAG,IAAI,CAUf;AAED,UAAU,2BAA2B;IACnC,OAAO,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,4BAA4B;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;GAMG;AACH,wBAAsB,qBAAqB,CACzC,MAAM,EAAE,2BAA2B,EACnC,OAAO,GAAE,4BAAiC,GACzC,OAAO,CAAC,2BAA2B,CAAC,CA2DtC;AAqLD;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,OAAa,GAAG,MAAM,CAKzD;AAED,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAK3D;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAMhE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAa1D;AAED,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,CAI/D;AAuQD;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,IAAI,OAAO,CAwBvD;AAED;;;GAGG;AACH,wBAAgB,gCAAgC,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAetE"}
+{"version":3,"file":"screenshot.d.ts","sourceRoot":"","sources":["../../src/commands/screenshot.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAwCjD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAa5D;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAOtE;AAaD;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,GAAG,SAAS,GAAG,IAAI,GAC3D,MAAM,GAAG,IAAI,CAUf;AAED,UAAU,2BAA2B;IACnC,OAAO,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,4BAA4B;IACpC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;GAMG;AACH,wBAAsB,qBAAqB,CACzC,MAAM,EAAE,2BAA2B,EACnC,OAAO,GAAE,4BAAiC,GACzC,OAAO,CAAC,2BAA2B,CAAC,CAmEtC;AAqLD;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,OAAa,GAAG,MAAM,CAKzD;AAED,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAO3D;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAMhE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAa1D;AAED,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,CAI/D;AAmRD;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,IAAI,OAAO,CAwBvD;AAED;;;GAGG;AACH,wBAAgB,gCAAgC,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAetE"}

package/dist/index.cjs

@@ -2790,6 +2790,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) {
@@ -2811,7 +2815,7 @@ async function captureScreenshot(opts) {
         "--disable-gpu",
         "--hide-scrollbars",
         "--mute-audio",
-        `--window-size=${opts.width},${opts.height}`,
+        `--window-size=${viewportWidth},${viewportHeight}`,
         "about:blank"
       ];
       child = (0, import_node_child_process8.spawn)(opts.chromePath, chromeArgs, {
@@ -2879,8 +2883,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
       },
@@ -2930,21 +2934,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
     );
     (0, import_node_fs6.writeFileSync)(opts.outputPath, Buffer.from(shot.data, "base64"));
+    return { width: clip.width, height: clip.height };
   } finally {
     cleanup();
   }
@@ -3073,16 +3092,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,
@@ -3102,10 +3118,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 = import_node_path6.default.resolve(options.output ?? `./${view}-${ts}.png`);
     await (0, import_promises5.mkdir)(import_node_path6.default.dirname(outputPath), { recursive: true });
-    await captureScreenshot({
+    const captured = await captureScreenshot({
       url: previewUrl.toString(),
       width,
       height,
@@ -3119,7 +3138,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);
   }
@@ -3249,9 +3273,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);
@@ -3351,8 +3376,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;
@@ -3461,7 +3486,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(
@@ -7152,6 +7183,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 import_commander7.Command();
 var packageContent = (0, import_node_fs14.readFileSync)(
@@ -7642,7 +7683,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 = import_node_path12.default.join(
@@ -7958,7 +7999,9 @@ export default {
         try {
           const htmlPath = import_node_path12.default.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,