create-mcp-use-app 0.7.4-canary.0 → 0.7.4

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":""}

package/dist/index.js

@@ -1,9 +1,11 @@
 #!/usr/bin/env node
 
-// src/index.ts
+// src/index.tsx
 import chalk from "chalk";
 import { Command } from "commander";
-import inquirer from "inquirer";
+import { render } from "ink";
+import SelectInput from "ink-select-input";
+import TextInput from "ink-text-input";
 import { execSync, spawn } from "child_process";
 import {
   copyFileSync,
@@ -17,6 +19,8 @@ import {
 import { dirname, join, resolve } from "path";
 import { fileURLToPath } from "url";
 import ora from "ora";
+import React, { useState } from "react";
+import { Box, Text } from "ink";
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = dirname(__filename);
 function runPackageManager(packageManager, args, cwd) {
@@ -231,9 +235,48 @@ function processTemplateFile(filePath, versions, isDevelopment = false, useCanar
   }
   return processedContent;
 }
-program.name("create-mcp-use-app").description("Create a new MCP server project").version(packageJson.version).argument("[project-name]", "Name of the MCP server project").option("-t, --template <template>", "Template to use", "starter").option("--install", "Install dependencies after creating project").option("--no-git", "Skip initializing a git repository").option("--dev", "Use workspace dependencies for development").option("--canary", "Use canary versions of packages").option("--yarn", "Use yarn as package manager").option("--npm", "Use npm as package manager").option("--pnpm", "Use pnpm as package manager").action(
+function getAvailableTemplates() {
+  const templatesDir = join(__dirname, "templates");
+  if (!existsSync(templatesDir)) {
+    return [];
+  }
+  return readdirSync(templatesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name).sort();
+}
+function listTemplates() {
+  console.log("");
+  renderLogo();
+  console.log("");
+  console.log(chalk.bold("Available Templates:"));
+  console.log("");
+  const templatesDir = join(__dirname, "templates");
+  const availableTemplates = getAvailableTemplates();
+  if (availableTemplates.length === 0) {
+    console.log(chalk.red("\u274C No templates found!"));
+    return;
+  }
+  for (const template of availableTemplates) {
+    const packageJsonPath = join(templatesDir, template, "package.json");
+    let description = "MCP server template";
+    if (existsSync(packageJsonPath)) {
+      try {
+        const packageJson2 = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+        description = packageJson2.description || description;
+      } catch (error) {
+      }
+    }
+    console.log(chalk.cyan(`  ${template.padEnd(15)}`), chalk.gray(description));
+  }
+  console.log("");
+  console.log(chalk.gray("\u{1F4A1} Use with: npx create-mcp-use-app my-project --template <template>"));
+  console.log("");
+}
+program.name("create-mcp-use-app").description("Create a new MCP server project").version(packageJson.version).argument("[project-name]", "Name of the MCP server project").option("-t, --template <template>", "Template to use (starter, mcp-ui, apps-sdk)", "starter").option("--list-templates", "List all available templates").option("--install", "Install dependencies after creating project").option("--no-git", "Skip initializing a git repository").option("--dev", "Use workspace dependencies for development").option("--canary", "Use canary versions of packages").option("--yarn", "Use yarn as package manager").option("--npm", "Use npm as package manager").option("--pnpm", "Use pnpm as package manager").action(
   async (projectName, options) => {
     try {
+      if (options.listTemplates) {
+        listTemplates();
+        process.exit(0);
+      }
       let selectedTemplate = options.template;
       if (!projectName) {
         console.log("");
@@ -581,58 +624,94 @@ function updatePackageJson(projectPath, projectName) {
   packageJsonContent.description = `MCP server: ${projectName}`;
   writeFileSync(packageJsonPath, JSON.stringify(packageJsonContent, null, 2));
 }
-async function promptForProjectName() {
-  const { projectName } = await inquirer.prompt([
+function ProjectNameInput({ onSubmit }) {
+  const [value, setValue] = useState("");
+  const [error, setError] = useState("");
+  const handleSubmit = (val) => {
+    const trimmed = val.trim();
+    if (!trimmed) {
+      setError("Project name is required");
+      return;
+    }
+    if (!/^[a-zA-Z0-9-_]+$/.test(trimmed)) {
+      setError("Project name can only contain letters, numbers, hyphens, and underscores");
+      return;
+    }
+    if (existsSync(join(process.cwd(), trimmed))) {
+      setError(`Directory "${trimmed}" already exists! Please choose a different name.`);
+      return;
+    }
+    onSubmit(trimmed);
+  };
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "What is your project name?")), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "cyan" }, "\u276F "), /* @__PURE__ */ React.createElement(
+    TextInput,
     {
-      type: "input",
-      name: "projectName",
-      message: "What is your project name?",
-      validate: (input) => {
-        const trimmed = input.trim();
-        if (!trimmed) {
-          return "Project name is required";
-        }
-        if (!/^[a-zA-Z0-9-_]+$/.test(trimmed)) {
-          return "Project name can only contain letters, numbers, hyphens, and underscores";
-        }
-        if (existsSync(join(process.cwd(), trimmed))) {
-          return `Directory "${trimmed}" already exists! Please choose a different name.`;
-        }
-        return true;
-      }
+      value,
+      onChange: setValue,
+      onSubmit: handleSubmit
     }
-  ]);
-  return projectName;
+  )), error && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "red" }, "\u2716 ", error)));
 }
