create-mcp-use-app 0.4.8 → 0.4.9

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

@@ -1,82 +1,96 @@
-import React from 'react';
-import { z } from 'zod';
-import { useWidget } from 'mcp-use/react';
-import '../styles.css';
+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
-*/
+ * 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'),
+  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',
+  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 } = useWidget<WeatherProps>();
-  
-  console.log(props)
+
+  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 '☁️';
+      case "sunny":
+        return "☀️";
+      case "rain":
+        return "🌧️";
+      case "snow":
+        return "❄️";
+      case "cloudy":
+        return "☁️";
       default:
-        return '🌤️';
+        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';
+      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';
+        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';
+  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={`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>
+            <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-lg font-medium ${subtextColor} capitalize`}>
+                {weather}
+              </p>
               <p className={`text-sm ${subtextColor}`}>Current</p>
             </div>
           </div>

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

@@ -3,10 +3,9 @@
 /* Custom styles */
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  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/apps-sdk/tsconfig.json

@@ -22,4 +22,3 @@
   "include": ["index.ts", "src/**/*", "resources/**/*", "server.ts"],
   "exclude": ["node_modules", "dist"]
 }
-

package/dist/templates/mcp-ui/index.ts

@@ -1,17 +1,14 @@
-import { createMCPServer } from 'mcp-use/server'
-import type {
-  RawHtmlUIResource,
-  RemoteDomUIResource
-} from 'mcp-use/server'
+import { createMCPServer } from "mcp-use/server";
+import type { RawHtmlUIResource, RemoteDomUIResource } from "mcp-use/server";
 
 // 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',
+const server = createMCPServer("uiresource-mcp-server", {
+  version: "1.0.0",
+  description: "MCP server demonstrating all UIResource types",
   baseUrl: process.env.MCP_URL, // Full base URL (e.g., https://myserver.com)
-})
+});
 
-const PORT = process.env.PORT || 3000
+const PORT = process.env.PORT || 3000;
 
 /**
  * ════════════════════════════════════════════════════════════════════
@@ -27,7 +24,6 @@ const PORT = process.env.PORT || 3000
  * 3. Serves the widget from dist/resources/mcp-use/widgets/kanban-board/
  */
 
