create-mcp-use-app 2.0.0-beta.12 → 2.0.0-beta.14

package/dist/index.js

@@ -1532,18 +1532,6 @@ function renderLogo() {
 var packageJson = JSON.parse(
   readFileSync2(join3(__dirname, "../package.json"), "utf-8")
 );
-var DEFAULT_MCP_USE_VERSION = "2.0.0-beta.36";
-function getCurrentPackageVersions(isDevelopment = false, sdkVersion) {
-  if (isDevelopment) {
-    return {
-      "mcp-use": "workspace:*"
-    };
-  }
-  const requestedSdk = sdkVersion ?? DEFAULT_MCP_USE_VERSION;
-  return {
-    "mcp-use": requestedSdk
-  };
-}
 function processTemplateFile(filePath, versions, isDevelopment = false) {
   const content = readFileSync2(filePath, "utf-8");
   let processedContent = content;
@@ -1554,7 +1542,7 @@ function processTemplateFile(filePath, versions, isDevelopment = false) {
       version
     );
   }
-  const mcpUseVersion = isDevelopment ? "workspace:*" : versions["mcp-use"] || DEFAULT_MCP_USE_VERSION;
+  const mcpUseVersion = isDevelopment ? "workspace:*" : versions["mcp-use"];
   if (isDevelopment) {
     processedContent = processedContent.replace(
       /"mcp-use": "\^[^"]+"/,
@@ -2027,11 +2015,35 @@ async function main() {
       );
       process.exit(1);
     }
+  }
+  let mcpUseVersion;
+  if (options.dev) {
+    mcpUseVersion = "workspace:*";
+  } else if (options.sdkVersion) {
+    mcpUseVersion = options.sdkVersion;
+  } else {
+    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 beta dist-tag from npm (${response.status})`
+      );
+    }
+    const metadata = await response.json();
+    const betaVersion = metadata["dist-tags"]?.beta;
+    if (!betaVersion) {
+      throw new Error("npm did not return a beta version for mcp-use");
+    }
+    mcpUseVersion = betaVersion;
+  }
+  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);

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/package.json

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