create-mcp-use-app 0.3.4 → 0.4.0

package/dist/templates/apps_sdk/src/widgets.ts

@@ -0,0 +1,180 @@
+import type { AppsSdkUIResource } from 'mcp-use/server'
+
+/**
+ * ════════════════════════════════════════════════════════════════════
+ * Pizzaz Widget Definitions
+ * ════════════════════════════════════════════════════════════════════
+ * 
+ * OpenAI's pizzaz reference implementation demonstrating Apps SDK widgets.
+ * These widgets load external assets from OpenAI's CDN and use the
+ * text/html+skybridge MIME type for Apps SDK compatibility.
+ * 
+ * Each widget demonstrates:
+ * - External resource loading (scripts and stylesheets)
+ * - Apps SDK metadata (CSP, tool invocation status, etc.)
+ * - Structured content injection via window.openai.toolOutput
+ */
+
+export interface PizzazWidgetDefinition {
+  id: string
+  title: string
+  description: string
+  templateUri: string
+  invoking: string
+  invoked: string
+  html: string
+  responseText: string
+}
+
+export const pizzazWidgets: PizzazWidgetDefinition[] = [
+  {
+    id: 'pizza-map',
+    title: 'Show Pizza Map',
+    description: 'Interactive map widget for displaying pizza locations',
+    templateUri: 'ui://widget/pizza-map.html',
+    invoking: 'Hand-tossing a map',
+    invoked: 'Served a fresh map',
+    html: `
+<div id="pizzaz-root"></div>
+<link rel="stylesheet" href="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-0038.css">
+<script type="module" src="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-0038.js"></script>
+    `.trim(),
+    responseText: 'Rendered a pizza map!'
+  },
+  {
+    id: 'pizza-carousel',
+    title: 'Show Pizza Carousel',
+    description: 'Carousel widget for browsing pizza options',
+    templateUri: 'ui://widget/pizza-carousel.html',
+    invoking: 'Carousel some spots',
+    invoked: 'Served a fresh carousel',
+    html: `
+<div id="pizzaz-carousel-root"></div>
+<link rel="stylesheet" href="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-carousel-0038.css">
+<script type="module" src="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-carousel-0038.js"></script>
+    `.trim(),
+    responseText: 'Rendered a pizza carousel!'
+  },
+  {
+    id: 'pizza-albums',
+    title: 'Show Pizza Album',
+    description: 'Album-style gallery widget for pizza collections',
+    templateUri: 'ui://widget/pizza-albums.html',
+    invoking: 'Hand-tossing an album',
+    invoked: 'Served a fresh album',
+    html: `
+<div id="pizzaz-albums-root"></div>
+<link rel="stylesheet" href="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-albums-0038.css">
+<script type="module" src="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-albums-0038.js"></script>
+    `.trim(),
+    responseText: 'Rendered a pizza album!'
+  },
+  {
+    id: 'pizza-list',
+    title: 'Show Pizza List',
+    description: 'List view widget for pizza items',
+    templateUri: 'ui://widget/pizza-list.html',
+    invoking: 'Hand-tossing a list',
+    invoked: 'Served a fresh list',
+    html: `
+<div id="pizzaz-list-root"></div>
+<link rel="stylesheet" href="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-list-0038.css">
+<script type="module" src="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-list-0038.js"></script>
+    `.trim(),
+    responseText: 'Rendered a pizza list!'
+  },
+  {
+    id: 'pizza-video',
+    title: 'Show Pizza Video',
+    description: 'Video player widget for pizza content',
+    templateUri: 'ui://widget/pizza-video.html',
+    invoking: 'Hand-tossing a video',
+    invoked: 'Served a fresh video',
+    html: `
+<div id="pizzaz-video-root"></div>
+<link rel="stylesheet" href="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-video-0038.css">
+<script type="module" src="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-video-0038.js"></script>
+    `.trim(),
+    responseText: 'Rendered a pizza video!'
+  }
+]
+
+/**
+ * Convert pizzaz widget definitions to mcp-use AppsSdkUIResource format
+ * 
+ * This demonstrates using mcp-use's AppsSdkUIResource type which:
+ * - Automatically sets MIME type to text/html+skybridge
+ * - Supports Apps SDK metadata (CSP, widget description, etc.)
+ * - Injects structuredContent as window.openai.toolOutput
+ * - Works seamlessly with ChatGPT and other Apps SDK clients
+ */
+export function getPizzazUIResources(): AppsSdkUIResource[] {
+  return pizzazWidgets.map(widget => ({
+    type: 'appsSdk',
+    name: widget.id,
+    title: widget.title,
+    description: widget.description,
+    htmlTemplate: widget.html,
+    size: ['800px', '600px'],
+    props: {
+      pizzaTopping: {
+        type: 'string',
+        description: 'Topping to mention when rendering the widget',
+        required: true
+      }
+    },
+    appsSdkMetadata: {
+      'openai/widgetDescription': widget.description,
+      'openai/toolInvocation/invoking': widget.invoking,
+      'openai/toolInvocation/invoked': widget.invoked,
+      'openai/widgetAccessible': true,
+      'openai/resultCanProduceWidget': true,
+      'openai/widgetCSP': {
+        connect_domains: [],
+        resource_domains: ['https://persistent.oaistatic.com']
+      }
+    }
+  } satisfies AppsSdkUIResource))
+}
+
+/**
+ * Get a summary of all pizzaz widgets for documentation
+ */
+export function getPizzazWidgetsSummary() {
+  return pizzazWidgets.map(w => ({
+    id: w.id,
+    title: w.title,
+    description: w.description,
+    tool: `ui_${w.id}`,
+    resource: w.templateUri,
+    responseText: w.responseText
+  }))
+}
+
+/**
+ * Create widget metadata for a specific widget
+ */
+export function widgetMeta(widget: PizzazWidgetDefinition) {
+  return {
+    'openai/outputTemplate': widget.templateUri,
+    'openai/toolInvocation/invoking': widget.invoking,
+    'openai/toolInvocation/invoked': widget.invoked,
+    'openai/widgetAccessible': true,
+    'openai/resultCanProduceWidget': true
+  } as const
+}
+
+/**
+ * Get widget by ID
+ */
+export function getWidgetById(id: string): PizzazWidgetDefinition | undefined {
+  return pizzazWidgets.find(w => w.id === id)
+}
+
+/**
+ * Get widget by template URI
+ */
+export function getWidgetByUri(uri: string): PizzazWidgetDefinition | undefined {
+  return pizzazWidgets.find(w => w.templateUri === uri)
+}
+

