@mcp-use/cli 2.0.0 → 2.0.2

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 mcp-use, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,104 @@
+# @mcp-use/cli
+
+Build and development tool for MCP servers with UI widgets.
+
+## Install
+
+```bash
+npm install -g @mcp-use/cli
+# or
+yarn global add @mcp-use/cli
+# or
+pnpm add -g @mcp-use/cli
+```
+
+## Usage
+
+### Development Mode
+
+```bash
+mcp-use dev [options]
+```
+
+Runs development server with:
+- TypeScript compilation in watch mode
+- Widget build in watch mode  
+- Server with auto-reload (via tsx)
+- **Auto-opens inspector in browser** when ready
+
+Options:
+- `-p, --path <path>` - Project directory (default: current directory)
+- `--port <port>` - Server port (default: 3000)
+- `--no-open` - Don't auto-open inspector
+
+### Production Build
+
+```bash
+mcp-use build [options]
+```
+
+Builds TypeScript and bundles all `.tsx` files from `resources/` into standalone HTML pages.
+
+Options:
+- `-p, --path <path>` - Project directory (default: current directory)
+
+Each widget gets:
+- Hashed bundle for caching
+- Standalone HTML file
+- All dependencies bundled
+
+### Production Start
+
+```bash
+mcp-use start [options]
+```
+
+Starts the production server from built files.
+
+Options:
+- `-p, --path <path>` - Project directory (default: current directory)
+- `--port <port>` - Server port (default: 3000)
+
+## Examples
+
+```bash
+# Start development with auto-reload and inspector
+mcp-use dev
+
+# Development on custom port
+mcp-use dev --port 8080
+
+# Development without auto-opening inspector
+mcp-use dev --no-open
+
+# Build for production
+mcp-use build
+
+# Start production server
+mcp-use start
+
+# All commands support custom project path
+mcp-use dev -p ./my-app
+mcp-use build -p ./my-app
+mcp-use start -p ./my-app
+```
+
+## Project Structure
+
+```
+my-app/
+├── resources/
+│   ├── todo-list.tsx
+│   └── kanban-board.tsx
+└── dist/
+    └── resources/
+        └── mcp-use/
+            └── widgets/
+                ├── todo-list/
+                │   ├── index.html
+                │   └── assets/
+                └── kanban-board/
+                    ├── index.html
+                    └── assets/
+```
+

package/dist/build.d.ts

@@ -1,2 +1,2 @@
-export declare function buildWidgets(projectPath: string): Promise<void>;
+export declare function buildWidgets(projectPath: string, watch?: boolean): Promise<void>;
 //# sourceMappingURL=build.d.ts.map

package/dist/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"AA6CA,wBAAsB,YAAY,CAAC,WAAW,EAAE,MAAM,iBAuErD"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"AAmGA,wBAAsB,YAAY,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,UAAQ,iBA4FpE"}

package/dist/index.js

