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.
Files changed (46) hide show
  1. package/README.md +74 -47
  2. package/dist/index.js +71 -96
  3. package/dist/templates/blank/README.md +3 -1
  4. package/dist/templates/{mcp-apps/tools.d.ts → blank/mcp-env.d.ts} +3 -1
  5. package/dist/templates/blank/package.json +15 -8
  6. package/dist/templates/blank/tsconfig.json +14 -10
  7. package/dist/templates/mcp-apps/README.md +3 -1
  8. package/dist/templates/mcp-apps/index.ts +98 -24
  9. package/dist/templates/mcp-apps/mcp-env.d.ts +10 -0
  10. package/dist/templates/mcp-apps/package.json +17 -15
  11. package/dist/templates/mcp-apps/public/logo-mcp-use.svg +8 -0
  12. package/dist/templates/mcp-apps/tsconfig.json +9 -3
  13. package/dist/templates/mcp-apps/views/my-view/MeshGradient.tsx +299 -0
  14. package/dist/templates/mcp-apps/views/my-view/Tooltip.tsx +75 -0
  15. package/dist/templates/mcp-apps/views/my-view/icons.tsx +142 -0
  16. package/dist/templates/mcp-apps/views/my-view/view.css +5 -0
  17. package/dist/templates/mcp-apps/views/my-view/view.tsx +396 -0
  18. package/dist/templates/{starter → mcp-server}/README.md +4 -2
  19. package/dist/templates/{starter → mcp-server}/index.ts +1 -19
  20. package/dist/templates/mcp-server/mcp-env.d.ts +10 -0
  21. package/dist/templates/{starter → mcp-server}/package.json +15 -11
  22. package/dist/templates/mcp-server/tsconfig.json +24 -0
  23. package/package.json +3 -3
  24. package/dist/templates/blank/public/favicon.ico +0 -0
  25. package/dist/templates/mcp-apps/public/favicon.ico +0 -0
  26. package/dist/templates/mcp-apps/public/fruits/apple.png +0 -0
  27. package/dist/templates/mcp-apps/public/fruits/apricot.png +0 -0
  28. package/dist/templates/mcp-apps/public/fruits/avocado.png +0 -0
  29. package/dist/templates/mcp-apps/public/fruits/banana.png +0 -0
  30. package/dist/templates/mcp-apps/public/fruits/blueberry.png +0 -0
  31. package/dist/templates/mcp-apps/public/fruits/cherries.png +0 -0
  32. package/dist/templates/mcp-apps/public/fruits/coconut.png +0 -0
  33. package/dist/templates/mcp-apps/public/fruits/grapes.png +0 -0
  34. package/dist/templates/mcp-apps/public/fruits/lemon.png +0 -0
  35. package/dist/templates/mcp-apps/public/fruits/mango.png +0 -0
  36. package/dist/templates/mcp-apps/public/fruits/orange.png +0 -0
  37. package/dist/templates/mcp-apps/public/fruits/pear.png +0 -0
  38. package/dist/templates/mcp-apps/public/fruits/pineapple.png +0 -0
  39. package/dist/templates/mcp-apps/public/fruits/plum.png +0 -0
  40. package/dist/templates/mcp-apps/public/fruits/strawberry.png +0 -0
  41. package/dist/templates/mcp-apps/public/fruits/watermelon.png +0 -0
  42. package/dist/templates/mcp-apps/resources/product-search-result/view.tsx +0 -25
  43. package/dist/templates/starter/public/favicon.ico +0 -0
  44. package/dist/templates/starter/tsconfig.json +0 -20
  45. /package/dist/templates/{starter → mcp-server}/gitignore +0 -0
  46. /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** is the fastest way to scaffold a new MCP (Model Context Protocol) application. With just one command, you get a fully configured TypeScript project with hot reload, automatic inspector, and UI widget support - everything you need to build powerful MCP servers.
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
- Running `create-mcp-use-app` sets up a complete MCP development environment:
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
- ├── package.json # Pre-configured with all scripts
58
- ├── tsconfig.json # TypeScript configuration
59
- ├── .env.example # Environment variables template
60
- ├── .gitignore # Git ignore rules
61
- ├── README.md # Project documentation
62
- ├── src/
63
- │ └── index.ts # MCP server entry point with example tools
64
- ├── resources/ # UI widgets directory
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
- | **🎨 UI Widgets** | React components that compile to standalone pages |
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
- ### Starter Template (Default)
141
+ ### MCP Server Template
143
142
 