package/dist/templates/apps_sdk/tsconfig.json

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

package/dist/templates/ui/README.md

@@ -56,9 +56,9 @@ Interactive Kanban board for task management.
 mcp.tool({
   name: 'show-kanban',
   inputs: [{ name: 'tasks', type: 'string', required: true }],
-  fn: async ({ tasks }) => {
+  cb: async ({ tasks }) => {
     // Display Kanban board with tasks
-  }
+  },
 })
 ```
 
@@ -80,9 +80,9 @@ Interactive todo list with filtering and sorting.
 mcp.tool({
   name: 'show-todo-list',
   inputs: [{ name: 'todos', type: 'string', required: true }],
-  fn: async ({ todos }) => {
+  cb: async ({ todos }) => {
     // Display todo list with todos
-  }
+  },
 })
 ```
 
@@ -105,11 +105,11 @@ mcp.tool({
   name: 'show-data-viz',
   inputs: [
     { name: 'data', type: 'string', required: true },
-    { name: 'chartType', type: 'string', required: false }
+    { name: 'chartType', type: 'string', required: false },
   ],
-  fn: async ({ data, chartType }) => {
+  cb: async ({ data, chartType }) => {
     // Display data visualization
-  }
+  },
 })
 ```
 
@@ -149,10 +149,10 @@ mcp.tool({
      uri: 'ui://widget/my-widget',
      name: 'My Widget',
      mimeType: 'text/html+skybridge',
-     fn: async () => {
+     readCallback: async () => {
        const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/my-widget`
        return `<div id="my-widget-root"></div><script type="module" src="${widgetUrl}"></script>`
