@mcp-use/cli 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,34 +1,86 @@
1
1
  # @mcp-use/cli
2
2
 
3
- Build tool for MCP UI widgets.
3
+ Build and development tool for MCP servers with UI widgets.
4
4
 
5
5
  ## Install
6
6
 
7
7
  ```bash
8
8
  npm install -g @mcp-use/cli
9
+ # or
10
+ yarn global add @mcp-use/cli
11
+ # or
12
+ pnpm add -g @mcp-use/cli
9
13
  ```
10
14
 
11
15
  ## Usage
12
16
 
17
+ ### Development Mode
18
+
13
19
  ```bash
14
- mcp-use build [-p <project-path>]
20
+ mcp-use dev [options]
15
21
  ```
16
22
 
17
- Bundles all `.tsx` files from `resources/` into standalone HTML pages in `dist/resources/mcp-use/widgets/`.
23
+ Runs development server with:
24
+ - TypeScript compilation in watch mode
25
+ - Widget build in watch mode
26
+ - Server with auto-reload (via tsx)
27
+ - **Auto-opens inspector in browser** when ready
28
+
29
+ Options:
30
+ - `-p, --path <path>` - Project directory (default: current directory)
31
+ - `--port <port>` - Server port (default: 3000)
32
+ - `--no-open` - Don't auto-open inspector
33
+
34
+ ### Production Build
35
+
36
+ ```bash
37
+ mcp-use build [options]
38
+ ```
39
+
40
+ Builds TypeScript and bundles all `.tsx` files from `resources/` into standalone HTML pages.
41
+
42
+ Options:
43
+ - `-p, --path <path>` - Project directory (default: current directory)
18
44
 
19
45
  Each widget gets:
20
46
  - Hashed bundle for caching
21
47
  - Standalone HTML file
22
48
  - All dependencies bundled
23
49
 
24
- ## Example
50
+ ### Production Start
51
+
52
+ ```bash
53
+ mcp-use start [options]
54
+ ```
55
+
56
+ Starts the production server from built files.
57
+
58
+ Options:
59
+ - `-p, --path <path>` - Project directory (default: current directory)
60
+ - `--port <port>` - Server port (default: 3000)
61
+
62
+ ## Examples
25
63
 
26
64
  ```bash
27
- # Build widgets in current directory
65
+ # Start development with auto-reload and inspector
66
+ mcp-use dev
67
+
68
+ # Development on custom port
69
+ mcp-use dev --port 8080
70
+
71
+ # Development without auto-opening inspector
72
+ mcp-use dev --no-open
73
+
74
+ # Build for production
28
75
  mcp-use build
29
76
 
30
- # Build widgets in specific path
77
+ # Start production server
78
+ mcp-use start
79
+
80
+ # All commands support custom project path
81
+ mcp-use dev -p ./my-app
31
82
  mcp-use build -p ./my-app
83
+ mcp-use start -p ./my-app
32
84
  ```
33
85
 
34
86
  ## Project Structure
package/dist/build.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare function buildWidgets(projectPath: string): Promise<void>;
1
+ export declare function buildWidgets(projectPath: string, watch?: boolean): Promise<void>;
2
2
  //# sourceMappingURL=build.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"AA6CA,wBAAsB,YAAY,CAAC,WAAW,EAAE,MAAM,iBAuErD"}
