create-mcp-use-app 2.0.0-beta.1 → 2.0.0-beta.3

package/README.md

@@ -156,8 +156,8 @@ Perfect for getting started with all available features or building full-feature
 The mcp-apps template includes:
 
 - MCP server setup focused on OpenAI Apps SDK integration
-- OpenAI Apps SDK compatible widgets
-- Example display-weather widget
+- OpenAI Apps SDK compatible views under `views/<name>/view.tsx`
+- Example `product-search-result` view with carousel UI
 - Optimized for OpenAI assistant integration
 
 Ideal for building MCP servers that integrate with OpenAI's Apps SDK.
@@ -433,7 +433,7 @@ server.prompt("code_review", {
 **Command not found:**
 
 ```bash
-# Make sure you have Node.js 20.19+ installed
+# Make sure you have Node.js 22.22.2+ installed
 node --version
 
 # Try with npx

package/dist/index.js

@@ -1321,7 +1321,7 @@ function updatePackageJson(projectPath, projectName) {
   const packageJsonPath = join2(projectPath, "package.json");
   const packageJsonContent = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
   packageJsonContent.name = projectName;
-  packageJsonContent.description = `MCP server: ${projectName}`;
+  packageJsonContent.description = `${projectName}: an mcp-use server`;
   writeFileSync(packageJsonPath, JSON.stringify(packageJsonContent, null, 2));
 }
 function updateIndexTs(projectPath, projectName) {
@@ -1346,7 +1346,7 @@ function parseCli(argv) {
       install: { type: "boolean" },
       skills: { type: "boolean" },
       dev: { type: "boolean" },
-      canary: { type: "boolean" },
+      "sdk-version": { type: "string" },
       yarn: { type: "boolean" },
       npm: { type: "boolean" },
       pnpm: { type: "boolean" },
@@ -1366,7 +1366,7 @@ function parseCli(argv) {
       install,
       skills,
       dev: values.dev,
-      canary: values.canary,
+      sdkVersion: values["sdk-version"],
       yarn: values.yarn,
       npm: values.npm,
       pnpm: values.pnpm
@@ -1539,32 +1539,13 @@ function renderLogo() {
 var packageJson = JSON.parse(
   readFileSync2(join3(__dirname, "../package.json"), "utf-8")
 );
-function getCurrentPackageVersions(isDevelopment = false, useCanary = false) {
-  const versions = {};
-  try {
-    if (isDevelopment) {
-      versions["mcp-use"] = "workspace:*";
-    } else if (useCanary) {
-      versions["mcp-use"] = "canary";
-    } else {
-      versions["mcp-use"] = "latest";
-    }
-  } catch (error) {
-    if (process.env.NODE_ENV === "development") {
-      console.warn(
-        "\u26A0\uFE0F  Could not read workspace package versions, using defaults"
-      );
-      console.warn(
-        `   Error: ${error instanceof Error ? error.message : String(error)}`
-      );
-      if (error instanceof Error && error.stack) {
-        console.warn(`   Stack: ${error.stack}`);
-      }
-    }
+function getCurrentPackageVersions(isDevelopment = false, sdkVersion) {
+  if (isDevelopment) {
+    return { "mcp-use": "workspace:*" };
   }
-  return versions;
+  return { "mcp-use": sdkVersion ?? "latest" };
 }
-function processTemplateFile(filePath, versions, isDevelopment = false, useCanary = false) {
+function processTemplateFile(filePath, versions, isDevelopment = false) {
   const content = readFileSync2(filePath, "utf-8");
   let processedContent = content;
   for (const [packageName, version] of Object.entries(versions)) {
@@ -1574,24 +1555,20 @@ function processTemplateFile(filePath, versions, isDevelopment = false, useCanar
       version
     );
   }
+  const mcpUseVersion = isDevelopment ? "workspace:*" : versions["mcp-use"] || "latest";
   if (isDevelopment) {
     processedContent = processedContent.replace(
       /"mcp-use": "\^[^"]+"/,
       '"mcp-use": "workspace:*"'
     );
-  } else if (useCanary) {
+  } else {
     processedContent = processedContent.replace(
       /"mcp-use": "workspace:\*"/,
-      `"mcp-use": "canary"`
+      `"mcp-use": "${mcpUseVersion}"`
     );
     processedContent = processedContent.replace(
       /"mcp-use": "\^[^"]+"/,
-      `"mcp-use": "canary"`
-    );
-  } else {
-    processedContent = processedContent.replace(
-      /"mcp-use": "workspace:\*"/,
-      `"mcp-use": "${versions["mcp-use"] || "latest"}"`
+      `"mcp-use": "${mcpUseVersion}"`
     );
   }
   return processedContent;
@@ -1779,7 +1756,7 @@ function validateTemplateName(template) {
   }
   return resolvedTemplate;
 }
-async function copyTemplate(projectPath, template, versions, isDevelopment = false, useCanary = false) {
+async function copyTemplate(projectPath, template, versions, isDevelopment = false) {
   const repoInfo = parseGitHubRepoUrl(template);
   if (repoInfo) {
     const tempDir = mkdtempSync(join3(tmpdir(), "create-mcp-use-app-"));
@@ -1789,8 +1766,7 @@ async function copyTemplate(projectPath, template, versions, isDevelopment = fal
         tempDir,
         projectPath,
         versions,
-        isDevelopment,
-        useCanary
+        isDevelopment
       );
     } finally {
       try {
@@ -1832,11 +1808,10 @@ async function copyTemplate(projectPath, template, versions, isDevelopment = fal
     templatePath,
     projectPath,
     versions,
-    isDevelopment,
-    useCanary
+    isDevelopment
   );
 }
-function copyDirectoryWithProcessing(src, dest, versions, isDevelopment, useCanary = false) {
+function copyDirectoryWithProcessing(src, dest, versions, isDevelopment) {
   const entries = readdirSync3(src, { withFileTypes: true });
   for (const entry of entries) {
     if (entry.name === ".git") {
@@ -1847,19 +1822,12 @@ function copyDirectoryWithProcessing(src, dest, versions, isDevelopment, useCana
     const destPath = join3(dest, destName);
     if (entry.isDirectory()) {
       mkdirSync(destPath, { recursive: true });
-      copyDirectoryWithProcessing(
-        srcPath,
-        destPath,
-        versions,
-        isDevelopment,
-        useCanary
-      );
+      copyDirectoryWithProcessing(srcPath, destPath, versions, isDevelopment);
     } else if (entry.name === "package.json" || entry.name.endsWith(".json")) {
       const processedContent = processTemplateFile(
         srcPath,
         versions,
-        isDevelopment,
-        useCanary
+        isDevelopment
       );
       writeFileSync2(destPath, processedContent);
     } else {
@@ -1946,7 +1914,7 @@ Options:
   --no-skills               Skip installing skills
   --no-git                  Skip initializing a git repository
   --dev                     Use workspace dependencies for development
-  --canary                  Use canary versions of packages
+  --sdk-version <version>   Pin mcp-use to an npm version or dist-tag (e.g. canary, 1.34.0)
   --yarn                    Use yarn as package manager
   --npm                     Use npm as package manager
   --pnpm                    Use pnpm as package manager
@@ -1968,11 +1936,15 @@ async function main() {
     listTemplates();
     return;
   }
-  if (options.dev && options.canary) {
-    console.error(red("\u274C Cannot use --dev and --canary together"));
+  if (options.dev && options.sdkVersion) {
+    console.error(red("\u274C Cannot use --dev and --sdk-version together"));
     console.error(yellow("   Please choose only one dependency mode"));
     process.exit(1);
   }
+  if (options.sdkVersion !== void 0 && !options.sdkVersion.trim()) {
+    console.error(red("\u274C --sdk-version requires a non-empty value"));
+    process.exit(1);
+  }
   let projectName = initialProjectName;
   let selectedTemplate = options.template;
   const interactive = isInteractive();
@@ -2059,14 +2031,8 @@ async function main() {
   }
   console.log(cyan(`\u{1F680} Creating MCP server "${displayName}"...`));
   const validatedTemplate = validateTemplateName(selectedTemplate);
-  const versions = getCurrentPackageVersions(options.dev, options.canary);
-  await copyTemplate(
-    projectPath,
-    validatedTemplate,
-    versions,
-    options.dev,
-    options.canary
-  );
+  const versions = getCurrentPackageVersions(options.dev, options.sdkVersion);
+  await copyTemplate(projectPath, validatedTemplate, versions, options.dev);
   updatePackageJson(projectPath, packageName);
   updateIndexTs(projectPath, packageName);
   let install = options.install;
@@ -2168,8 +2134,8 @@ async function main() {
     console.log(
       yellow("\u{1F527} Development mode: Using workspace dependencies")
     );
-  } else if (options.canary) {
-    console.log(cyan("\u{1F680} Canary mode: Using canary versions of packages"));
+  } else if (options.sdkVersion) {
+    console.log(cyan(`\u{1F4CC} Using mcp-use@${options.sdkVersion}`));
   }
   console.log("");
   console.log(bold("\u{1F4C1} Project structure:"));
@@ -2186,10 +2152,16 @@ async function main() {
     console.log("   \u251C\u2500\u2500 tsconfig.json");
     console.log("   \u2514\u2500\u2500 README.md");
   } else if (validatedTemplate === "mcp-apps") {
-    console.log("   \u251C\u2500\u2500 resources/");
+    console.log("   \u251C\u2500\u2500 public/");
+    console.log("   \u2502   \u251C\u2500\u2500 icon.svg");
+    console.log("   \u2502   \u2514\u2500\u2500 fruits/ (16 WebP assets)");
+    console.log("   \u251C\u2500\u2500 views/");
     console.log("   \u2502   \u2514\u2500\u2500 product-search-result/");
-    console.log("   \u2502       \u2514\u2500\u2500 view.tsx");
-    console.log("   \u251C\u2500\u2500 tools.d.ts");
+    console.log("   \u2502       \u251C\u2500\u2500 view.tsx");
+    console.log("   \u2502       \u251C\u2500\u2500 view.css");
+    console.log("   \u2502       \u251C\u2500\u2500 components/");
+    console.log("   \u2502       \u2514\u2500\u2500 hooks/");
+    console.log("   \u251C\u2500\u2500 mcp-env.d.ts");
     console.log("   \u251C\u2500\u2500 index.ts (server entry point)");
     console.log("   \u251C\u2500\u2500 package.json");
     console.log("   \u251C\u2500\u2500 tsconfig.json");

package/dist/templates/blank/package.json

@@ -1,15 +1,22 @@
 {
   "name": "mcp-use server",
   "type": "module",
+  "engines": {
+    "node": ">=22.22.2"
+  },
   "version": "1.0.0",
-  "description": "Blank mcp-use server",
-  "author": "",
+  "description": "an mcp-use server",
+  "author": "mcp-use",
   "license": "MIT",
+  "homepage": "https://github.com/mcp-use/mcp-use",
   "keywords": [
     "mcp",
-    "server",
-    "blank",
-    "mcp-use"
+    "mcp-server",
+    "chatgpt plugins",
+    "claude connector",
+    "mcp-app",
+    "mcp-use",
+    "manufact"
   ],
   "main": "dist/index.js",
   "scripts": {
@@ -23,7 +30,7 @@
     "mcp-use": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^24.13.2",
-    "typescript": "7.0.1-rc"
+    "@types/node": "^22.20.0",
+    "typescript": "^7.0.2"
   }
 }

package/dist/templates/blank/tsconfig.json

@@ -1,20 +1,23 @@
 {
   "compilerOptions": {
-    "target": "ES2022",
+    "target": "ES2024",
     "jsx": "react-jsx",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowJs": true,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
     "strict": true,
-    "outDir": "./dist",
-    "sourceMap": true,
-    "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true,
-    "incremental": true,
-    "tsBuildInfoFile": "./dist/.tsbuildinfo"
+    "noEmit": true
   },
-  "include": ["index.ts", "src/**/*", "resources/**/*", "server.ts", ".mcp-use/**/*.d.ts"],
+  "include": [
+    "index.ts",
+    "mcp-env.d.ts",
+    "src/**/*",
+    "views/**/*",
+    "server.ts",
+    ".mcp-use/**/*.d.ts"
+  ],
   "exclude": ["node_modules", "dist"]
 }

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

@@ -1,43 +1,147 @@
 import { MCPServer } from "mcp-use";
 import { z } from "zod";
 
-const fruits = ["apple", "banana", "mango", "orange", "strawberry"];
+const fruits = [
+  { fruit: "mango", color: "bg-[#FBF1E1] dark:bg-[#FBF1E1]/10" },
+  { fruit: "pineapple", color: "bg-[#f8f0d9] dark:bg-[#f8f0d9]/10" },
+  { fruit: "cherries", color: "bg-[#E2EDDC] dark:bg-[#E2EDDC]/10" },
+  { fruit: "coconut", color: "bg-[#fbedd3] dark:bg-[#fbedd3]/10" },
+  { fruit: "apricot", color: "bg-[#fee6ca] dark:bg-[#fee6ca]/10" },
+  { fruit: "blueberry", color: "bg-[#e0e6e6] dark:bg-[#e0e6e6]/10" },
+  { fruit: "grapes", color: "bg-[#f4ebe2] dark:bg-[#f4ebe2]/10" },
+  { fruit: "watermelon", color: "bg-[#e6eddb] dark:bg-[#e6eddb]/10" },
+  { fruit: "orange", color: "bg-[#fdebdf] dark:bg-[#fdebdf]/10" },
+  { fruit: "avocado", color: "bg-[#ecefda] dark:bg-[#ecefda]/10" },
+  { fruit: "apple", color: "bg-[#F9E7E4] dark:bg-[#F9E7E4]/10" },
+  { fruit: "pear", color: "bg-[#f1f1cf] dark:bg-[#f1f1cf]/10" },
+  { fruit: "plum", color: "bg-[#ece5ec] dark:bg-[#ece5ec]/10" },
+  { fruit: "banana", color: "bg-[#fdf0dd] dark:bg-[#fdf0dd]/10" },
+  { fruit: "strawberry", color: "bg-[#f7e6df] dark:bg-[#f7e6df]/10" },
+  { fruit: "lemon", color: "bg-[#feeecd] dark:bg-[#feeecd]/10" },
+];
 
-const outputSchema = z.object({
+const fruitRowSchema = z.object({
+  fruit: z.string(),
+  color: z.string(),
+});
+
+const searchOutputSchema = z.object({
   query: z.string(),
-  items: z.array(z.object({ id: z.string(), name: z.string() })),
+  results: z.array(fruitRowSchema),
 });
 
+const detailsOutputSchema = z.object({
+  fruit: z.string(),
+  color: z.string(),
+  facts: z.array(z.string()),
+});
+
+function renderAsMarkdownTable(
+  results: Array<{ fruit: string; color: string }>
+): string {
+  const header = "| Fruit | Color |\n| --- | --- |";
+  const rows = results.map((r) => `| ${r.fruit} | ${r.color} |`).join("\n");
+  return `${header}\n${rows}`;
+}
+
 const server = new MCPServer({
   name: "{{PROJECT_NAME}}",
   title: "{{PROJECT_NAME}}",
   version: "1.0.0",
-  description: "An MCP Apps server built with mcp-use",
+  description: "MCP Apps server with a fruit shop view",
+  instructions:
+    "Use search-fruits to find fruit matches before calling get-fruit-details. Prefer the view result when the user wants to browse or compare options visually.",
+  websiteUrl: "https://mcp-use.com",
+  icons: [
+    {
+      src: "icon.svg",
+      mimeType: "image/svg+xml",
+      sizes: ["512x512"],
+    },
+  ],
 });
 
 export const searchFruits = server.tool(
   {
     name: "search-fruits",
-    description: "Search the fruit catalog",
-    inputSchema: z.object({ query: z.string().optional() }),
-    outputSchema,
+    title: "Search fruits",
+    description: "Search for fruits and display the results in a view",
+    inputSchema: z.object({
+      query: z.string().optional().describe("Search query to filter fruits"),
+    }),
+    outputSchema: searchOutputSchema,
     view: {
       name: "product-search-result",
-      description: "Fruit search results",
+      description: "Product search results with carousel and details",
       prefersBorder: true,
     },
-    annotations: { readOnlyHint: true, openWorldHint: false },
+    annotations: {
+      readOnlyHint: true,
+      destructiveHint: false,
+      openWorldHint: false,
+    },
   },
-  async ({ query = "" }) => {
-    const items = fruits
-      .filter((fruit) => fruit.includes(query.toLowerCase()))
-      .map((fruit) => ({ id: fruit, name: fruit }));
-    const data = { query, items };
+  async ({ query = "" }, ctx) => {
+    const results = fruits.filter(
+      (f) => query === "" || f.fruit.toLowerCase().includes(query.toLowerCase())
+    );
+
+    // Emulate a delay to show the loading state in the view
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    const data = { query, results };
+
+    if (!ctx.client.supportsViews()) {
+      return {
+        content: [{ type: "text", text: renderAsMarkdownTable(results) }],
+        structuredContent: data,
+      };
+    }
+
     return {
-      content: [{ type: "text", text: `Found ${items.length} fruits.` }],
+      content: [
+        {
+          type: "text",
+          text: `Found ${results.length} fruits matching "${query || "all"}"`,
+        },
+      ],
       structuredContent: data,
     };
   }
 );
 
+export const getFruitDetails = server.tool(
+  {
+    name: "get-fruit-details",
+    title: "Get fruit details",
+    description: "Get detailed information about a specific fruit",
+    inputSchema: z.object({
+      fruit: z.string().describe("The fruit name"),
+    }),
+    outputSchema: detailsOutputSchema,
+    annotations: {
+      readOnlyHint: true,
+      destructiveHint: false,
+      openWorldHint: false,
+    },
+  },
+  async ({ fruit }) => {
+    const found = fruits.find(
+      (f) => f.fruit.toLowerCase() === fruit.toLowerCase()
+    );
+    const details = {
+      fruit: found?.fruit ?? fruit,
+      color: found?.color ?? "unknown",
+      facts: [
+        `${fruit} is a delicious fruit`,
+        `Color: ${found?.color ?? "unknown"}`,
+      ],
+    };
+    return {
+      content: [{ type: "text", text: JSON.stringify(details) }],
+      structuredContent: details,
+    };
+  }
+);
+
 export default server;

package/dist/templates/mcp-apps/{tools.d.ts → mcp-env.d.ts}

@@ -1,4 +1,6 @@
-// Created by mcp-use when missing. Existing files are never overwritten.
+// mcp-use typing shim — dev/build recreate this file if missing.
+declare module "*.css";
+
 declare module "mcp-use/react" {
   interface Register {
     tools: typeof import("./index.js");

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

@@ -1,20 +1,22 @@
 {
   "name": "mcp-use server",
   "type": "module",
+  "engines": {
+    "node": ">=22.22.2"
+  },
   "version": "1.0.0",
-  "description": "MCP server with a standard MCP Apps view",
-  "author": "",
+  "description": "an mcp-use server",
+  "author": "mcp-use",
   "license": "MIT",
+  "homepage": "https://github.com/mcp-use/mcp-use",
   "keywords": [
     "mcp",
-    "server",
-    "starter",
-    "tools",
-    "resources",
-    "prompts",
-    "ui",
-    "react",
-    "mcp-apps"
+    "mcp-server",
+    "chatgpt plugins",
+    "claude connector",
+    "mcp-app",
+    "mcp-use",
+    "manufact"
   ],
   "main": "dist/index.js",
   "scripts": {
@@ -26,14 +28,14 @@
   },
   "dependencies": {
     "mcp-use": "workspace:*",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@types/node": "^24.13.2",
+    "@types/node": "^22.20.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "typescript": "7.0.1-rc"
+    "typescript": "^7.0.2"
   }
 }

package/dist/templates/mcp-apps/tsconfig.json

@@ -9,10 +9,15 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true,
-    "noEmit": true,
-    "noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": true
+    "noEmit": true
   },
-  "include": ["index.ts", "tools.d.ts", "resources/**/*"],
+  "include": [
+    "index.ts",
+    "mcp-env.d.ts",
+    "src/**/*",
+    "views/**/*",
+    "server.ts",
+    ".mcp-use/**/*.d.ts"
+  ],
   "exclude": ["node_modules", "dist"]
 }

package/dist/templates/mcp-apps/views/product-search-result/components/Accordion.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { AccordionItem } from "./AccordionItem.js";
+
+export interface AccordionItemData {
+  question: string;
+  answer: string;
+}
+
+interface AccordionProps {
+  items: AccordionItemData[];
+}
+
+export function Accordion({ items }: AccordionProps) {
+  const [openAccordionIndex, setOpenAccordionIndex] = useState<number | null>(
+    null
+  );
+
+  return (
+    <div className="mt-4 border-t border-neutral-200 p-8 pt-4 dark:border-neutral-700">
+      <div className="overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-700">
+        {items.map((item, index) => (
+          <AccordionItem
+            key={index}
+            question={item.question}
+            answer={item.answer}
+            isOpen={openAccordionIndex === index}
+            onToggle={() =>
+              setOpenAccordionIndex(openAccordionIndex === index ? null : index)
+            }
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/dist/templates/mcp-apps/views/product-search-result/components/AccordionItem.tsx

@@ -0,0 +1,35 @@
+export interface AccordionItemProps {
+  question: string;
+  answer: string;
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+export function AccordionItem({
+  question,
+  answer,
+  isOpen,
+  onToggle,
+}: AccordionItemProps) {
+  return (
+    <div className="border-b border-neutral-200 last:border-b-0 dark:border-neutral-700">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full items-center justify-between p-4 text-left transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-900"
+      >
+        <span className="font-medium text-neutral-900 dark:text-neutral-100">
+          {question}
+        </span>
+        <span className="text-xl text-neutral-500 transition-transform duration-200 dark:text-neutral-400">
+          {isOpen ? "−" : "+"}
+        </span>
+      </button>
+      {isOpen && (
+        <div className="px-4 pb-4 text-neutral-600 dark:text-neutral-400">
+          {answer}
+        </div>
+      )}
+    </div>
+  );
+}