-     }
+     },
    })
    ```
 
@@ -198,11 +198,7 @@ const MyWidget: React.FC<MyWidgetProps> = ({ initialData = [] }) => {
     }
   }, [])
 
-  return (
-    <div>
-      {/* Your widget content */}
-    </div>
-  )
+  return <div>{/* Your widget content */}</div>
 }
 
 // Render the component
@@ -235,7 +231,7 @@ npm run build
 
 # The built files will be in dist/
 # - dist/index.js (MCP server entry point)
-# - dist/src/server.js (MCP server implementation)  
+# - dist/src/server.js (MCP server implementation)
 # - dist/resources/ (Compiled TypeScript + UI widget bundles)
 ```
 
@@ -315,10 +311,13 @@ export default defineConfig({
   build: {
     rollupOptions: {
       input: {
-        'my-custom-widget': resolve(__dirname, 'resources/my-custom-widget.html')
-      }
-    }
-  }
+        'my-custom-widget': resolve(
+          __dirname,
+          'resources/my-custom-widget.html'
+        ),
+      },
+    },
+  },
 })
 ```
 
@@ -374,12 +373,8 @@ const Counter: React.FC = () => {
   return (
     <div style={{ padding: '20px', textAlign: 'center' }}>
       <h1>Counter: {count}</h1>
-      <button onClick={() => setCount(count + 1)}>
-        Increment
-      </button>
-      <button onClick={() => setCount(count - 1)}>
-        Decrement
-      </button>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+      <button onClick={() => setCount(count - 1)}>Decrement</button>
     </div>
   )
 }
@@ -432,7 +427,7 @@ const DataTable: React.FC = () => {
           </tr>
         </thead>
         <tbody>
-          {data.map(row => (
+          {data.map((row) => (
             <tr key={row.id}>
               <td>{row.name}</td>
               <td>{row.value}</td>

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

@@ -22,7 +22,7 @@ server.tool({
       required: true,
     },
   ],
-  fn: async () => {
+  cb: async () => {
     const uiResource = createUIResource({
       uri: 'ui://widget/kanban-board',
       content: {
@@ -49,7 +49,7 @@ server.resource({
     audience: ['user', 'assistant'],
     priority: 0.7
   },
-  fn: async () => {
+  readCallback: async () => {
     const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/kanban-board`
     return {
       contents: [{

package/dist/templates/uiresource/README.md

@@ -17,8 +17,12 @@ The `uiResource` method is a powerful new addition that simplifies widget regist
 
 ```typescript
 // Old way: Manual registration of tool and resource
-server.tool({ /* tool config */ })
-server.resource({ /* resource config */ })
+server.tool({
+  /* tool config */
+})
+server.resource({
+  /* resource config */
+})
 
 // New way: Single method does both!
 server.uiResource({
@@ -27,12 +31,13 @@ server.uiResource({
   title: 'Kanban Board',
   props: {
     initialTasks: { type: 'array', required: false },
-    theme: { type: 'string', default: 'light' }
-  }
+    theme: { type: 'string', default: 'light' },
+  },
 })
 ```
 
 This automatically creates:
+
 - **Tool**: `ui_kanban-board` - Accepts parameters and returns UIResource
 - **Resource**: `ui://widget/kanban-board` - Static access with defaults
 
@@ -49,6 +54,7 @@ npm run dev
 ```
 
 This will start:
+
 - MCP server on port 3000
 - Widget serving at `/mcp-use/widgets/*`
 - Inspector UI at `/inspector`
@@ -72,7 +78,7 @@ import { createMCPServer } from 'mcp-use/server'
 
 const server = createMCPServer('my-server', {
   version: '1.0.0',
-  description: 'Server with UIResource widgets'
+  description: 'Server with UIResource widgets',
 })
 
 // Register a widget - creates both tool and resource
@@ -80,7 +86,7 @@ server.uiResource({
   name: 'my-widget',
   widget: 'my-widget',
   title: 'My Widget',
-  description: 'An interactive widget'
+  description: 'An interactive widget',
 })
 
 server.listen(3000)
@@ -98,24 +104,24 @@ server.uiResource({
     data: {
       type: 'array',
       description: 'Data points to display',
-      required: true
+      required: true,
     },
     chartType: {
       type: 'string',
       description: 'Type of chart (line/bar/pie)',
-      default: 'line'
+      default: 'line',
     },
     theme: {
       type: 'string',
       description: 'Visual theme',
-      default: 'light'
-    }
+      default: 'light',
+    },
   },
   size: ['800px', '400px'], // Preferred iframe size
   annotations: {
     audience: ['user', 'assistant'],
-    priority: 0.8
-  }
+    priority: 0.8,
+  },
 })
 ```
 
@@ -135,7 +141,7 @@ interface MyWidgetProps {
 
 const MyWidget: React.FC<MyWidgetProps> = ({
   initialData = [],
-  theme = 'light'
+  theme = 'light',
 }) => {
   const [data, setData] = useState(initialData)
 
@@ -158,11 +164,7 @@ const MyWidget: React.FC<MyWidgetProps> = ({
     }
   }, [])
 
-  return (
-    <div className={`widget theme-${theme}`}>
-      {/* Your widget UI */}
-    </div>
-  )
+  return <div className={`widget theme-${theme}`}>{/* Your widget UI */}</div>
 }
 
 // Mount the widget