1
+ {"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 CHANGED
@@ -1,25 +1,376 @@
1
1
  #!/usr/bin/env node
2
2
  "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- const commander_1 = require("commander");
5
- const build_1 = require("./build");
6
- const program = new commander_1.Command();
7
- program
8
- .name('mcp-use')
9
- .description('MCP CLI tool')
10
- .version('0.1.0');
11
- program
12
- .command('build')
13
- .description('Build MCP UI widgets')
14
- .option('-p, --path <path>', 'Path to project directory', process.cwd())
15
- .action(async (options) => {
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
18
+ // If the importer is in node compatibility mode or this is not an ESM
19
+ // file that has been converted to a CommonJS file using a Babel-
20
+ // compatible transform (i.e. "__esModule" has not been set), then set
21
+ // "default" to the CommonJS "module.exports" for node compatibility.
22
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
23
+ mod
24
+ ));
25
+
26
+ // src/index.ts
27
+ var import_commander = require("commander");
28
+
29
+ // src/build.ts
30
+ var import_node_fs = require("fs");
31
+ var import_node_path = __toESM(require("path"));
32
+ var import_esbuild = require("esbuild");
33
+ var import_globby = require("globby");
34
+ var ROUTE_PREFIX = "/mcp-use/widgets";
35
+ var SRC_DIR = "resources";
36
+ var OUT_DIR = "dist/resources";
37
+ function toRoute(file) {
38
+ const rel = file.replace(new RegExp(`^${SRC_DIR}/`), "").replace(/\.tsx?$/, "");
39
+ return `${ROUTE_PREFIX}/${rel}`;
40
+ }
41
+ function outDirForRoute(route) {
42
+ return import_node_path.default.join(OUT_DIR, route.replace(/^\//, ""));
43
+ }
44
+ function htmlTemplate({ title, scriptPath }) {
45
+ return `<!doctype html>
46
+ <html lang="en">
47
+ <head>
48
+ <meta charset="UTF-8" />
49
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
50
+ <title>${title} Widget</title>
51
+ <style>
52
+ body {
53
+ margin: 0;
54
+ padding: 20px;
55
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
56
+ background: #f5f5f5;
57
+ }
58
+ #widget-root {
59
+ max-width: 1200px;
60
+ margin: 0 auto;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body>
65
+ <div id="widget-root"></div>
66
+ <script type="module" src="${scriptPath}"></script>
67
+ </body>
68
+ </html>`;
69
+ }
70
+ async function buildWidget(entry, projectPath, minify = true) {
71
+ const relativePath = import_node_path.default.relative(projectPath, entry);
72
+ const route = toRoute(relativePath);
73
+ const pageOutDir = import_node_path.default.join(projectPath, outDirForRoute(route));
74
+ const baseName = import_node_path.default.parse(entry).name;
75
+ await (0, import_esbuild.build)({
76
+ entryPoints: [entry],
77
+ bundle: true,
78
+ splitting: true,
79
+ format: "esm",
80
+ platform: "browser",
81
+ target: "es2018",
82
+ sourcemap: !minify,
83
+ minify,
84
+ outdir: import_node_path.default.join(pageOutDir, "assets"),
85
+ logLevel: "silent",
86
+ loader: {
87
+ ".svg": "file",
88
+ ".png": "file",
89
+ ".jpg": "file",
90
+ ".jpeg": "file",
91
+ ".gif": "file",
92
+ ".css": "css"
93
+ },
94
+ entryNames: `[name]-[hash]`,
95
+ chunkNames: `chunk-[hash]`,
96
+ assetNames: `asset-[hash]`,
97
+ define: {
98
+ "process.env.NODE_ENV": minify ? '"production"' : '"development"'
99
+ }
100
+ });
101
+ const files = await import_node_fs.promises.readdir(import_node_path.default.join(pageOutDir, "assets"));
102
+ const mainJs = files.find((f) => f.startsWith(`${baseName}-`) && f.endsWith(".js"));
103
+ if (!mainJs)
104
+ throw new Error(`Failed to locate entry JS for ${entry}`);
105
+ await import_node_fs.promises.mkdir(pageOutDir, { recursive: true });
106
+ await import_node_fs.promises.writeFile(
107
+ import_node_path.default.join(pageOutDir, "index.html"),
108
+ htmlTemplate({
109
+ title: baseName,
110
+ scriptPath: `./assets/${mainJs}`
111
+ }),
112
+ "utf8"
113
+ );
114
+ return { baseName, route };
115
+ }
116
+ async function buildWidgets(projectPath, watch = false) {
117
+ const srcDir = import_node_path.default.join(projectPath, SRC_DIR);
118
+ const outDir = import_node_path.default.join(projectPath, OUT_DIR);
119
+ await import_node_fs.promises.rm(outDir, { recursive: true, force: true });
120
+ const entries = await (0, import_globby.globby)([`${srcDir}/**/*.tsx`]);
121
+ if (!watch) {
122
+ console.log(`Building ${entries.length} widget files...`);
123
+ }
124
+ if (watch) {
125
+ const contexts = [];
126
+ for (const entry of entries) {
127
+ const relativePath = import_node_path.default.relative(projectPath, entry);
128
+ const route = toRoute(relativePath);
129
+ const pageOutDir = import_node_path.default.join(projectPath, outDirForRoute(route));
130
+ const baseName = import_node_path.default.parse(entry).name;
131
+ const ctx = await (0, import_esbuild.context)({
132
+ entryPoints: [entry],
133
+ bundle: true,
134
+ splitting: true,
135
+ format: "esm",
136
+ platform: "browser",
137
+ target: "es2018",
138
+ sourcemap: true,
139
+ minify: false,
140
+ outdir: import_node_path.default.join(pageOutDir, "assets"),
141
+ logLevel: "silent",
142
+ loader: {
143
+ ".svg": "file",
144
+ ".png": "file",
145
+ ".jpg": "file",
146
+ ".jpeg": "file",
147
+ ".gif": "file",
148
+ ".css": "css"
149
+ },
150
+ entryNames: `[name]-[hash]`,
151
+ chunkNames: `chunk-[hash]`,
152
+ assetNames: `asset-[hash]`,
153
+ define: {
154
+ "process.env.NODE_ENV": '"development"'
155
+ },
156
+ plugins: [{
157
+ name: "html-writer",
158
+ setup(build2) {
159
+ build2.onEnd(async () => {
160
+ try {
161
+ const files = await import_node_fs.promises.readdir(import_node_path.default.join(pageOutDir, "assets"));
162
+ const mainJs = files.find((f) => f.startsWith(`${baseName}-`) && f.endsWith(".js"));
163
+ if (mainJs) {
164
+ await import_node_fs.promises.mkdir(pageOutDir, { recursive: true });
165
+ await import_node_fs.promises.writeFile(
166
+ import_node_path.default.join(pageOutDir, "index.html"),
167
+ htmlTemplate({
168
+ title: baseName,
169
+ scriptPath: `./assets/${mainJs}`
170
+ }),
171
+ "utf8"
172
+ );
173
+ }
174
+ } catch (err) {
175
+ console.error(`Error writing HTML for ${baseName}:`, err);
176
+ }
177
+ });
178
+ }
179
+ }]
180
+ });
181
+ contexts.push(ctx);
182
+ }
183
+ for (const ctx of contexts) {
184
+ await ctx.watch();
185
+ }
186
+ } else {
187
+ for (const entry of entries) {
188
+ const { baseName, route } = await buildWidget(entry, projectPath);
189
+ console.log(`\x1B[32m\u2713\x1B[0m Built ${baseName} -> ${route}`);
190
+ }
191
+ console.log("Build complete!");
192
+ }
193
+ }
194
+
195
+ // src/index.ts
196
+ var import_node_child_process = require("child_process");
197
+ var import_node_fs2 = require("fs");
198
+ var import_node_path2 = __toESM(require("path"));
199
+ var import_open = __toESM(require("open"));
200
+ var program = new import_commander.Command();
201
+ program.name("mcp-use").description("MCP CLI tool").version("2.0.1");
202
+ async function isPortAvailable(port) {
203
+ try {
204
+ const response = await fetch(`http://localhost:${port}`);
205
+ return false;
206
+ } catch {
207
+ return true;
208
+ }
209
+ }
210
+ async function findAvailablePort(startPort) {
211
+ for (let port = startPort; port < startPort + 100; port++) {
212
+ if (await isPortAvailable(port)) {
213
+ return port;
214
+ }
215
+ }
216
+ throw new Error("No available ports found");
217
+ }
218
+ async function waitForServer(port, maxAttempts = 30) {
219
+ for (let i = 0; i < maxAttempts; i++) {
220
+ try {
221
+ const response = await fetch(`http://localhost:${port}/inspector`);
222
+ if (response.ok) {
223
+ return true;
224
+ }
225
+ } catch {
226
+ }
227
+ await new Promise((resolve) => setTimeout(resolve, 1e3));
228
+ }
229
+ return false;
230
+ }
231
+ function runCommand(command, args, cwd) {
232
+ return new Promise((resolve, reject) => {
233
+ const proc = (0, import_node_child_process.spawn)(command, args, {
234
+ cwd,
235
+ stdio: "inherit",
236
+ shell: false
237
+ });
238
+ proc.on("error", reject);
239
+ proc.on("exit", (code) => {
240
+ if (code === 0) {
241
+ resolve();
242
+ } else {
243
+ reject(new Error(`Command failed with exit code ${code}`));
244
+ }
245
+ });
246
+ });
247
+ }
248
+ program.command("build").description("Build TypeScript and MCP UI widgets").option("-p, --path <path>", "Path to project directory", process.cwd()).action(async (options) => {
249
+ try {
250
+ const projectPath = import_node_path2.default.resolve(options.path);
251
+ console.log("\x1B[36m\x1B[1mmcp-use\x1B[0m \x1B[90mVersion: 2.0.1\x1B[0m\n");
252
+ console.log("Building TypeScript...");
253
+ await runCommand("npx", ["tsc"], projectPath);
254
+ console.log("\x1B[32m\u2713\x1B[0m TypeScript build complete!");
255
+ await buildWidgets(projectPath, false);
256
+ } catch (error) {
257
+ console.error("Build failed:", error);
258
+ process.exit(1);
259
+ }
260
+ });
261
+ 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) => {
262
+ try {
263
+ const projectPath = import_node_path2.default.resolve(options.path);
264
+ let port = parseInt(options.port, 10);
265
+ console.log("\x1B[36m\x1B[1mmcp-use\x1B[0m \x1B[90mVersion: 2.0.1\x1B[0m\n");
266
+ if (!await isPortAvailable(port)) {
267
+ console.log(`\x1B[33m\u26A0\uFE0F Port ${port} is already in use\x1B[0m`);
268
+ const availablePort = await findAvailablePort(port);
269
+ console.log(`\x1B[32m\u2713\x1B[0m Using port ${availablePort} instead`);
270
+ port = availablePort;
271
+ }
272
+ let serverFile = "src/server.ts";
16
273
  try {
17
- await (0, build_1.buildWidgets)(options.path);
274
+ await import_node_fs2.promises.access(import_node_path2.default.join(projectPath, serverFile));
275
+ } catch {
276
+ serverFile = "src/index.ts";
18
277
  }
19
- catch (error) {
20
- console.error('Build failed:', error);
278
+ const processes = [];
279
+ const tscProc = (0, import_node_child_process.spawn)("npx", ["tsc", "--watch"], {
280
+ cwd: projectPath,
281
+ stdio: "pipe",
282
+ shell: false
283
+ });
284
+ tscProc.stdout?.on("data", (data) => {
285
+ const output = data.toString();
286
+ if (output.includes("Watching for file changes")) {
287
+ console.log("\x1B[32m\u2713\x1B[0m TypeScript compiler watching...");
288
+ }
289
+ });
290
+ processes.push(tscProc);
291
+ buildWidgets(projectPath, true).catch((error) => {
292
+ console.error("Widget builder failed:", error);
293
+ });
294
+ await new Promise((resolve) => setTimeout(resolve, 2e3));
295
+ const serverProc = (0, import_node_child_process.spawn)("npx", ["tsx", "watch", serverFile], {
296
+ cwd: projectPath,
297
+ stdio: "pipe",
298
+ shell: false,
299
+ env: { ...process.env, PORT: String(port) }
300
+ });
301
+ serverProc.stderr?.on("data", (data) => {
302
+ const output = data.toString();
303
+ if (output.includes("EADDRINUSE")) {
304
+ console.log(`\x1B[31m\u2717\x1B[0m Port ${port} is still in use. Please try a different port with --port`);
305
+ console.log(`\x1B[90mHint: Use --port 3001 or kill the process using port ${port}\x1B[0m`);
21
306
  process.exit(1);
307
+ }
308
+ });
309
+ serverProc.stdout?.on("data", (data) => {
310
+ process.stdout.write(data);
311
+ });
312
+ processes.push(serverProc);
313
+ if (options.open !== false) {
314
+ const startTime = Date.now();
315
+ const ready = await waitForServer(port);
316
+ if (ready) {
317
+ const mcpUrl = `http://localhost:${port}/mcp`;
318
+ const inspectorUrl = `http://localhost:${port}/inspector?autoConnect=${encodeURIComponent(mcpUrl)}`;
319
+ const readyTime = Date.now() - startTime;
320
+ console.log(`
321
+ \x1B[32m\u2713\x1B[0m Ready in ${readyTime}ms`);
322
+ console.log(`Local: http://localhost:${port}`);
323
+ console.log(`Network: http://localhost:${port}`);
324
+ console.log(`MCP: ${mcpUrl}`);
325
+ console.log(`Inspector: ${inspectorUrl}
326
+ `);
327
+ await (0, import_open.default)(inspectorUrl);
328
+ }
329
+ }
330
+ const cleanup = () => {
331
+ console.log("\n\nShutting down...");
332
+ processes.forEach((proc) => proc.kill());
333
+ process.exit(0);
334
+ };
335
+ process.on("SIGINT", cleanup);
336
+ process.on("SIGTERM", cleanup);
337
+ await new Promise(() => {
338
+ });
339
+ } catch (error) {
340
+ console.error("Dev mode failed:", error);
341
+ process.exit(1);
342
+ }
343
+ });
344
+ 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) => {
345
+ try {
346
+ const projectPath = import_node_path2.default.resolve(options.path);
347
+ const port = parseInt(options.port, 10);
348
+ console.log("\x1B[36m\x1B[1mmcp-use\x1B[0m \x1B[90mVersion: 2.0.1\x1B[0m\n");
349
+ let serverFile = "dist/server.js";
350
+ try {
351
+ await import_node_fs2.promises.access(import_node_path2.default.join(projectPath, serverFile));
352
+ } catch {
353
+ serverFile = "dist/index.js";
22
354
  }
355
+ console.log("Starting production server...");
356
+ const serverProc = (0, import_node_child_process.spawn)("node", [serverFile], {
357
+ cwd: projectPath,
358
+ stdio: "inherit",
359
+ env: { ...process.env, PORT: String(port) }
360
+ });
361
+ const cleanup = () => {
362
+ console.log("\n\nShutting down...");
363
+ serverProc.kill();
364
+ process.exit(0);
365
+ };
366
+ process.on("SIGINT", cleanup);
367
+ process.on("SIGTERM", cleanup);
368
+ serverProc.on("exit", (code) => {
369
+ process.exit(code || 0);
370
+ });
371
+ } catch (error) {
372
+ console.error("Start failed:", error);
373
+ process.exit(1);
374
+ }
23
375
  });
