create-mcp-use-app 2.0.0-beta.9 → 2.0.0

package/README.md

@@ -27,8 +27,7 @@
 
 | Package                                                                                                    | Description             | Version                                                                                                         |
 | ---------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------- |
-| [mcp-use](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/mcp-use)              | Core MCP framework      | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use)                       |
-| [@mcp-use/cli](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/cli)             | Build tool for MCP apps | [![npm](https://img.shields.io/npm/v/@mcp-use/cli.svg)](https://www.npmjs.com/package/@mcp-use/cli)             |
+| [mcp-use](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/server)               | MCP framework and CLI   | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use)                       |
 | [@mcp-use/inspector](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/inspector) | Web-based MCP inspector | [![npm](https://img.shields.io/npm/v/@mcp-use/inspector.svg)](https://www.npmjs.com/package/@mcp-use/inspector) |
 
 ---
@@ -66,16 +65,16 @@ my-mcp-server/
 
 ### Pre-configured Features
 
-| Feature                 | Description                                       |
-| ----------------------- | ------------------------------------------------- |
-| **📝 TypeScript**       | Full TypeScript setup with proper types           |
-| **🔥 Hot Reload**       | Auto-restart on code changes during development   |
-| **🔍 Auto Inspector**   | Inspector UI opens automatically in dev mode      |
-| **🎨 MCP Apps Views**   | React views discovered and bundled by the CLI      |
-| **🛠️ Example Tools**    | Sample MCP tools, resources, and prompts          |
-| **📦 Build Scripts**    | Ready-to-use development and production scripts   |
+| Feature                 | Description                                          |
+| ----------------------- | ---------------------------------------------------- |
+| **📝 TypeScript**       | Full TypeScript setup with proper types              |
+| **🔥 Hot Reload**       | Auto-restart on code changes during development      |
+| **🔍 Auto Inspector**   | Inspector UI opens automatically in dev mode         |
+| **🎨 MCP Apps Views**   | React views discovered and bundled by the CLI        |
+| **🛠️ Example Tools**    | Sample MCP tools, resources, and prompts             |
+| **📦 Build Scripts**    | Ready-to-use development and production scripts      |
 | **✅ Type Checking**    | Refreshes MCP view types, then runs local TypeScript |
-| **🚀 Production Ready** | Optimized build configuration                     |
+| **🚀 Production Ready** | Optimized build configuration                        |
 
 ---
 
@@ -203,14 +202,11 @@ The scaffolded project includes these dependencies:
 
 ### Core Dependencies
 
-- `mcp-use` - The MCP framework
-- `@mcp-use/cli` - Build and development tool
-- `@mcp-use/inspector` - Web-based debugger
+- `mcp-use` - The MCP framework, including its CLI and built-in Inspector
 
 ### Development Dependencies
 
 - `typescript` - TypeScript compiler
-- `tsx` - TypeScript executor for development
 - `@types/node` - Node.js type definitions
 
 ### Template-Specific Dependencies
@@ -510,8 +506,8 @@ See our [contributing guide](https://github.com/mcp-use/mcp-use/blob/main/CONTRI
 
 - [mcp-use Documentation](https://github.com/mcp-use/mcp-use)
 - [Model Context Protocol Spec](https://modelcontextprotocol.io)
-- [Creating MCP Tools](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/mcp-use#-mcp-server-framework)
-- [Building UI Widgets](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/cli#-creating-ui-widgets)
+- [Creating MCP Tools](https://mcp-use.com/docs/typescript/server/tools)
+- [Building MCP App Views](https://mcp-use.com/docs/typescript/mcp-apps)
 - [Using the Inspector](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/inspector)
 - [Supabase Edge Functions](https://supabase.com/docs/guides/functions)
 

package/dist/index.js

@@ -1334,6 +1334,35 @@ function updateIndexTs(projectPath, projectName) {
   writeFileSync(indexPath, content);
 }
 
+// src/skills-config.ts
+var SKILLS_REPO = "https://github.com/mcp-use/mcp-use.git";
+var SKILLS_SPARSE_PATH = "skills/mcp-apps-builder";
+var SKILLS_AGENT_DIRS = [".cursor", ".claude", ".agents"];
+function getDefaultDistTag(packageVersion) {
+  return packageVersion.includes("-beta.") ? "beta" : "latest";
+}
+function getSkillsBranch(packageVersion) {
+  return getDefaultDistTag(packageVersion) === "beta" ? "beta" : "main";
+}
+function getSkillsManualInstallCommand(packageVersion) {
+  const branch = getSkillsBranch(packageVersion);
+  return `npx --yes skills add mcp-use/mcp-use#${branch} --yes --skill mcp-apps-builder -a cursor -a claude-code -a codex`;
+}
+function getSkillsCloneArgs(repoDir, packageVersion) {
+  return [
+    "clone",
+    "--depth",
+    "1",
+    "--filter=blob:none",
+    "--sparse",
+    "--single-branch",
+    "--branch",
+    getSkillsBranch(packageVersion),
+    SKILLS_REPO,
+    repoDir
+  ];
+}
+
 // src/index.ts
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = dirname2(__filename);
@@ -1455,10 +1484,6 @@ function sendInstallTelemetryEvent(agents, skills) {
   } catch {
   }
 }
-var SKILLS_REPO = "https://github.com/mcp-use/mcp-use.git";
-var SKILLS_SPARSE_PATH = "skills/mcp-apps-builder";
-var SKILLS_AGENT_DIRS = [".cursor", ".claude", ".agent"];
-var SKILLS_MANUAL_INSTALL_CMD = "npx --yes skills add mcp-use/mcp-use --yes --skill mcp-apps-builder -a cursor -a claude-code -a codex";
 function isGitAvailable() {
   const result = spawnSync("git", ["--version"], {
     stdio: "ignore",
@@ -1469,7 +1494,11 @@ function isGitAvailable() {
 function warnSkillsInstallFailed(missingGit) {
   const reason = missingGit ? "Failed to install skills: git is not installed or not in PATH." : "Failed to install skills.";
   console.log(yellow(`\u26A0\uFE0F  ${reason}`));
-  console.log(yellow(`   Run manually: ${SKILLS_MANUAL_INSTALL_CMD}`));
+  console.log(
+    yellow(
+      `   Run manually: ${getSkillsManualInstallCommand(packageJson.version)}`
+    )
+  );
 }
 async function installSkills(projectPath) {
   const tempDir = mkdtempSync(join3(tmpdir(), "mcp-use-skills-"));
@@ -1477,17 +1506,11 @@ async function installSkills(projectPath) {
   try {
     const clone = spawnSync(
       "git",
-      [
-        "clone",
-        "--depth",
-        "1",
-        "--filter=blob:none",
-        "--sparse",
-        "--single-branch",
-        SKILLS_REPO,
-        repoDir
-      ],
-      { stdio: "ignore", shell: false }
+      getSkillsCloneArgs(repoDir, packageJson.version),
+      {
+        stdio: "ignore",
+        shell: false
+      }
     );
     if (clone.status !== 0 || clone.error) {
       throw new Error("git clone failed");
@@ -1532,17 +1555,6 @@ function renderLogo() {
 var packageJson = JSON.parse(
   readFileSync2(join3(__dirname, "../package.json"), "utf-8")
 );
-function getCurrentPackageVersions(isDevelopment = false, sdkVersion) {
-  if (isDevelopment) {
-    return {
-      "mcp-use": "workspace:*"
-    };
-  }
-  const requestedSdk = sdkVersion ?? "latest";
-  return {
-    "mcp-use": requestedSdk
-  };
-}
 function processTemplateFile(filePath, versions, isDevelopment = false) {
   const content = readFileSync2(filePath, "utf-8");
   let processedContent = content;
@@ -1553,7 +1565,7 @@ function processTemplateFile(filePath, versions, isDevelopment = false) {
       version
     );
   }
-  const mcpUseVersion = isDevelopment ? "workspace:*" : versions["mcp-use"] || "latest";
+  const mcpUseVersion = isDevelopment ? "workspace:*" : versions["mcp-use"];
   if (isDevelopment) {
     processedContent = processedContent.replace(
       /"mcp-use": "\^[^"]+"/,
@@ -2026,11 +2038,38 @@ async function main() {
       );
       process.exit(1);
     }
+  }
+  let mcpUseVersion;
+  if (options.dev) {
+    mcpUseVersion = "workspace:*";
+  } else if (options.sdkVersion) {
+    mcpUseVersion = options.sdkVersion;
+  } else {
+    const defaultDistTag = getDefaultDistTag(packageJson.version);
+    const response = await fetch("https://registry.npmjs.org/mcp-use", {
+      headers: { Accept: "application/vnd.npm.install-v1+json" },
+      signal: AbortSignal.timeout(1e4)
+    });
+    if (!response.ok) {
+      throw new Error(
+        `Failed to resolve the mcp-use ${defaultDistTag} dist-tag from npm (${response.status})`
+      );
+    }
+    const metadata = await response.json();
+    const defaultVersion = metadata["dist-tags"]?.[defaultDistTag];
+    if (!defaultVersion) {
+      throw new Error(
+        `npm did not return a ${defaultDistTag} version for mcp-use`
+      );
+    }
+    mcpUseVersion = defaultVersion;
+  }
+  const versions = { "mcp-use": mcpUseVersion };
+  if (!useCurrentDir) {
     mkdirSync(projectPath, { recursive: true });
   }
   console.log(cyan(`\u{1F680} Creating MCP server "${displayName}"...`));
   const validatedTemplate = validateTemplateName(selectedTemplate);
-  const versions = getCurrentPackageVersions(options.dev, options.sdkVersion);
   await copyTemplate(projectPath, validatedTemplate, versions, options.dev);
   updatePackageJson(projectPath, packageName);
   updateIndexTs(projectPath, packageName);
@@ -2140,7 +2179,7 @@ async function main() {
   console.log(bold("\u{1F4C1} Project structure:"));
   console.log(`   ${useCurrentDir ? "." : displayName}/`);
   if (skillsInstalled) {
-    console.log("   \u251C\u2500\u2500 .agent/skills/");
+    console.log("   \u251C\u2500\u2500 .agents/skills/");
     console.log("   \u251C\u2500\u2500 .claude/skills/");
     console.log("   \u251C\u2500\u2500 .cursor/skills/");
   }

package/dist/skills-config.d.ts

@@ -0,0 +1,8 @@
+export declare const SKILLS_REPO = "https://github.com/mcp-use/mcp-use.git";
+export declare const SKILLS_SPARSE_PATH = "skills/mcp-apps-builder";
+export declare const SKILLS_AGENT_DIRS: readonly [".cursor", ".claude", ".agents"];
+export declare function getDefaultDistTag(packageVersion: string): "beta" | "latest";
+export declare function getSkillsBranch(packageVersion: string): "beta" | "main";
+export declare function getSkillsManualInstallCommand(packageVersion: string): string;
+export declare function getSkillsCloneArgs(repoDir: string, packageVersion: string): string[];
+//# sourceMappingURL=skills-config.d.ts.map

package/dist/skills-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skills-config.d.ts","sourceRoot":"","sources":["../src/skills-config.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,2CAA2C,CAAC;AACpE,eAAO,MAAM,kBAAkB,4BAA4B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,4CAA6C,CAAC;AAE5E,wBAAgB,iBAAiB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAE3E;AAED,wBAAgB,eAAe,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAEvE;AAED,wBAAgB,6BAA6B,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAG5E;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,MAAM,GACrB,MAAM,EAAE,CAaV"}

package/dist/templates/blank/mcp-env.d.ts

@@ -1,5 +1,5 @@
 // Generated by mcp-use. Do not edit.
-declare module "*.css";
+import "mcp-use/vite-client";
 
 declare module "mcp-use/react" {
   interface Register {

package/dist/templates/blank/tsconfig.json

@@ -10,7 +10,7 @@
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true,
     "noEmit": true,
-    "noUncheckedSideEffectImports": false
+    "noUncheckedSideEffectImports": true
   },
   "include": [
     "index.ts",

package/dist/templates/mcp-apps/mcp-env.d.ts

@@ -1,5 +1,5 @@
 // Generated by mcp-use. Do not edit.
-declare module "*.css";
+import "mcp-use/vite-client";
 
 declare module "mcp-use/react" {
   interface Register {

package/dist/templates/mcp-apps/tsconfig.json

@@ -10,7 +10,7 @@
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true,
     "noEmit": true,
-    "noUncheckedSideEffectImports": false
+    "noUncheckedSideEffectImports": true
   },
   "include": [
     "index.ts",

package/dist/templates/mcp-apps/views/my-view/icons.tsx

@@ -31,23 +31,6 @@ export function PipIcon() {
   );
 }
 
-export function CloseIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      aria-hidden
-    >
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>
-  );
-}
-
 export function SunIcon() {
   return (
     <svg

package/dist/templates/mcp-apps/views/my-view/view.tsx

@@ -16,7 +16,6 @@ import { useState } from "react";
 import { z } from "zod";
 
 import {
-  CloseIcon,
   ExpandIcon,
   ExternalLinkIcon,
   MonitorIcon,
@@ -124,65 +123,47 @@ export default function McpApp() {
                 </span>
               </Tooltip>
             </div>
-            <div className="flex items-center gap-2">
-              {!isFullscreen && !isPip && (
-                <>
-                  {availableDisplayModes.includes("pip") && (
-                    <Tooltip
-                      label="MCP Apps display mode: picture-in-picture"
-                      multiline
+            {!isPip && (
+              <div className="flex items-center gap-2">
+                {availableDisplayModes.includes("pip") && (
+                  <Tooltip
+                    label="MCP Apps display mode: picture-in-picture"
+                    multiline
+                  >
+                    <button
+                      type="button"
+                      className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
+                      aria-label="Picture-in-picture"
+                      onClick={() => void requestDisplayMode({ mode: "pip" })}
                     >
-                      <button
-                        type="button"
-                        className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
-                        aria-label="Picture-in-picture"
-                        onClick={() => void requestDisplayMode({ mode: "pip" })}
-                      >
-                        <PipIcon />
-                      </button>
-                    </Tooltip>
-                  )}
-                  {availableDisplayModes.includes("fullscreen") && (
-                    <Tooltip
-                      label="MCP Apps display mode: fullscreen"
-                      multiline
+                      <PipIcon />
+                    </button>
+                  </Tooltip>
+                )}
+                {availableDisplayModes.includes("fullscreen") && (
+                  <Tooltip label="MCP Apps display mode: fullscreen" multiline>
+                    <button
+                      type="button"
+                      className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
+                      aria-label="Fullscreen"
+                      onClick={() =>
+                        void requestDisplayMode({ mode: "fullscreen" })
+                      }
                     >
-                      <button
-                        type="button"
-                        className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
-                        aria-label="Fullscreen"
-                        onClick={() =>
-                          void requestDisplayMode({ mode: "fullscreen" })
-                        }
-                      >
-                        <ExpandIcon />
-                      </button>
-                    </Tooltip>
-                  )}
-                </>
-              )}
-              {(isFullscreen || isPip) && (
-                <Tooltip
-                  label="MCP Apps display mode: return to inline"
-                  multiline
-                >
-                  <button
-                    type="button"
-                    className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
-                    aria-label="Exit"
-                    onClick={() => void requestDisplayMode({ mode: "inline" })}
-                  >
-                    <CloseIcon />
-                  </button>
-                </Tooltip>
-              )}
-            </div>
+                      <ExpandIcon />
+                    </button>
+                  </Tooltip>
+                )}
+              </div>
+            )}
           </div>
         )}
         {!isMobile && (
           <button
             type="button"
-            className="absolute bottom-6 left-1/2 z-20 flex -translate-x-1/2 cursor-pointer flex-col items-center gap-1 border-0 bg-transparent p-0 text-neutral-900 transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+            className={`absolute left-1/2 z-20 flex -translate-x-1/2 cursor-pointer flex-col items-center gap-1 border-0 bg-transparent p-0 text-neutral-900 transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50 ${
+              isFullscreen ? "top-6" : "bottom-6"
+            }`}
             disabled={!canOpenExternal}
             title="mcp-use on GitHub"
             onClick={() =>
@@ -202,7 +183,7 @@ export default function McpApp() {
         <div
           className={`relative z-10 flex flex-col items-center text-center ${
             isFullscreen
-              ? "min-h-0 flex-1 justify-center overflow-y-auto px-6 py-8"
+              ? "min-h-0 flex-1 justify-center overflow-y-auto px-6 pt-24 pb-8"
               : isMobile
                 ? "px-6 py-10"
                 : "min-h-[400px] px-8 py-8 pb-16 sm:min-h-[440px] sm:px-10 sm:py-10 sm:pb-16"

package/dist/templates/mcp-server/mcp-env.d.ts

@@ -1,5 +1,5 @@
 // Generated by mcp-use. Do not edit.
-declare module "*.css";
+import "mcp-use/vite-client";
 
 declare module "mcp-use/react" {
   interface Register {

package/dist/templates/mcp-server/tsconfig.json

@@ -10,7 +10,7 @@
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true,
     "noEmit": true,
-    "noUncheckedSideEffectImports": false
+    "noUncheckedSideEffectImports": true
   },
   "include": [
     "index.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mcp-use-app",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0",
   "type": "module",
   "description": "Create MCP-Use apps with one command",
   "author": "mcp-use, Inc.",