@@ -1,25 +1,376 @@
 #!/usr/bin/env node
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const commander_1 = require("commander");
-const build_1 = require("./build");
-const program = new commander_1.Command();
-program
-    .name('mcp-use')
-    .description('MCP CLI tool')
-    .version('0.1.0');
-program
-    .command('build')
-    .description('Build MCP UI widgets')
-    .option('-p, --path <path>', 'Path to project directory', process.cwd())
-    .action(async (options) => {
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/index.ts
+var import_commander = require("commander");
+
+// src/build.ts
+var import_node_fs = require("fs");
+var import_node_path = __toESM(require("path"));
+var import_esbuild = require("esbuild");
+var import_globby = require("globby");
+var ROUTE_PREFIX = "/mcp-use/widgets";
+var SRC_DIR = "resources";
+var OUT_DIR = "dist/resources";
+function toRoute(file) {
+  const rel = file.replace(new RegExp(`^${SRC_DIR}/`), "").replace(/\.tsx?$/, "");
+  return `${ROUTE_PREFIX}/${rel}`;
+}
+function outDirForRoute(route) {
+  return import_node_path.default.join(OUT_DIR, route.replace(/^\//, ""));
+}
+function htmlTemplate({ title, scriptPath }) {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>${title} Widget</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 20px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        background: #f5f5f5;
+      }
+      #widget-root {
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="widget-root"></div>
+    <script type="module" src="${scriptPath}"></script>
+  </body>
+</html>`;
+}
+async function buildWidget(entry, projectPath, minify = true) {
+  const relativePath = import_node_path.default.relative(projectPath, entry);
+  const route = toRoute(relativePath);
+  const pageOutDir = import_node_path.default.join(projectPath, outDirForRoute(route));
+  const baseName = import_node_path.default.parse(entry).name;
+  await (0, import_esbuild.build)({
+    entryPoints: [entry],
+    bundle: true,
+    splitting: true,
+    format: "esm",
+    platform: "browser",
+    target: "es2018",
+    sourcemap: !minify,
+    minify,
+    outdir: import_node_path.default.join(pageOutDir, "assets"),
+    logLevel: "silent",
+    loader: {
+      ".svg": "file",
+      ".png": "file",
+      ".jpg": "file",
+      ".jpeg": "file",
+      ".gif": "file",
+      ".css": "css"
+    },
+    entryNames: `[name]-[hash]`,
+    chunkNames: `chunk-[hash]`,
+    assetNames: `asset-[hash]`,
+    define: {
+      "process.env.NODE_ENV": minify ? '"production"' : '"development"'
+    }
+  });
+  const files = await import_node_fs.promises.readdir(import_node_path.default.join(pageOutDir, "assets"));
+  const mainJs = files.find((f) => f.startsWith(`${baseName}-`) && f.endsWith(".js"));
+  if (!mainJs)
+    throw new Error(`Failed to locate entry JS for ${entry}`);
+  await import_node_fs.promises.mkdir(pageOutDir, { recursive: true });
+  await import_node_fs.promises.writeFile(
+    import_node_path.default.join(pageOutDir, "index.html"),
+    htmlTemplate({
+      title: baseName,
+      scriptPath: `./assets/${mainJs}`
+    }),
+    "utf8"
+  );
+  return { baseName, route };
+}
+async function buildWidgets(projectPath, watch = false) {
+  const srcDir = import_node_path.default.join(projectPath, SRC_DIR);
+  const outDir = import_node_path.default.join(projectPath, OUT_DIR);
+  await import_node_fs.promises.rm(outDir, { recursive: true, force: true });
+  const entries = await (0, import_globby.globby)([`${srcDir}/**/*.tsx`]);
+  if (!watch) {
+    console.log(`Building ${entries.length} widget files...`);
+  }
+  if (watch) {
+    const contexts = [];
+    for (const entry of entries) {
+      const relativePath = import_node_path.default.relative(projectPath, entry);
+      const route = toRoute(relativePath);
+      const pageOutDir = import_node_path.default.join(projectPath, outDirForRoute(route));
+      const baseName = import_node_path.default.parse(entry).name;
+      const ctx = await (0, import_esbuild.context)({
+        entryPoints: [entry],
+        bundle: true,
+        splitting: true,
+        format: "esm",
+        platform: "browser",
+        target: "es2018",
+        sourcemap: true,
+        minify: false,
+        outdir: import_node_path.default.join(pageOutDir, "assets"),
+        logLevel: "silent",
+        loader: {
+          ".svg": "file",
+          ".png": "file",
+          ".jpg": "file",
+          ".jpeg": "file",
+          ".gif": "file",
+          ".css": "css"
+        },
+        entryNames: `[name]-[hash]`,
+        chunkNames: `chunk-[hash]`,
+        assetNames: `asset-[hash]`,
+        define: {
+          "process.env.NODE_ENV": '"development"'
+        },
+        plugins: [{
+          name: "html-writer",
+          setup(build2) {
+            build2.onEnd(async () => {
+              try {
+                const files = await import_node_fs.promises.readdir(import_node_path.default.join(pageOutDir, "assets"));
+                const mainJs = files.find((f) => f.startsWith(`${baseName}-`) && f.endsWith(".js"));
+                if (mainJs) {
+                  await import_node_fs.promises.mkdir(pageOutDir, { recursive: true });
+                  await import_node_fs.promises.writeFile(
+                    import_node_path.default.join(pageOutDir, "index.html"),
+                    htmlTemplate({
+                      title: baseName,
+                      scriptPath: `./assets/${mainJs}`
+                    }),
+                    "utf8"
+                  );
+                }
+              } catch (err) {
+                console.error(`Error writing HTML for ${baseName}:`, err);
+              }
+            });
+          }
+        }]
+      });
+      contexts.push(ctx);
+    }
+    for (const ctx of contexts) {
+      await ctx.watch();
+    }
+  } else {
+    for (const entry of entries) {
+      const { baseName, route } = await buildWidget(entry, projectPath);
+      console.log(`\x1B[32m\u2713\x1B[0m Built ${baseName} -> ${route}`);
+    }
+    console.log("Build complete!");
+  }
+}
+
+// src/index.ts
+var import_node_child_process = require("child_process");
+var import_node_fs2 = require("fs");
+var import_node_path2 = __toESM(require("path"));
+var import_open = __toESM(require("open"));
+var program = new import_commander.Command();
+program.name("mcp-use").description("MCP CLI tool").version("2.0.1");
+async function isPortAvailable(port) {
+  try {
+    const response = await fetch(`http://localhost:${port}`);
+    return false;
+  } catch {
+    return true;
+  }
+}
+async function findAvailablePort(startPort) {
+  for (let port = startPort; port < startPort + 100; port++) {
+    if (await isPortAvailable(port)) {
+      return port;
+    }
+  }
+  throw new Error("No available ports found");
+}
+async function waitForServer(port, maxAttempts = 30) {
+  for (let i = 0; i < maxAttempts; i++) {
+    try {
+      const response = await fetch(`http://localhost:${port}/inspector`);
+      if (response.ok) {
+        return true;
+      }
+    } catch {
+    }
+    await new Promise((resolve) => setTimeout(resolve, 1e3));
+  }
+  return false;
+}
+function runCommand(command, args, cwd) {
+  return new Promise((resolve, reject) => {
+    const proc = (0, import_node_child_process.spawn)(command, args, {
+      cwd,
+      stdio: "inherit",
+      shell: false
+    });
+    proc.on("error", reject);
+    proc.on("exit", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Command failed with exit code ${code}`));
+      }
+    });
+  });
+}
+program.command("build").description("Build TypeScript and MCP UI widgets").option("-p, --path <path>", "Path to project directory", process.cwd()).action(async (options) => {
+  try {
+    const projectPath = import_node_path2.default.resolve(options.path);
+    console.log("\x1B[36m\x1B[1mmcp-use\x1B[0m \x1B[90mVersion: 2.0.1\x1B[0m\n");
+    console.log("Building TypeScript...");
+    await runCommand("npx", ["tsc"], projectPath);
+    console.log("\x1B[32m\u2713\x1B[0m TypeScript build complete!");
+    await buildWidgets(projectPath, false);
+  } catch (error) {
+    console.error("Build failed:", error);
+    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("--no-open", "Do not auto-open inspector").action(async (options) => {
+  try {
+    const projectPath = import_node_path2.default.resolve(options.path);
+    let port = parseInt(options.port, 10);
+    console.log("\x1B[36m\x1B[1mmcp-use\x1B[0m \x1B[90mVersion: 2.0.1\x1B[0m\n");
+    if (!await isPortAvailable(port)) {
+      console.log(`\x1B[33m\u26A0\uFE0F  Port ${port} is already in use\x1B[0m`);
+      const availablePort = await findAvailablePort(port);
+      console.log(`\x1B[32m\u2713\x1B[0m Using port ${availablePort} instead`);
+      port = availablePort;
+    }
+    let serverFile = "src/server.ts";
     try {
-        await (0, build_1.buildWidgets)(options.path);
+      await import_node_fs2.promises.access(import_node_path2.default.join(projectPath, serverFile));
+    } catch {
+      serverFile = "src/index.ts";
     }
-    catch (error) {
-        console.error('Build failed:', error);
+    const processes = [];
+    const tscProc = (0, import_node_child_process.spawn)("npx", ["tsc", "--watch"], {
+      cwd: projectPath,
+      stdio: "pipe",
+      shell: false
+    });
+    tscProc.stdout?.on("data", (data) => {
+      const output = data.toString();
+      if (output.includes("Watching for file changes")) {
+        console.log("\x1B[32m\u2713\x1B[0m TypeScript compiler watching...");
+      }
+    });
+    processes.push(tscProc);
+    buildWidgets(projectPath, true).catch((error) => {
+      console.error("Widget builder failed:", error);
+    });
+    await new Promise((resolve) => setTimeout(resolve, 2e3));
+    const serverProc = (0, import_node_child_process.spawn)("npx", ["tsx", "watch", serverFile], {
+      cwd: projectPath,
+      stdio: "pipe",
+      shell: false,
+      env: { ...process.env, PORT: String(port) }
+    });
+    serverProc.stderr?.on("data", (data) => {
+      const output = data.toString();
+      if (output.includes("EADDRINUSE")) {
+        console.log(`\x1B[31m\u2717\x1B[0m Port ${port} is still in use. Please try a different port with --port`);
+        console.log(`\x1B[90mHint: Use --port 3001 or kill the process using port ${port}\x1B[0m`);
         process.exit(1);
+      }
+    });
+    serverProc.stdout?.on("data", (data) => {
+      process.stdout.write(data);
+    });
+    processes.push(serverProc);
+    if (options.open !== false) {
+      const startTime = Date.now();
+      const ready = await waitForServer(port);
+      if (ready) {
+        const mcpUrl = `http://localhost:${port}/mcp`;
+        const inspectorUrl = `http://localhost:${port}/inspector?autoConnect=${encodeURIComponent(mcpUrl)}`;
+        const readyTime = Date.now() - startTime;
+        console.log(`
+\x1B[32m\u2713\x1B[0m Ready in ${readyTime}ms`);
+        console.log(`Local:    http://localhost:${port}`);
+        console.log(`Network:  http://localhost:${port}`);
+        console.log(`MCP:      ${mcpUrl}`);
+        console.log(`Inspector: ${inspectorUrl}
+`);
+        await (0, import_open.default)(inspectorUrl);
+      }
+    }
+    const cleanup = () => {
+      console.log("\n\nShutting down...");
+      processes.forEach((proc) => proc.kill());
+      process.exit(0);
+    };
+    process.on("SIGINT", cleanup);
+    process.on("SIGTERM", cleanup);
+    await new Promise(() => {
+    });
+  } catch (error) {
+    console.error("Dev mode failed:", error);
+    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) => {
+  try {
+    const projectPath = import_node_path2.default.resolve(options.path);
+    const port = parseInt(options.port, 10);
+    console.log("\x1B[36m\x1B[1mmcp-use\x1B[0m \x1B[90mVersion: 2.0.1\x1B[0m\n");
+    let serverFile = "dist/server.js";
+    try {
+      await import_node_fs2.promises.access(import_node_path2.default.join(projectPath, serverFile));
+    } catch {
+      serverFile = "dist/index.js";
     }
+    console.log("Starting production server...");
+    const serverProc = (0, import_node_child_process.spawn)("node", [serverFile], {
+      cwd: projectPath,
+      stdio: "inherit",
+      env: { ...process.env, PORT: String(port) }
+    });
+    const cleanup = () => {
+      console.log("\n\nShutting down...");
+      serverProc.kill();
+      process.exit(0);
+    };
+    process.on("SIGINT", cleanup);
+    process.on("SIGTERM", cleanup);
+    serverProc.on("exit", (code) => {
+      process.exit(code || 0);
+    });
+  } catch (error) {
+    console.error("Start failed:", error);
+    process.exit(1);
+  }
 });
 program.parse();
-//# sourceMappingURL=index.js.map