create-mcp-use-app 0.4.5 → 0.4.6-canary.0

package/dist/index.js

@@ -351,8 +351,8 @@ async function copyTemplate(projectPath, template, versions, isDevelopment = fal
       console.log("No templates directory found");
     }
     console.log('\u{1F4A1} Tip: Use "starter" template for a comprehensive MCP server with all features');
-    console.log('\u{1F4A1} Tip: Use "ui-resource" template for a MCP server with mcp-ui resources');
-    console.log('\u{1F4A1} Tip: Use "apps-sdk-demo" template for a MCP server with OpenAI Apps SDK integration');
+    console.log('\u{1F4A1} Tip: Use "mcp-ui" template for a MCP server with mcp-ui resources');
+    console.log('\u{1F4A1} Tip: Use "apps-sdk" template for a MCP server with OpenAI Apps SDK integration');
     process.exit(1);
   }
   copyDirectoryWithProcessing(templatePath, projectPath, versions, isDevelopment, useCanary);

package/dist/templates/apps-sdk/index.ts

@@ -0,0 +1,38 @@
+import { createMCPServer } from 'mcp-use/server'
+
+const server = createMCPServer('test-app', {
+  version: '1.0.0',
+  description: 'Test MCP server with automatic UI widget registration',
+  host: process.env.HOST || 'localhost',
+  baseUrl: process.env.MCP_URL, // Full base URL (e.g., https://myserver.com)
+})
+
+/**
+ * AUTOMATIC UI WIDGET REGISTRATION
+ * All React components in the `resources/` folder are automatically registered as MCP tools and resources.
+ * Just export widgetMetadata with description and Zod schema, and mcp-use handles the rest!
+ * 
+ * It will automatically add to your MCP server:
+ * - server.tool('display-weather')
+ * - server.resource('ui://widget/display-weather')
+ * 
+ * See docs: https://docs.mcp-use.com/typescript/server/ui-widgets
+ */
+
+
+/**
+ * Add here yourtandard MCP tools, resources and prompts
+ */
+server.tool({
+  name: 'get-my-city',
+  description: 'Get my city',
+  cb: async () => {
+    return { content: [{ type: 'text', text: `My city is San Francisco` }] }
+  },
+})
+
+
+const PORT = process.env.PORT ? parseInt(process.env.PORT) : 3000
+const HOST = process.env.HOST || 'localhost'
+server.listen(PORT)
+console.log(`Server running at http://${HOST}:${PORT}`)

package/dist/templates/apps-sdk/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "Weather App",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "MCP server with apps sdk integration",
+  "author": "",
+  "license": "MIT",
+  "keywords": [
+    "mcp",
+    "server",
+    "starter",
+    "tools",
+    "resources",
+    "prompts",
+    "uiresource",
+    "ui",
+    "react",
+    "widgets",
+    "mcp-ui",
+    "apps-sdk"
+  ],
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "mcp-use build",
+    "dev": "mcp-use dev",
+    "start": "mcp-use start"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.0",
+    "mcp-use": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.0.0",
+    "zod": "^4.1.12"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2"
+  }
+}