24
376
  program.parse();
25
- //# sourceMappingURL=index.js.map
package/dist/index.mjs ADDED
@@ -0,0 +1,353 @@
1
+ #!/usr/bin/env node
2
+
3
+ // src/index.ts
4
+ import { Command } from "commander";
5
+
6
+ // src/build.ts
7
+ import { promises as fs } from "fs";
8
+ import path from "path";
9
+ import { build, context } from "esbuild";
10
+ import { globby } from "globby";
11
+ var ROUTE_PREFIX = "/mcp-use/widgets";
12
+ var SRC_DIR = "resources";
13
+ var OUT_DIR = "dist/resources";
14
+ function toRoute(file) {
15
+ const rel = file.replace(new RegExp(`^${SRC_DIR}/`), "").replace(/\.tsx?$/, "");
16
+ return `${ROUTE_PREFIX}/${rel}`;
17
+ }
18
+ function outDirForRoute(route) {
19
+ return path.join(OUT_DIR, route.replace(/^\//, ""));
20
+ }
21
+ function htmlTemplate({ title, scriptPath }) {
22
+ return `<!doctype html>
23
+ <html lang="en">
24
+ <head>
25
+ <meta charset="UTF-8" />
26
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
27
+ <title>${title} Widget</title>
28
+ <style>
29
+ body {
30
+ margin: 0;
31
+ padding: 20px;
32
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
33
+ background: #f5f5f5;
34
+ }
35
+ #widget-root {
36
+ max-width: 1200px;
37
+ margin: 0 auto;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body>
42
+ <div id="widget-root"></div>
43
+ <script type="module" src="${scriptPath}"></script>
44
+ </body>
45
+ </html>`;
46
+ }
47
+ async function buildWidget(entry, projectPath, minify = true) {
48
+ const relativePath = path.relative(projectPath, entry);
49
+ const route = toRoute(relativePath);
50
+ const pageOutDir = path.join(projectPath, outDirForRoute(route));
51
+ const baseName = path.parse(entry).name;
52
+ await build({
53
+ entryPoints: [entry],
54
+ bundle: true,
55
+ splitting: true,
56
+ format: "esm",
57
+ platform: "browser",
58
+ target: "es2018",
59
+ sourcemap: !minify,
60
+ minify,
61
+ outdir: path.join(pageOutDir, "assets"),
62
+ logLevel: "silent",
63
+ loader: {
64
+ ".svg": "file",
65
+ ".png": "file",
66
+ ".jpg": "file",
67
+ ".jpeg": "file",
68
+ ".gif": "file",
69
+ ".css": "css"
70
+ },
71
+ entryNames: `[name]-[hash]`,
72
+ chunkNames: `chunk-[hash]`,
73
+ assetNames: `asset-[hash]`,
74
+ define: {
75
+ "process.env.NODE_ENV": minify ? '"production"' : '"development"'
76
+ }
77
+ });
78
+ const files = await fs.readdir(path.join(pageOutDir, "assets"));
79
+ const mainJs = files.find((f) => f.startsWith(`${baseName}-`) && f.endsWith(".js"));
80
+ if (!mainJs)
81
+ throw new Error(`Failed to locate entry JS for ${entry}`);
82
+ await fs.mkdir(pageOutDir, { recursive: true });
83
+ await fs.writeFile(
84
+ path.join(pageOutDir, "index.html"),
85
+ htmlTemplate({
86
+ title: baseName,
87
+ scriptPath: `./assets/${mainJs}`
88
+ }),
89
+ "utf8"
90
+ );
91
+ return { baseName, route };
92
+ }
93
+ async function buildWidgets(projectPath, watch = false) {
94
+ const srcDir = path.join(projectPath, SRC_DIR);
95
+ const outDir = path.join(projectPath, OUT_DIR);
96
+ await fs.rm(outDir, { recursive: true, force: true });
97
+ const entries = await globby([`${srcDir}/**/*.tsx`]);
98
+ if (!watch) {
99
+ console.log(`Building ${entries.length} widget files...`);
100
+ }
101
+ if (watch) {
102
+ const contexts = [];
103
+ for (const entry of entries) {
104
+ const relativePath = path.relative(projectPath, entry);
105
+ const route = toRoute(relativePath);
106
+ const pageOutDir = path.join(projectPath, outDirForRoute(route));
107
+ const baseName = path.parse(entry).name;
108
+ const ctx = await context({
109
+ entryPoints: [entry],
110
+ bundle: true,
111
+ splitting: true,
112
+ format: "esm",
113
+ platform: "browser",
114
+ target: "es2018",
115
+ sourcemap: true,
116
+ minify: false,
117
+ outdir: path.join(pageOutDir, "assets"),
118
+ logLevel: "silent",
119
+ loader: {
120
+ ".svg": "file",
121
+ ".png": "file",
122
+ ".jpg": "file",
123
+ ".jpeg": "file",
124
+ ".gif": "file",
125
+ ".css": "css"
126
+ },
127
+ entryNames: `[name]-[hash]`,
128
+ chunkNames: `chunk-[hash]`,
129
+ assetNames: `asset-[hash]`,
130
+ define: {
131
+ "process.env.NODE_ENV": '"development"'
132
+ },
133
+ plugins: [{
134
+ name: "html-writer",
135
+ setup(build2) {
136
+ build2.onEnd(async () => {
137
+ try {
138
+ const files = await fs.readdir(path.join(pageOutDir, "assets"));
139
+ const mainJs = files.find((f) => f.startsWith(`${baseName}-`) && f.endsWith(".js"));
140
+ if (mainJs) {
141
+ await fs.mkdir(pageOutDir, { recursive: true });
142
+ await fs.writeFile(
143
+ path.join(pageOutDir, "index.html"),
144
+ htmlTemplate({
145
+ title: baseName,
146
+ scriptPath: `./assets/${mainJs}`
147
+ }),
148
+ "utf8"
149
+ );
150
+ }
151
+ } catch (err) {
152
+ console.error(`Error writing HTML for ${baseName}:`, err);
153
+ }
154
+ });
155
+ }
156
+ }]
157
+ });
158
+ contexts.push(ctx);
159
+ }
160
+ for (const ctx of contexts) {
161
+ await ctx.watch();
162
+ }
163
+ } else {
164
+ for (const entry of entries) {
165
+ const { baseName, route } = await buildWidget(entry, projectPath);
166
+ console.log(`\x1B[32m\u2713\x1B[0m Built ${baseName} -> ${route}`);
167
+ }
168
+ console.log("Build complete!");
169
+ }
170
+ }
171
+
172
+ // src/index.ts
173
+ import { spawn } from "child_process";
174
+ import { promises as fs2 } from "fs";
175
+ import path2 from "path";
176
+ import open from "open";
177
+ var program = new Command();
178
+ program.name("mcp-use").description("MCP CLI tool").version("2.0.1");
179
+ async function isPortAvailable(port) {
180
+ try {
181
+ const response = await fetch(`http://localhost:${port}`);
182
+ return false;
183
+ } catch {
184
+ return true;
185
+ }
186
+ }
187
+ async function findAvailablePort(startPort) {
188
+ for (let port = startPort; port < startPort + 100; port++) {
189
+ if (await isPortAvailable(port)) {
190
+ return port;
191
+ }
192
+ }
193
+ throw new Error("No available ports found");
194
+ }
195
+ async function waitForServer(port, maxAttempts = 30) {
196
+ for (let i = 0; i < maxAttempts; i++) {
197
+ try {
198
+ const response = await fetch(`http://localhost:${port}/inspector`);
199
+ if (response.ok) {
200
+ return true;
201
+ }
202
+ } catch {
203
+ }
204
+ await new Promise((resolve) => setTimeout(resolve, 1e3));
205
+ }
206
+ return false;
207
+ }
208
+ function runCommand(command, args, cwd) {
209
+ return new Promise((resolve, reject) => {
210
+ const proc = spawn(command, args, {
211
+ cwd,
212
+ stdio: "inherit",
213
+ shell: false
214
+ });
215
+ proc.on("error", reject);
216
+ proc.on("exit", (code) => {
217
+ if (code === 0) {
218
+ resolve();
219
+ } else {
220
+ reject(new Error(`Command failed with exit code ${code}`));
221
+ }
222
+ });
223
+ });
224
+ }
225
+ program.command("build").description("Build TypeScript and MCP UI widgets").option("-p, --path <path>", "Path to project directory", process.cwd()).action(async (options) => {
226
+ try {
227
+ const projectPath = path2.resolve(options.path);
228
+ console.log("\x1B[36m\x1B[1mmcp-use\x1B[0m \x1B[90mVersion: 2.0.1\x1B[0m\n");
229
+ console.log("Building TypeScript...");
230
+ await runCommand("npx", ["tsc"], projectPath);
231
+ console.log("\x1B[32m\u2713\x1B[0m TypeScript build complete!");
232
+ await buildWidgets(projectPath, false);
233
+ } catch (error) {
234
+ console.error("Build failed:", error);
235
+ process.exit(1);
236
+ }
237
+ });
238
+ 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) => {
239
+ try {
240
+ const projectPath = path2.resolve(options.path);
241
+ let port = parseInt(options.port, 10);
242
+ console.log("\x1B[36m\x1B[1mmcp-use\x1B[0m \x1B[90mVersion: 2.0.1\x1B[0m\n");
243
+ if (!await isPortAvailable(port)) {
244
+ console.log(`\x1B[33m\u26A0\uFE0F Port ${port} is already in use\x1B[0m`);
245
+ const availablePort = await findAvailablePort(port);
246
+ console.log(`\x1B[32m\u2713\x1B[0m Using port ${availablePort} instead`);
247
+ port = availablePort;
248
+ }
249
+ let serverFile = "src/server.ts";
250
+ try {
251
+ await fs2.access(path2.join(projectPath, serverFile));
252
+ } catch {
253
+ serverFile = "src/index.ts";
254
+ }
255
+ const processes = [];
256
+ const tscProc = spawn("npx", ["tsc", "--watch"], {
257
+ cwd: projectPath,
258
+ stdio: "pipe",
259
+ shell: false
260
+ });
261
+ tscProc.stdout?.on("data", (data) => {
262
+ const output = data.toString();
263
+ if (output.includes("Watching for file changes")) {
264
+ console.log("\x1B[32m\u2713\x1B[0m TypeScript compiler watching...");
265
+ }
266
+ });
267
+ processes.push(tscProc);
268
+ buildWidgets(projectPath, true).catch((error) => {
269
+ console.error("Widget builder failed:", error);
270
+ });
271
+ await new Promise((resolve) => setTimeout(resolve, 2e3));
272
+ const serverProc = spawn("npx", ["tsx", "watch", serverFile], {
273
+ cwd: projectPath,
274
+ stdio: "pipe",
275
+ shell: false,
276
+ env: { ...process.env, PORT: String(port) }
277
+ });
278
+ serverProc.stderr?.on("data", (data) => {
279
+ const output = data.toString();
280
+ if (output.includes("EADDRINUSE")) {
281
+ console.log(`\x1B[31m\u2717\x1B[0m Port ${port} is still in use. Please try a different port with --port`);
282
+ console.log(`\x1B[90mHint: Use --port 3001 or kill the process using port ${port}\x1B[0m`);
283
+ process.exit(1);
284
+ }
285
+ });
286
+ serverProc.stdout?.on("data", (data) => {
287
+ process.stdout.write(data);
288
+ });
289
+ processes.push(serverProc);
290
+ if (options.open !== false) {
291
+ const startTime = Date.now();
292
+ const ready = await waitForServer(port);
293
+ if (ready) {
294
+ const mcpUrl = `http://localhost:${port}/mcp`;
295
+ const inspectorUrl = `http://localhost:${port}/inspector?autoConnect=${encodeURIComponent(mcpUrl)}`;
296
+ const readyTime = Date.now() - startTime;
297
+ console.log(`
298
+ \x1B[32m\u2713\x1B[0m Ready in ${readyTime}ms`);
299
+ console.log(`Local: http://localhost:${port}`);
300
+ console.log(`Network: http://localhost:${port}`);
301
+ console.log(`MCP: ${mcpUrl}`);
302
+ console.log(`Inspector: ${inspectorUrl}
303
+ `);
304
+ await open(inspectorUrl);
305
+ }
306
+ }
307
+ const cleanup = () => {
308
+ console.log("\n\nShutting down...");
309
+ processes.forEach((proc) => proc.kill());
310
+ process.exit(0);
311
+ };
312
+ process.on("SIGINT", cleanup);
313
+ process.on("SIGTERM", cleanup);
314
+ await new Promise(() => {
315
+ });
316
+ } catch (error) {
317
+ console.error("Dev mode failed:", error);
318
+ process.exit(1);
319
+ }
320
+ });
321
+ 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) => {
322
+ try {
323
+ const projectPath = path2.resolve(options.path);
324
+ const port = parseInt(options.port, 10);
325
+ console.log("\x1B[36m\x1B[1mmcp-use\x1B[0m \x1B[90mVersion: 2.0.1\x1B[0m\n");
326
+ let serverFile = "dist/server.js";
327
+ try {
328
+ await fs2.access(path2.join(projectPath, serverFile));
329
+ } catch {
330
+ serverFile = "dist/index.js";
331
+ }
332
+ console.log("Starting production server...");
333
+ const serverProc = spawn("node", [serverFile], {
334
+ cwd: projectPath,
335
+ stdio: "inherit",
336
+ env: { ...process.env, PORT: String(port) }
337
+ });
338
+ const cleanup = () => {
339
+ console.log("\n\nShutting down...");
340
+ serverProc.kill();
341
+ process.exit(0);
342
+ };
343
+ process.on("SIGINT", cleanup);
344
+ process.on("SIGTERM", cleanup);
345
+ serverProc.on("exit", (code) => {
346
+ process.exit(code || 0);
347
+ });
348
+ } catch (error) {
349
+ console.error("Start failed:", error);
350
+ process.exit(1);
351
+ }
352
+ });
353
+ program.parse();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-use/cli",
3
- "version": "2.0.1",
3
+ "version": "2.0.2",
4
4
  "description": "Build tool for MCP UI widgets - bundles React components into standalone HTML pages for Model Context Protocol servers",