@@ -185,34 +187,40 @@ server.uiResource({
     initialData: {
       type: 'array',
       description: 'Initial data for the widget',
-      required: false
+      required: false,
     },
     theme: {
       type: 'string',
       description: 'Widget theme',
-      default: 'light'
-    }
+      default: 'light',
+    },
   },
-  size: ['600px', '400px']
+  size: ['600px', '400px'],
 })
 ```
 
 ## How It Works
 
 ### Tool Registration
+
 When you call `uiResource`, it automatically creates a tool:
+
 - Name: `ui_[widget-name]`
 - Accepts all props as parameters
 - Returns both text description and UIResource object
 
 ### Resource Registration
+
 Also creates a resource:
+
 - URI: `ui://widget/[widget-name]`
 - Returns UIResource with default prop values
 - Discoverable by MCP clients
 
 ### Parameter Passing
+
 Tool parameters are automatically:
+
 1. Converted to URL query parameters
 2. Complex objects are JSON-stringified
 3. Passed to widget via iframe URL
@@ -228,21 +236,21 @@ const widgets = [
     widget: 'todo-list',
     title: 'Todo List',
     props: {
-      items: { type: 'array', default: [] }
-    }
+      items: { type: 'array', default: [] },
+    },
   },
   {
     name: 'calendar',
     widget: 'calendar',
     title: 'Calendar',
     props: {
-      date: { type: 'string', required: false }
-    }
-  }
+      date: { type: 'string', required: false },
+    },
+  },
 ]
 
 // Register all widgets
-widgets.forEach(widget => server.uiResource(widget))
+widgets.forEach((widget) => server.uiResource(widget))
 ```
 
 ### Mixed Registration
@@ -252,14 +260,16 @@ widgets.forEach(widget => server.uiResource(widget))
 server.uiResource({
   name: 'dashboard',
   widget: 'dashboard',
-  title: 'Analytics Dashboard'
+  title: 'Analytics Dashboard',
 })
 
 // Traditional tool for actions
 server.tool({
   name: 'calculate',
   description: 'Perform calculations',
-  fn: async (params) => { /* ... */ }
+  cb: async (params) => {
+    /* ... */
+  },
 })
 
 // Traditional resource for data
@@ -267,7 +277,9 @@ server.resource({
   name: 'config',
   uri: 'config://app',
   mimeType: 'application/json',
-  fn: async () => { /* ... */ }
+  readCallback: async () => {
+    /* ... */
+  },
 })
 ```
 
