create-mcp-use-app 0.14.17 → 2.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mcp-use-app",
-  "version": "0.14.17",
+  "version": "2.0.0-beta.0",
   "type": "module",
   "description": "Create MCP-Use apps with one command",
   "author": "mcp-use, Inc.",
@@ -35,24 +35,16 @@
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
   },
-  "dependencies": {
-    "chalk": "^5.6.2",
-    "commander": "^14.0.2",
-    "ink": "^6.6.0",
-    "ink-select-input": "^6.2.0",
-    "ink-text-input": "^6.0.0",
-    "ora": "^9.0.0",
-    "react": "^19.2.3",
-    "tar": "^7.5.16"
-  },
+  "dependencies": {},
   "devDependencies": {
+    "@clack/prompts": "^1.7.0",
     "vitest": "^4.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "npm run clean && tsup src/index.tsx --format esm && tsc --emitDeclarationOnly --declaration && npm run copy-templates",
+    "build": "npm run clean && tsup src/index.ts --format esm && tsc --emitDeclarationOnly --declaration && npm run copy-templates",
     "clean": "rimraf dist tsconfig.tsbuildinfo",
     "copy-templates": "node scripts/copy-templates.js",
     "dev": "tsc --build --watch",

package/dist/templates/mcp-apps/pnpm-workspace.yaml

@@ -1,2 +0,0 @@
-overrides:
-  lodash: ">=4.18.0"

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

@@ -1,35 +0,0 @@
-import React, { useState } from "react";
-import { AccordionItem } from "./AccordionItem";
-
-export interface AccordionItemData {
-  question: string;
-  answer: string;
-}
-
-interface AccordionProps {
-  items: AccordionItemData[];
-}
-
-export const Accordion: React.FC<AccordionProps> = ({ items }) => {
-  const [openAccordionIndex, setOpenAccordionIndex] = useState<number | null>(
-    null
-  );
-
-  return (
-    <div className="p-8 pt-4 border-t border-subtle mt-4">
-      <div className="rounded-lg border border-default overflow-hidden">
-        {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/resources/product-search-result/components/AccordionItem.tsx

@@ -1,32 +0,0 @@
-import { Animate } from "@openai/apps-sdk-ui/components/Transition";
-import React from "react";
-import type { AccordionItemProps } from "../types";
-
-export const AccordionItem: React.FC<AccordionItemProps> = ({
-  question,
-  answer,
-  isOpen,
-  onToggle,
-}) => {
-  return (
-    <div className="border-b border-subtle last:border-b-0">
-      <button
-        type="button"
-        onClick={onToggle}
-        className="w-full flex items-center justify-between p-4 text-left hover:bg-primary-soft-hover transition-colors"
-      >
-        <span className="font-medium text-default">{question}</span>
-        <span className="text-xl text-tertiary transition-transform duration-200">
-          {isOpen ? "−" : "+"}
-        </span>
-      </button>
-      <Animate enter={{ y: 0, delay: 150, duration: 450 }} exit={{ y: -8 }}>
-        {isOpen && (
-          <div key="content" className="pb-4 text-secondary px-4">
-            {answer}
-          </div>
-        )}
-      </Animate>
-    </div>
-  );
-};

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

@@ -1,51 +0,0 @@
-import { Animate } from "@openai/apps-sdk-ui/components/Transition";
-import React, { useRef } from "react";
-import { CarouselItem } from "./CarouselItem";
-import { useCarouselAnimation } from "../hooks/useCarouselAnimation";
-
-interface CarouselProps {
-  results: Array<{ fruit: string; color: string }>;
-  favorites?: string[];
-  onSelectFruit: (fruit: string) => void;
-  onToggleFavorite?: (fruit: string) => void;
-}
-
-export const Carousel: React.FC<CarouselProps> = ({
-  results,
-  favorites = [],
-  onSelectFruit,
-  onToggleFavorite,
-}) => {
-  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">
-        <Animate className="flex gap-4">
-          {results.map((item, index) => {
-            const fruit =
-              item.fruit ?? (item as { name?: string }).name ?? "Item";
-            return (
-              <CarouselItem
-                key={`${fruit}-${index}`}
-                fruit={fruit}
-                color={item.color ?? "bg-default/10"}
-                isFavorite={favorites.includes(fruit)}
-                onClick={() => onSelectFruit(fruit)}
-                onToggleFavorite={
-                  onToggleFavorite ? () => onToggleFavorite(fruit) : undefined
-                }
-              />
-            );
-          })}
-        </Animate>
-      </div>
-    </div>
-  );
-};

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

@@ -1,54 +0,0 @@
-import { Button } from "@openai/apps-sdk-ui/components/Button";
-import { HeartFilled, HeartXs } from "@openai/apps-sdk-ui/components/Icon";
-import { Image } from "mcp-use/react";
-import React from "react";
-
-export interface CarouselItemProps {
-  fruit: string;
-  color: string;
-  isFavorite?: boolean;
-  onClick: () => void;
-  onToggleFavorite?: () => void;
-}
-
-export const CarouselItem: React.FC<CarouselItemProps> = ({
-  fruit,
-  color,
-  isFavorite,
-  onClick,
-  onToggleFavorite,
-}) => {
-  return (
-    <div
-      className={`carousel-item size-52 rounded-xl border border-subtle ${color} cursor-pointer`}
-      onClick={onClick}
-    >
-      {onToggleFavorite && (
-        <Button
-          color="secondary"
-          pill
-          size="md"
-          uniform
-          variant="ghost"
-          onClick={(e) => {
-            e.stopPropagation();
-            onToggleFavorite();
-          }}
-          className={`absolute top-2 right-2 z-10 ${isFavorite ? "text-danger/80" : "text-secondary"}`}
-        >
-          {isFavorite ? <HeartFilled /> : <HeartXs />}
-        </Button>
-      )}
-      <div className="carousel-item-bg">
-        <Image src={"/fruits/" + fruit + ".png"} alt={fruit} />
-      </div>
-      <div className="carousel-item-content">
-        <Image
-          src={"/fruits/" + fruit + ".png"}
-          alt={fruit}
-          className="w-24 h-24 object-contain"
-        />
-      </div>
-    </div>
-  );
-};

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

@@ -1,20 +0,0 @@
-import React from "react";
-
-const SKELETON_COUNT = 6;
-
-export const CarouselSkeleton: React.FC = () => {
-  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 rounded-xl border border-subtle animate-pulse bg-gray-100"
-            ></div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,78 +0,0 @@
-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);
-
-        // Calculate distance from cursor to center of item
-        const distance = Math.sqrt(
-          relativeX * relativeX + relativeY * relativeY
-        );
-        // Use a larger max distance to make the effect work across gaps
-        const maxDistance = Math.max(rect.width, rect.height) * 2;
-        const normalizedDistance = Math.min(distance / maxDistance, 1);
-
-        // Closer items get higher opacity and scale
-        // Use exponential falloff for smoother transition
-        const proximity = Math.pow(1 - normalizedDistance, 2);
-        const opacity = 0.1 + proximity * 0.3; // Range from 0.1 to 0.4
-        const scale = 2.0 + proximity * 2.0; // Range from 2.0 to 4.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);
-    }
-
-    // Initial update
-    updateItems();
-
-    return () => {
-      document.removeEventListener("pointermove", handlePointerMove);
-      window.removeEventListener("scroll", handleScroll, true);
-      const container = scrollContainerRef.current;
-      if (container) {
-        container.removeEventListener("scroll", handleScroll);
-      }
-    };
-  }, [carouselContainerRef, scrollContainerRef]);
-}