package/dist/templates/apps-sdk/resources/display-weather.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { z } from 'zod';
+import { useWidget } from 'mcp-use/react';
+import '../styles.css';
+
+/*
+* Apps SDK widget
+* Just export widgetMetadata with description and Zod schema, and mcp-use handles the rest!
+* See docs: https://docs.mcp-use.com/typescript/server/ui-widgets
+*/
+
+const propSchema = z.object({
+  city: z.string().describe('The city to display weather for'),
+  weather: z.enum(['sunny', 'rain', 'snow', 'cloudy']).describe('The weather condition'),
+  temperature: z.number().min(-20).max(50).describe('The temperature in Celsius'),
+});
+
+export const widgetMetadata = {
+  description: 'Display weather for a city',
+  inputs: propSchema,
+}
+
+type WeatherProps = z.infer<typeof propSchema>;
+
+const WeatherWidget: React.FC = () => {
+  // Use the useWidget hook to get props from OpenAI Apps SDK
+  const { props, theme, sendFollowUpMessage, callTool, requestDisplayMode } = useWidget<WeatherProps>();
+  
+  console.log(props)
+
+  const { city, weather, temperature } = props;
+  const getWeatherIcon = (weatherType: string) => {
+    switch (weatherType?.toLowerCase()) {
+      case 'sunny':
+        return '☀️';
+      case 'rain':
+        return '🌧️';
+      case 'snow':
+        return '❄️';
+      case 'cloudy':
+        return '☁️';
+      default:
+        return '🌤️';
+    }
+  };
+
+  const getWeatherColor = (weatherType: string) => {
+    switch (weatherType?.toLowerCase()) {
+      case 'sunny':
+        return 'from-yellow-400 to-orange-500';
+      case 'rain':
+        return 'from-blue-400 to-blue-600';
+      case 'snow':
+        return 'from-blue-100 to-blue-300';
+      case 'cloudy':
+        return 'from-gray-400 to-gray-600';
+      default:
+        return 'from-gray-300 to-gray-500';
+    }
+  };
+
+  // Theme-aware styling
+  const bgColor = theme === 'dark' ? 'bg-gray-900' : 'bg-white';
+  const textColor = theme === 'dark' ? 'text-gray-100' : 'text-gray-800';
+  const subtextColor = theme === 'dark' ? 'text-gray-400' : 'text-gray-600';
+
+  return (
+    <div className={`max-w-sm mx-auto ${bgColor} rounded-xl shadow-lg overflow-hidden`}>
+      <div className={`h-32 bg-gradient-to-br ${getWeatherColor(weather)} flex items-center justify-center`}>
+        <div className="text-6xl">{getWeatherIcon(weather)}</div>
+      </div>
+      
+      <div className="p-6">
+        <div className="text-center">
+          <h2 className={`text-2xl font-bold ${textColor} mb-2`}>{city}</h2>
+          <div className="flex items-center justify-center space-x-4">
+            <span className={`text-4xl font-light ${textColor}`}>{temperature}°</span>
+            <div className="text-right">
+              <p className={`text-lg font-medium ${subtextColor} capitalize`}>{weather}</p>
+              <p className={`text-sm ${subtextColor}`}>Current</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WeatherWidget;

package/dist/templates/apps-sdk/styles.css

@@ -0,0 +1,12 @@
+@import "tailwindcss";
+
+/* Custom styles */
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+

package/dist/templates/{ui-resource → apps-sdk}/tsconfig.json

@@ -13,8 +13,13 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
-  "include": ["index.ts", "src/**/*", "resources/**/*"],
+  "include": ["index.ts", "src/**/*", "resources/**/*", "server.ts"],
   "exclude": ["node_modules", "dist"]
 }
+

package/dist/templates/{ui-resource → mcp-ui}/README.md

@@ -38,7 +38,7 @@ server.uiResource({
 
 This automatically creates:
 
-- **Tool**: `ui_kanban-board` - Accepts parameters and returns UIResource
+- **Tool**: `kanban-board` - Accepts parameters and returns UIResource
 - **Resource**: `ui://widget/kanban-board` - Static access with defaults
 
 ## Getting Started
@@ -205,7 +205,7 @@ server.uiResource({
 
 When you call `uiResource`, it automatically creates a tool:
 
-- Name: `ui_[widget-name]`
+- Name: `[widget-name]`
 - Accepts all props as parameters
 - Returns both text description and UIResource object
 
@@ -323,7 +323,7 @@ Visit: `http://localhost:3000/mcp-use/widgets/[widget-name]`
 
 ```typescript
 // Call as tool
-const result = await client.callTool('ui_kanban-board', {
+const result = await client.callTool('kanban-board', {
   initialTasks: [...],
   theme: 'dark'
 })

package/dist/templates/{ui-resource/src/server.ts → mcp-ui/index.ts}

@@ -5,7 +5,7 @@ import type {
   RemoteDomUIResource
 } from 'mcp-use/server'
 
-// Create an MCP server with UIResource support
+// Create an MCP server with MCP-UI UIResource support
 const server = createMCPServer('uiresource-mcp-server', {
   version: '1.0.0',
   description: 'MCP server demonstrating all UIResource types',
@@ -15,42 +15,18 @@ const PORT = process.env.PORT || 3000
 
 /**
  * ════════════════════════════════════════════════════════════════════
- * Type 1: External URL (Iframe Widget)
+ * Type 1: External URL (Iframe Widget from `resources/`)
  * ════════════════════════════════════════════════════════════════════
  *
  * Serves a widget from your local filesystem via iframe.
- * Best for: Complex interactive widgets with their own assets
+ * All React components in the `resources/` folder are automatically registered as MCP tools and resources.
  *
  * This automatically:
- * 1. Creates a tool (ui_kanban-board) that accepts parameters
+ * 1. Creates a tool (kanban-board) that accepts parameters
  * 2. Creates a resource (ui://widget/kanban-board) for static access
  * 3. Serves the widget from dist/resources/mcp-use/widgets/kanban-board/
  */
-server.uiResource({
-  type: 'externalUrl',
-  name: 'kanban-board',
-  widget: 'kanban-board',
-  title: 'Kanban Board',
-  description: 'Interactive task management board with drag-and-drop support',
-  props: {
-    initialTasks: {
-      type: 'array',
-      description: 'Initial tasks to display on the board',
-      required: false,
-    },
-    theme: {
-      type: 'string',
-      description: 'Visual theme for the board (light/dark)',
-      required: false,
-      default: 'light'
-    },
-    columns: {
-      type: 'array',
-      description: 'Column configuration for the board',
-      required: false,
-    }
-  }
-} satisfies ExternalUrlUIResource)
+
 
 /**
  * ════════════════════════════════════════════════════════════════════
@@ -58,10 +34,9 @@ server.uiResource({
  * ════════════════════════════════════════════════════════════════════
  *
  * Renders HTML content directly without an iframe.
- * Best for: Simple visualizations, status displays, formatted text
  *
  * This creates:
- * - Tool: ui_welcome-card
+ * - Tool: welcome-card
  * - Resource: ui://widget/welcome-card
  */
 server.uiResource({
@@ -157,10 +132,9 @@ server.uiResource({
  * ════════════════════════════════════════════════════════════════════
  *
  * Uses Remote DOM to render interactive components.
- * Best for: Lightweight interactive UIs using MCP-UI React components
  *
  * This creates:
- * - Tool: ui_quick-poll
+ * - Tool: quick-poll
  * - Resource: ui://widget/quick-poll
  */
 server.uiResource({
@@ -294,20 +268,20 @@ server.tool({
       {
         name: 'kanban-board',
         type: 'externalUrl',
-        tool: 'ui_kanban-board',
+        tool: 'kanban-board',
         resource: 'ui://widget/kanban-board',
         url: `http://localhost:${PORT}/mcp-use/widgets/kanban-board`
       },
       {
         name: 'welcome-card',
         type: 'rawHtml',
-        tool: 'ui_welcome-card',
+        tool: 'welcome-card',
         resource: 'ui://widget/welcome-card'
       },
       {
         name: 'quick-poll',
         type: 'remoteDom',
-        tool: 'ui_quick-poll',
+        tool: 'quick-poll',
         resource: 'ui://widget/quick-poll'
       }
     ]
@@ -382,24 +356,24 @@ Server is running on port ${PORT}
 
    1️⃣  External URL Widget (Iframe)
    • kanban-board
-     Tool:      ui_kanban-board
+     Tool:      kanban-board
      Resource:  ui://widget/kanban-board
      Browser:   http://localhost:${PORT}/mcp-use/widgets/kanban-board
 
    2️⃣  Raw HTML Widget (Direct Rendering)
    • welcome-card
-     Tool:      ui_welcome-card
+     Tool:      welcome-card
      Resource:  ui://widget/welcome-card
 
    3️⃣  Remote DOM Widget (React Components)
    • quick-poll
-     Tool:      ui_quick-poll
+     Tool:      quick-poll
      Resource:  ui://widget/quick-poll
 
 📝 Usage Examples:
 
    // External URL - Call with dynamic parameters
-   await client.callTool('ui_kanban-board', {
+   await client.callTool('kanban-board', {
      initialTasks: [{id: 1, title: 'Task 1'}],
      theme: 'dark'
    })
@@ -408,7 +382,7 @@ Server is running on port ${PORT}
    await client.readResource('ui://widget/welcome-card')
 
    // Remote DOM - Interactive component
-   await client.callTool('ui_quick-poll', {
+   await client.callTool('quick-poll', {
      question: 'Favorite color?',
      options: ['Red', 'Blue', 'Green']
    })

package/dist/templates/{ui-resource → mcp-ui}/package.json

@@ -23,25 +23,16 @@
     "start": "mcp-use start"
   },
   "dependencies": {
-    "@mcp-ui/server": "^5.11.0",
     "cors": "^2.8.5",
     "express": "^4.18.0",
-    "mcp-use": "workspace:*"
+    "mcp-use": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.0.0",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@mcp-use/cli": "workspace:*",
-    "@mcp-use/inspector": "workspace:*",
-    "@types/cors": "^2.8.0",
-    "@types/express": "^4.17.0",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "concurrently": "^8.0.0",
-    "esbuild": "^0.23.0",
-    "globby": "^14.0.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "tsx": "^4.0.0",
-    "typescript": "^5.0.0"
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2"
   }
 }

package/dist/templates/{ui-resource → mcp-ui}/resources/kanban-board.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import { createRoot } from 'react-dom/client'
 
 interface Task {
   id: string
@@ -298,9 +297,4 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
   )
 }
 
-// Mount the component
-const container = document.getElementById('widget-root')
-if (container) {
-  const root = createRoot(container)
-  root.render(<KanbanBoard />)
-}
+export default KanbanBoard

package/dist/templates/{apps-sdk-demo → mcp-ui}/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2022",
+    "jsx": "react-jsx",
     "module": "ESNext",
     "moduleResolution": "bundler",
     "allowJs": true,
@@ -12,9 +13,13 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
-  "include": ["index.ts", "src/**/*"],
+  "include": ["index.ts", "src/**/*", "resources/**/*", "server.ts"],
   "exclude": ["node_modules", "dist"]
 }
 

package/dist/templates/starter/index.ts

@@ -1,12 +1,101 @@
+import { createMCPServer } from 'mcp-use/server'
+
+
+// Create MCP server instance
+const server = createMCPServer('my-mcp-server', {
+  version: '1.0.0',
+  description: 'My first MCP server with all features',
+})
+
+
 /**
- * MCP Server Entry Point
+ * Define UI Widgets 
+ * All React components in the `resources/` folder 
+ * are automatically registered as MCP tools and resources.
  * 
- * This file serves as the main entry point for the MCP server application.
- * It re-exports all functionality from the server implementation, allowing
- * the CLI and other tools to locate and start the server.
+ * Just export widgetMetadata with description and Zod schema, 
+ * and mcp-use handles the rest!
  * 
- * The server is automatically started when this module is imported, making
- * it suitable for both direct execution and programmatic usage.
+ * It will automatically add to your MCP server:
+ * - server.tool('kanban-board')
+ * - server.tool('display-weather')
+ * - server.resource('ui://widget/kanban-board')
+ * - server.resource('ui://widget/display-weather')
+ * 
+ * Docs: https://docs.mcp-use.com/typescript/server/ui-widgets
+ */
+
+
+/*
+* Define MCP tools
+* Docs: https://docs.mcp-use.com/typescript/server/tools
+*/
+server.tool({
+  name: 'fetch-weather',
+  description: 'Fetch the weather for a city',
+  inputs: [
+    { name: 'city', type: 'string', required: true }
+  ],
+  cb: async (params: Record<string, any>) => {
+    const city = params.city as string
+    const response = await fetch(`https://wttr.in/${city}?format=j1`)
+    const data: any = await response.json()
+    const current = data.current_condition[0]
+    return {
+      content: [{
+        type: 'text',
+        text: `The weather in ${city} is ${current.weatherDesc[0].value}. Temperature: ${current.temp_C}°C, Humidity: ${current.humidity}%`
+      }]
+    }
+  }
+})
+
+
+/*
+ * Define MCP resources
+ * Docs: https://docs.mcp-use.com/typescript/server/resources
  */
-export * from './src/server.js'
+server.resource({
+  name: 'config',
+  uri: 'config://settings',
+  mimeType: 'application/json',
+  description: 'Server configuration',
+  readCallback: async () => ({
+    contents: [{
+      uri: 'config://settings',
+      mimeType: 'application/json',
+      text: JSON.stringify({
+        theme: 'dark',
+        language: 'en'
+      })
+    }]
+  })
+})
+
+
+/*
+ * Define MCP prompts
+ * Docs: https://docs.mcp-use.com/typescript/server/prompts
+ */
+server.prompt({
+  name: 'review-code',
+  description: 'Review code for best practices and potential issues',
+  args: [
+    { name: 'code', type: 'string', required: true }
+  ],
+  cb: async (params: Record<string, any>) => {
+    const { code } = params
+    return {
+      messages: [{
+        role: 'user',
+        content: {type: 'text', text: `Please review this code:\n\n${code}`}
+      }]
+    }
+  }
+})
+
 
+const PORT = process.env.PORT ? parseInt(process.env.PORT) : 3000
+console.log(`Server running on port ${PORT}`)
+// Start the server
+server.listen(PORT)

package/dist/templates/starter/package.json

@@ -26,25 +26,16 @@
     "start": "mcp-use start"
   },
   "dependencies": {
-    "@mcp-ui/server": "^5.11.0",
     "cors": "^2.8.5",
     "express": "^4.18.0",
-    "mcp-use": "workspace:*"
+    "mcp-use": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.0.0",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@mcp-use/cli": "workspace:*",
-    "@mcp-use/inspector": "workspace:*",
-    "@types/cors": "^2.8.0",
-    "@types/express": "^4.17.0",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "concurrently": "^8.0.0",
-    "esbuild": "^0.23.0",
-    "globby": "^14.0.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "tsx": "^4.0.0",
-    "typescript": "^5.0.0"
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2"
   }
 }