create-mcp-use-app 2.0.0-beta.1 → 2.0.0-beta.11
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 +74 -47
- package/dist/index.js +71 -96
- package/dist/templates/blank/README.md +3 -1
- package/dist/templates/{mcp-apps/tools.d.ts → blank/mcp-env.d.ts} +3 -1
- package/dist/templates/blank/package.json +15 -8
- package/dist/templates/blank/tsconfig.json +14 -10
- package/dist/templates/mcp-apps/README.md +3 -1
- package/dist/templates/mcp-apps/index.ts +98 -24
- package/dist/templates/mcp-apps/mcp-env.d.ts +10 -0
- package/dist/templates/mcp-apps/package.json +17 -15
- package/dist/templates/mcp-apps/public/logo-mcp-use.svg +8 -0
- package/dist/templates/mcp-apps/tsconfig.json +9 -3
- package/dist/templates/mcp-apps/views/my-view/MeshGradient.tsx +299 -0
- package/dist/templates/mcp-apps/views/my-view/Tooltip.tsx +75 -0
- package/dist/templates/mcp-apps/views/my-view/icons.tsx +142 -0
- package/dist/templates/mcp-apps/views/my-view/view.css +5 -0
- package/dist/templates/mcp-apps/views/my-view/view.tsx +396 -0
- package/dist/templates/{starter → mcp-server}/README.md +4 -2
- package/dist/templates/{starter → mcp-server}/index.ts +1 -19
- package/dist/templates/mcp-server/mcp-env.d.ts +10 -0
- package/dist/templates/{starter → mcp-server}/package.json +15 -11
- package/dist/templates/mcp-server/tsconfig.json +24 -0
- package/package.json +3 -3
- package/dist/templates/blank/public/favicon.ico +0 -0
- package/dist/templates/mcp-apps/public/favicon.ico +0 -0
- package/dist/templates/mcp-apps/public/fruits/apple.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/apricot.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/avocado.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/banana.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/blueberry.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/cherries.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/coconut.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/grapes.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/lemon.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/mango.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/orange.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/pear.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/pineapple.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/plum.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/strawberry.png +0 -0
- package/dist/templates/mcp-apps/public/fruits/watermelon.png +0 -0
- package/dist/templates/mcp-apps/resources/product-search-result/view.tsx +0 -25
- package/dist/templates/starter/public/favicon.ico +0 -0
- package/dist/templates/starter/tsconfig.json +0 -20
- /package/dist/templates/{starter → mcp-server}/gitignore +0 -0
- /package/dist/templates/{starter → mcp-server}/public/icon.svg +0 -0
package/README.md
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<img src="https://dcbadge.limes.pink/api/server/XkNkSkMz3V?style=flat" /></a>
|
|
22
22
|
</p>
|
|
23
23
|
|
|
24
|
-
🚀 **Create mcp-use App**
|
|
24
|
+
🚀 **Create mcp-use App** scaffolds a TypeScript MCP project with hot reload, the inspector, and MCP Apps view support.
|
|
25
25
|
|
|
26
26
|
## 📦 Related Packages
|
|
27
27
|
|
|
@@ -48,22 +48,20 @@ That's it! Your MCP server is running at `http://localhost:3000` with the inspec
|
|
|
48
48
|
|
|
49
49
|
## 🎯 What It Creates
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
The `mcp-apps` template creates this MCP development environment:
|
|
52
52
|
|
|
53
53
|
### Project Structure
|
|
54
54
|
|
|
55
55
|
```
|
|
56
56
|
my-mcp-server/
|
|
57
|
-
├──
|
|
58
|
-
├──
|
|
59
|
-
├── .
|
|
60
|
-
├── .
|
|
61
|
-
├──
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
│ └── example-widget.tsx # Example React widget
|
|
66
|
-
└── dist/ # Build output (generated)
|
|
57
|
+
├── index.ts # MCP server entry point
|
|
58
|
+
├── package.json # Scripts and dependencies
|
|
59
|
+
├── tsconfig.json # TypeScript configuration
|
|
60
|
+
├── mcp-env.d.ts # Managed view typing bridge
|
|
61
|
+
├── public/ # Static assets
|
|
62
|
+
└── views/ # Included by the mcp-apps template
|
|
63
|
+
└── product-search-result/
|
|
64
|
+
└── view.tsx # React view entry point
|
|
67
65
|
```
|
|
68
66
|
|
|
69
67
|
### Pre-configured Features
|
|
@@ -73,9 +71,10 @@ my-mcp-server/
|
|
|
73
71
|
| **📝 TypeScript** | Full TypeScript setup with proper types |
|
|
74
72
|
| **🔥 Hot Reload** | Auto-restart on code changes during development |
|
|
75
73
|
| **🔍 Auto Inspector** | Inspector UI opens automatically in dev mode |
|
|
76
|
-
| **🎨
|
|
74
|
+
| **🎨 MCP Apps Views** | React views discovered and bundled by the CLI |
|
|
77
75
|
| **🛠️ Example Tools** | Sample MCP tools, resources, and prompts |
|
|
78
76
|
| **📦 Build Scripts** | Ready-to-use development and production scripts |
|
|
77
|
+
| **✅ Type Checking** | Refreshes MCP view types, then runs local TypeScript |
|
|
79
78
|
| **🚀 Production Ready** | Optimized build configuration |
|
|
80
79
|
|
|
81
80
|
---
|
|
@@ -120,8 +119,8 @@ npx create-mcp-use-app my-project --template owner/repo#branch-name
|
|
|
120
119
|
|
|
121
120
|
# Use a specific package manager
|
|
122
121
|
npx create-mcp-use-app my-project --npm
|
|
123
|
-
npx create-mcp-use-app my-project --yarn
|
|
124
122
|
npx create-mcp-use-app my-project --pnpm
|
|
123
|
+
npx create-mcp-use-app my-project --bun
|
|
125
124
|
|
|
126
125
|
# Install deps automatically (or --no-install to skip and skip prompt)
|
|
127
126
|
npx create-mcp-use-app my-project --install
|
|
@@ -139,25 +138,24 @@ npx create-mcp-use-app --list-templates
|
|
|
139
138
|
|
|
140
139
|
## 🎨 Available Templates
|
|
141
140
|
|
|
142
|
-
###
|
|
141
|
+
### MCP Server Template
|
|
143
142
|
|
|
144
|
-
The
|
|
143
|
+
The `mcp-server` template includes:
|
|
145
144
|
|
|
146
|
-
-
|
|
147
|
-
- Example tool
|
|
148
|
-
-
|
|
149
|
-
- Full TypeScript configuration
|
|
145
|
+
- MCP server setup with TypeScript configuration
|
|
146
|
+
- Example tool (`fetch-weather`) with structured output
|
|
147
|
+
- Example prompt (`review-code`)
|
|
150
148
|
- Development and production scripts
|
|
151
149
|
|
|
152
|
-
|
|
150
|
+
Ideal for building MCP servers with tools and prompts (no widgets or resources).
|
|
153
151
|
|
|
154
152
|
### MCP Apps Template
|
|
155
153
|
|
|
156
154
|
The mcp-apps template includes:
|
|
157
155
|
|
|
158
156
|
- MCP server setup focused on OpenAI Apps SDK integration
|
|
159
|
-
- OpenAI Apps SDK compatible
|
|
160
|
-
- Example
|
|
157
|
+
- OpenAI Apps SDK compatible views under `views/<name>/view.tsx`
|
|
158
|
+
- Example `my-view` view with mesh gradient card and interactive demo hooks
|
|
161
159
|
- Optimized for OpenAI assistant integration
|
|
162
160
|
|
|
163
161
|
Ideal for building MCP servers that integrate with OpenAI's Apps SDK.
|
|
@@ -205,14 +203,11 @@ The scaffolded project includes these dependencies:
|
|
|
205
203
|
|
|
206
204
|
### Core Dependencies
|
|
207
205
|
|
|
208
|
-
- `mcp-use` - The MCP framework
|
|
209
|
-
- `@mcp-use/cli` - Build and development tool
|
|
210
|
-
- `@mcp-use/inspector` - Web-based debugger
|
|
206
|
+
- `mcp-use` - The MCP framework, including its CLI and built-in Inspector
|
|
211
207
|
|
|
212
208
|
### Development Dependencies
|
|
213
209
|
|
|
214
210
|
- `typescript` - TypeScript compiler
|
|
215
|
-
- `tsx` - TypeScript executor for development
|
|
216
211
|
- `@types/node` - Node.js type definitions
|
|
217
212
|
|
|
218
213
|
### Template-Specific Dependencies
|
|
@@ -233,9 +228,9 @@ Once your project is created, you can:
|
|
|
233
228
|
```bash
|
|
234
229
|
npm run dev
|
|
235
230
|
# or
|
|
236
|
-
yarn dev
|
|
237
|
-
# or
|
|
238
231
|
pnpm dev
|
|
232
|
+
# or
|
|
233
|
+
bun run dev
|
|
239
234
|
```
|
|
240
235
|
|
|
241
236
|
This will:
|
|
@@ -268,7 +263,7 @@ After creating your app, here's what to do next:
|
|
|
268
263
|
|
|
269
264
|
### 1. Explore the Example Server
|
|
270
265
|
|
|
271
|
-
Open `
|
|
266
|
+
Open `index.ts` to see how to:
|
|
272
267
|
|
|
273
268
|
- Define MCP tools with Zod schemas
|
|
274
269
|
- Create resources for data access
|
|
@@ -276,35 +271,67 @@ Open `src/index.ts` to see how to:
|
|
|
276
271
|
|
|
277
272
|
### 2. Try the Inspector
|
|
278
273
|
|
|
279
|
-
The inspector automatically opens at `http://localhost:3000/inspector` where you can:
|
|
274
|
+
The inspector automatically opens at `http://localhost:3000/mcp/inspector` where you can:
|
|
280
275
|
|
|
281
276
|
- Test your tools interactively
|
|
282
277
|
- View available resources
|
|
283
278
|
- Debug tool executions
|
|
284
279
|
- Monitor server status
|
|
285
280
|
|
|
286
|
-
### 3. Create
|
|
281
|
+
### 3. Create an MCP Apps view
|
|
287
282
|
|
|
288
|
-
|
|
283
|
+
Bind a tool to a view with the tool definition's `view` field:
|
|
284
|
+
|
|
285
|
+
```typescript
|
|
286
|
+
export const showAnalytics = server.tool(
|
|
287
|
+
{
|
|
288
|
+
name: "show-analytics",
|
|
289
|
+
description: "Show analytics for a reporting period",
|
|
290
|
+
inputSchema: z.object({ period: z.string() }),
|
|
291
|
+
outputSchema: z.object({ period: z.string(), visitors: z.number() }),
|
|
292
|
+
view: { name: "analytics-dashboard" },
|
|
293
|
+
},
|
|
294
|
+
async ({ period }) => {
|
|
295
|
+
const analytics = { period, visitors: 1_024 };
|
|
296
|
+
return {
|
|
297
|
+
content: [{ type: "text", text: JSON.stringify(analytics) }],
|
|
298
|
+
structuredContent: analytics,
|
|
299
|
+
};
|
|
300
|
+
}
|
|
301
|
+
);
|
|
302
|
+
```
|
|
303
|
+
|
|
304
|
+
Create the component at `views/analytics-dashboard/view.tsx`. Read the bound
|
|
305
|
+
tool result with `useToolContext`; call a server tool with `useCallTool`:
|
|
289
306
|
|
|
290
307
|
```tsx
|
|
291
|
-
import
|
|
292
|
-
|
|
308
|
+
import { useCallTool, useToolContext } from "mcp-use/react";
|
|
309
|
+
|
|
310
|
+
interface Analytics {
|
|
311
|
+
period: string;
|
|
312
|
+
visitors: number;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
export default function AnalyticsDashboard() {
|
|
316
|
+
const view = useToolContext();
|
|
317
|
+
const refresh = useCallTool("show-analytics");
|
|
293
318
|
|
|
294
|
-
|
|
295
|
-
|
|
319
|
+
if (view.status === "pending") return <p>Loading analytics…</p>;
|
|
320
|
+
if (view.status === "error") return <p>{view.error.message}</p>;
|
|
296
321
|
|
|
297
|
-
const
|
|
298
|
-
|
|
299
|
-
param: "value",
|
|
300
|
-
});
|
|
301
|
-
console.log(result);
|
|
302
|
-
};
|
|
322
|
+
const analytics =
|
|
323
|
+
refresh.data?.structuredContent ?? (view.toolOutput as Analytics);
|
|
303
324
|
|
|
304
325
|
return (
|
|
305
|
-
<
|
|
306
|
-
<
|
|
307
|
-
|
|
326
|
+
<main>
|
|
327
|
+
<h1>{analytics.visitors} visitors</h1>
|
|
328
|
+
<button
|
|
329
|
+
disabled={refresh.isPending}
|
|
330
|
+
onClick={() => void refresh.callTool({ period: analytics.period })}
|
|
331
|
+
>
|
|
332
|
+
Refresh
|
|
333
|
+
</button>
|
|
334
|
+
</main>
|
|
308
335
|
);
|
|
309
336
|
}
|
|
310
337
|
```
|
|
@@ -433,7 +460,7 @@ server.prompt("code_review", {
|
|
|
433
460
|
**Command not found:**
|
|
434
461
|
|
|
435
462
|
```bash
|
|
436
|
-
# Make sure you have Node.js
|
|
463
|
+
# Make sure you have Node.js 22.22.2+ installed
|
|
437
464
|
node --version
|
|
438
465
|
|
|
439
466
|
# Try with npx
|
package/dist/index.js
CHANGED
|
@@ -1321,7 +1321,7 @@ function updatePackageJson(projectPath, projectName) {
|
|
|
1321
1321
|
const packageJsonPath = join2(projectPath, "package.json");
|
|
1322
1322
|
const packageJsonContent = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
|
|
1323
1323
|
packageJsonContent.name = projectName;
|
|
1324
|
-
packageJsonContent.description =
|
|
1324
|
+
packageJsonContent.description = `${projectName}: an mcp-use server`;
|
|
1325
1325
|
writeFileSync(packageJsonPath, JSON.stringify(packageJsonContent, null, 2));
|
|
1326
1326
|
}
|
|
1327
1327
|
function updateIndexTs(projectPath, projectName) {
|
|
@@ -1346,10 +1346,10 @@ function parseCli(argv) {
|
|
|
1346
1346
|
install: { type: "boolean" },
|
|
1347
1347
|
skills: { type: "boolean" },
|
|
1348
1348
|
dev: { type: "boolean" },
|
|
1349
|
-
|
|
1350
|
-
yarn: { type: "boolean" },
|
|
1349
|
+
"sdk-version": { type: "string" },
|
|
1351
1350
|
npm: { type: "boolean" },
|
|
1352
1351
|
pnpm: { type: "boolean" },
|
|
1352
|
+
bun: { type: "boolean" },
|
|
1353
1353
|
help: { type: "boolean", short: "h" },
|
|
1354
1354
|
version: { type: "boolean", short: "V" }
|
|
1355
1355
|
},
|
|
@@ -1366,10 +1366,10 @@ function parseCli(argv) {
|
|
|
1366
1366
|
install,
|
|
1367
1367
|
skills,
|
|
1368
1368
|
dev: values.dev,
|
|
1369
|
-
|
|
1370
|
-
yarn: values.yarn,
|
|
1369
|
+
sdkVersion: values["sdk-version"],
|
|
1371
1370
|
npm: values.npm,
|
|
1372
|
-
pnpm: values.pnpm
|
|
1371
|
+
pnpm: values.pnpm,
|
|
1372
|
+
bun: values.bun
|
|
1373
1373
|
}
|
|
1374
1374
|
};
|
|
1375
1375
|
}
|
|
@@ -1399,8 +1399,8 @@ ${stderr}`));
|
|
|
1399
1399
|
}
|
|
1400
1400
|
function detectPackageManager() {
|
|
1401
1401
|
const userAgent = process.env.npm_config_user_agent || "";
|
|
1402
|
-
if (userAgent.includes("
|
|
1403
|
-
return "
|
|
1402
|
+
if (userAgent.includes("bun")) {
|
|
1403
|
+
return "bun";
|
|
1404
1404
|
}
|
|
1405
1405
|
if (userAgent.includes("pnpm")) {
|
|
1406
1406
|
return "pnpm";
|
|
@@ -1412,33 +1412,26 @@ function detectPackageManager() {
|
|
|
1412
1412
|
}
|
|
1413
1413
|
function getDevCommand(packageManager) {
|
|
1414
1414
|
switch (packageManager) {
|
|
1415
|
-
case "yarn":
|
|
1416
|
-
return "yarn dev";
|
|
1417
1415
|
case "pnpm":
|
|
1418
1416
|
return "pnpm dev";
|
|
1417
|
+
case "bun":
|
|
1418
|
+
return "bun run dev";
|
|
1419
1419
|
default:
|
|
1420
1420
|
return "npm run dev";
|
|
1421
1421
|
}
|
|
1422
1422
|
}
|
|
1423
1423
|
function getInstallCommand(packageManager) {
|
|
1424
1424
|
switch (packageManager) {
|
|
1425
|
-
case "yarn":
|
|
1426
|
-
return "yarn";
|
|
1427
1425
|
case "pnpm":
|
|
1428
1426
|
return "pnpm install";
|
|
1427
|
+
case "bun":
|
|
1428
|
+
return "bun install";
|
|
1429
1429
|
default:
|
|
1430
1430
|
return "npm install";
|
|
1431
1431
|
}
|
|
1432
1432
|
}
|
|
1433
1433
|
function getInstallArgs(packageManager) {
|
|
1434
|
-
|
|
1435
|
-
case "yarn":
|
|
1436
|
-
return ["install"];
|
|
1437
|
-
case "pnpm":
|
|
1438
|
-
return ["install"];
|
|
1439
|
-
default:
|
|
1440
|
-
return ["install"];
|
|
1441
|
-
}
|
|
1434
|
+
return ["install"];
|
|
1442
1435
|
}
|
|
1443
1436
|
function sendInstallTelemetryEvent(agents, skills) {
|
|
1444
1437
|
const TELEMETRY_URL = "https://add-skill.vercel.sh/t";
|
|
@@ -1539,32 +1532,19 @@ function renderLogo() {
|
|
|
1539
1532
|
var packageJson = JSON.parse(
|
|
1540
1533
|
readFileSync2(join3(__dirname, "../package.json"), "utf-8")
|
|
1541
1534
|
);
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
}
|
|
1548
|
-
versions["mcp-use"] = "canary";
|
|
1549
|
-
} else {
|
|
1550
|
-
versions["mcp-use"] = "latest";
|
|
1551
|
-
}
|
|
1552
|
-
} catch (error) {
|
|
1553
|
-
if (process.env.NODE_ENV === "development") {
|
|
1554
|
-
console.warn(
|
|
1555
|
-
"\u26A0\uFE0F Could not read workspace package versions, using defaults"
|
|
1556
|
-
);
|
|
1557
|
-
console.warn(
|
|
1558
|
-
` Error: ${error instanceof Error ? error.message : String(error)}`
|
|
1559
|
-
);
|
|
1560
|
-
if (error instanceof Error && error.stack) {
|
|
1561
|
-
console.warn(` Stack: ${error.stack}`);
|
|
1562
|
-
}
|
|
1563
|
-
}
|
|
1535
|
+
var DEFAULT_MCP_USE_VERSION = "2.0.0-beta.36";
|
|
1536
|
+
function getCurrentPackageVersions(isDevelopment = false, sdkVersion) {
|
|
1537
|
+
if (isDevelopment) {
|
|
1538
|
+
return {
|
|
1539
|
+
"mcp-use": "workspace:*"
|
|
1540
|
+
};
|
|
1564
1541
|
}
|
|
1565
|
-
|
|
1542
|
+
const requestedSdk = sdkVersion ?? DEFAULT_MCP_USE_VERSION;
|
|
1543
|
+
return {
|
|
1544
|
+
"mcp-use": requestedSdk
|
|
1545
|
+
};
|
|
1566
1546
|
}
|
|
1567
|
-
function processTemplateFile(filePath, versions, isDevelopment = false
|
|
1547
|
+
function processTemplateFile(filePath, versions, isDevelopment = false) {
|
|
1568
1548
|
const content = readFileSync2(filePath, "utf-8");
|
|
1569
1549
|
let processedContent = content;
|
|
1570
1550
|
for (const [packageName, version] of Object.entries(versions)) {
|
|
@@ -1574,24 +1554,20 @@ function processTemplateFile(filePath, versions, isDevelopment = false, useCanar
|
|
|
1574
1554
|
version
|
|
1575
1555
|
);
|
|
1576
1556
|
}
|
|
1557
|
+
const mcpUseVersion = isDevelopment ? "workspace:*" : versions["mcp-use"] || DEFAULT_MCP_USE_VERSION;
|
|
1577
1558
|
if (isDevelopment) {
|
|
1578
1559
|
processedContent = processedContent.replace(
|
|
1579
1560
|
/"mcp-use": "\^[^"]+"/,
|
|
1580
1561
|
'"mcp-use": "workspace:*"'
|
|
1581
1562
|
);
|
|
1582
|
-
} else
|
|
1563
|
+
} else {
|
|
1583
1564
|
processedContent = processedContent.replace(
|
|
1584
1565
|
/"mcp-use": "workspace:\*"/,
|
|
1585
|
-
`"mcp-use": "
|
|
1566
|
+
`"mcp-use": "${mcpUseVersion}"`
|
|
1586
1567
|
);
|
|
1587
1568
|
processedContent = processedContent.replace(
|
|
1588
1569
|
/"mcp-use": "\^[^"]+"/,
|
|
1589
|
-
`"mcp-use": "
|
|
1590
|
-
);
|
|
1591
|
-
} else {
|
|
1592
|
-
processedContent = processedContent.replace(
|
|
1593
|
-
/"mcp-use": "workspace:\*"/,
|
|
1594
|
-
`"mcp-use": "${versions["mcp-use"] || "latest"}"`
|
|
1570
|
+
`"mcp-use": "${mcpUseVersion}"`
|
|
1595
1571
|
);
|
|
1596
1572
|
}
|
|
1597
1573
|
return processedContent;
|
|
@@ -1758,7 +1734,8 @@ function validateTemplateName(template) {
|
|
|
1758
1734
|
return sanitized;
|
|
1759
1735
|
}
|
|
1760
1736
|
const aliases = {
|
|
1761
|
-
"apps-sdk": "mcp-apps"
|
|
1737
|
+
"apps-sdk": "mcp-apps",
|
|
1738
|
+
starter: "mcp-server"
|
|
1762
1739
|
};
|
|
1763
1740
|
const resolvedTemplate = aliases[sanitized] || sanitized;
|
|
1764
1741
|
if (resolvedTemplate.includes("..") || resolvedTemplate.includes("/") || resolvedTemplate.includes("\\")) {
|
|
@@ -1779,7 +1756,7 @@ function validateTemplateName(template) {
|
|
|
1779
1756
|
}
|
|
1780
1757
|
return resolvedTemplate;
|
|
1781
1758
|
}
|
|
1782
|
-
async function copyTemplate(projectPath, template, versions, isDevelopment = false
|
|
1759
|
+
async function copyTemplate(projectPath, template, versions, isDevelopment = false) {
|
|
1783
1760
|
const repoInfo = parseGitHubRepoUrl(template);
|
|
1784
1761
|
if (repoInfo) {
|
|
1785
1762
|
const tempDir = mkdtempSync(join3(tmpdir(), "create-mcp-use-app-"));
|
|
@@ -1789,8 +1766,7 @@ async function copyTemplate(projectPath, template, versions, isDevelopment = fal
|
|
|
1789
1766
|
tempDir,
|
|
1790
1767
|
projectPath,
|
|
1791
1768
|
versions,
|
|
1792
|
-
isDevelopment
|
|
1793
|
-
useCanary
|
|
1769
|
+
isDevelopment
|
|
1794
1770
|
);
|
|
1795
1771
|
} finally {
|
|
1796
1772
|
try {
|
|
@@ -1818,7 +1794,7 @@ async function copyTemplate(projectPath, template, versions, isDevelopment = fal
|
|
|
1818
1794
|
console.log("No templates directory found");
|
|
1819
1795
|
}
|
|
1820
1796
|
console.log(
|
|
1821
|
-
'\u{1F4A1} Tip: Use "
|
|
1797
|
+
'\u{1F4A1} Tip: Use "mcp-server" template for an MCP server with an example tool and prompt'
|
|
1822
1798
|
);
|
|
1823
1799
|
console.log(
|
|
1824
1800
|
'\u{1F4A1} Tip: Use "mcp-apps" template for a MCP server that displays Widgets on ChatGPT, Claude, and other mcp-apps compatible clients'
|
|
@@ -1832,11 +1808,10 @@ async function copyTemplate(projectPath, template, versions, isDevelopment = fal
|
|
|
1832
1808
|
templatePath,
|
|
1833
1809
|
projectPath,
|
|
1834
1810
|
versions,
|
|
1835
|
-
isDevelopment
|
|
1836
|
-
useCanary
|
|
1811
|
+
isDevelopment
|
|
1837
1812
|
);
|
|
1838
1813
|
}
|
|
1839
|
-
function copyDirectoryWithProcessing(src, dest, versions, isDevelopment
|
|
1814
|
+
function copyDirectoryWithProcessing(src, dest, versions, isDevelopment) {
|
|
1840
1815
|
const entries = readdirSync3(src, { withFileTypes: true });
|
|
1841
1816
|
for (const entry of entries) {
|
|
1842
1817
|
if (entry.name === ".git") {
|
|
@@ -1847,19 +1822,12 @@ function copyDirectoryWithProcessing(src, dest, versions, isDevelopment, useCana
|
|
|
1847
1822
|
const destPath = join3(dest, destName);
|
|
1848
1823
|
if (entry.isDirectory()) {
|
|
1849
1824
|
mkdirSync(destPath, { recursive: true });
|
|
1850
|
-
copyDirectoryWithProcessing(
|
|
1851
|
-
srcPath,
|
|
1852
|
-
destPath,
|
|
1853
|
-
versions,
|
|
1854
|
-
isDevelopment,
|
|
1855
|
-
useCanary
|
|
1856
|
-
);
|
|
1825
|
+
copyDirectoryWithProcessing(srcPath, destPath, versions, isDevelopment);
|
|
1857
1826
|
} else if (entry.name === "package.json" || entry.name.endsWith(".json")) {
|
|
1858
1827
|
const processedContent = processTemplateFile(
|
|
1859
1828
|
srcPath,
|
|
1860
1829
|
versions,
|
|
1861
|
-
isDevelopment
|
|
1862
|
-
useCanary
|
|
1830
|
+
isDevelopment
|
|
1863
1831
|
);
|
|
1864
1832
|
writeFileSync2(destPath, processedContent);
|
|
1865
1833
|
} else {
|
|
@@ -1946,10 +1914,10 @@ Options:
|
|
|
1946
1914
|
--no-skills Skip installing skills
|
|
1947
1915
|
--no-git Skip initializing a git repository
|
|
1948
1916
|
--dev Use workspace dependencies for development
|
|
1949
|
-
--
|
|
1950
|
-
--yarn Use yarn as package manager
|
|
1917
|
+
--sdk-version <version> Pin mcp-use to an npm version or dist-tag (e.g. canary, 1.34.0)
|
|
1951
1918
|
--npm Use npm as package manager
|
|
1952
1919
|
--pnpm Use pnpm as package manager
|
|
1920
|
+
--bun Use Bun as package manager
|
|
1953
1921
|
-h, --help Display help
|
|
1954
1922
|
-V, --version Display version`);
|
|
1955
1923
|
}
|
|
@@ -1968,11 +1936,15 @@ async function main() {
|
|
|
1968
1936
|
listTemplates();
|
|
1969
1937
|
return;
|
|
1970
1938
|
}
|
|
1971
|
-
if (options.dev && options.
|
|
1972
|
-
console.error(red("\u274C Cannot use --dev and --
|
|
1939
|
+
if (options.dev && options.sdkVersion) {
|
|
1940
|
+
console.error(red("\u274C Cannot use --dev and --sdk-version together"));
|
|
1973
1941
|
console.error(yellow(" Please choose only one dependency mode"));
|
|
1974
1942
|
process.exit(1);
|
|
1975
1943
|
}
|
|
1944
|
+
if (options.sdkVersion !== void 0 && !options.sdkVersion.trim()) {
|
|
1945
|
+
console.error(red("\u274C --sdk-version requires a non-empty value"));
|
|
1946
|
+
process.exit(1);
|
|
1947
|
+
}
|
|
1976
1948
|
let projectName = initialProjectName;
|
|
1977
1949
|
let selectedTemplate = options.template;
|
|
1978
1950
|
const interactive = isInteractive();
|
|
@@ -1993,7 +1965,7 @@ async function main() {
|
|
|
1993
1965
|
if (interactive) {
|
|
1994
1966
|
selectedTemplate = await promptForTemplate();
|
|
1995
1967
|
} else {
|
|
1996
|
-
selectedTemplate = "
|
|
1968
|
+
selectedTemplate = "mcp-server";
|
|
1997
1969
|
}
|
|
1998
1970
|
}
|
|
1999
1971
|
const trimmedProjectName = projectName.trim();
|
|
@@ -2059,14 +2031,8 @@ async function main() {
|
|
|
2059
2031
|
}
|
|
2060
2032
|
console.log(cyan(`\u{1F680} Creating MCP server "${displayName}"...`));
|
|
2061
2033
|
const validatedTemplate = validateTemplateName(selectedTemplate);
|
|
2062
|
-
const versions = getCurrentPackageVersions(options.dev, options.
|
|
2063
|
-
await copyTemplate(
|
|
2064
|
-
projectPath,
|
|
2065
|
-
validatedTemplate,
|
|
2066
|
-
versions,
|
|
2067
|
-
options.dev,
|
|
2068
|
-
options.canary
|
|
2069
|
-
);
|
|
2034
|
+
const versions = getCurrentPackageVersions(options.dev, options.sdkVersion);
|
|
2035
|
+
await copyTemplate(projectPath, validatedTemplate, versions, options.dev);
|
|
2070
2036
|
updatePackageJson(projectPath, packageName);
|
|
2071
2037
|
updateIndexTs(projectPath, packageName);
|
|
2072
2038
|
let install = options.install;
|
|
@@ -2111,12 +2077,12 @@ async function main() {
|
|
|
2111
2077
|
}
|
|
2112
2078
|
}
|
|
2113
2079
|
let usedPackageManager = "npm";
|
|
2114
|
-
if (options.
|
|
2115
|
-
usedPackageManager = "yarn";
|
|
2116
|
-
} else if (options.npm) {
|
|
2080
|
+
if (options.npm) {
|
|
2117
2081
|
usedPackageManager = "npm";
|
|
2118
2082
|
} else if (options.pnpm) {
|
|
2119
2083
|
usedPackageManager = "pnpm";
|
|
2084
|
+
} else if (options.bun) {
|
|
2085
|
+
usedPackageManager = "bun";
|
|
2120
2086
|
} else {
|
|
2121
2087
|
const detected = detectPackageManager();
|
|
2122
2088
|
if (detected) {
|
|
@@ -2132,8 +2098,8 @@ async function main() {
|
|
|
2132
2098
|
console.log("");
|
|
2133
2099
|
console.log(cyan("\u{1F4E6} Installing dependencies..."));
|
|
2134
2100
|
console.log("");
|
|
2135
|
-
const isKnownManager = options.
|
|
2136
|
-
const managersToTry = isKnownManager ? [usedPackageManager] : ["npm", "pnpm", "
|
|
2101
|
+
const isKnownManager = options.npm || options.pnpm || options.bun || detectPackageManager();
|
|
2102
|
+
const managersToTry = isKnownManager ? [usedPackageManager] : ["npm", "pnpm", "bun"];
|
|
2137
2103
|
let installed = false;
|
|
2138
2104
|
for (const pm of managersToTry) {
|
|
2139
2105
|
const s = spinner2();
|
|
@@ -2158,7 +2124,7 @@ async function main() {
|
|
|
2158
2124
|
}
|
|
2159
2125
|
if (!installed) {
|
|
2160
2126
|
console.log(
|
|
2161
|
-
'\u26A0\uFE0F Please run "npm install", "
|
|
2127
|
+
'\u26A0\uFE0F Please run "npm install", "pnpm install", or "bun install" manually'
|
|
2162
2128
|
);
|
|
2163
2129
|
}
|
|
2164
2130
|
}
|
|
@@ -2168,8 +2134,8 @@ async function main() {
|
|
|
2168
2134
|
console.log(
|
|
2169
2135
|
yellow("\u{1F527} Development mode: Using workspace dependencies")
|
|
2170
2136
|
);
|
|
2171
|
-
} else if (options.
|
|
2172
|
-
console.log(cyan(
|
|
2137
|
+
} else if (options.sdkVersion) {
|
|
2138
|
+
console.log(cyan(`\u{1F4CC} Using mcp-use@${options.sdkVersion}`));
|
|
2173
2139
|
}
|
|
2174
2140
|
console.log("");
|
|
2175
2141
|
console.log(bold("\u{1F4C1} Project structure:"));
|
|
@@ -2181,20 +2147,29 @@ async function main() {
|
|
|
2181
2147
|
}
|
|
2182
2148
|
if (validatedTemplate === "blank") {
|
|
2183
2149
|
console.log(" \u251C\u2500\u2500 public/");
|
|
2150
|
+
console.log(" \u251C\u2500\u2500 mcp-env.d.ts");
|
|
2184
2151
|
console.log(" \u251C\u2500\u2500 index.ts (server entry point)");
|
|
2185
2152
|
console.log(" \u251C\u2500\u2500 package.json");
|
|
2186
2153
|
console.log(" \u251C\u2500\u2500 tsconfig.json");
|
|
2187
2154
|
console.log(" \u2514\u2500\u2500 README.md");
|
|
2188
2155
|
} else if (validatedTemplate === "mcp-apps") {
|
|
2189
|
-
console.log(" \u251C\u2500\u2500
|
|
2190
|
-
console.log(" \u2502 \
|
|
2191
|
-
console.log(" \u2502
|
|
2192
|
-
console.log(" \u251C\u2500\u2500
|
|
2156
|
+
console.log(" \u251C\u2500\u2500 public/");
|
|
2157
|
+
console.log(" \u2502 \u251C\u2500\u2500 icon.svg");
|
|
2158
|
+
console.log(" \u2502 \u2514\u2500\u2500 logo-mcp-use.svg");
|
|
2159
|
+
console.log(" \u251C\u2500\u2500 views/");
|
|
2160
|
+
console.log(" \u2502 \u2514\u2500\u2500 my-view/");
|
|
2161
|
+
console.log(" \u2502 \u251C\u2500\u2500 view.tsx");
|
|
2162
|
+
console.log(" \u2502 \u251C\u2500\u2500 view.css");
|
|
2163
|
+
console.log(" \u2502 \u251C\u2500\u2500 icons.tsx");
|
|
2164
|
+
console.log(" \u2502 \u251C\u2500\u2500 Tooltip.tsx");
|
|
2165
|
+
console.log(" \u2502 \u2514\u2500\u2500 MeshGradient.tsx");
|
|
2166
|
+
console.log(" \u251C\u2500\u2500 mcp-env.d.ts");
|
|
2193
2167
|
console.log(" \u251C\u2500\u2500 index.ts (server entry point)");
|
|
2194
2168
|
console.log(" \u251C\u2500\u2500 package.json");
|
|
2195
2169
|
console.log(" \u251C\u2500\u2500 tsconfig.json");
|
|
2196
2170
|
console.log(" \u2514\u2500\u2500 README.md");
|
|
2197
|
-
} else if (validatedTemplate === "
|
|
2171
|
+
} else if (validatedTemplate === "mcp-server") {
|
|
2172
|
+
console.log(" \u251C\u2500\u2500 mcp-env.d.ts");
|
|
2198
2173
|
console.log(" \u251C\u2500\u2500 index.ts (server entry point)");
|
|
2199
2174
|
console.log(" \u251C\u2500\u2500 package.json");
|
|
2200
2175
|
console.log(" \u251C\u2500\u2500 tsconfig.json");
|
|
@@ -2218,7 +2193,7 @@ async function main() {
|
|
|
2218
2193
|
console.log(bold("\u{1F4E4} To deploy:"));
|
|
2219
2194
|
console.log(
|
|
2220
2195
|
cyan(
|
|
2221
|
-
` ${usedPackageManager === "
|
|
2196
|
+
` ${usedPackageManager === "pnpm" ? "pnpm" : usedPackageManager === "bun" ? "bun run" : "npm run"} deploy`
|
|
2222
2197
|
)
|
|
2223
2198
|
);
|
|
2224
2199
|
console.log("");
|
|
@@ -11,10 +11,12 @@ npm install
|
|
|
11
11
|
npm run dev
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
Open [http://localhost:3000/inspector](http://localhost:3000/inspector) with your browser to test your server.
|
|
14
|
+
Open [http://localhost:3000/mcp/inspector](http://localhost:3000/mcp/inspector) with your browser to test your server.
|
|
15
15
|
|
|
16
16
|
You can start building by editing the entry file. Add tools, resources, and prompts — the server auto-reloads as you edit.
|
|
17
17
|
|
|
18
|
+
Run `npm run typecheck` to refresh MCP view types and check the project with its local TypeScript compiler.
|
|
19
|
+
|
|
18
20
|
## Learn More
|
|
19
21
|
|
|
20
22
|
To learn more about mcp-use and MCP:
|
|
@@ -1,15 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mcp-use server",
|
|
3
3
|
"type": "module",
|
|
4
|
+
"engines": {
|
|
5
|
+
"node": ">=22.22.2"
|
|
6
|
+
},
|
|
4
7
|
"version": "1.0.0",
|
|
5
|
-
"description": "
|
|
6
|
-
"author": "",
|
|
8
|
+
"description": "an mcp-use server",
|
|
9
|
+
"author": "mcp-use",
|
|
7
10
|
"license": "MIT",
|
|
11
|
+
"homepage": "https://github.com/mcp-use/mcp-use",
|
|
8
12
|
"keywords": [
|
|
9
13
|
"mcp",
|
|
10
|
-
"server",
|
|
11
|
-
"
|
|
12
|
-
"
|
|
14
|
+
"mcp-server",
|
|
15
|
+
"chatgpt plugins",
|
|
16
|
+
"claude connector",
|
|
17
|
+
"mcp-app",
|
|
18
|
+
"mcp-use",
|
|
19
|
+
"manufact"
|
|
13
20
|
],
|
|
14
21
|
"main": "dist/index.js",
|
|
15
22
|
"scripts": {
|
|
@@ -17,13 +24,13 @@
|
|
|
17
24
|
"dev": "mcp-use dev",
|
|
18
25
|
"start": "mcp-use start",
|
|
19
26
|
"deploy": "mcp-use deploy",
|
|
20
|
-
"typecheck": "
|
|
27
|
+
"typecheck": "mcp-use typecheck"
|
|
21
28
|
},
|
|
22
29
|
"dependencies": {
|
|
23
30
|
"mcp-use": "workspace:*"
|
|
24
31
|
},
|
|
25
32
|
"devDependencies": {
|
|
26
|
-
"@types/node": "^
|
|
27
|
-
"typescript": "7.0.
|
|
33
|
+
"@types/node": "^22.20.0",
|
|
34
|
+
"typescript": "^7.0.2"
|
|
28
35
|
}
|
|
29
36
|
}
|