@mcp-use/cli 3.2.0-canary.10 → 3.2.0-canary.12

package/dist/index.js

@@ -2866,7 +2866,7 @@ async function captureScreenshot(opts) {
       {
         width: opts.width,
         height: opts.height,
-        deviceScaleFactor: 1,
+        deviceScaleFactor: opts.deviceScaleFactor ?? 1,
         mobile: false
       },
       sessionId
@@ -3101,7 +3101,8 @@ async function captureToolScreenshot(inputs, options = {}) {
       chromePath,
       cdpUrl: options.cdpUrl,
       delayMs: Number.isFinite(delayMs) && delayMs > 0 ? delayMs : 0,
-      bundle
+      bundle,
+      deviceScaleFactor: options.deviceScaleFactor
     });
     return { outputPath, width, height, view };
   } finally {
@@ -3244,10 +3245,24 @@ function parseDimension(raw, name) {
   }
   return n;
 }
+function parseDeviceScaleFactor(raw) {
+  const n = parseFloat(raw);
+  if (!Number.isFinite(n) || n <= 0) {
+    throw new Error(
+      `--device-scale-factor must be a positive number (got "${raw}")`
+    );
+  }
+  if (n > 4) {
+    throw new Error(
+      `--device-scale-factor must be <= 4 to avoid excessive pixel counts (got "${raw}")`
+    );
+  }
+  return n;
+}
 var AD_HOC_SESSION_NAME = "__screenshot_ad_hoc__";
