create-mcp-use-app 0.9.1 → 0.9.3-canary.0

package/dist/templates/apps-sdk/README.md

@@ -88,7 +88,7 @@ const propSchema = z.object({
 
 export const widgetMetadata: WidgetMetadata = {
   description: 'My widget description',
-  inputs: propSchema,
+  props: propSchema,
 };
 
 const MyWidget: React.FC = () => {
@@ -146,7 +146,7 @@ const propSchema = z.object({
 
 export const widgetMetadata: WidgetMetadata = {
   description: 'Display user information',
-  inputs: propSchema,
+  props: propSchema,
 };
 ```
 
@@ -295,7 +295,7 @@ const propSchema = z.object({
 
 export const widgetMetadata: WidgetMetadata = {
   description: 'Display a message',
-  inputs: propSchema,
+  props: propSchema,
 };
 
 type Props = z.infer<typeof propSchema>;
@@ -320,11 +320,13 @@ export default MyWidget;
 You can mix Apps SDK widgets with regular MCP tools:
 
 ```typescript
+import { text } from 'mcp-use/server';
+
 server.tool({
   name: 'get-data',
   description: 'Fetch data from API',
   cb: async () => {
-    return { content: [{ type: 'text', text: 'Data' }] };
+    return text('Data');
   },
 });
 ```

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

@@ -1,8 +1,10 @@
-import { createMCPServer } from "mcp-use/server";
+import { MCPServer, object } from "mcp-use/server";
 
-const server = createMCPServer("test-app", {
+const server = new MCPServer({
+  name: "apps-sdk-mcp-server",
   version: "1.0.0",
-  description: "Test MCP server with automatic UI widget registration",
+  description: "MCP server with OpenAI Apps SDK integration",
+  baseUrl: process.env.MCP_URL || "http://localhost:3000", // Full base URL (e.g., https://myserver.com)
   // favicon: "favicon.ico", // Uncomment and add your favicon to public/ folder
 });
 
@@ -55,45 +57,34 @@ server.tool(
       "Get information about the brand, including company details, mission, and values",
   },
   async () => {
-    return {
-      content: [
-        {
-          type: "text",
-          text: JSON.stringify(
-            {
-              name: "mcp-use",
-              tagline: "Build MCP servers with UI widgets in minutes",
-              description:
-                "mcp-use is a modern framework for building Model Context Protocol (MCP) servers with automatic UI widget registration, making it easy to create interactive AI tools and resources.",
-              founded: "2024",
-              mission:
-                "To simplify the development of MCP servers and make AI integration accessible for developers",
-              values: [
-                "Developer Experience",
-                "Simplicity",
-                "Performance",
-                "Open Source",
-                "Innovation",
-              ],
-              contact: {
-                website: "https://mcp-use.com",
-                docs: "https://docs.mcp-use.com",
-                github: "https://github.com/mcp-use/mcp-use",
-              },
-              features: [
-                "Automatic UI widget registration",
-                "React component support",
-                "Full TypeScript support",
-                "Built-in HTTP server",
-                "MCP protocol compliance",
-              ],
-            },
-            null,
-            2
-          ),
-        },
+    return object({
+      name: "mcp-use",
+      tagline: "Build MCP servers with UI widgets in minutes",
+      description:
+        "mcp-use is a modern framework for building Model Context Protocol (MCP) servers with automatic UI widget registration, making it easy to create interactive AI tools and resources.",
+      founded: "2025",
+      mission:
+        "To simplify the development of MCP servers and make AI integration accessible for developers",
+      values: [
+        "Developer Experience",
+        "Simplicity",
+        "Performance",
+        "Open Source",
+        "Innovation",
       ],
-    };
+      contact: {
+        website: "https://mcp-use.com",
+        docs: "https://docs.mcp-use.com",
+        github: "https://github.com/mcp-use/mcp-use",
+      },
+      features: [
+        "Automatic UI widget registration",
+        "React component support",
+        "Full TypeScript support",
+        "Built-in HTTP server",
+        "MCP protocol compliance",
+      ],
+    });
   }
 );
 

package/dist/templates/apps-sdk/resources/product-search-result/widget.tsx

@@ -13,13 +13,13 @@ import "../styles.css";
 export const widgetMetadata: WidgetMetadata = {
   description:
     "Display product search results with filtering, state management, and tool interactions",
-  inputs: propSchema,
+  props: propSchema,
 };
 
 const ProductSearchResult: React.FC = () => {
   const { props, mcp_url } = useWidget<ProductSearchResultProps>();
 
-  console.log(props);
+  console.log(props); // the widget props
 
   const accordionItems = [
     {

package/dist/templates/mcp-ui/README.md

@@ -76,9 +76,10 @@ npm start
 ### Simple Widget Registration
 
 ```typescript
-import { createMCPServer } from 'mcp-use/server'
+import { MCPServer } from 'mcp-use/server'
 
-const server = createMCPServer('my-server', {
+const server = new MCPServer({
+  name: 'my-server',
   version: '1.0.0',
   description: 'Server with UIResource widgets',
 })

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

@@ -1,11 +1,12 @@
-import { createMCPServer } from "mcp-use/server";
+import { MCPServer } 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", {
+const server = new MCPServer({
+  name: "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)
+  baseUrl: process.env.MCP_URL || "http://localhost:3000", // Full base URL (e.g., https://myserver.com)
   // favicon: "favicon.ico", // Uncomment and add your favicon to public/ folder
 });
 

package/dist/templates/starter/README.md

@@ -26,14 +26,16 @@ This starter template demonstrates all major MCP features:
 ### 1. Traditional Tools
 
 ```typescript
+import { text } from 'mcp-use/server';
+
 server.tool({
   name: 'greet',
   description: 'Greet someone by name',
-  inputs: [{ name: 'name', type: 'string', required: true }],
-  cb: async ({ name }) => {
-    return { content: [{ type: 'text', text: `Hello, ${name}!` }] }
+  schema: z.object({name:z.string()}),
+}, async ({ name }) => {
+    return text(`Hello, ${name}!`)
   },
-})
+)
 ```
 
 ### 2. Resources
@@ -265,14 +267,14 @@ await client.getPrompt('review-code', { code: 'const x = 1;' })
 server.tool({
   name: 'my-tool',
   description: 'My custom tool',
-  inputs: [{ name: 'param', type: 'string', required: true }],
-  cb: async ({ param }) => {
+  schema: z.object({
+    param: z.string(),
+  })
+}, async ({ param }) => {
     // Your logic here
-    return {
-      content: [{ type: 'text', text: `Result: ${param}` }],
-    }
+    return text(param)
   },
-})
+)
 ```
 
 ### Adding New React Widgets

package/dist/templates/starter/index.ts

@@ -1,7 +1,9 @@
-import { createMCPServer } from "mcp-use/server";
+import { MCPServer } from "mcp-use/server";
+import { z } from "zod";
 
 // Create MCP server instance
-const server = createMCPServer("my-mcp-server", {
+const server = new MCPServer({
+  name: "my-mcp-server",
   version: "1.0.0",
   description: "My first MCP server with all features",
   baseUrl: process.env.MCP_URL || "http://localhost:3000", // Full base URL (e.g., https://myserver.com)
@@ -33,10 +35,11 @@ server.tool(
   {
     name: "fetch-weather",
     description: "Fetch the weather for a city",
-    inputs: [{ name: "city", type: "string", required: true }],
+    schema: z.object({
+      city: z.string().describe("The city to fetch the weather for"),
+    }),
   },
-  async (params: Record<string, any>) => {
-    const city = params.city as string;
+  async ({ city }) => {
     const response = await fetch(`https://wttr.in/${city}?format=j1`);
     const data: any = await response.json();
     const current = data.current_condition[0];

package/dist/templates/starter/resources/display-weather.tsx

@@ -23,7 +23,7 @@ const propSchema = z.object({
 
 export const widgetMetadata: WidgetMetadata = {
   description: "Display weather for a city",
-  inputs: propSchema,
+  props: propSchema,
 };
 
 type WeatherProps = z.infer<typeof propSchema>;
@@ -32,7 +32,7 @@ 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); // the widget props
 
   const { city, weather, temperature } = props;
   const getWeatherIcon = (weatherType: string) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mcp-use-app",
-  "version": "0.9.1",
+  "version": "0.9.3-canary.0",
   "type": "module",
   "description": "Create MCP-Use apps with one command",
   "author": "mcp-use, Inc.",