@mcp-use/cli 2.11.2 → 2.12.0-canary.1

package/dist/index.js

@@ -1112,6 +1112,7 @@ defineLazyProperty(apps, "safari", () => detectPlatformBinary({
 var open_default = open;
 
 // src/index.ts
+import { viteSingleFile } from "vite-plugin-singlefile";
 import { toJSONSchema } from "zod";
 
 // src/commands/auth.ts
@@ -4533,6 +4534,9 @@ async function waitForServer(port, host = "localhost", maxAttempts = 30) {
   }
   return false;
 }
+function normalizeBrowserHost(host) {
+  return host === "0.0.0.0" ? "localhost" : host;
+}
 function runCommand(command, args, cwd, env2, filterStderr = false) {
   const proc = spawn(command, args, {
     cwd,
@@ -4640,7 +4644,8 @@ async function findServerFile(projectPath) {
   }
   throw new Error("No server file found");
 }
-async function buildWidgets(projectPath) {
+async function buildWidgets(projectPath, options = {}) {
+  const { inline = true } = options;
   const { promises: fs10 } = await import("fs");
   const { build } = await import("vite");
   const resourcesDir = path6.join(projectPath, "resources");
@@ -4685,7 +4690,11 @@ async function buildWidgets(projectPath) {
     console.log(source_default.gray("No widgets found in resources/ directory"));
     return [];
   }
-  console.log(source_default.gray(`Building ${entries.length} widget(s)...`));
+  console.log(
+    source_default.gray(
+      `Building ${entries.length} widget(s)${inline ? " (inline mode for VS Code compatibility)" : ""}...`
+    )
+  );
   const react = (await import("@vitejs/plugin-react")).default;
   const tailwindcss = (await import("@tailwindcss/vite")).default;
   const packageJsonPath = path6.join(projectPath, "package.json");
@@ -4963,18 +4972,27 @@ export default {
           return null;
         }
       };
+      const buildPlugins = inline ? [
+        buildNodeStubsPlugin,
+        tailwindcss(),
+        react(),
+        viteSingleFile({ removeViteModuleLoader: true })
+      ] : [buildNodeStubsPlugin, tailwindcss(), react()];
       await build({
         root: tempDir,
         base: baseUrl,
-        plugins: [buildNodeStubsPlugin, tailwindcss(), react()],
-        experimental: {
-          renderBuiltUrl: (filename, { hostType }) => {
-            if (["js", "css"].includes(hostType)) {
-              return {
-                runtime: `window.__getFile(${JSON.stringify(filename)})`
-              };
-            } else {
-              return { relative: true };
+        plugins: buildPlugins,
+        // Only use renderBuiltUrl for non-inline builds (external assets need runtime URL resolution)
+        ...inline ? {} : {
+          experimental: {
+            renderBuiltUrl: (filename, { hostType }) => {
+              if (["js", "css"].includes(hostType)) {
+                return {
+                  runtime: `window.__getFile(${JSON.stringify(filename)})`
+                };
+              } else {
+                return { relative: true };
+              }
             }
           }
         },
@@ -4990,6 +5008,17 @@ export default {
         build: {
           outDir,
           emptyOutDir: true,
+          // Disable source maps to avoid CSP eval violations
+          // Source maps can use eval-based mappings which break strict CSP policies
+          sourcemap: false,
+          // Minify for smaller bundle size
+          minify: "esbuild",
+          // For inline builds, disable CSS code splitting and inline all assets
+          ...inline ? {
+            cssCodeSplit: false,
+            assetsInlineLimit: 1e8
+            // Inline all assets under 100MB (effectively all)
+          } : {},
           rollupOptions: {
             input: path6.join(tempDir, "index.html"),
             external: (id) => {
@@ -4998,6 +5027,40 @@ export default {
           }
         }
       });
+      try {
+        const assetsDir = path6.join(outDir, "assets");
+        const assetFiles = await fs10.readdir(assetsDir);
+        const jsFiles = assetFiles.filter((f) => f.endsWith(".js"));
+        for (const jsFile of jsFiles) {
+          const jsPath = path6.join(assetsDir, jsFile);
+          let content = await fs10.readFile(jsPath, "utf8");
+          const zodConfigPatterns = [
+            // Non-minified: export const globalConfig = {}
+            /export\s+const\s+globalConfig\s*=\s*\{\s*\}/g,
+            // Minified pattern: ZodEncodeError"}}const X={};function followed by return X
+            // This is the unique signature of Zod's globalConfig
+            /ZodEncodeError[^}]*\}\}const\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*=\s*\{\s*\}/g
+          ];
+          let patched = false;
+          for (const pattern of zodConfigPatterns) {
+            if (pattern.test(content)) {
+              pattern.lastIndex = 0;
+              content = content.replace(pattern, (match) => {
+                return match.replace(/=\s*\{\s*\}/, "={jitless:true}");
+              });
+              patched = true;
+            }
+          }
+          if (patched) {
+            await fs10.writeFile(jsPath, content, "utf8");
+            console.log(source_default.gray(`    \u2192 Patched Zod JIT in ${jsFile}`));
+          }
+        }
+      } catch (error) {
+        if (error.code !== "ENOENT") {
+          console.warn(source_default.yellow(`    \u26A0 Failed to patch Zod JIT: ${error}`));
+        }
+      }
       const mcpServerUrl = process.env.MCP_SERVER_URL;
       if (mcpServerUrl) {
         try {
@@ -5051,12 +5114,17 @@ export default {
   );
   return builtWidgets;
 }
-program.command("build").description("Build TypeScript and MCP UI widgets").option("-p, --path <path>", "Path to project directory", process.cwd()).option("--with-inspector", "Include inspector in production build").action(async (options) => {
+program.command("build").description("Build TypeScript and MCP UI widgets").option("-p, --path <path>", "Path to project directory", process.cwd()).option("--with-inspector", "Include inspector in production build").option(
+  "--inline",
+  "Inline all JS/CSS into HTML (required for VS Code MCP Apps)"
+).option("--no-inline", "Keep JS/CSS as separate files (default)").action(async (options) => {
   try {
     const projectPath = path6.resolve(options.path);
     const { promises: fs10 } = await import("fs");
     displayPackageVersions(projectPath);
-    const builtWidgets = await buildWidgets(projectPath);
+    const builtWidgets = await buildWidgets(projectPath, {
+      inline: options.inline ?? false
+    });
     console.log(source_default.gray("Building TypeScript..."));
     await runCommand("npx", ["tsc"], projectPath);
     console.log(source_default.green("\u2713 TypeScript build complete!"));
@@ -5113,7 +5181,11 @@ program.command("build").description("Build TypeScript and MCP UI widgets").opti
     process.exit(1);
   }
 });
-program.command("dev").description("Run development server with auto-reload and inspector").option("-p, --path <path>", "Path to project directory", process.cwd()).option("--port <port>", "Server port", "3000").option("--host <host>", "Server host", "localhost").option("--no-open", "Do not auto-open inspector").option("--no-hmr", "Disable hot module reloading (use tsx watch instead)").action(async (options) => {
+program.command("dev").description("Run development server with auto-reload and inspector").option("-p, --path <path>", "Path to project directory", process.cwd()).option("--port <port>", "Server port", "3000").option(
+  "--host <host>",
+  "Server host (use 0.0.0.0 to listen on all interfaces)",
+  "0.0.0.0"
+).option("--no-open", "Do not auto-open inspector").option("--no-hmr", "Disable hot module reloading (use tsx watch instead)").action(async (options) => {
   try {
     const projectPath = path6.resolve(options.path);
     let port = parseInt(options.port, 10);
@@ -5177,11 +5249,14 @@ program.command("dev").description("Run development server with auto-reload and
         const startTime = Date.now();
         const ready = await waitForServer(port, host);
         if (ready) {
-          const mcpEndpoint = `http://${host}:${port}/mcp`;
-          const inspectorUrl = `http://${host}:${port}/inspector?autoConnect=${encodeURIComponent(mcpEndpoint)}`;
+          const browserHost = normalizeBrowserHost(host);
+          const mcpEndpoint = `http://${browserHost}:${port}/mcp`;
+          const inspectorUrl = `http://${browserHost}:${port}/inspector?autoConnect=${encodeURIComponent(mcpEndpoint)}`;
           const readyTime = Date.now() - startTime;
           console.log(source_default.green.bold(`\u2713 Ready in ${readyTime}ms`));
-          console.log(source_default.whiteBright(`Local:    http://${host}:${port}`));
+          console.log(
+            source_default.whiteBright(`Local:    http://${browserHost}:${port}`)
+          );
           console.log(source_default.whiteBright(`Network:  http://${host}:${port}`));
           console.log(source_default.whiteBright(`MCP:      ${mcpEndpoint}`));
           console.log(source_default.whiteBright(`Inspector: ${inspectorUrl}
@@ -5265,11 +5340,14 @@ program.command("dev").description("Run development server with auto-reload and
       if (options.open !== false) {
         const ready = await waitForServer(port, host);
         if (ready) {
-          const mcpEndpoint = `http://${host}:${port}/mcp`;
-          const inspectorUrl = `http://${host}:${port}/inspector?autoConnect=${encodeURIComponent(mcpEndpoint)}`;
+          const browserHost = normalizeBrowserHost(host);
+          const mcpEndpoint = `http://${browserHost}:${port}/mcp`;
+          const inspectorUrl = `http://${browserHost}:${port}/inspector?autoConnect=${encodeURIComponent(mcpEndpoint)}`;
           const readyTime = Date.now() - startTime;
           console.log(source_default.green.bold(`\u2713 Ready in ${readyTime}ms`));
-          console.log(source_default.whiteBright(`Local:    http://${host}:${port}`));
+          console.log(
+            source_default.whiteBright(`Local:    http://${browserHost}:${port}`)
+          );
           console.log(source_default.whiteBright(`Network:  http://${host}:${port}`));
           console.log(source_default.whiteBright(`MCP:      ${mcpEndpoint}`));
           console.log(source_default.whiteBright(`Inspector: ${inspectorUrl}`));