@mcp-use/cli 2.1.12 → 2.1.13-canary.0

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.
Files changed (2) hide show
  1. package/README.md +32 -22
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
  </picture>
7
7
  </div>
8
8
 
9
- <h1 align="center">MCP-Use CLI</h1>
9
+ <h1 align="center">mcp-use CLI</h1>
10
10
 
11
11
  <p align="center">
12
12
  <a href="https://www.npmjs.com/package/@mcp-use/cli" alt="NPM Downloads">
@@ -21,28 +21,28 @@
21
21
  <img src="https://dcbadge.limes.pink/api/server/XkNkSkMz3V?style=flat" /></a>
22
22
  </p>
23
23
 
24
- 🛠️ **MCP-Use CLI** is a powerful build and development tool for creating MCP (Model Context Protocol) applications with integrated UI widgets. It enables developers to build MCP servers with custom React components that can be served alongside their MCP tools, providing rich visual interfaces for AI interactions.
24
+ 🛠️ **mcp-use CLI** is a powerful build and development tool for creating MCP (Model Context Protocol) applications with integrated UI widgets. It enables developers to build MCP servers with custom React components that can be served alongside their MCP tools, providing rich visual interfaces for AI interactions.
25
25
 
26
26
  ## 📦 Related Packages
27
27
 
