create-mcp-use-app 2.0.0-beta.2 → 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.

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) {
@@ -2152,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

@@ -5,14 +5,18 @@
     "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": {

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

@@ -5,19 +5,18 @@
     "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": {

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>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { useRef } from "react";
+import { CarouselItem } from "./CarouselItem.js";
+import { useCarouselAnimation } from "../hooks/useCarouselAnimation.js";
+
+interface CarouselProps {
+  results: Array<{ fruit: string; color: string }>;
+  favorites?: string[];
+  highlighted?: string | null;
+  onSelectFruit: (fruit: string) => void;
+  onToggleFavorite?: (fruit: string) => void;
+}
+
+export function Carousel({
+  results,
+  favorites = [],
+  highlighted = null,
+  onSelectFruit,
+  onToggleFavorite,
+}: CarouselProps) {
+  const carouselContainerRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  useCarouselAnimation(carouselContainerRef, scrollContainerRef);
+
+  return (
+    <div
+      ref={scrollContainerRef}
+      className="carousel-scroll-container w-full overflow-x-auto overflow-y-visible pl-8"
+    >
+      <div ref={carouselContainerRef} className="overflow-visible">
+        <div className="flex gap-4">
+          {results.map((item, index) => {
+            const fruit = item.fruit;
+            return (
+              <CarouselItem
+                key={`${fruit}-${index}`}
+                fruit={fruit}
+                color={item.color}
+                isFavorite={favorites.includes(fruit)}
+                isHighlighted={highlighted === fruit}
+                onClick={() => onSelectFruit(fruit)}
+                {...(onToggleFavorite !== undefined && {
+                  onToggleFavorite: () => onToggleFavorite(fruit),
+                })}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { Image } from "mcp-use/react";
+
+export interface CarouselItemProps {
+  fruit: string;
+  color: string;
+  isFavorite?: boolean;
+  isHighlighted?: boolean;
+  onClick: () => void;
+  onToggleFavorite?: () => void;
+}
+
+function HeartIcon({ filled }: { filled: boolean }) {
+  if (filled) {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        aria-hidden
+      >
+        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+      </svg>
+    );
+  }
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+    >
+      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+    </svg>
+  );
+}
+
+export function CarouselItem({
+  fruit,
+  color,
+  isFavorite,
+  isHighlighted,
+  onClick,
+  onToggleFavorite,
+}: CarouselItemProps) {
+  return (
+    <div
+      className={`carousel-item shrink-0 size-52 rounded-xl border border-neutral-200 dark:border-neutral-700 ${color}${isHighlighted ? " carousel-item-highlighted" : ""}`}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }}
+    >
+      {onToggleFavorite && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleFavorite();
+          }}
+          className={`absolute top-2 right-2 z-10 rounded-full p-1.5 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800 ${
+            isFavorite
+              ? "text-red-500"
+              : "text-neutral-500 dark:text-neutral-400"
+          }`}
+          aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
+        >
+          <HeartIcon filled={isFavorite === true} />
+        </button>
+      )}
+      <div className="carousel-item-bg">
+        <Image src={`/fruits/${fruit}.webp`} alt={fruit} />
+      </div>
+      <div className="carousel-item-content">
+        <Image
+          src={`/fruits/${fruit}.webp`}
+          alt={fruit}
+          className="h-24 w-24 object-contain"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+const SKELETON_COUNT = 6;
+
+export function CarouselSkeleton() {
+  return (
+    <div className="carousel-scroll-container w-full overflow-x-auto overflow-y-visible pl-8">
+      <div className="overflow-hidden">
+        <div className="flex gap-4">
+          {Array.from({ length: SKELETON_COUNT }).map((_, i) => (
+            <div
+              key={i}
+              className="carousel-item shrink-0 size-52 animate-pulse rounded-xl border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/mcp-apps/views/product-search-result/hooks/useCarouselAnimation.ts

@@ -0,0 +1,72 @@
+import { useEffect, type RefObject } from "react";
+
+export function useCarouselAnimation(
+  carouselContainerRef: RefObject<HTMLDivElement | null>,
+  scrollContainerRef: RefObject<HTMLDivElement | null>
+): void {
+  useEffect(() => {
+    let lastPointerX = 0;
+    let lastPointerY = 0;
+
+    const updateItems = () => {
+      const container = carouselContainerRef.current;
+      if (!container) return;
+
+      const articles =
+        container.querySelectorAll<HTMLElement>(".carousel-item");
+
+      articles.forEach((article) => {
+        const rect = article.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const relativeX = lastPointerX - centerX;
+        const relativeY = lastPointerY - centerY;
+        const x = relativeX / (rect.width / 2);
+        const y = relativeY / (rect.height / 2);
+
+        const distance = Math.sqrt(
+          relativeX * relativeX + relativeY * relativeY
+        );
+        const maxDistance = Math.max(rect.width, rect.height) * 2;
+        const normalizedDistance = Math.min(distance / maxDistance, 1);
+        const proximity = Math.pow(1 - normalizedDistance, 2);
+        const opacity = 0.1 + proximity * 0.3;
+        const scale = 2.0 + proximity * 2.0;
+
+        article.style.setProperty("--pointer-x", x.toFixed(3));
+        article.style.setProperty("--pointer-y", y.toFixed(3));
+        article.style.setProperty("--icon-opacity", opacity.toFixed(3));
+        article.style.setProperty("--icon-scale", scale.toFixed(2));
+      });
+    };
+
+    const handlePointerMove = (event: { clientX: number; clientY: number }) => {
+      lastPointerX = event.clientX;
+      lastPointerY = event.clientY;
+      updateItems();
+    };
+
+    const handleScroll = () => {
+      updateItems();
+    };
+
+    document.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("scroll", handleScroll, true);
+
+    const scrollContainer = scrollContainerRef.current;
+    if (scrollContainer) {
+      scrollContainer.addEventListener("scroll", handleScroll);
+    }
+
+    updateItems();
+
+    return () => {
+      document.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("scroll", handleScroll, true);
+      const container = scrollContainerRef.current;
+      if (container) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [carouselContainerRef, scrollContainerRef]);
+}