create-mcp-use-app 2.0.0-beta.1 → 2.0.0-beta.10
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 +70 -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,18 @@ function renderLogo() {
|
|
|
1539
1532
|
var packageJson = JSON.parse(
|
|
1540
1533
|
readFileSync2(join3(__dirname, "../package.json"), "utf-8")
|
|
1541
1534
|
);
|
|
1542
|
-
function getCurrentPackageVersions(isDevelopment = false,
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
} else if (useCanary) {
|
|
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
|
+
function getCurrentPackageVersions(isDevelopment = false, sdkVersion) {
|
|
1536
|
+
if (isDevelopment) {
|
|
1537
|
+
return {
|
|
1538
|
+
"mcp-use": "workspace:*"
|
|
1539
|
+
};
|
|
1564
1540
|
}
|
|
1565
|
-
|
|
1541
|
+
const requestedSdk = sdkVersion ?? "latest";
|
|
1542
|
+
return {
|
|
1543
|
+
"mcp-use": requestedSdk
|
|
1544
|
+
};
|
|
1566
1545
|
}
|
|
1567
|
-
function processTemplateFile(filePath, versions, isDevelopment = false
|
|
1546
|
+
function processTemplateFile(filePath, versions, isDevelopment = false) {
|
|
1568
1547
|
const content = readFileSync2(filePath, "utf-8");
|
|
1569
1548
|
let processedContent = content;
|
|
1570
1549
|
for (const [packageName, version] of Object.entries(versions)) {
|
|
@@ -1574,24 +1553,20 @@ function processTemplateFile(filePath, versions, isDevelopment = false, useCanar
|
|
|
1574
1553
|
version
|
|
1575
1554
|
);
|
|
1576
1555
|
}
|
|
1556
|
+
const mcpUseVersion = isDevelopment ? "workspace:*" : versions["mcp-use"] || "latest";
|
|
1577
1557
|
if (isDevelopment) {
|
|
1578
1558
|
processedContent = processedContent.replace(
|
|
1579
1559
|
/"mcp-use": "\^[^"]+"/,
|
|
1580
1560
|
'"mcp-use": "workspace:*"'
|
|
1581
1561
|
);
|
|
1582
|
-
} else
|
|
1562
|
+
} else {
|
|
1583
1563
|
processedContent = processedContent.replace(
|
|
1584
1564
|
/"mcp-use": "workspace:\*"/,
|
|
1585
|
-
`"mcp-use": "
|
|
1565
|
+
`"mcp-use": "${mcpUseVersion}"`
|
|
1586
1566
|
);
|
|
1587
1567
|
processedContent = processedContent.replace(
|
|
1588
1568
|
/"mcp-use": "\^[^"]+"/,
|
|
1589
|
-
`"mcp-use": "
|
|
1590
|
-
);
|
|
1591
|
-
} else {
|
|
1592
|
-
processedContent = processedContent.replace(
|
|
1593
|
-
/"mcp-use": "workspace:\*"/,
|
|
1594
|
-
`"mcp-use": "${versions["mcp-use"] || "latest"}"`
|
|
1569
|
+
`"mcp-use": "${mcpUseVersion}"`
|
|
1595
1570
|
);
|
|
1596
1571
|
}
|
|
1597
1572
|
return processedContent;
|
|
@@ -1758,7 +1733,8 @@ function validateTemplateName(template) {
|
|
|
1758
1733
|
return sanitized;
|
|
1759
1734
|
}
|
|
1760
1735
|
const aliases = {
|
|
1761
|
-
"apps-sdk": "mcp-apps"
|
|
1736
|
+
"apps-sdk": "mcp-apps",
|
|
1737
|
+
starter: "mcp-server"
|
|
1762
1738
|
};
|
|
1763
1739
|
const resolvedTemplate = aliases[sanitized] || sanitized;
|
|
1764
1740
|
if (resolvedTemplate.includes("..") || resolvedTemplate.includes("/") || resolvedTemplate.includes("\\")) {
|
|
@@ -1779,7 +1755,7 @@ function validateTemplateName(template) {
|
|
|
1779
1755
|
}
|
|
1780
1756
|
return resolvedTemplate;
|
|
1781
1757
|
}
|
|
1782
|
-
async function copyTemplate(projectPath, template, versions, isDevelopment = false
|
|
1758
|
+
async function copyTemplate(projectPath, template, versions, isDevelopment = false) {
|
|
1783
1759
|
const repoInfo = parseGitHubRepoUrl(template);
|
|
1784
1760
|
if (repoInfo) {
|
|
1785
1761
|
const tempDir = mkdtempSync(join3(tmpdir(), "create-mcp-use-app-"));
|
|
@@ -1789,8 +1765,7 @@ async function copyTemplate(projectPath, template, versions, isDevelopment = fal
|
|
|
1789
1765
|
tempDir,
|
|
1790
1766
|
projectPath,
|
|
1791
1767
|
versions,
|
|
1792
|
-
isDevelopment
|
|
1793
|
-
useCanary
|
|
1768
|
+
isDevelopment
|
|
1794
1769
|
);
|
|
1795
1770
|
} finally {
|
|
1796
1771
|
try {
|
|
@@ -1818,7 +1793,7 @@ async function copyTemplate(projectPath, template, versions, isDevelopment = fal
|
|
|
1818
1793
|
console.log("No templates directory found");
|
|
1819
1794
|
}
|
|
1820
1795
|
console.log(
|
|
1821
|
-
'\u{1F4A1} Tip: Use "
|
|
1796
|
+
'\u{1F4A1} Tip: Use "mcp-server" template for an MCP server with an example tool and prompt'
|
|
1822
1797
|
);
|
|
1823
1798
|
console.log(
|
|
1824
1799
|
'\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 +1807,10 @@ async function copyTemplate(projectPath, template, versions, isDevelopment = fal
|
|
|
1832
1807
|
templatePath,
|
|
1833
1808
|
projectPath,
|
|
1834
1809
|
versions,
|
|
1835
|
-
isDevelopment
|
|
1836
|
-
useCanary
|
|
1810
|
+
isDevelopment
|
|
1837
1811
|
);
|
|
1838
1812
|
}
|
|
1839
|
-
function copyDirectoryWithProcessing(src, dest, versions, isDevelopment
|
|
1813
|
+
function copyDirectoryWithProcessing(src, dest, versions, isDevelopment) {
|
|
1840
1814
|
const entries = readdirSync3(src, { withFileTypes: true });
|
|
1841
1815
|
for (const entry of entries) {
|
|
1842
1816
|
if (entry.name === ".git") {
|
|
@@ -1847,19 +1821,12 @@ function copyDirectoryWithProcessing(src, dest, versions, isDevelopment, useCana
|
|
|
1847
1821
|
const destPath = join3(dest, destName);
|
|
1848
1822
|
if (entry.isDirectory()) {
|
|
1849
1823
|
mkdirSync(destPath, { recursive: true });
|
|
1850
|
-
copyDirectoryWithProcessing(
|
|
1851
|
-
srcPath,
|
|
1852
|
-
destPath,
|
|
1853
|
-
versions,
|
|
1854
|
-
isDevelopment,
|
|
1855
|
-
useCanary
|
|
1856
|
-
);
|
|
1824
|
+
copyDirectoryWithProcessing(srcPath, destPath, versions, isDevelopment);
|
|
1857
1825
|
} else if (entry.name === "package.json" || entry.name.endsWith(".json")) {
|
|
1858
1826
|
const processedContent = processTemplateFile(
|
|
1859
1827
|
srcPath,
|
|
1860
1828
|
versions,
|
|
1861
|
-
isDevelopment
|
|
1862
|
-
useCanary
|
|
1829
|
+
isDevelopment
|
|
1863
1830
|
);
|
|
1864
1831
|
writeFileSync2(destPath, processedContent);
|
|
1865
1832
|
} else {
|
|
@@ -1946,10 +1913,10 @@ Options:
|
|
|
1946
1913
|
--no-skills Skip installing skills
|
|
1947
1914
|
--no-git Skip initializing a git repository
|
|
1948
1915
|
--dev Use workspace dependencies for development
|
|
1949
|
-
--
|
|
1950
|
-
--yarn Use yarn as package manager
|
|
1916
|
+
--sdk-version <version> Pin mcp-use to an npm version or dist-tag (e.g. canary, 1.34.0)
|
|
1951
1917
|
--npm Use npm as package manager
|
|
1952
1918
|
--pnpm Use pnpm as package manager
|
|
1919
|
+
--bun Use Bun as package manager
|
|
1953
1920
|
-h, --help Display help
|
|
1954
1921
|
-V, --version Display version`);
|
|
1955
1922
|
}
|
|
@@ -1968,11 +1935,15 @@ async function main() {
|
|
|
1968
1935
|
listTemplates();
|
|
1969
1936
|
return;
|
|
1970
1937
|
}
|
|
1971
|
-
if (options.dev && options.
|
|
1972
|
-
console.error(red("\u274C Cannot use --dev and --
|
|
1938
|
+
if (options.dev && options.sdkVersion) {
|
|
1939
|
+
console.error(red("\u274C Cannot use --dev and --sdk-version together"));
|
|
1973
1940
|
console.error(yellow(" Please choose only one dependency mode"));
|
|
1974
1941
|
process.exit(1);
|
|
1975
1942
|
}
|
|
1943
|
+
if (options.sdkVersion !== void 0 && !options.sdkVersion.trim()) {
|
|
1944
|
+
console.error(red("\u274C --sdk-version requires a non-empty value"));
|
|
1945
|
+
process.exit(1);
|
|
1946
|
+
}
|
|
1976
1947
|
let projectName = initialProjectName;
|
|
1977
1948
|
let selectedTemplate = options.template;
|
|
1978
1949
|
const interactive = isInteractive();
|
|
@@ -1993,7 +1964,7 @@ async function main() {
|
|
|
1993
1964
|
if (interactive) {
|
|
1994
1965
|
selectedTemplate = await promptForTemplate();
|
|
1995
1966
|
} else {
|
|
1996
|
-
selectedTemplate = "
|
|
1967
|
+
selectedTemplate = "mcp-server";
|
|
1997
1968
|
}
|
|
1998
1969
|
}
|
|
1999
1970
|
const trimmedProjectName = projectName.trim();
|
|
@@ -2059,14 +2030,8 @@ async function main() {
|
|
|
2059
2030
|
}
|
|
2060
2031
|
console.log(cyan(`\u{1F680} Creating MCP server "${displayName}"...`));
|
|
2061
2032
|
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
|
-
);
|
|
2033
|
+
const versions = getCurrentPackageVersions(options.dev, options.sdkVersion);
|
|
2034
|
+
await copyTemplate(projectPath, validatedTemplate, versions, options.dev);
|
|
2070
2035
|
updatePackageJson(projectPath, packageName);
|
|
2071
2036
|
updateIndexTs(projectPath, packageName);
|
|
2072
2037
|
let install = options.install;
|
|
@@ -2111,12 +2076,12 @@ async function main() {
|
|
|
2111
2076
|
}
|
|
2112
2077
|
}
|
|
2113
2078
|
let usedPackageManager = "npm";
|
|
2114
|
-
if (options.
|
|
2115
|
-
usedPackageManager = "yarn";
|
|
2116
|
-
} else if (options.npm) {
|
|
2079
|
+
if (options.npm) {
|
|
2117
2080
|
usedPackageManager = "npm";
|
|
2118
2081
|
} else if (options.pnpm) {
|
|
2119
2082
|
usedPackageManager = "pnpm";
|
|
2083
|
+
} else if (options.bun) {
|
|
2084
|
+
usedPackageManager = "bun";
|
|
2120
2085
|
} else {
|
|
2121
2086
|
const detected = detectPackageManager();
|
|
2122
2087
|
if (detected) {
|
|
@@ -2132,8 +2097,8 @@ async function main() {
|
|
|
2132
2097
|
console.log("");
|
|
2133
2098
|
console.log(cyan("\u{1F4E6} Installing dependencies..."));
|
|
2134
2099
|
console.log("");
|
|
2135
|
-
const isKnownManager = options.
|
|
2136
|
-
const managersToTry = isKnownManager ? [usedPackageManager] : ["npm", "pnpm", "
|
|
2100
|
+
const isKnownManager = options.npm || options.pnpm || options.bun || detectPackageManager();
|
|
2101
|
+
const managersToTry = isKnownManager ? [usedPackageManager] : ["npm", "pnpm", "bun"];
|
|
2137
2102
|
let installed = false;
|
|
2138
2103
|
for (const pm of managersToTry) {
|
|
2139
2104
|
const s = spinner2();
|
|
@@ -2158,7 +2123,7 @@ async function main() {
|
|
|
2158
2123
|
}
|
|
2159
2124
|
if (!installed) {
|
|
2160
2125
|
console.log(
|
|
2161
|
-
'\u26A0\uFE0F Please run "npm install", "
|
|
2126
|
+
'\u26A0\uFE0F Please run "npm install", "pnpm install", or "bun install" manually'
|
|
2162
2127
|
);
|
|
2163
2128
|
}
|
|
2164
2129
|
}
|
|
@@ -2168,8 +2133,8 @@ async function main() {
|
|
|
2168
2133
|
console.log(
|
|
2169
2134
|
yellow("\u{1F527} Development mode: Using workspace dependencies")
|
|
2170
2135
|
);
|
|
2171
|
-
} else if (options.
|
|
2172
|
-
console.log(cyan(
|
|
2136
|
+
} else if (options.sdkVersion) {
|
|
2137
|
+
console.log(cyan(`\u{1F4CC} Using mcp-use@${options.sdkVersion}`));
|
|
2173
2138
|
}
|
|
2174
2139
|
console.log("");
|
|
2175
2140
|
console.log(bold("\u{1F4C1} Project structure:"));
|
|
@@ -2181,20 +2146,29 @@ async function main() {
|
|
|
2181
2146
|
}
|
|
2182
2147
|
if (validatedTemplate === "blank") {
|
|
2183
2148
|
console.log(" \u251C\u2500\u2500 public/");
|
|
2149
|
+
console.log(" \u251C\u2500\u2500 mcp-env.d.ts");
|
|
2184
2150
|
console.log(" \u251C\u2500\u2500 index.ts (server entry point)");
|
|
2185
2151
|
console.log(" \u251C\u2500\u2500 package.json");
|
|
2186
2152
|
console.log(" \u251C\u2500\u2500 tsconfig.json");
|
|
2187
2153
|
console.log(" \u2514\u2500\u2500 README.md");
|
|
2188
2154
|
} 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
|
|
2155
|
+
console.log(" \u251C\u2500\u2500 public/");
|
|
2156
|
+
console.log(" \u2502 \u251C\u2500\u2500 icon.svg");
|
|
2157
|
+
console.log(" \u2502 \u2514\u2500\u2500 logo-mcp-use.svg");
|
|
2158
|
+
console.log(" \u251C\u2500\u2500 views/");
|
|
2159
|
+
console.log(" \u2502 \u2514\u2500\u2500 my-view/");
|
|
2160
|
+
console.log(" \u2502 \u251C\u2500\u2500 view.tsx");
|
|
2161
|
+
console.log(" \u2502 \u251C\u2500\u2500 view.css");
|
|
2162
|
+
console.log(" \u2502 \u251C\u2500\u2500 icons.tsx");
|
|
2163
|
+
console.log(" \u2502 \u251C\u2500\u2500 Tooltip.tsx");
|
|
2164
|
+
console.log(" \u2502 \u2514\u2500\u2500 MeshGradient.tsx");
|
|
2165
|
+
console.log(" \u251C\u2500\u2500 mcp-env.d.ts");
|
|
2193
2166
|
console.log(" \u251C\u2500\u2500 index.ts (server entry point)");
|
|
2194
2167
|
console.log(" \u251C\u2500\u2500 package.json");
|
|
2195
2168
|
console.log(" \u251C\u2500\u2500 tsconfig.json");
|
|
2196
2169
|
console.log(" \u2514\u2500\u2500 README.md");
|
|
2197
|
-
} else if (validatedTemplate === "
|
|
2170
|
+
} else if (validatedTemplate === "mcp-server") {
|
|
2171
|
+
console.log(" \u251C\u2500\u2500 mcp-env.d.ts");
|
|
2198
2172
|
console.log(" \u251C\u2500\u2500 index.ts (server entry point)");
|
|
2199
2173
|
console.log(" \u251C\u2500\u2500 package.json");
|
|
2200
2174
|
console.log(" \u251C\u2500\u2500 tsconfig.json");
|
|
@@ -2218,7 +2192,7 @@ async function main() {
|
|
|
2218
2192
|
console.log(bold("\u{1F4E4} To deploy:"));
|
|
2219
2193
|
console.log(
|
|
2220
2194
|
cyan(
|
|
2221
|
-
` ${usedPackageManager === "
|
|
2195
|
+
` ${usedPackageManager === "pnpm" ? "pnpm" : usedPackageManager === "bun" ? "bun run" : "npm run"} deploy`
|
|
2222
2196
|
)
|
|
2223
2197
|
);
|
|
2224
2198
|
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
|
}
|