create-mcp-use-app 0.2.1 → 0.3.1

package/dist/index.js

@@ -5,12 +5,23 @@ import { execSync } from "child_process";
 import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "fs";
 import { dirname, join, resolve } from "path";
 import { fileURLToPath } from "url";
+import { createInterface } from "readline";
 import { Command } from "commander";
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = dirname(__filename);
 var program = new Command();
-program.name("create-mcp-use-app").description("Create a new MCP server project").version("0.1.0").argument("<project-name>", "Name of the MCP server project").option("-t, --template <template>", "Template to use", "basic").option("--no-install", "Skip installing dependencies").action(async (projectName, options) => {
+program.name("create-mcp-use-app").description("Create a new MCP server project").version("0.1.0").argument("[project-name]", "Name of the MCP server project").option("-t, --template <template>", "Template to use", "ui").option("--no-install", "Skip installing dependencies").action(async (projectName, options) => {
   try {
+    if (!projectName) {
+      console.log("\u{1F3AF} Welcome to create-mcp-use-app!");
+      console.log("");
+      const promptedName = await promptForProjectName();
+      if (!promptedName) {
+        console.log("\u274C Project creation cancelled.");
+        process.exit(0);
+      }
+      projectName = promptedName;
+    }
     console.log(`\u{1F680} Creating MCP server "${projectName}"...`);
     const projectPath = resolve(process.cwd(), projectName);
     if (existsSync(projectPath)) {
@@ -37,11 +48,23 @@ program.name("create-mcp-use-app").description("Create a new MCP server project"
     console.log("");
     console.log("\u{1F4C1} Project structure:");
     console.log(`   ${projectName}/`);
-    console.log("   \u251C\u2500\u2500 src/");
-    console.log("   \u2502   \u2514\u2500\u2500 server.ts");
-    console.log("   \u251C\u2500\u2500 package.json");
-    console.log("   \u251C\u2500\u2500 tsconfig.json");
-    console.log("   \u2514\u2500\u2500 README.md");
+    if (options.template === "ui") {
+      console.log("   \u251C\u2500\u2500 src/");
+      console.log("   \u2502   \u2514\u2500\u2500 server.ts");
+      console.log("   \u251C\u2500\u2500 resources/");
+      console.log("   \u2502   \u251C\u2500\u2500 data-visualization.tsx");
+      console.log("   \u2502   \u251C\u2500\u2500 kanban-board.tsx");
+      console.log("   \u2502   \u2514\u2500\u2500 todo-list.tsx");
+      console.log("   \u251C\u2500\u2500 package.json");
+      console.log("   \u251C\u2500\u2500 tsconfig.json");
+      console.log("   \u2514\u2500\u2500 README.md");
+    } else {
+      console.log("   \u251C\u2500\u2500 src/");
+      console.log("   \u2502   \u2514\u2500\u2500 server.ts");
+      console.log("   \u251C\u2500\u2500 package.json");
+      console.log("   \u251C\u2500\u2500 tsconfig.json");
+      console.log("   \u2514\u2500\u2500 README.md");
+    }
     console.log("");
     console.log("\u{1F680} To get started:");
     console.log(`   cd ${projectName}`);
@@ -61,6 +84,7 @@ async function copyTemplate(projectPath, template) {
   if (!existsSync(templatePath)) {
     console.error(`\u274C Template "${template}" not found!`);
     console.log("Available templates: basic, filesystem, api, ui");
+    console.log('\u{1F4A1} Tip: Use "ui" template for React components and modern UI features');
     process.exit(1);
   }
   copyDirectory(templatePath, projectPath);
@@ -85,4 +109,35 @@ function updatePackageJson(projectPath, projectName) {
   packageJson.description = `MCP server: ${projectName}`;
   writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
 }
+function promptForProjectName() {
+  return new Promise((resolvePromise) => {
+    const rl = createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+    const askForName = () => {
+      rl.question("What is your project name? ", (answer) => {
+        const trimmed = answer.trim();
+        if (!trimmed) {
+          console.log("\u274C Project name is required");
+          askForName();
+          return;
+        }
+        if (!/^[a-zA-Z0-9-_]+$/.test(trimmed)) {
+          console.log("\u274C Project name can only contain letters, numbers, hyphens, and underscores");
+          askForName();
+          return;
+        }
+        if (existsSync(join(process.cwd(), trimmed))) {
+          console.log(`\u274C Directory "${trimmed}" already exists! Please choose a different name.`);
+          askForName();
+          return;
+        }
+        rl.close();
+        resolvePromise(trimmed);
+      });
+    };
+    askForName();
+  });
+}
 program.parse();

package/dist/templates/ui/package.json

@@ -22,13 +22,12 @@
   },
   "dependencies": {
     "@mcp-ui/server": "^5.11.0",
-    "@mcp-use/inspector": "workspace:*",
     "cors": "^2.8.5",
     "express": "^4.18.0",
-    "mcp-use": "workspace:*"
+    "mcp-use": "^0.3.0"
   },
   "devDependencies": {
-    "@mcp-use/cli": "workspace:*",
+    "@mcp-use/cli": "^2.0.2",
     "@types/cors": "^2.8.0",
     "@types/express": "^4.17.0",
     "@types/node": "^20.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mcp-use-app",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "type": "module",
   "description": "Create MCP-Use apps with one command",
   "author": "mcp-use, Inc.",
@@ -38,13 +38,11 @@
   },
   "dependencies": {
     "commander": "^11.0.0",
-    "prompts": "^2.4.2",
     "chalk": "^5.3.0",
     "fs-extra": "^11.2.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
-    "@types/prompts": "^2.4.9",
     "@types/fs-extra": "^11.0.4",
     "typescript": "^5.0.0",
     "vitest": "^1.0.0"

package/dist/templates/api/README.md

@@ -1,224 +0,0 @@
-# API MCP Server
-
-An API MCP server created with `create-mcp-app` that provides HTTP operations and API integrations.
-
-## Features
-
-- **🌐 HTTP Requests**: GET and POST requests
-- **🌤️ Weather API**: Get weather information
-- **📊 JSON Placeholder**: Test API interactions
-- **📚 Documentation**: Generate API documentation
-
-## Getting Started
-
-### Development
-
-```bash
-# Install dependencies
-npm install
-
-# Run in development mode
-npm run dev
-```
-
-### Production
-
-```bash
-# Build the server
-npm run build
-
-# Run the built server
-npm start
-```
-
-## Available Tools
-
-### `http-get`
-
-Make an HTTP GET request to any URL.
-
-**Parameters:**
-
-- `url` (string, required): URL to make the GET request to
-- `headers` (object, optional): Optional headers to include
-
-**Example:**
-
-```json
-{
-  "url": "https://api.github.com/users/octocat",
-  "headers": {
-    "User-Agent": "MyApp/1.0"
-  }
-}
-```
-
-### `http-post`
-
-Make an HTTP POST request to any URL.
-
-**Parameters:**
-
-- `url` (string, required): URL to make the POST request to
-- `data` (object, required): Data to send in the request body
-- `headers` (object, optional): Optional headers to include
-
-**Example:**
-
-```json
-{
-  "url": "https://httpbin.org/post",
-  "data": {
-    "message": "Hello World"
-  },
-  "headers": {
-    "Content-Type": "application/json"
-  }
-}
-```
-
-### `weather`
-
-Get weather information for a city.
-
-**Parameters:**
-
-- `city` (string, required): City name to get weather for
-- `apiKey` (string, optional): OpenWeatherMap API key
-
-**Example:**
-
-```json
-{
-  "city": "London",
-  "apiKey": "your-api-key-here"
-}
-```
-
-**Note:** Get a free API key at [OpenWeatherMap](https://openweathermap.org/api).
-
-### `json-placeholder`
-
-Interact with JSONPlaceholder API for testing.
-
-**Parameters:**
-
-- `resource` (string, required): Resource type (posts, users, comments, albums, photos, todos)
-- `id` (string, optional): Specific ID (will list all if not provided)
-
-**Example:**
-
-```json
-{
-  "resource": "posts",
-  "id": "1"
-}
-```
-
-## Available Resources
-
-### `api://status`
-
-Current status and information about the API server.
-
-## Available Prompts
-
-### `api-docs`
-
-Generate API documentation for endpoints.
-
-**Parameters:**
-
-- `endpoint` (string, required): API endpoint to document
-- `method` (string, optional): HTTP method (default: GET)
-
-## API Integrations
-
-### Weather API
-
-- **Service**: OpenWeatherMap
-- **Free Tier**: 1,000 calls/day
-- **Signup**: [OpenWeatherMap](https://openweathermap.org/api)
-
-### JSON Placeholder
-
-- **Service**: JSONPlaceholder
-- **Free**: Yes, no API key required
-- **Documentation**: [JSONPlaceholder](https://jsonplaceholder.typicode.com/)
-
-## Customization
-
-### Adding New API Integrations
-
-```typescript
-// Add a new API tool
-mcp.tool({
-  name: 'my-api',
-  description: 'Call my custom API',
-  inputs: [
-    { name: 'endpoint', type: 'string', required: true },
-    { name: 'params', type: 'object', required: false }
-  ],
-  fn: async ({ endpoint, params }) => {
-    const response = await axios.get(`https://my-api.com/${endpoint}`, { params })
-    return JSON.stringify(response.data, null, 2)
-  }
-})
-```
-
-### Adding Authentication
-
-```typescript
-// Add API key authentication
-const apiKey = process.env.MY_API_KEY
-if (!apiKey) {
-  throw new Error('MY_API_KEY environment variable is required')
-}
-
-// Use in requests
-const response = await axios.get(url, {
-  headers: { Authorization: `Bearer ${apiKey}` }
-})
-```
-
-### Error Handling
-
-```typescript
-// Custom error handling
-mcp.tool({
-  name: 'safe-request',
-  inputs: [{ name: 'url', type: 'string', required: true }],
-  fn: async ({ url }) => {
-    try {
-      const response = await axios.get(url, { timeout: 5000 })
-      return `Success: ${response.status}`
-    }
-    catch (error) {
-      if (axios.isAxiosError(error)) {
-        return `HTTP Error: ${error.response?.status} - ${error.message}`
-      }
-      return `Error: ${error instanceof Error ? error.message : 'Unknown error'}`
-    }
-  }
-})
-```
-
-## Environment Variables
-
-Create a `.env` file for API keys:
-
-```bash
-# Weather API
-OPENWEATHER_API_KEY=your_openweather_api_key
-
-# Custom APIs
-MY_API_KEY=your_custom_api_key
-```
-
-## Learn More
-
-- [MCP Documentation](https://modelcontextprotocol.io)
-- [mcp-use Documentation](https://docs.mcp-use.io)
-- [Axios Documentation](https://axios-http.com/)
-- [OpenWeatherMap API](https://openweathermap.org/api)
-- [JSONPlaceholder](https://jsonplaceholder.typicode.com/)

package/dist/templates/api/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "my-mcp-server",
-  "type": "module",
-  "version": "1.0.0",
-  "description": "MCP server: my-mcp-server",
-  "author": "",
-  "license": "MIT",
-  "keywords": ["mcp", "server", "api", "http", "ai", "tools"],
-  "main": "dist/server.js",
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsx src/server.ts",
-    "start": "node dist/server.js"
-  },
-  "dependencies": {
-    "axios": "^1.6.0",
-    "mcp-use": "latest"
-  },
-  "devDependencies": {
-    "@types/node": "^20.0.0",
-    "tsx": "^4.0.0",
-    "typescript": "^5.0.0"
-  }
-}

package/dist/templates/api/src/server.ts

@@ -1,229 +0,0 @@
-import axios from 'axios'
-import { create } from 'mcp-use/server'
-
-// Create an API MCP server
-const mcp = create('api-server', {
-  version: '1.0.0',
-  description: 'An API MCP server for HTTP operations',
-})
-
-// Resource for server status
-mcp.resource({
-  uri: 'api://status',
-  name: 'API Server Status',
-  description: 'Current status of the API server',
-  mimeType: 'application/json',
-  fn: async () => {
-    return JSON.stringify({
-      name: 'api-server',
-      version: '1.0.0',
-      status: 'running',
-      timestamp: new Date().toISOString(),
-      endpoints: ['http-get', 'http-post', 'weather', 'json-placeholder'],
-    }, null, 2)
-  },
-})
-
-// Tool for making HTTP GET requests
-mcp.tool({
-  name: 'http-get',
-  description: 'Make an HTTP GET request to a URL',
-  inputs: [
-    {
-      name: 'url',
-      type: 'string',
-      description: 'URL to make the GET request to',
-      required: true,
-    },
-    {
-      name: 'headers',
-      type: 'object',
-      description: 'Optional headers to include',
-      required: false,
-    },
-  ],
-  fn: async ({ url, headers = {} }: { url: string, headers?: Record<string, string> }) => {
-    try {
-      const response = await axios.get(url, { headers })
-      return `GET ${url}\nStatus: ${response.status}\nHeaders: ${JSON.stringify(response.headers, null, 2)}\n\nResponse:\n${JSON.stringify(response.data, null, 2)}`
-    }
-    catch (error) {
-      if (axios.isAxiosError(error)) {
-        return `Error making GET request to ${url}:\nStatus: ${error.response?.status}\nMessage: ${error.message}`
-      }
-      return `Error making GET request to ${url}: ${error instanceof Error ? error.message : 'Unknown error'}`
-    }
-  },
-})
-
-// Tool for making HTTP POST requests
-mcp.tool({
-  name: 'http-post',
-  description: 'Make an HTTP POST request to a URL',
-  inputs: [
-    {
-      name: 'url',
-      type: 'string',
-      description: 'URL to make the POST request to',
-      required: true,
-    },
-    {
-      name: 'data',
-      type: 'object',
-      description: 'Data to send in the request body',
-      required: true,
-    },
-    {
-      name: 'headers',
-      type: 'object',
-      description: 'Optional headers to include',
-      required: false,
-    },
-  ],
-  fn: async ({ url, data, headers = {} }: { url: string, data: any, headers?: Record<string, string> }) => {
-    try {
-      const response = await axios.post(url, data, { headers })
-      return `POST ${url}\nStatus: ${response.status}\nHeaders: ${JSON.stringify(response.headers, null, 2)}\n\nResponse:\n${JSON.stringify(response.data, null, 2)}`
-    }
-    catch (error) {
-      if (axios.isAxiosError(error)) {
-        return `Error making POST request to ${url}:\nStatus: ${error.response?.status}\nMessage: ${error.message}`
-      }
-      return `Error making POST request to ${url}: ${error instanceof Error ? error.message : 'Unknown error'}`
-    }
-  },
-})
-
-// Tool for getting weather information (example API integration)
-mcp.tool({
-  name: 'weather',
-  description: 'Get weather information for a city (using OpenWeatherMap API)',
-  inputs: [
-    {
-      name: 'city',
-      type: 'string',
-      description: 'City name to get weather for',
-      required: true,
-    },
-    {
-      name: 'apiKey',
-      type: 'string',
-      description: 'OpenWeatherMap API key (get one at openweathermap.org)',
-      required: false,
-    },
-  ],
-  fn: async ({ city, apiKey }: { city: string, apiKey?: string }) => {
-    try {
-      // Use a demo API key for demonstration (replace with your own)
-      const key = apiKey || 'demo'
-      const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${key}&units=metric`
-
-      const response = await axios.get(url)
-      const weather = response.data
-
-      return `Weather in ${city}:\nTemperature: ${weather.main.temp}°C\nDescription: ${weather.weather[0].description}\nHumidity: ${weather.main.humidity}%\nWind: ${weather.wind.speed} m/s`
-    }
-    catch (error) {
-      if (axios.isAxiosError(error)) {
-        return `Error getting weather for ${city}: ${error.response?.status === 401 ? 'Invalid API key' : error.message}`
-      }
-      return `Error getting weather for ${city}: ${error instanceof Error ? error.message : 'Unknown error'}`
-    }
-  },
-})
-
-// Tool for JSON Placeholder API (free testing API)
-mcp.tool({
-  name: 'json-placeholder',
-  description: 'Interact with JSONPlaceholder API (posts, users, comments)',
-  inputs: [
-    {
-      name: 'resource',
-      type: 'string',
-      description: 'Resource type (posts, users, comments, albums, photos, todos)',
-      required: true,
-    },
-    {
-      name: 'id',
-      type: 'string',
-      description: 'Specific ID (optional, will list all if not provided)',
-      required: false,
-    },
-  ],
-  fn: async ({ resource, id }: { resource: string, id?: string }) => {
-    try {
-      const baseUrl = 'https://jsonplaceholder.typicode.com'
-      const url = id ? `${baseUrl}/${resource}/${id}` : `${baseUrl}/${resource}`
-
-      const response = await axios.get(url)
-      return `JSONPlaceholder ${resource}${id ? ` (ID: ${id})` : ' (all items)'}:\n\n${JSON.stringify(response.data, null, 2)}`
-    }
-    catch (error) {
-      if (axios.isAxiosError(error)) {
-        return `Error fetching ${resource} from JSONPlaceholder: ${error.message}`
-      }
-      return `Error fetching ${resource}: ${error instanceof Error ? error.message : 'Unknown error'}`
-    }
-  },
-})
-
-// Prompt for API documentation
-mcp.prompt({
-  name: 'api-docs',
-  description: 'Generate API documentation',
-  args: [
-    {
-      name: 'endpoint',
-      type: 'string',
-      description: 'API endpoint to document',
-      required: true,
-    },
-    {
-      name: 'method',
-      type: 'string',
-      description: 'HTTP method (GET, POST, PUT, DELETE)',
-      required: false,
-    },
-  ],
-  fn: async ({ endpoint, method = 'GET' }: { endpoint: string, method?: string }) => {
-    return `# API Documentation
-
-## ${method} ${endpoint}
-
-### Description
-Documentation for the ${method} ${endpoint} endpoint.
-
-### Parameters
-- **endpoint**: ${endpoint}
-- **method**: ${method}
-
-### Example Request
-\`\`\`bash
-curl -X ${method} "${endpoint}"
-\`\`\`
-
-### Example Response
-\`\`\`json
-{
-  "status": "success",
-  "data": {}
-}
-\`\`\`
-
-### Error Handling
-- 400: Bad Request
-- 401: Unauthorized
-- 404: Not Found
-- 500: Internal Server Error`
-  },
-})
-
-console.log('🚀 Starting API MCP Server...')
-console.log('📋 Server: api-server v1.0.0')
-console.log('📦 Resources: api://status')
-console.log('🛠️  Tools: http-get, http-post, weather, json-placeholder')
-console.log('💬 Prompts: api-docs')
-console.log('✅ Server ready!')
-
-// Start the server
-mcp.serve().catch(console.error)

package/dist/templates/api/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "rootDir": "./src",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "allowJs": true,
-    "strict": true,
-    "declaration": true,
-    "declarationMap": true,
-    "outDir": "./dist",
-    "sourceMap": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}

package/dist/templates/basic/README.md

@@ -1,64 +0,0 @@
-# My MCP Server
-
-A simple MCP server created with `create-mcp-app`.
-
-## Getting Started
-
-### Development
-
-```bash
-# Install dependencies
-npm install
-
-# Run in development mode
-npm run dev
-```
-
-### Production
-
-```bash
-# Build the server
-npm run build
-
-# Run the built server
-npm start
-```
-
-## Features
-
-- **Resource**: `info://server` - Server information
-- **Tool**: `echo` - Echo back messages
-- **Prompt**: `greeting` - Generate personalized greetings
-
-## Customization
-
-Edit `src/server.ts` to add your own resources, tools, and prompts:
-
-```typescript
-// Add a new resource
-mcp.resource({
-  uri: 'my://resource',
-  name: 'My Resource',
-  fn: async () => 'Resource content'
-})
-
-// Add a new tool
-mcp.tool({
-  name: 'my-tool',
-  inputs: [{ name: 'input', type: 'string', required: true }],
-  fn: async ({ input }) => `Processed: ${input}`
-})
-
-// Add a new prompt
-mcp.prompt({
-  name: 'my-prompt',
-  args: [{ name: 'topic', type: 'string', required: true }],
-  fn: async ({ topic }) => `Generate content about ${topic}`
-})
-```
-
-## Learn More
-
-- [MCP Documentation](https://modelcontextprotocol.io)
-- [mcp-use Documentation](https://docs.mcp-use.io)
-- [Examples](https://github.com/mcp-use/mcp-use-ts/tree/main/examples)