28
- | Package | Description | Version |
29
- |---------|-------------|---------|
30
- | [mcp-use](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/mcp-use) | Core MCP framework | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use) |
31
- | [@mcp-use/inspector](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/inspector) | Web-based MCP inspector | [![npm](https://img.shields.io/npm/v/@mcp-use/inspector.svg)](https://www.npmjs.com/package/@mcp-use/inspector) |
32
- | [create-mcp-use-app](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/create-mcp-use-app) | Create MCP apps | [![npm](https://img.shields.io/npm/v/create-mcp-use-app.svg)](https://www.npmjs.com/package/create-mcp-use-app) |
28
+ | Package | Description | Version |
29
+ | ------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------- |
30
+ | [mcp-use](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/mcp-use) | Core MCP framework | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use) |
31
+ | [@mcp-use/inspector](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/inspector) | Web-based MCP inspector | [![npm](https://img.shields.io/npm/v/@mcp-use/inspector.svg)](https://www.npmjs.com/package/@mcp-use/inspector) |
32
+ | [create-mcp-use-app](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/create-mcp-use-app) | Create MCP apps | [![npm](https://img.shields.io/npm/v/create-mcp-use-app.svg)](https://www.npmjs.com/package/create-mcp-use-app) |
33
33
 
34
34
  ---
35
35
 
36
36
  ## ✨ Key Features
37
37
 
38
- | Feature | Description |
39
- |---------|-------------|
40
- | **🚀 Auto Inspector** | Automatically opens the MCP Inspector in your browser when development server starts |
41
- | **♻️ Hot Reload** | Development mode with automatic reloading for both server code and UI widgets |
42
- | **🎨 Widget Builder** | Compiles React components into standalone HTML pages with all dependencies bundled |
43
- | **📦 Production Ready** | Optimized production builds with hashed assets for caching |
44
- | **🛠️ TypeScript First** | Full TypeScript support with watch mode compilation |
45
- | **🖥️ Multi-Environment** | Separate commands for development, build, and production deployment |
38
+ | Feature | Description |
39
+ | ------------------------ | ------------------------------------------------------------------------------------ |
40
+ | **🚀 Auto Inspector** | Automatically opens the MCP Inspector in your browser when development server starts |
41
+ | **♻️ Hot Reload** | Development mode with automatic reloading for both server code and UI widgets |
42
+ | **🎨 Widget Builder** | Compiles React components into standalone HTML pages with all dependencies bundled |
43
+ | **📦 Production Ready** | Optimized production builds with hashed assets for caching |
44
+ | **🛠️ TypeScript First** | Full TypeScript support with watch mode compilation |
45
+ | **🖥️ Multi-Environment** | Separate commands for development, build, and production deployment |
46
46
 
47
47
  ---
48
48
 
@@ -72,6 +72,7 @@ mcp-use dev [options]
72
72
  ```
73
73
 
74
74
  **What happens in dev mode:**
75
+
75
76
  1. TypeScript files are compiled in watch mode
76
77
  2. UI widgets are built with hot reload
77
78
  3. Server runs with auto-restart on changes (via tsx)
@@ -79,6 +80,7 @@ mcp-use dev [options]
79
80
  5. MCP endpoint is available at `http://localhost:3000/mcp`
80
81
 
81
82
  **Options:**
83
+
82
84
  - `-p, --path <path>` - Project directory (default: current directory)
83
85
  - `--port <port>` - Server port (default: 3000)
84
86
  - `--no-open` - Don't auto-open inspector in browser
@@ -92,12 +94,14 @@ mcp-use build [options]
92
94
  ```
93
95
 
94
96
  **What happens during build:**
97
+
95
98
  1. TypeScript is compiled to JavaScript
96
99
  2. All `.tsx` files in `resources/` are bundled as standalone HTML pages
97
100
  3. Assets are hashed for optimal caching
98
101
  4. Output is optimized and minified
99
102
 
100
103
  **Options:**
104
+
101
105
  - `-p, --path <path>` - Project directory (default: current directory)
102
106
 
103
107
  ### Production Server
@@ -109,6 +113,7 @@ mcp-use start [options]
109
113
  ```
110
114
 
111
115
  **Options:**
116
+
112
117
  - `-p, --path <path>` - Project directory (default: current directory)
113
118
  - `--port <port>` - Server port (default: 3000)
114
119
 
@@ -227,7 +232,7 @@ export default function TaskManager() {
227
232
 
228
233
  await callTool('create_task', {
229
234
  title: newTask,
230
- status: 'pending'
235
+ status: 'pending',
231
236
  })
232
237
 
233
238
  setNewTask('')
@@ -258,7 +263,7 @@ export default function TaskManager() {
258
263
  </div>
259
264
 
260
265
  <ul className="space-y-2">
261
- {tasks.map(task => (
266
+ {tasks.map((task) => (
262
267
  <li key={task.id} className="p-2 border rounded">
263
268
  {task.title}
264
269
  </li>
@@ -349,9 +354,10 @@ import path from 'path'
349
354
  const app = express()
350
355
 
351
356
  // Serve MCP widgets
352
- app.use('/widgets', express.static(
353
- path.join(__dirname, '../dist/resources/mcp-use/widgets')
354
- ))
357
+ app.use(
358
+ '/widgets',
359
+ express.static(path.join(__dirname, '../dist/resources/mcp-use/widgets'))
360
+ )
355
361
 
356
362
  // Your other routes...
357
363
  ```
@@ -363,12 +369,14 @@ app.use('/widgets', express.static(
363
369
  ### Common Issues
364
370
 
365
371
  **Port already in use:**
372
+
366
373
  ```bash
367
374
  # Use a different port
368
375
  mcp-use dev --port 3001
369
376
  ```
370
377
 
371
378
  **TypeScript compilation errors:**
379
+
372
380
  ```bash
373
381
  # Check your tsconfig.json
374
382
  # Ensure all dependencies are installed
@@ -376,11 +384,13 @@ npm install
376
384
  ```
377
385
 
378
386
  **Widgets not loading:**
387
+
379
388
  - Ensure `.tsx` files are in the `resources/` directory
380
389
  - Check that React dependencies are installed
381
390
  - Verify the build output in `dist/resources/mcp-use/widgets/`
382
391
 
383
392
  **Inspector not opening:**
393
+
384
394
  ```bash
385
395
  # Manually open http://localhost:3000/inspector
386
396
  # Or disable auto-open
@@ -391,7 +401,7 @@ mcp-use dev --no-open
391
401
 
392
402
  ## 📚 Learn More
393
403
 
394
- - [MCP-Use Documentation](https://github.com/mcp-use/mcp-use-ts)
404
+ - [mcp-use Documentation](https://github.com/mcp-use/mcp-use-ts)
395
405
  - [Model Context Protocol](https://modelcontextprotocol.io)
396
406
  - [Creating MCP Servers](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/mcp-use#-mcp-server-framework)
397
407
  - [MCP Inspector Guide](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/inspector)
@@ -400,4 +410,4 @@ mcp-use dev --no-open
400
410
 
401
411
  ## 📜 License
402
412
 
403
- MIT © [MCP-Use](https://github.com/mcp-use)
413
+ MIT © [mcp-use](https://github.com/mcp-use)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-use/cli",
3
- "version": "2.1.12",
3
+ "version": "2.1.13-canary.0",
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",
@@ -37,8 +37,8 @@
37
37
  "globby": "^14.0.0",
38
38
  "open": "^10.0.0",
39
39
  "tsx": "^4.0.0",
40
- "mcp-use": "1.1.0",
41
- "@mcp-use/inspector": "0.4.0"
40
+ "mcp-use": "1.1.1-canary.0",
41
+ "@mcp-use/inspector": "0.4.1-canary.0"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@types/node": "^20.0.0",