-async function promptForTemplate() {
+async function promptForProjectName() {
+  return new Promise((resolve2) => {
+    const { unmount } = render(
+      /* @__PURE__ */ React.createElement(
+        ProjectNameInput,
+        {
+          onSubmit: (name) => {
+            unmount();
+            resolve2(name);
+          }
+        }
+      )
+    );
+  });
+}
+function TemplateSelector({ onSelect }) {
   const templatesDir = join(__dirname, "templates");
+  if (!existsSync(templatesDir)) {
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { color: "red" }, "\u274C Templates directory not found at: ", templatesDir), /* @__PURE__ */ React.createElement(Text, { color: "yellow" }, "   __dirname: ", __dirname));
+  }
   const availableTemplates = readdirSync(templatesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name).sort();
-  const templateDescriptions = {};
-  for (const template2 of availableTemplates) {
-    const packageJsonPath = join(templatesDir, template2, "package.json");
+  if (availableTemplates.length === 0) {
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { color: "red" }, "\u274C No templates found in: ", templatesDir));
+  }
+  const items = availableTemplates.map((template) => {
+    const packageJsonPath = join(templatesDir, template, "package.json");
+    let description = "MCP server template";
     if (existsSync(packageJsonPath)) {
       try {
         const packageJson2 = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-        templateDescriptions[template2] = packageJson2.description || "MCP server template";
+        description = packageJson2.description || description;
       } catch (error) {
-        templateDescriptions[template2] = "MCP server template";
       }
-    } else {
-      templateDescriptions[template2] = "MCP server template";
     }
-  }
-  const { template } = await inquirer.prompt([
+    return {
+      label: `${template} - ${description}`,
+      value: template
+    };
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Select a template:")), /* @__PURE__ */ React.createElement(
+    SelectInput,
     {
-      type: "list",
-      name: "template",
-      message: "Select a template:",
-      default: "starter",
-      choices: availableTemplates.map((template2) => ({
-        name: `${template2} - ${templateDescriptions[template2] || "MCP server template"}`,
-        value: template2
-      }))
+      items,
+      onSelect: (item) => onSelect(item.value)
     }
-  ]);
-  return template;
+  ));
+}
+async function promptForTemplate() {
+  return new Promise((resolve2) => {
+    const { unmount } = render(
+      /* @__PURE__ */ React.createElement(
+        TemplateSelector,
+        {
+          onSelect: (template) => {
+            unmount();
+            resolve2(template);
+          }
+        }
+      )
+    );
+  });
 }
 program.parse();

package/dist/templates/starter/package.json

@@ -27,12 +27,15 @@
     "deploy": "mcp-use deploy"
   },
   "dependencies": {
+    "@openai/apps-sdk-ui": "^0.2.0",
+    "@tanstack/react-query": "^5.90.11",
     "cors": "^2.8.5",
     "express": "^5.2.0",
     "mcp-use": "workspace:*",
     "node-mocks-http": "^1.17.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-router": "^7.9.6",
     "react-router-dom": "^7.9.6",
     "tailwindcss": "^4.1.17",
     "zod": "^4.1.13"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mcp-use-app",
-  "version": "0.7.4-canary.0",
+  "version": "0.7.4",
   "type": "module",
   "description": "Create MCP-Use apps with one command",
   "author": "mcp-use, Inc.",
@@ -39,13 +39,16 @@
     "chalk": "^5.6.2",
     "commander": "^14.0.2",
     "fs-extra": "^11.3.2",
-    "inquirer": "^13.0.1",
-    "ora": "^9.0.0"
+    "ink": "^6.5.1",
+    "ink-select-input": "^6.2.0",
+    "ink-text-input": "^6.0.0",
+    "ora": "^9.0.0",
+    "react": "^19.2.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
-    "@types/inquirer": "^9.0.9",
     "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
     "typescript": "^5.9.3",
     "vitest": "^4.0.14"
   },
@@ -53,7 +56,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "npm run clean && tsup src/index.ts --format esm && tsc --emitDeclarationOnly --declaration && npm run copy-templates",
+    "build": "npm run clean && tsup src/index.tsx --format esm && tsc --emitDeclarationOnly --declaration && npm run copy-templates",
     "clean": "rm -rf dist tsconfig.tsbuildinfo",
     "copy-templates": "node scripts/copy-templates.js",
     "dev": "tsc --build --watch",