create-mcp-use-app 2.0.0-beta.0 → 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.
Files changed (48) hide show
  1. package/README.md +74 -47
  2. package/dist/index.js +70 -96
  3. package/dist/templates/blank/README.md +3 -1
  4. package/dist/templates/blank/mcp-env.d.ts +10 -0
  5. package/dist/templates/blank/package.json +16 -8
  6. package/dist/templates/blank/tsconfig.json +14 -14
  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/mcp-server/package.json +37 -0
  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 -26
  43. package/dist/templates/mcp-apps/src/register.d.ts +0 -7
  44. package/dist/templates/starter/package.json +0 -32
  45. package/dist/templates/starter/public/favicon.ico +0 -0
  46. package/dist/templates/starter/tsconfig.json +0 -24
  47. /package/dist/templates/{starter → mcp-server}/gitignore +0 -0
  48. /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,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, 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
+ function getCurrentPackageVersions(isDevelopment = false, sdkVersion) {
1536
+ if (isDevelopment) {
1537
+ return {
1538
+ "mcp-use": "workspace:*"
1539
+ };
1564
1540
  }
1565
- return versions;
1541
+ const requestedSdk = sdkVersion ?? "latest";
1542
+ return {
1543
+ "mcp-use": requestedSdk
1544
+ };
1566
1545
  }
1567
- function processTemplateFile(filePath, versions, isDevelopment = false, useCanary = 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 if (useCanary) {
1562
+ } else {
1583
1563
  processedContent = processedContent.replace(
1584
1564
  /"mcp-use": "workspace:\*"/,
1585
- `"mcp-use": "canary"`
1565
+ `"mcp-use": "${mcpUseVersion}"`
1586
1566
  );
1587
1567
  processedContent = processedContent.replace(
1588
1568
  /"mcp-use": "\^[^"]+"/,
1589
- `"mcp-use": "canary"`
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, useCanary = 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 "starter" template for a comprehensive MCP server with all features'
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, useCanary = false) {
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
- --canary Use canary versions of packages
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.canary) {
1972
- console.error(red("\u274C Cannot use --dev and --canary together"));
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 = "starter";
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.canary);
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.yarn) {
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.yarn || options.npm || options.pnpm || detectPackageManager();
2136
- const managersToTry = isKnownManager ? [usedPackageManager] : ["npm", "pnpm", "yarn"];
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", "yarn install", or "pnpm install" manually'
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.canary) {
2172
- console.log(cyan("\u{1F680} Canary mode: Using canary versions of packages"));
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 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 src/register.d.ts");
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 === "starter") {
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 === "yarn" ? "yarn" : usedPackageManager === "pnpm" ? "pnpm" : "npm run"} deploy`
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:
@@ -0,0 +1,10 @@
1
+ // Generated by mcp-use. Do not edit.
2
+ declare module "*.css";
3
+
4
+ declare module "mcp-use/react" {
5
+ interface Register {
6
+ tools: typeof import("./index.js");
7
+ }
8
+ }
9
+
10
+ export {};
@@ -1,28 +1,36 @@
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": {
16
23
  "build": "mcp-use build",
17
24
  "dev": "mcp-use dev",
18
25
  "start": "mcp-use start",
19
- "deploy": "mcp-use deploy"
26
+ "deploy": "mcp-use deploy",
27
+ "typecheck": "mcp-use typecheck"
20
28
  },
21
29
  "dependencies": {
22
30
  "mcp-use": "workspace:*"
23
31
  },
24
32
  "devDependencies": {
25
- "@types/node": "^24.13.2",
26
- "typescript": "7.0.1-rc"
33
+ "@types/node": "^22.20.0",
34
+ "typescript": "^7.0.2"
27
35
  }
28
36
  }