5
5
  "author": "mcp-use, Inc.",
6
6
  "license": "MIT",
@@ -35,8 +35,10 @@
35
35
  "commander": "^11.0.0",
36
36
  "esbuild": "^0.19.0",
37
37
  "globby": "^14.0.0",
38
- "mcp-use": "0.2.0",
39
- "@mcp-use/inspector": "0.1.0"
38
+ "open": "^10.0.0",
39
+ "tsx": "^4.0.0",
40
+ "mcp-use": "0.3.0",
41
+ "@mcp-use/inspector": "0.2.1"
40
42
  },
41
43
  "devDependencies": {
42
44
  "@types/node": "^20.0.0",
@@ -47,7 +49,7 @@
47
49
  "access": "public"
48
50
  },
49
51
  "scripts": {
50
- "build": "tsc",
52
+ "build": "tsup src/index.ts --format cjs,esm && tsc --emitDeclarationOnly --declaration",
51
53
  "dev": "tsc --watch",
52
54
  "test": "vitest"
53
55
  }
package/dist/build.d.mts DELETED
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=build.d.mts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"build.d.mts","sourceRoot":"","sources":["../src/build.mts"],"names":[],"mappings":""}
package/dist/build.js DELETED
@@ -1,105 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.buildWidgets = buildWidgets;
7
- const node_fs_1 = require("node:fs");
8
- const node_path_1 = __importDefault(require("node:path"));
9
- const esbuild_1 = require("esbuild");
10
- const globby_1 = require("globby");
11
- const ROUTE_PREFIX = '/mcp-use/widgets';
12
- const SRC_DIR = 'resources';
13
- const OUT_DIR = 'dist/resources';
14
- function toRoute(file) {
15
- const rel = file.replace(new RegExp(`^${SRC_DIR}/`), '').replace(/\.tsx?$/, '');
16
- return `${ROUTE_PREFIX}/${rel}`;
17
- }
18
- function outDirForRoute(route) {
19
- return node_path_1.default.join(OUT_DIR, route.replace(/^\//, ''));
20
- }
21
- function htmlTemplate({ title, scriptPath }) {
22
- return `<!doctype html>
23
- <html lang="en">
24
- <head>
25
- <meta charset="UTF-8" />
26
- <meta name="viewport" content="width=device-width,initial-scale=1" />
27
- <title>${title} Widget</title>
28
- <style>
29
- body {
30
- margin: 0;
31
- padding: 20px;
32
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
33
- background: #f5f5f5;
34
- }
35
- #widget-root {
36
- max-width: 1200px;
37
- margin: 0 auto;
38
- }
39
- </style>
40
- </head>
41
- <body>
42
- <div id="widget-root"></div>
43
- <script type="module" src="${scriptPath}"></script>
44
- </body>
45
- </html>`;
46
- }
47
- async function buildWidgets(projectPath) {
48
- console.log('🔨 Building UI widgets with esbuild...');
49
- const srcDir = node_path_1.default.join(projectPath, SRC_DIR);
50
- const outDir = node_path_1.default.join(projectPath, OUT_DIR);
51
- // Clean dist
52
- await node_fs_1.promises.rm(outDir, { recursive: true, force: true });
53
- // Find all TSX entries
54
- const entries = await (0, globby_1.globby)([`${srcDir}/**/*.tsx`]);
55
- console.log(`📦 Found ${entries.length} widget files`);
56
- // Build each entry as an isolated page with hashed output
57
- for (const entry of entries) {
58
- const relativePath = node_path_1.default.relative(projectPath, entry);
59
- const route = toRoute(relativePath);
60
- const pageOutDir = node_path_1.default.join(projectPath, outDirForRoute(route));
61
- const baseName = node_path_1.default.parse(entry).name;
62
- console.log(`🔨 Building ${baseName}...`);
63
- // Build JS/CSS chunks for this page
64
- await (0, esbuild_1.build)({
65
- entryPoints: [entry],
66
- bundle: true,
67
- splitting: true,
68
- format: 'esm',
69
- platform: 'browser',
70
- target: 'es2018',
71
- sourcemap: false,
72
- minify: true,
73
- outdir: node_path_1.default.join(pageOutDir, 'assets'),
74
- logLevel: 'silent',
75
- loader: {
76
- '.svg': 'file',
77
- '.png': 'file',
78
- '.jpg': 'file',
79
- '.jpeg': 'file',
80
- '.gif': 'file',
81
- '.css': 'css',
82
- },
83
- entryNames: `[name]-[hash]`,
84
- chunkNames: `chunk-[hash]`,
85
- assetNames: `asset-[hash]`,
86
- define: {
87
- 'process.env.NODE_ENV': '"production"',
88
- },
89
- });
90
- // Find the main entry file name
91
- const files = await node_fs_1.promises.readdir(node_path_1.default.join(pageOutDir, 'assets'));
92
- const mainJs = files.find(f => f.startsWith(`${baseName}-`) && f.endsWith('.js'));
93
- if (!mainJs)
94
- throw new Error(`Failed to locate entry JS for ${entry}`);
95
- // Write an index.html that points to the entry
96
- await node_fs_1.promises.mkdir(pageOutDir, { recursive: true });
97
- await node_fs_1.promises.writeFile(node_path_1.default.join(pageOutDir, 'index.html'), htmlTemplate({
98
- title: baseName,
99
- scriptPath: `./assets/${mainJs}`,
100
- }), 'utf8');
101
- console.log(`✅ Built ${baseName} -> ${route}`);
102
- }
103
- console.log('🎉 Build complete!');
104
- }
105
- //# sourceMappingURL=build.js.map
package/dist/build.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"build.js","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"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"}
package/dist/build.mjs DELETED
@@ -1,106 +0,0 @@
1
- "use strict";
2
- import { promises as fs } from 'node:fs';
3
- import path from 'node:path';
4
- // Using: esbuild + node >= 18
5
- import { build } from 'esbuild';
6
- import { globby } from 'globby';
7
- const ROUTE_PREFIX = '/mcp-use/widgets'; // <- MCP widget prefix
8
- const SRC_DIR = 'resources';
9
- const OUT_DIR = 'dist/resources';
10
- function toRoute(file) {
11
- // resources/kanban-board.tsx -> /mcp-use/widgets/kanban-board
12
- // resources/dashboard/stats.tsx -> /mcp-use/widgets/dashboard/stats
13
- const rel = file.replace(new RegExp(`^${SRC_DIR}/`), '').replace(/\.tsx?$/, '');
14
- return `${ROUTE_PREFIX}/${rel}`;
15
- }
16
- function outDirForRoute(route) {
17
- // dist/resources/mcp-use/widgets/kanban-board
18
- return path.join(OUT_DIR, route.replace(/^\//, ''));
19
- }
20
- function htmlTemplate({ title, scriptPath }) {
21
- return `<!doctype html>
22
- <html lang="en">
23
- <head>
24
- <meta charset="UTF-8" />
25
- <meta name="viewport" content="width=device-width,initial-scale=1" />
26
- <title>${title} Widget</title>
27
- <style>
28
- body {
29
- margin: 0;
30
- padding: 20px;
31
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
32
- background: #f5f5f5;
33
- }
34
- #widget-root {
35
- max-width: 1200px;
36
- margin: 0 auto;
37
- }
38
- </style>
39
- </head>
40
- <body>
41
- <div id="widget-root"></div>
42
- <script type="module" src="${scriptPath}"></script>
43
- </body>
44
- </html>`;
45
- }
46
- async function main() {
47
- console.log('🔨 Building UI widgets with esbuild...');
48
- // Clean dist
49
- await fs.rm(OUT_DIR, { recursive: true, force: true });
50
- // Find all TSX entries
51
- const entries = await globby([`${SRC_DIR}/**/*.tsx`]);
52
- console.log(`📦 Found ${entries.length} widget files`);
53
- // Build each entry as an isolated page with hashed output
54
- for (const entry of entries) {
55
- const route = toRoute(entry);
56
- const pageOutDir = outDirForRoute(route);
57
- const baseName = path.parse(entry).name;
58
- console.log(`🔨 Building ${baseName}...`);
59
- // Build JS/CSS chunks for this page
60
- const _result = await build({
61
- entryPoints: [entry],
62
- bundle: true,
63
- splitting: true,
64
- format: 'esm',
65
- platform: 'browser',
66
- target: 'es2018',
67
- sourcemap: false,
68
- minify: true,
69
- outdir: path.join(pageOutDir, 'assets'),
70
- logLevel: 'silent',
71
- loader: {
72
- '.svg': 'file',
73
- '.png': 'file',
74
- '.jpg': 'file',
75
- '.jpeg': 'file',
76
- '.gif': 'file',
77
- '.css': 'css',
78
- },
79
- // Unique chunk names per page to avoid collisions
80
- entryNames: `[name]-[hash]`,
81
- chunkNames: `chunk-[hash]`,
82
- assetNames: `asset-[hash]`,
83
- define: {
84
- 'process.env.NODE_ENV': '"production"',
85
- },
86
- });
87
- // Find the main entry file name
88
- const files = await fs.readdir(path.join(pageOutDir, 'assets'));
89
- const mainJs = files.find(f => f.startsWith(`${baseName}-`) && f.endsWith('.js'));
90
- if (!mainJs)
91
- throw new Error(`Failed to locate entry JS for ${entry}`);
92
- // Write an index.html that points to the entry
93
- await fs.mkdir(pageOutDir, { recursive: true });
94
- await fs.writeFile(path.join(pageOutDir, 'index.html'), htmlTemplate({
95
- title: baseName,
96
- scriptPath: `./assets/${mainJs}`,
97
- }), 'utf8');
98
- console.log(`✅ Built ${baseName} -> ${route}`);
99
- }
100
- console.log('🎉 Build complete!');
101
- }
102
- main().catch((err) => {
103
- console.error('❌ Build failed:', err);
104
- process.exit(1);
105
- });
106
- //# sourceMappingURL=build.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"build.mjs","sourceRoot":"","sources":["../src/build.mts"],"names":[],"mappings":"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"}
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AACA,yCAAoC;AACpC,mCAAuC;AAEvC,MAAM,OAAO,GAAG,IAAI,mBAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,SAAS,CAAC;KACf,WAAW,CAAC,cAAc,CAAC;KAC3B,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,OAAO,CAAC,OAAO,CAAC;KAChB,WAAW,CAAC,sBAAsB,CAAC;KACnC,MAAM,CAAC,mBAAmB,EAAE,2BAA2B,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC;KACvE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;IACxB,IAAI,CAAC;QACH,MAAM,IAAA,oBAAY,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QACtC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;AACH,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,KAAK,EAAE,CAAC"}