@mcp-use/cli 2.1.19 → 2.1.20-canary.1

package/dist/index.js

@@ -56,8 +56,8 @@ async function findAvailablePort(startPort, host = "localhost") {
 async function waitForServer(port, host = "localhost", maxAttempts = 30) {
   for (let i = 0; i < maxAttempts; i++) {
     try {
-      const response = await fetch(`http://${host}:${port}/inspector`);
-      if (response.ok) {
+      const response = await fetch(`http://${host}:${port}/mcp`);
+      if (response.status !== 404) {
         return true;
       }
     } catch {
@@ -66,23 +66,76 @@ async function waitForServer(port, host = "localhost", maxAttempts = 30) {
   }
   return false;
 }
-function runCommand(command, args, cwd, env) {
-  return new Promise((resolve, reject) => {
-    const proc = (0, import_node_child_process.spawn)(command, args, {
-      cwd,
-      stdio: "inherit",
-      shell: false,
-      env: env ? { ...process.env, ...env } : process.env
+function runCommand(command, args, cwd, env, filterStderr = false) {
+  const proc = (0, import_node_child_process.spawn)(command, args, {
+    cwd,
+    stdio: filterStderr ? ["inherit", "inherit", "pipe"] : "inherit",
+    shell: false,
+    env: env ? { ...process.env, ...env } : process.env
+  });
+  if (filterStderr && proc.stderr) {
+    proc.stderr.on("data", (data) => {
+      const text = data.toString();
+      if (!text.includes("Previous process hasn't exited yet") && !text.includes("Force killing")) {
+        process.stderr.write(data);
+      }
     });
+  }
+  const promise = new Promise((resolve, reject) => {
     proc.on("error", reject);
     proc.on("exit", (code) => {
-      if (code === 0) {
+      if (code === 0 || code === 130 || code === 143) {
         resolve();
       } else {
         reject(new Error(`Command failed with exit code ${code}`));
       }
     });
   });
+  return { promise, process: proc };
+}
+async function startTunnel(port) {
+  return new Promise((resolve, reject) => {
+    console.log(import_chalk.default.gray(`Starting tunnel for port ${port}...`));
+    const proc = (0, import_node_child_process.spawn)("npx", ["--yes", "@mcp-use/tunnel", String(port)], {
+      stdio: ["ignore", "pipe", "pipe"],
+      shell: false
+    });
+    let resolved = false;
+    proc.stdout?.on("data", (data) => {
+      const text = data.toString();
+      process.stdout.write(text);
+      const urlMatch = text.match(/https?:\/\/([a-z0-9-]+\.[a-z0-9.-]+)/i);
+      if (urlMatch && !resolved) {
+        const url = urlMatch[0];
+        const subdomain = url;
+        resolved = true;
+        clearTimeout(setupTimeout);
+        console.log(import_chalk.default.green.bold(`\u2713 Tunnel established: ${url}/mcp`));
+        resolve({ url, subdomain, process: proc });
+      }
+    });
+    proc.stderr?.on("data", (data) => {
+      process.stderr.write(data);
+    });
+    proc.on("error", (error) => {
+      if (!resolved) {
+        clearTimeout(setupTimeout);
+        reject(new Error(`Failed to start tunnel: ${error.message}`));
+      }
+    });
+    proc.on("exit", (code) => {
+      if (code !== 0 && !resolved) {
+        clearTimeout(setupTimeout);
+        reject(new Error(`Tunnel process exited with code ${code}`));
+      }
+    });
+    const setupTimeout = setTimeout(() => {
+      if (!resolved) {
+        proc.kill();
+        reject(new Error("Tunnel setup timed out"));
+      }
+    }, 3e4);
+  });
 }
 async function findServerFile(projectPath) {
   const candidates = ["index.ts", "src/index.ts", "server.ts", "src/server.ts"];
@@ -166,7 +219,7 @@ if (container && Component) {
     await fs.writeFile(import_node_path.default.join(tempDir, "entry.tsx"), entryContent, "utf8");
     await fs.writeFile(import_node_path.default.join(tempDir, "index.html"), htmlContent, "utf8");
     const outDir = import_node_path.default.join(projectPath, "dist", "resources", "widgets", widgetName);
-    const baseUrl = mcpUrl ? `${mcpUrl}/mcp-use/widgets/${widgetName}/` : `/mcp-use/widgets/${widgetName}/`;
+    const baseUrl = `/mcp-use/widgets/${widgetName}/`;
     let widgetMetadata = {};
     try {
       const metadataTempDir = import_node_path.default.join(projectPath, ".mcp-use", `${widgetName}-metadata`);
@@ -226,6 +279,15 @@ if (container && Component) {
         root: tempDir,
         base: baseUrl,
         plugins: [tailwindcss(), react()],
+        experimental: {
+          renderBuiltUrl: (filename, { hostType }) => {
+            if (["js", "css"].includes(hostType)) {
+              return { runtime: `window.__getFile(${JSON.stringify(filename)})` };
+            } else {
+              return { relative: true };
+            }
+          }
+        },
         resolve: {
           alias: {
             "@": resourcesDir
@@ -292,25 +354,36 @@ program.command("dev").description("Run development server with auto-reload and
       console.log(import_chalk.default.green.bold(`\u2713 Using port ${availablePort} instead`));
       port = availablePort;
     }
+    let mcpUrl;
     const serverFile = await findServerFile(projectPath);
     const processes = [];
-    const serverProc = runCommand("npx", ["tsx", "watch", serverFile], projectPath, {
+    const env = {
       PORT: String(port),
       HOST: host,
       NODE_ENV: "development"
-    });
-    processes.push(serverProc);
+    };
+    if (mcpUrl) {
+      env.MCP_URL = mcpUrl;
+    }
+    const serverCommand = runCommand("npx", ["tsx", "watch", serverFile], projectPath, env, true);
+    processes.push(serverCommand.process);
     if (options.open !== false) {
       const startTime = Date.now();
       const ready = await waitForServer(port, host);
       if (ready) {
-        const mcpUrl = `http://${host}:${port}/mcp`;
-        const inspectorUrl = `http://${host}:${port}/inspector?autoConnect=${encodeURIComponent(mcpUrl)}`;
+        const mcpEndpoint = `http://${host}:${port}/mcp`;
+        let inspectorUrl = `http://${host}:${port}/inspector?autoConnect=${encodeURIComponent(mcpEndpoint)}`;
+        if (mcpUrl) {
+          inspectorUrl += `&tunnelUrl=${encodeURIComponent(mcpUrl)}`;
+        }
         const readyTime = Date.now() - startTime;
         console.log(import_chalk.default.green.bold(`\u2713 Ready in ${readyTime}ms`));
         console.log(import_chalk.default.whiteBright(`Local:    http://${host}:${port}`));
         console.log(import_chalk.default.whiteBright(`Network:  http://${host}:${port}`));
-        console.log(import_chalk.default.whiteBright(`MCP:      ${mcpUrl}`));
+        if (mcpUrl) {
+          console.log(import_chalk.default.whiteBright(`Tunnel:   ${mcpUrl}`));
+        }
+        console.log(import_chalk.default.whiteBright(`MCP:      ${mcpEndpoint}`));
         console.log(import_chalk.default.whiteBright(`Inspector: ${inspectorUrl}
 `));
         await (0, import_open.default)(inspectorUrl);
@@ -318,8 +391,30 @@ program.command("dev").description("Run development server with auto-reload and
     }
     const cleanup = () => {
       console.log(import_chalk.default.gray("\n\nShutting down..."));
-      processes.forEach((proc) => proc.kill());
-      process.exit(0);
+      const processesToKill = processes.length;
+      let killedCount = 0;
+      const checkAndExit = () => {
+        killedCount++;
+        if (killedCount >= processesToKill) {
+          process.exit(0);
+        }
+      };
+      processes.forEach((proc) => {
+        if (proc && typeof proc.kill === "function") {
+          proc.on("exit", checkAndExit);
+          proc.kill("SIGINT");
+        } else {
+          checkAndExit();
+        }
+      });
+      setTimeout(() => {
+        processes.forEach((proc) => {
+          if (proc && typeof proc.kill === "function" && proc.exitCode === null) {
+            proc.kill("SIGKILL");
+          }
+        });
+        process.exit(0);
+      }, 1e3);
     };
     process.on("SIGINT", cleanup);
     process.on("SIGTERM", cleanup);
@@ -330,12 +425,24 @@ program.command("dev").description("Run development server with auto-reload and
     process.exit(1);
   }
 });
-program.command("start").description("Start production server").option("-p, --path <path>", "Path to project directory", process.cwd()).option("--port <port>", "Server port", "3000").action(async (options) => {
+program.command("start").description("Start production server").option("-p, --path <path>", "Path to project directory", process.cwd()).option("--port <port>", "Server port", "3000").option("--tunnel", "Expose server through a tunnel").action(async (options) => {
   try {
     const projectPath = import_node_path.default.resolve(options.path);
     const port = parseInt(options.port, 10);
     console.log(`\x1B[36m\x1B[1mmcp-use\x1B[0m \x1B[90mVersion: ${packageJson.version}\x1B[0m
 `);
+    let mcpUrl;
+    let tunnelProcess = void 0;
+    if (options.tunnel) {
+      try {
+        const tunnelInfo = await startTunnel(port);
+        mcpUrl = tunnelInfo.subdomain;
+        tunnelProcess = tunnelInfo.process;
+      } catch (error) {
+        console.error(import_chalk.default.red("Failed to start tunnel:"), error);
+        process.exit(1);
+      }
+    }
     let serverFile = "dist/index.js";
     try {
       await (0, import_promises.access)(import_node_path.default.join(projectPath, serverFile));
@@ -343,15 +450,47 @@ program.command("start").description("Start production server").option("-p, --pa
       serverFile = "dist/server.js";
     }
     console.log("Starting production server...");
+    const env = {
+      ...process.env,
+      PORT: String(port),
+      NODE_ENV: "production"
+    };
+    if (mcpUrl) {
+      env.MCP_URL = mcpUrl;
+      console.log(import_chalk.default.whiteBright(`Tunnel:   ${mcpUrl}`));
+    }
     const serverProc = (0, import_node_child_process.spawn)("node", [serverFile], {
       cwd: projectPath,
       stdio: "inherit",
-      env: { ...process.env, PORT: String(port), NODE_ENV: "production" }
+      env
     });
     const cleanup = () => {
       console.log("\n\nShutting down...");
-      serverProc.kill();
-      process.exit(0);
+      const processesToKill = 1 + (tunnelProcess ? 1 : 0);
+      let killedCount = 0;
+      const checkAndExit = () => {
+        killedCount++;
+        if (killedCount >= processesToKill) {
+          process.exit(0);
+        }
+      };
+      serverProc.on("exit", checkAndExit);
+      serverProc.kill("SIGTERM");
+      if (tunnelProcess && typeof tunnelProcess.kill === "function") {
+        tunnelProcess.on("exit", checkAndExit);
+        tunnelProcess.kill("SIGTERM");
+      } else {
+        checkAndExit();
+      }
+      setTimeout(() => {
+        if (serverProc.exitCode === null) {
+          serverProc.kill("SIGKILL");
+        }
+        if (tunnelProcess && tunnelProcess.exitCode === null) {
+          tunnelProcess.kill("SIGKILL");
+        }
+        process.exit(0);
+      }, 1e3);
     };
     process.on("SIGINT", cleanup);
     process.on("SIGTERM", cleanup);

package/dist/index.mjs

@@ -33,8 +33,8 @@ async function findAvailablePort(startPort, host = "localhost") {
 async function waitForServer(port, host = "localhost", maxAttempts = 30) {
   for (let i = 0; i < maxAttempts; i++) {
     try {
-      const response = await fetch(`http://${host}:${port}/inspector`);
-      if (response.ok) {
+      const response = await fetch(`http://${host}:${port}/mcp`);
+      if (response.status !== 404) {
         return true;
       }
     } catch {
@@ -43,23 +43,76 @@ async function waitForServer(port, host = "localhost", maxAttempts = 30) {
   }
   return false;
 }
-function runCommand(command, args, cwd, env) {
-  return new Promise((resolve, reject) => {
-    const proc = spawn(command, args, {
-      cwd,
-      stdio: "inherit",
-      shell: false,
-      env: env ? { ...process.env, ...env } : process.env
+function runCommand(command, args, cwd, env, filterStderr = false) {
+  const proc = spawn(command, args, {
+    cwd,
+    stdio: filterStderr ? ["inherit", "inherit", "pipe"] : "inherit",
+    shell: false,
+    env: env ? { ...process.env, ...env } : process.env
+  });
+  if (filterStderr && proc.stderr) {
+    proc.stderr.on("data", (data) => {
+      const text = data.toString();
+      if (!text.includes("Previous process hasn't exited yet") && !text.includes("Force killing")) {
+        process.stderr.write(data);
+      }
     });
+  }
+  const promise = new Promise((resolve, reject) => {
     proc.on("error", reject);
     proc.on("exit", (code) => {
-      if (code === 0) {
+      if (code === 0 || code === 130 || code === 143) {
         resolve();
       } else {
         reject(new Error(`Command failed with exit code ${code}`));
       }
     });
   });
+  return { promise, process: proc };
+}
+async function startTunnel(port) {
+  return new Promise((resolve, reject) => {
+    console.log(chalk.gray(`Starting tunnel for port ${port}...`));
+    const proc = spawn("npx", ["--yes", "@mcp-use/tunnel", String(port)], {
+      stdio: ["ignore", "pipe", "pipe"],
+      shell: false
+    });
+    let resolved = false;
+    proc.stdout?.on("data", (data) => {
+      const text = data.toString();
+      process.stdout.write(text);
+      const urlMatch = text.match(/https?:\/\/([a-z0-9-]+\.[a-z0-9.-]+)/i);
+      if (urlMatch && !resolved) {
+        const url = urlMatch[0];
+        const subdomain = url;
+        resolved = true;
+        clearTimeout(setupTimeout);
+        console.log(chalk.green.bold(`\u2713 Tunnel established: ${url}/mcp`));
+        resolve({ url, subdomain, process: proc });
+      }
+    });
+    proc.stderr?.on("data", (data) => {
+      process.stderr.write(data);
+    });
+    proc.on("error", (error) => {
+      if (!resolved) {
+        clearTimeout(setupTimeout);
+        reject(new Error(`Failed to start tunnel: ${error.message}`));
+      }
+    });
+    proc.on("exit", (code) => {
+      if (code !== 0 && !resolved) {
+        clearTimeout(setupTimeout);
+        reject(new Error(`Tunnel process exited with code ${code}`));
+      }
+    });
+    const setupTimeout = setTimeout(() => {
+      if (!resolved) {
+        proc.kill();
+        reject(new Error("Tunnel setup timed out"));
+      }
+    }, 3e4);
+  });
 }
 async function findServerFile(projectPath) {
   const candidates = ["index.ts", "src/index.ts", "server.ts", "src/server.ts"];
@@ -143,7 +196,7 @@ if (container && Component) {
     await fs.writeFile(path.join(tempDir, "entry.tsx"), entryContent, "utf8");
     await fs.writeFile(path.join(tempDir, "index.html"), htmlContent, "utf8");
     const outDir = path.join(projectPath, "dist", "resources", "widgets", widgetName);
-    const baseUrl = mcpUrl ? `${mcpUrl}/mcp-use/widgets/${widgetName}/` : `/mcp-use/widgets/${widgetName}/`;
+    const baseUrl = `/mcp-use/widgets/${widgetName}/`;
     let widgetMetadata = {};
     try {
       const metadataTempDir = path.join(projectPath, ".mcp-use", `${widgetName}-metadata`);
@@ -203,6 +256,15 @@ if (container && Component) {
         root: tempDir,
         base: baseUrl,
         plugins: [tailwindcss(), react()],
+        experimental: {
+          renderBuiltUrl: (filename, { hostType }) => {
+            if (["js", "css"].includes(hostType)) {
+              return { runtime: `window.__getFile(${JSON.stringify(filename)})` };
+            } else {
+              return { relative: true };
+            }
+          }
+        },
         resolve: {
           alias: {
             "@": resourcesDir
@@ -269,25 +331,36 @@ program.command("dev").description("Run development server with auto-reload and
       console.log(chalk.green.bold(`\u2713 Using port ${availablePort} instead`));
       port = availablePort;
     }
+    let mcpUrl;
     const serverFile = await findServerFile(projectPath);
     const processes = [];
-    const serverProc = runCommand("npx", ["tsx", "watch", serverFile], projectPath, {
+    const env = {
       PORT: String(port),
       HOST: host,
       NODE_ENV: "development"
-    });
-    processes.push(serverProc);
+    };
+    if (mcpUrl) {
+      env.MCP_URL = mcpUrl;
+    }
+    const serverCommand = runCommand("npx", ["tsx", "watch", serverFile], projectPath, env, true);
+    processes.push(serverCommand.process);
     if (options.open !== false) {
       const startTime = Date.now();
       const ready = await waitForServer(port, host);
       if (ready) {
-        const mcpUrl = `http://${host}:${port}/mcp`;
-        const inspectorUrl = `http://${host}:${port}/inspector?autoConnect=${encodeURIComponent(mcpUrl)}`;
+        const mcpEndpoint = `http://${host}:${port}/mcp`;
+        let inspectorUrl = `http://${host}:${port}/inspector?autoConnect=${encodeURIComponent(mcpEndpoint)}`;
+        if (mcpUrl) {
+          inspectorUrl += `&tunnelUrl=${encodeURIComponent(mcpUrl)}`;
+        }
         const readyTime = Date.now() - startTime;
         console.log(chalk.green.bold(`\u2713 Ready in ${readyTime}ms`));
         console.log(chalk.whiteBright(`Local:    http://${host}:${port}`));
         console.log(chalk.whiteBright(`Network:  http://${host}:${port}`));
-        console.log(chalk.whiteBright(`MCP:      ${mcpUrl}`));
+        if (mcpUrl) {
+          console.log(chalk.whiteBright(`Tunnel:   ${mcpUrl}`));
+        }
+        console.log(chalk.whiteBright(`MCP:      ${mcpEndpoint}`));
         console.log(chalk.whiteBright(`Inspector: ${inspectorUrl}
 `));
         await open(inspectorUrl);
@@ -295,8 +368,30 @@ program.command("dev").description("Run development server with auto-reload and
     }
     const cleanup = () => {
       console.log(chalk.gray("\n\nShutting down..."));
-      processes.forEach((proc) => proc.kill());
-      process.exit(0);
+      const processesToKill = processes.length;
+      let killedCount = 0;
+      const checkAndExit = () => {
+        killedCount++;
+        if (killedCount >= processesToKill) {
+          process.exit(0);
+        }
+      };
+      processes.forEach((proc) => {
+        if (proc && typeof proc.kill === "function") {
+          proc.on("exit", checkAndExit);
+          proc.kill("SIGINT");
+        } else {
+          checkAndExit();
+        }
+      });
+      setTimeout(() => {
+        processes.forEach((proc) => {
+          if (proc && typeof proc.kill === "function" && proc.exitCode === null) {
+            proc.kill("SIGKILL");
+          }
+        });
+        process.exit(0);
+      }, 1e3);
     };
     process.on("SIGINT", cleanup);
     process.on("SIGTERM", cleanup);
@@ -307,12 +402,24 @@ program.command("dev").description("Run development server with auto-reload and
     process.exit(1);
   }
 });
-program.command("start").description("Start production server").option("-p, --path <path>", "Path to project directory", process.cwd()).option("--port <port>", "Server port", "3000").action(async (options) => {
+program.command("start").description("Start production server").option("-p, --path <path>", "Path to project directory", process.cwd()).option("--port <port>", "Server port", "3000").option("--tunnel", "Expose server through a tunnel").action(async (options) => {
   try {
     const projectPath = path.resolve(options.path);
     const port = parseInt(options.port, 10);
     console.log(`\x1B[36m\x1B[1mmcp-use\x1B[0m \x1B[90mVersion: ${packageJson.version}\x1B[0m
 `);
+    let mcpUrl;
+    let tunnelProcess = void 0;
+    if (options.tunnel) {
+      try {
+        const tunnelInfo = await startTunnel(port);
+        mcpUrl = tunnelInfo.subdomain;
+        tunnelProcess = tunnelInfo.process;
+      } catch (error) {
+        console.error(chalk.red("Failed to start tunnel:"), error);
+        process.exit(1);
+      }
+    }
     let serverFile = "dist/index.js";
     try {
       await access(path.join(projectPath, serverFile));
@@ -320,15 +427,47 @@ program.command("start").description("Start production server").option("-p, --pa
       serverFile = "dist/server.js";
     }
     console.log("Starting production server...");
+    const env = {
+      ...process.env,
+      PORT: String(port),
+      NODE_ENV: "production"
+    };
+    if (mcpUrl) {
+      env.MCP_URL = mcpUrl;
+      console.log(chalk.whiteBright(`Tunnel:   ${mcpUrl}`));
+    }
     const serverProc = spawn("node", [serverFile], {
       cwd: projectPath,
       stdio: "inherit",
-      env: { ...process.env, PORT: String(port), NODE_ENV: "production" }
+      env
     });
     const cleanup = () => {
       console.log("\n\nShutting down...");
-      serverProc.kill();
-      process.exit(0);
+      const processesToKill = 1 + (tunnelProcess ? 1 : 0);
+      let killedCount = 0;
+      const checkAndExit = () => {
+        killedCount++;
+        if (killedCount >= processesToKill) {
+          process.exit(0);
+        }
+      };
+      serverProc.on("exit", checkAndExit);
+      serverProc.kill("SIGTERM");
+      if (tunnelProcess && typeof tunnelProcess.kill === "function") {
+        tunnelProcess.on("exit", checkAndExit);
+        tunnelProcess.kill("SIGTERM");
+      } else {
+        checkAndExit();
+      }
+      setTimeout(() => {
+        if (serverProc.exitCode === null) {
+          serverProc.kill("SIGKILL");
+        }
+        if (tunnelProcess && tunnelProcess.exitCode === null) {
+          tunnelProcess.kill("SIGKILL");
+        }
+        process.exit(0);
+      }, 1e3);
     };
     process.on("SIGINT", cleanup);
     process.on("SIGTERM", cleanup);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-use/cli",
-  "version": "2.1.19",
+  "version": "2.1.20-canary.1",
   "description": "Build tool for MCP UI widgets - bundles React components into standalone HTML pages for Model Context Protocol servers",
   "author": "mcp-use, Inc.",
   "license": "MIT",
@@ -44,8 +44,8 @@
     "tsx": "^4.0.0",
     "vite": "^6.0.0",
     "ws": "^8.18.0",
-    "mcp-use": "1.1.7",
-    "@mcp-use/inspector": "0.4.7"
+    "@mcp-use/inspector": "0.4.8-canary.1",
+    "mcp-use": "1.1.8-canary.1"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",