-
 /**
  * ════════════════════════════════════════════════════════════════════
  * Type 2: Raw HTML
@@ -40,10 +36,10 @@ const PORT = process.env.PORT || 3000
  * - Resource: ui://widget/welcome-card
  */
 server.uiResource({
-  type: 'rawHtml',
-  name: 'welcome-card',
-  title: 'Welcome Message',
-  description: 'A welcoming card with server information',
+  type: "rawHtml",
+  name: "welcome-card",
+  title: "Welcome Message",
+  description: "A welcoming card with server information",
   htmlContent: `
     <!DOCTYPE html>
     <html>
@@ -122,9 +118,9 @@ server.uiResource({
     </body>
     </html>
   `,
-  encoding: 'text',
-  size: ['600px', '400px']
-} satisfies RawHtmlUIResource)
+  encoding: "text",
+  size: ["600px", "400px"],
+} satisfies RawHtmlUIResource);
 
 /**
  * ════════════════════════════════════════════════════════════════════
@@ -138,17 +134,17 @@ server.uiResource({
  * - Resource: ui://widget/quick-poll
  */
 server.uiResource({
-  type: 'remoteDom',
-  name: 'quick-poll',
-  title: 'Quick Poll',
-  description: 'Create instant polls with interactive voting',
+  type: "remoteDom",
+  name: "quick-poll",
+  title: "Quick Poll",
+  description: "Create instant polls with interactive voting",
   script: `
 // Remote DOM script for quick-poll widget
 // Note: Remote DOM only supports registered MCP-UI components like ui-stack, ui-text, ui-button
 // Standard HTML elements (div, h2, p, etc.) are NOT available
 
 // Get props (passed from tool parameters)
-const props = ${JSON.stringify({ question: 'What is your favorite framework?', options: ['React', 'Vue', 'Svelte', 'Angular'] })};
+const props = ${JSON.stringify({ question: "What is your favorite framework?", options: ["React", "Vue", "Svelte", "Angular"] })};
 
 // Create main container stack (vertical layout)
 const container = document.createElement('ui-stack');
@@ -235,22 +231,22 @@ container.appendChild(resultsTitle);
 // Append to root
 root.appendChild(container);
   `,
-  framework: 'react',
-  encoding: 'text',
-  size: ['500px', '450px'],
+  framework: "react",
+  encoding: "text",
+  size: ["500px", "450px"],
   props: {
     question: {
-      type: 'string',
-      description: 'The poll question',
-      default: 'What is your favorite framework?'
+      type: "string",
+      description: "The poll question",
+      default: "What is your favorite framework?",
     },
     options: {
-      type: 'array',
-      description: 'Poll options',
-      default: ['React', 'Vue', 'Svelte']
-    }
-  }
-} satisfies RemoteDomUIResource)
+      type: "array",
+      description: "Poll options",
+      default: ["React", "Vue", "Svelte"],
+    },
+  },
+} satisfies RemoteDomUIResource);
 
 /**
  * ════════════════════════════════════════════════════════════════════
@@ -261,83 +257,95 @@ root.appendChild(container);
  */
 
 server.tool({
-  name: 'get-widget-info',
-  description: 'Get information about available UI widgets',
+  name: "get-widget-info",
+  description: "Get information about available UI widgets",
   cb: async () => {
     const widgets = [
       {
-        name: 'kanban-board',
-        type: 'externalUrl',
-        tool: 'kanban-board',
-        resource: 'ui://widget/kanban-board',
-        url: `http://localhost:${PORT}/mcp-use/widgets/kanban-board`
+        name: "kanban-board",
+        type: "externalUrl",
+        tool: "kanban-board",
+        resource: "ui://widget/kanban-board",
+        url: `http://localhost:${PORT}/mcp-use/widgets/kanban-board`,
       },
       {
-        name: 'welcome-card',
-        type: 'rawHtml',
-        tool: 'welcome-card',
-        resource: 'ui://widget/welcome-card'
+        name: "welcome-card",
+        type: "rawHtml",
+        tool: "welcome-card",
+        resource: "ui://widget/welcome-card",
       },
       {
-        name: 'quick-poll',
-        type: 'remoteDom',
-        tool: 'quick-poll',
-        resource: 'ui://widget/quick-poll'
-      }
-    ]
+        name: "quick-poll",
+        type: "remoteDom",
+        tool: "quick-poll",
+        resource: "ui://widget/quick-poll",
+      },
+    ];
 
     return {
-      content: [{
-        type: 'text',
-        text: `Available UI Widgets:\n\n${widgets.map(w =>
-          `📦 ${w.name} (${w.type})\n` +
-          `  Tool: ${w.tool}\n` +
-          `  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`
-      }]
-    }
-  }
-})
+      content: [
+        {
+          type: "text",
+          text:
+            `Available UI Widgets:\n\n${widgets
+              .map(
+                (w) =>
+                  `📦 ${w.name} (${w.type})\n` +
+                  `  Tool: ${w.tool}\n` +
+                  `  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`,
+        },
+      ],
+    };
+  },
+});
 
 server.resource({
-  name: 'server-config',
-  uri: 'config://server',
-  title: 'Server Configuration',
-  description: 'Current server configuration and status',
-  mimeType: 'application/json',
+  name: "server-config",
+  uri: "config://server",
+  title: "Server Configuration",
+  description: "Current server configuration and status",
+  mimeType: "application/json",
   readCallback: async () => ({
-    contents: [{
-      uri: 'config://server',
-      mimeType: 'application/json',
-      text: JSON.stringify({
-        port: PORT,
-        version: '1.0.0',
-        widgets: {
-          total: 3,
-          types: {
-            externalUrl: ['kanban-board'],
-            rawHtml: ['welcome-card'],
-            remoteDom: ['quick-poll']
+    contents: [
+      {
+        uri: "config://server",
+        mimeType: "application/json",
+        text: JSON.stringify(
+          {
+            port: PORT,
+            version: "1.0.0",
+            widgets: {
+              total: 3,
+              types: {
+                externalUrl: ["kanban-board"],
+                rawHtml: ["welcome-card"],
+                remoteDom: ["quick-poll"],
+              },
+              baseUrl: `http://localhost:${PORT}/mcp-use/widgets/`,
+            },
+            endpoints: {
+              mcp: `http://localhost:${PORT}/mcp`,
+              inspector: `http://localhost:${PORT}/inspector`,
+              widgets: `http://localhost:${PORT}/mcp-use/widgets/`,
+            },
           },
-          baseUrl: `http://localhost:${PORT}/mcp-use/widgets/`
-        },
-        endpoints: {
-          mcp: `http://localhost:${PORT}/mcp`,
-          inspector: `http://localhost:${PORT}/inspector`,
-          widgets: `http://localhost:${PORT}/mcp-use/widgets/`
-        }
-      }, null, 2)
-    }]
-  })
-})
+          null,
+          2
+        ),
+      },
+    ],
+  }),
+});
 
 // Start the server
-server.listen(PORT)
+server.listen(PORT);
 
 // Display helpful startup message
 console.log(`
@@ -388,12 +396,12 @@ Server is running on port ${PORT}
    })
 
 💡 Tip: Open the Inspector UI to test all widget types interactively!
-`)
+`);
 
 // Handle graceful shutdown
-process.on('SIGINT', () => {
-  console.log('\n\nShutting down server...')
-  process.exit(0)
-})
+process.on("SIGINT", () => {
+  console.log("\n\nShutting down server...");
+  process.exit(0);
+});
 
-export default server
+export default server;

package/dist/templates/mcp-ui/package.json

@@ -35,4 +35,4 @@
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2"
   }
-}
+}