@@ -289,6 +301,7 @@ server.resource({
 #### WidgetProps
 
 Each prop can have:
+
 - `type: 'string' | 'number' | 'boolean' | 'object' | 'array'`
 - `required?: boolean` - Whether the prop is required
 - `default?: any` - Default value if not provided
@@ -297,14 +310,17 @@ Each prop can have:
 ## Testing Your Widgets
 
 ### Via Inspector UI
+
 1. Start the server: `npm run dev`
 2. Open: `http://localhost:3000/inspector`
 3. Test tools and resources
 
 ### Direct Browser Access
+
 Visit: `http://localhost:3000/mcp-use/widgets/[widget-name]`
 
 ### Via MCP Client
+
 ```typescript
 // Call as tool
 const result = await client.callTool('ui_kanban-board', {
@@ -328,16 +344,19 @@ const resource = await client.readResource('ui://widget/kanban-board')
 ## Troubleshooting
 
 ### Widget Not Loading
+
 - Ensure widget exists in `dist/resources/mcp-use/widgets/`
 - Check server console for errors
 - Verify widget is registered with `uiResource()`
 
 ### Props Not Passed
+
 - Check URL parameters in browser DevTools
 - Ensure prop names match exactly
 - Complex objects must be JSON-stringified
 
 ### Type Errors
+
 - Import types: `import type { UIResourceDefinition } from 'mcp-use/server'`
 - Ensure mcp-use is updated to latest version
 
@@ -347,8 +366,8 @@ If you have existing code using separate tool/resource:
 
 ```typescript
 // Old pattern
-server.tool({ name: 'show-widget', /* ... */ })
-server.resource({ uri: 'ui://widget', /* ... */ })
+server.tool({ name: 'show-widget' /* ... */ })
+server.resource({ uri: 'ui://widget' /* ... */ })
 
 // New pattern - replace both with:
 server.uiResource({
@@ -361,6 +380,7 @@ server.uiResource({
 ## Future Enhancements
 
 Coming soon:
+
 - Automatic widget discovery from filesystem
 - Widget manifests (widget.json)
 - Prop extraction from TypeScript interfaces
@@ -373,4 +393,4 @@ Coming soon:
 - [mcp-use Documentation](https://github.com/pyroprompt/mcp-use)
 - [React Documentation](https://react.dev/)
 
-Happy widget building! 🚀
+Happy widget building! 🚀

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

@@ -289,7 +289,7 @@ root.appendChild(container);
 server.tool({
   name: 'get-widget-info',
   description: 'Get information about available UI widgets',
-  fn: async () => {
+  cb: async () => {
     const widgets = [
       {
         name: 'kanban-board',
@@ -321,10 +321,10 @@ server.tool({
           `  Resource: ${w.resource}\n` +
           (w.url ? `  Browser: ${w.url}\n` : '')
         ).join('\n')}\n` +
-        `\nTypes Explained:\n` +
-        `• externalUrl: Iframe widget from filesystem\n` +
-        `• rawHtml: Direct HTML rendering\n` +
-        `• remoteDom: React/Web Components scripting`
+          `\nTypes Explained:\n` +
+          `• externalUrl: Iframe widget from filesystem\n` +
+          `• rawHtml: Direct HTML rendering\n` +
+          `• remoteDom: React/Web Components scripting`
       }]
     }
   }
@@ -336,7 +336,7 @@ server.resource({
   title: 'Server Configuration',
   description: 'Current server configuration and status',
   mimeType: 'application/json',
-  fn: async () => ({
+  readCallback: async () => ({
     contents: [{
       uri: 'config://server',
       mimeType: 'application/json',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mcp-use-app",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "type": "module",
   "description": "Create MCP-Use apps with one command",
   "author": "mcp-use, Inc.",
@@ -39,11 +39,14 @@
   "dependencies": {
     "commander": "^11.0.0",
     "chalk": "^5.3.0",
-    "fs-extra": "^11.2.0"
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.3.8",
+    "ora": "^8.2.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@types/fs-extra": "^11.0.4",
+    "@types/inquirer": "^9.0.9",
     "typescript": "^5.0.0",
     "vitest": "^1.0.0"
   },