144
- The starter template includes:
143
+ The `mcp-server` template includes:
145
144
 
146
- - Comprehensive MCP server setup with all features
147
- - Example tool, resource, and prompt
148
- - Both MCP-UI and OpenAI Apps SDK widget examples
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
- Perfect for getting started with all available features or building full-featured MCP servers.
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 widgets
160
- - Example display-weather widget
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 `src/index.ts` to see how to:
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 a UI Widget
281
+ ### 3. Create an MCP Apps view
287
282
 
288
- Edit `resources/example-widget.tsx` or create new widgets:
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 React from "react";
292
- import { useMcp } from "mcp-use/react";
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
- export default function MyWidget() {
295
- const { callTool } = useMcp();
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 handleClick = async () => {
298
- const result = await callTool("my_tool", {
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
- <div>
306
- <button onClick={handleClick}>Call MCP Tool</button>
307
- </div>
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 20.19+ installed
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 = `MCP server: ${projectName}`;
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
- canary: { type: "boolean" },
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
- canary: values.canary,
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("yarn")) {
1403
- return "yarn";
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
- switch (packageManager) {
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
- function getCurrentPackageVersions(isDevelopment = false, useCanary = false) {
1543
- const versions = {};
1544
- try {
1545
- if (isDevelopment) {
1546
- versions["mcp-use"] = "workspace:*";
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
+ 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
- return versions;
1542
+ const requestedSdk = sdkVersion ?? DEFAULT_MCP_USE_VERSION;
1543
+ return {
1544
+ "mcp-use": requestedSdk
1545
+ };
1566
1546
  }
1567
- function processTemplateFile(filePath, versions, isDevelopment = false, useCanary = 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 if (useCanary) {
1563
+ } else {
1583
1564
  processedContent = processedContent.replace(
1584
1565
  /"mcp-use": "workspace:\*"/,
1585
- `"mcp-use": "canary"`
1566
+ `"mcp-use": "${mcpUseVersion}"`
1586
1567
  );
1587
1568
  processedContent = processedContent.replace(
1588
1569
  /"mcp-use": "\^[^"]+"/,
1589
- `"mcp-use": "canary"`
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, useCanary = 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 "starter" template for a comprehensive MCP server with all features'
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, useCanary = false) {
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
- --canary Use canary versions of packages
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.canary) {
1972
- console.error(red("\u274C Cannot use --dev and --canary together"));
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 = "starter";
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.canary);
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.yarn) {
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.yarn || options.npm || options.pnpm || detectPackageManager();
2136
- const managersToTry = isKnownManager ? [usedPackageManager] : ["npm", "pnpm", "yarn"];
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", "yarn install", or "pnpm install" manually'
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.canary) {
2172
- console.log(cyan("\u{1F680} Canary mode: Using canary versions of packages"));
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 resources/");
2190
- console.log(" \u2502 \u2514\u2500\u2500 product-search-result/");
2191
- console.log(" \u2502 \u2514\u2500\u2500 view.tsx");
2192
- console.log(" \u251C\u2500\u2500 tools.d.ts");
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 === "starter") {
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 === "yarn" ? "yarn" : usedPackageManager === "pnpm" ? "pnpm" : "npm run"} deploy`
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,4 +1,6 @@
1
- // Created by mcp-use when missing. Existing files are never overwritten.
1
+ // Generated by mcp-use. Do not edit.
2
+ declare module "*.css";
3
+
2
4
  declare module "mcp-use/react" {
3
5
  interface Register {
4
6
  tools: typeof import("./index.js");
@@ -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": "Blank mcp-use server",
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
- "blank",
12
- "mcp-use"
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": "tsc --noEmit"
27
+ "typecheck": "mcp-use typecheck"
21
28
  },
22
29
  "dependencies": {
23
30
  "mcp-use": "workspace:*"
24
31
  },
25
32
  "devDependencies": {
26
- "@types/node": "^24.13.2",
27
- "typescript": "7.0.1-rc"
33
+ "@types/node": "^22.20.0",
34
+ "typescript": "^7.0.2"
28
35
  }
29
36
  }