package/dist/templates/mcp-apps/resources/product-search-result/types.ts

@@ -1,20 +0,0 @@
-import { z } from "zod";
-
-export const propSchema = z.object({
-  query: z.string().describe("The search query"),
-  results: z.array(
-    z.object({
-      fruit: z.string().describe("Fruit name"),
-      color: z.string().describe("Tailwind background color class"),
-    })
-  ),
-});
-
-export type ProductSearchResultProps = z.infer<typeof propSchema>;
-
-export type AccordionItemProps = {
-  question: string;
-  answer: string;
-  isOpen: boolean;
-  onToggle: () => void;
-};

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

@@ -1,288 +0,0 @@
-import { AppsSDKUIProvider } from "@openai/apps-sdk-ui/components/AppsSDKUIProvider";
-import {
-  Image,
-  McpUseProvider,
-  useCallTool,
-  useWidget,
-  type WidgetMetadata,
-} from "mcp-use/react";
-import React, { useCallback } from "react";
-import { Link } from "react-router";
-import "../styles.css";
-import { Carousel } from "./components/Carousel";
-import { CarouselSkeleton } from "./components/CarouselSkeleton";
-import { Accordion } from "./components/Accordion";
-import type { ProductSearchResultProps } from "./types";
-import { propSchema } from "./types";
-import { Button } from "@openai/apps-sdk-ui/components/Button";
-import {
-  Expand,
-  HeartFilled,
-  HeartXs,
-  PictureInPicture,
-} from "@openai/apps-sdk-ui/components/Icon";
-export const widgetMetadata: WidgetMetadata = {
-  description:
-    "Display product search results with filtering, state management, and tool interactions",
-  props: propSchema,
-  exposeAsTool: false,
-  metadata: {
-    prefersBorder: false,
-    invoking: "Loading product search results...",
-    invoked: "Product search results loaded",
-    csp: {
-      // Widget-specific
-      resourceDomains: ["https://cdn.openai.com"],
-    },
-  },
-};
-type FavoritesState = { favorites: string[] };
-
-const ProductSearchResult: React.FC = () => {
-  const {
-    props,
-    isPending,
-    displayMode,
-    requestDisplayMode,
-    sendFollowUpMessage,
-    locale,
-    state,
-    setState,
-  } = useWidget<ProductSearchResultProps, FavoritesState>();
-
-  const {
-    callTool: getFruitDetails,
-    data: fruitDetails,
-    isPending: isLoadingDetails,
-  } = useCallTool("get-fruit-details");
-
-  const selectedFruit = fruitDetails?.structuredContent as
-    | { fruit: string; facts?: string[] }
-    | undefined;
-  const favorites = state?.favorites ?? [];
-
-  const toggleFavorite = useCallback(
-    (fruit: string) => {
-      const current = state?.favorites ?? [];
-      const next = current.includes(fruit)
-        ? current.filter((f: string) => f !== fruit)
-        : [...current, fruit];
-      setState({ favorites: next });
-    },
-    [state, setState]
-  );
-
-  const accordionItems = [
-    {
-      question: "Demo of the autosize feature",
-      answer:
-        "This is a demo of the autosize feature. The widget will automatically resize to fit the content, as supported by the mcp-apps specification",
-    },
-  ];
-
-  if (isPending) {
-    return (
-      <McpUseProvider>
-        <div className="relative bg-surface-elevated border border-default rounded-3xl">
-          <div className="p-8 pb-4">
-            <h5 className="text-secondary mb-1">MCP-Apps Template</h5>
-            <h2 className="heading-xl mb-3">Lovely Little Fruit Shop</h2>
-            <div className="h-5 w-48 rounded-md bg-default/10 animate-pulse" />
-          </div>
-          <CarouselSkeleton />
-        </div>
-      </McpUseProvider>
-    );
-  }
-
-  const { query, results } = props;
-  const isFullscreen = displayMode === "fullscreen";
-  const isPip = displayMode === "pip";
-  const lang = locale?.split("-")[0] ?? "en";
-
-  return (
-    <McpUseProvider>
-      <AppsSDKUIProvider linkComponent={Link}>
-        <div className="relative bg-surface-elevated border border-default rounded-3xl">
-          {/* Toolbar — top-right badges and controls */}
-          <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
-            {/* Locale badge */}
-            <span className="px-2.5 py-1 text-xs font-medium rounded-full text-secondary uppercase tracking-wide">
-              {lang}
-            </span>
-
-            {/* Favorites count */}
-            {favorites.length > 0 && (
-              <Button
-                color="secondary"
-                pill
-                size="lg"
-                uniform
-                variant="ghost"
-                className="text-danger/80"
-              >
-                <HeartFilled />
-                {favorites.length}
-              </Button>
-            )}
-
-            {/* Display mode buttons */}
-            {!isFullscreen && !isPip && (
-              <>
-                <Button
-                  color="secondary"
-                  pill
-                  size="lg"
-                  uniform
-                  variant="outline"
-                  onClick={() => requestDisplayMode("pip")}
-                  title="Picture-in-picture"
-                >
-                  <PictureInPicture />
-                </Button>
-                <Button
-                  color="secondary"
-                  pill
-                  size="lg"
-                  uniform
-                  variant="outline"
-                  onClick={() => requestDisplayMode("fullscreen")}
-                  title="Fullscreen"
-                >
-                  <Expand />
-                </Button>
-              </>
-            )}
-
-            {(isFullscreen || isPip) && (
-              <Button
-                color="secondary"
-                pill
-                size="lg"
-                uniform
-                variant="outline"
-                onClick={() => requestDisplayMode("inline")}
-                title="Exit"
-              >
-                <svg
-                  width="14"
-                  height="14"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </Button>
-            )}
-          </div>
-
-          {/* Header */}
-          <div className="p-8 pb-4">
-            <h5 className="text-secondary mb-1">MCP-Apps Template</h5>
-            <h2 className="heading-xl mb-1">Lovely Little Fruit Shop</h2>
-            <p className="text-md text-secondary">
-              {query
-                ? `Showing results for "${query}"`
-                : "Tap a fruit to see details"}
-            </p>
-          </div>
-
-          {/* Carousel */}
-          <Carousel
-            results={results}
-            favorites={favorites}
-            onSelectFruit={(fruit: string) => getFruitDetails({ fruit })}
-            onToggleFavorite={toggleFavorite}
-          />
-
-          {/* Detail view */}
-          {selectedFruit && (
-            <div className="mx-8 my-6 rounded-2xl border border-default bg-surface p-5 flex items-center gap-6">
-              <div
-                className={`rounded-xl p-4 shrink-0 ${
-                  results.find(
-                    (r: { fruit: string }) => r.fruit === selectedFruit.fruit
-                  )?.color ?? ""
-                }`}
-              >
-                <Image
-                  src={`/fruits/${selectedFruit.fruit}.png`}
-                  alt={selectedFruit.fruit}
-                  className="w-24 h-24 object-contain"
-                />
-              </div>
-              <div className="flex-1">
-                {isLoadingDetails ? (
-                  <div className="animate-pulse h-4 w-32 bg-surface-elevated rounded" />
-                ) : (
-                  <>
-                    <div className="flex items-center gap-2 mb-2">
-                      <h3 className="font-semibold text-lg capitalize">
-                        {selectedFruit.fruit}
-                      </h3>
-                      <Button
-                        color="secondary"
-                        pill
-                        size="md"
-                        uniform
-                        variant="ghost"
-                        onClick={() => toggleFavorite(selectedFruit.fruit)}
-                        title={
-                          favorites.includes(selectedFruit.fruit)
-                            ? "Remove from favorites"
-                            : "Add to favorites"
-                        }
-                        className={
-                          favorites.includes(selectedFruit.fruit)
-                            ? "text-danger/80"
-                            : "text-secondary"
-                        }
-                      >
-                        {favorites.includes(selectedFruit.fruit) ? (
-                          <HeartFilled />
-                        ) : (
-                          <HeartXs />
-                        )}
-                      </Button>
-                    </div>
-                    <ul className="space-y-1">
-                      {(selectedFruit.facts ?? []).map((fact: string) => (
-                        <li
-                          key={fact}
-                          className="text-sm text-secondary flex items-start gap-2"
-                        >
-                          <span className="text-info mt-0.5">•</span>
-                          {fact}
-                        </li>
-                      ))}
-                    </ul>
-                    {/* Follow-up message demo — sends a message to the LLM from the widget */}
-                    <button
-                      onClick={() =>
-                        sendFollowUpMessage(
-                          `Tell me more interesting facts about ${selectedFruit.fruit}`
-                        )
-                      }
-                      className="mt-3 px-3 py-1.5 text-xs font-medium rounded-lg bg-info/10 text-info hover:bg-info/20 transition-colors cursor-pointer"
-                    >
-                      Ask the AI for more about {selectedFruit.fruit}
-                    </button>
-                  </>
-                )}
-              </div>
-            </div>
-          )}
-
-          <Accordion items={accordionItems} />
-        </div>
-      </AppsSDKUIProvider>
-    </McpUseProvider>
-  );
-};
-
-export default ProductSearchResult;