-async function resolveSessionForScreenshot(options, headers) {
-  if (options.session) {
-    const result = await getOrRestoreSession(options.session);
+async function resolveSessionForScreenshot(options, sessionName, headers) {
+  if (sessionName) {
+    const result = await getOrRestoreSession(sessionName);
     return result?.session ?? null;
   }
   if (options.mcp) {
@@ -3269,12 +3284,12 @@ async function resolveSessionForScreenshot(options, headers) {
   }
   console.error(
     formatError(
-      "No MCP target. Pass --session <name> (a saved server) or --mcp <url> (ad-hoc)."
+      "No MCP target. Pass --mcp <url> for an ad-hoc connection, or use `mcp-use client <name> screenshot` for a saved server."
     )
   );
   return null;
 }
-async function screenshotCommand(options, argsList) {
+async function screenshotCommand(options, argsList, context) {
   let exitCode = 0;
   try {
     if (!options.tool) {
@@ -3291,7 +3306,7 @@ async function screenshotCommand(options, argsList) {
       if (!options.mcp) {
         console.error(
           formatError(
-            "--header is only supported with --mcp <url>. Saved sessions (use --session) carry their own auth from `mcp-use client connect`."
+            "--header is only supported with --mcp <url>. Saved servers carry their own auth from `mcp-use client connect`."
           )
         );
         exitCode = 1;
@@ -3320,7 +3335,12 @@ async function screenshotCommand(options, argsList) {
     const height = parseDimension(options.height, "height");
     const navTimeout = parseInt(options.timeout, 10) || 3e4;
     const delayMs = options.delay ? parseInt(options.delay, 10) : 0;
-    const session = await resolveSessionForScreenshot(options, headers);
+    const deviceScaleFactor = options.deviceScaleFactor ? parseDeviceScaleFactor(options.deviceScaleFactor) : void 0;
+    const session = await resolveSessionForScreenshot(
+      options,
+      context.sessionName,
+      headers
+    );
     if (!session) {
       exitCode = 1;
       return;
@@ -3351,13 +3371,13 @@ async function screenshotCommand(options, argsList) {
         console.log("");
         console.log(formatInfo("Usage:"));
         console.log(
-          `  npx mcp-use screenshot --tool ${options.tool} key=value [key2=value2 ...]`
+          `  npx ${context.usagePrefix} --tool ${options.tool} key=value [key2=value2 ...]`
         );
         console.log(
-          `  npx mcp-use screenshot --tool ${options.tool} nested:='{"a":1}'   # JSON value`
+          `  npx ${context.usagePrefix} --tool ${options.tool} nested:='{"a":1}'   # JSON value`
         );
         console.log(
-          `  npx mcp-use screenshot --tool ${options.tool} '{"key":"value"}'   # full JSON object`
+          `  npx ${context.usagePrefix} --tool ${options.tool} '{"key":"value"}'   # full JSON object`
         );
         if (tool.inputSchema) {
           console.log("");
@@ -3387,7 +3407,8 @@ async function screenshotCommand(options, argsList) {
         timeoutMs: navTimeout,
         inspector: options.inspector,
         quiet: options.quiet,
-        cdpUrl: options.cdpUrl
+        cdpUrl: options.cdpUrl,
+        deviceScaleFactor
       }
     );
     console.log(
@@ -3401,29 +3422,19 @@ async function screenshotCommand(options, argsList) {
     await cleanupAndExit(exitCode);
   }
 }
-function createScreenshotCommand() {
-  return new Command("screenshot").description(
-    "Render an MCP Apps view headlessly and save a PNG by calling a tool and rendering its UI resource with the result."
-  ).argument(
+function withCommonScreenshotOptions(cmd) {
+  return cmd.argument(
     "[args...]",
     "Tool args as key=value pairs (use key:=<json> for nested values, or pass a single JSON object)."
   ).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(
-    "--inspector <url>",
-    "Inspector host that serves /inspector/preview/:view. When omitted, probes localhost:3000 then auto-spawns `mcp-use dev`."
-  ).option(
-    "--session <name>",
-    "Saved server name (from `mcp-use client connect <name> <url>`)."
+    "--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(
-    "--mcp <url>",
-    "Ad-hoc MCP server URL (escape hatch). Use when you don't have a saved server. No authentication unless --header is supplied."
-  ).option(
-    "-H, --header <header>",
-    'HTTP header to send to the --mcp <url> server, formatted "Key: Value". Repeatable. Use to pass an Authorization bearer token or other auth headers when screenshotting an authenticated MCP server.',
-    collectHeader,
-    []
+    "--inspector <url>",
+    "Inspector host that serves /inspector/preview/:view. When omitted, auto-spawns `@mcp-use/inspector` on a free port."
   ).option(
     "--theme <light|dark>",
     "Color scheme to render the view in.",
@@ -3441,9 +3452,42 @@ function createScreenshotCommand() {
   ).option("--timeout <ms>", "Navigation + readiness timeout in ms.", "30000").option(
     "--cdp-url <url>",
     "Connect to an existing CDP WebSocket (ws:// or wss://) instead of spawning local Chrome. Useful for hosted browsers like Notte."
-  ).option("--quiet", "Suppress dev-server output.").action(async (args, opts) => {
-    await screenshotCommand(opts, args);
+  ).option("--quiet", "Suppress dev-server output.");
+}
+function createClientScreenshotCommand() {
+  const cmd = withCommonScreenshotOptions(
+    new Command("screenshot").description(
+      "Render an MCP Apps view headlessly and save a PNG. Connects to an MCP server inline via --mcp; for a saved server, use `mcp-use client <name> screenshot`."
+    )
+  ).option(
+    "--mcp <url>",
+    "Ad-hoc MCP server URL. Required for the top-level form. No authentication unless --header is supplied."
+  ).option(
+    "-H, --header <header>",
+    'HTTP header to send to the --mcp <url> server, formatted "Key: Value". Repeatable. Use to pass an Authorization bearer token or other auth headers when screenshotting an authenticated MCP server.',
+    collectHeader,
+    []
+  );
+  cmd.action(async (args, opts) => {
+    await screenshotCommand(opts, args, {
+      usagePrefix: "mcp-use client screenshot"
+    });
   });
+  return cmd;
+}
+function createPerClientScreenshotCommand(name) {
+  const cmd = withCommonScreenshotOptions(
+    new Command("screenshot").description(
+      `Render an MCP Apps view headlessly using the saved server '${name}'.`
+    )
+  );
+  cmd.action(async (args, opts) => {
+    await screenshotCommand(opts, args, {
+      sessionName: name,
+      usagePrefix: `mcp-use client ${name} screenshot`
+    });
+  });
+  return cmd;
 }
 
 // src/commands/client.ts
@@ -3451,6 +3495,7 @@ var RESERVED_CLIENT_SUBCOMMANDS = /* @__PURE__ */ new Set([
   "connect",
   "list",
   "remove",
+  "screenshot",
   "help"
 ]);
 var PER_CLIENT_SCOPES = /* @__PURE__ */ new Set([
@@ -3459,7 +3504,8 @@ var PER_CLIENT_SCOPES = /* @__PURE__ */ new Set([
   "prompts",
   "auth",
   "disconnect",
-  "interactive"
+  "interactive",
+  "screenshot"
 ]);
 async function connectCommand(name, urlOrCommand, options) {
   if (!name || !urlOrCommand) {
@@ -3864,6 +3910,15 @@ async function callToolCommand(name, toolName, argsList, options) {
           formatInfo(`Capturing widget screenshot (${resourceUri})...`)
         );
         try {
+          const screenshotOpts = {};
+          if (options?.screenshotOutput) {
+            screenshotOpts.output = options.screenshotOutput;
+          }
+          if (options?.screenshotDeviceScaleFactor) {
+            screenshotOpts.deviceScaleFactor = parseDeviceScaleFactor(
+              options.screenshotDeviceScaleFactor
+            );
+          }
           const shot = await captureToolScreenshot(
             {
               session,
@@ -3872,7 +3927,7 @@ async function callToolCommand(name, toolName, argsList, options) {
               toolOutput: callResult,
               resourceUri
             },
-            options?.screenshotOutput ? { output: options.screenshotOutput } : {}
+            screenshotOpts
           );
           screenshot = {
             path: shot.outputPath,
@@ -4297,6 +4352,7 @@ function createClientCommand() {
   clientCommand.command("remove <name>").description(
     "Remove a saved server. Also clears any OAuth tokens for that URL, unless another saved server still uses it."
   ).action(removeClientCommand);
+  clientCommand.addCommand(createClientScreenshotCommand());
   return clientCommand;
 }
 function createPerClientCommand(name) {
@@ -4317,6 +4373,9 @@ function createPerClientCommand(name) {
   ).option(
     "--screenshot-output <path>",
     "Output PNG path for the widget screenshot (defaults to ./<view>-<timestamp>.png)"
+  ).option(
+    "--screenshot-device-scale-factor <n>",
+    "Device pixel ratio for the auto-screenshot (e.g. 2 for Retina). Defaults to 1."
   ).action(
     (tool, args, options) => callToolCommand(name, tool, args, options)
   );
@@ -4347,6 +4406,7 @@ function createPerClientCommand(name) {
   authCommand.command("refresh").description("Force-refresh the OAuth access token").action(() => authRefreshCommand(name));
   authCommand.command("logout").description("Remove stored OAuth tokens for this server's URL").action(() => authLogoutCommand(name));
   cmd.addCommand(authCommand);
+  cmd.addCommand(createPerClientScreenshotCommand(name));
   return cmd;
 }
 
@@ -9208,7 +9268,6 @@ program.addCommand(createClientCommand());
 program.addCommand(createDeploymentsCommand());
 program.addCommand(createServersCommand());
 program.addCommand(createSkillsCommand());
-program.addCommand(createScreenshotCommand());
 program.command("generate-types").description(
   "Generate TypeScript type definitions for tools (writes .mcp-use/tool-registry.d.ts)"
 ).option("-p, --path <path>", "Path to project directory", process.cwd()).option("--server <file>", "Server entry file", "index.ts").action(async (options) => {