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

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

@@ -1,91 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,72 +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);
-
-        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]);
-}

package/dist/templates/mcp-apps/views/product-search-result/view.css

@@ -1,81 +0,0 @@
-/* Carousel scroll container with padding for blur effect */
-.carousel-scroll-container {
-  padding-bottom: 2rem;
-}
-
-/* Hover effect styles for carousel items */
-.carousel-item {
-  position: relative;
-  container-type: size;
-  cursor: pointer;
-  transition-property: translate, scale;
-  transition-duration: 0.12s;
-  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-  -webkit-tap-highlight-color: transparent;
-  overflow: hidden;
-  border-radius: 12px;
-}
-
-.carousel-item:active {
-  translate: 0 1px;
-  scale: 0.99;
-}
-
-.carousel-item-content {
-  position: relative;
-  z-index: 2;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.carousel-item-bg {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  transform: translateZ(0);
-  filter: blur(28px) saturate(5) brightness(1.3);
-  translate: calc(var(--pointer-x, -10) * 50cqi)
-    calc(var(--pointer-y, -10) * 50cqh);
-  scale: var(--icon-scale, 3.4);
-  opacity: var(--icon-opacity, 0.25);
-  will-change: transform, filter, opacity;
-  pointer-events: none;
-  z-index: 1;
-  transition:
-    opacity 0.26s ease-out,
-    scale 0.26s ease-out;
-  border-radius: inherit;
-}
-
-.carousel-item-bg img {
-  width: 100px;
-  -webkit-user-select: none;
-  user-select: none;
-  -webkit-user-drag: none;
-}
-
-.carousel-item::after {
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  inset: 0px;
-  border-radius: inherit;
-  border: 3px solid transparent;
-  backdrop-filter: blur(0px) saturate(4.2) brightness(2.5) contrast(2.5);
-  -webkit-backdrop-filter: blur(0px) saturate(4.2) brightness(2.5) contrast(2.5);
-  mask:
-    linear-gradient(#fff 0 100%) border-box,
-    linear-gradient(#fff 0 100%) padding-box;
-  mask-composite: exclude;
-  z-index: 3;
-  transform: translateZ(0);
-}
-
-.carousel-item-highlighted {
-  outline: 2px solid rgb(37 99 235);
-  outline-offset: 2px;
-}

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

@@ -1,371 +0,0 @@
-import {
-  Image,
-  ModelContext,
-  ThemeProvider,
-  ViewControls,
-  useCallTool,
-  useDisplayMode,
-  useHostContext,
-  useOpenExternal,
-  useSendFollowUp,
-  useToolContext,
-  useViewTheme,
-  useViewTool,
-} from "mcp-use/react";
-import { useCallback, useState } from "react";
-import { z } from "zod";
-
-import { Accordion } from "./components/Accordion.js";
-import { Carousel } from "./components/Carousel.js";
-import { CarouselSkeleton } from "./components/CarouselSkeleton.js";
-import "./view.css";
-
-const shellClass =
-  "relative rounded-3xl border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-900";
-
-const iconButtonClass =
-  "rounded-full border border-neutral-300 p-2 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:hover:bg-neutral-800";
-
-function HeartIcon({ filled }: { filled: boolean }) {
-  if (filled) {
-    return (
-      <svg
-        width="14"
-        height="14"
-        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="14"
-      height="14"
-      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>
-  );
-}
-
-function ExpandIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      aria-hidden
-    >
-      <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
-    </svg>
-  );
-}
-
-function PipIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      aria-hidden
-    >
-      <rect x="2" y="4" width="20" height="14" rx="2" />
-      <rect x="13" y="11" width="7" height="5" rx="1" fill="currentColor" />
-    </svg>
-  );
-}
-
-function CloseIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      aria-hidden
-    >
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>
-  );
-}
-
-function ProductSearchResultContent() {
-  const view = useToolContext<"search-fruits">();
-  const theme = useViewTheme();
-  const { locale, hostCapabilities } = useHostContext();
-  const { displayMode, availableDisplayModes, requestDisplayMode } =
-    useDisplayMode();
-  const sendFollowUp = useSendFollowUp();
-  const openExternal = useOpenExternal();
-
-  const [favorites, setFavorites] = useState<string[]>([]);
-  const [highlighted, setHighlighted] = useState<string | null>(null);
-
-  const details = useCallTool("get-fruit-details");
-
-  useViewTool(
-    {
-      name: "highlight-fruit",
-      description: "Highlight a visible result in the carousel",
-      inputSchema: z.object({ id: z.string() }),
-    },
-    async ({ id }) => {
-      setHighlighted(id);
-      return { content: [{ type: "text", text: `Highlighted ${id}` }] };
-    }
-  );
-
-  const toggleFavorite = useCallback((fruit: string) => {
-    setFavorites((current) =>
-      current.includes(fruit)
-        ? current.filter((f) => f !== fruit)
-        : [...current, fruit]
-    );
-  }, []);
-
-  const accordionItems = [
-    {
-      question: "Demo of the autosize feature",
-      answer:
-        "This is a demo of the autosize feature. The view will automatically resize to fit the content, as supported by the MCP Apps specification.",
-    },
-  ];
-
-  const root = theme === "dark" ? "dark" : "";
-  const lang = locale?.split("-")[0] ?? "en";
-  const isFullscreen = displayMode === "fullscreen";
-  const isPip = displayMode === "pip";
-
-  if (view.status === "error") {
-    return (
-      <div className={`${root} ${shellClass} p-8`} role="alert">
-        <p className="m-0 font-medium text-neutral-900 dark:text-neutral-100">
-          Search failed
-        </p>
-        <p className="mt-2 mb-0 text-sm text-neutral-600 dark:text-neutral-400">
-          {view.error.message}
-        </p>
-      </div>
-    );
-  }
-
-  if (view.status === "pending") {
-    return (
-      <div className={`${root} ${shellClass}`}>
-        <div className="p-8 pb-4">
-          <h5 className="mb-1 text-sm text-neutral-500 dark:text-neutral-400">
-            MCP-Apps Template
-          </h5>
-          <h2 className="mb-3 text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
-            Lovely Little Fruit Shop
-          </h2>
-          <div className="h-5 w-48 animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800" />
-        </div>
-        <CarouselSkeleton />
-      </div>
-    );
-  }
-
-  const { query, results } = view.toolOutput;
-  const selectedFruit = details.data?.structuredContent;
-  const isLoadingDetails = details.isPending;
-
-  return (
-    <div className={`${root} ${shellClass}`}>
-      <ModelContext
-        content={`User is viewing results for "${query}"; favorites: ${favorites.join(", ") || "none"}`}
-      />
-
-      <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
-        <span className="rounded-full px-2.5 py-1 text-xs font-medium tracking-wide text-neutral-500 uppercase dark:text-neutral-400">
-          {lang}
-        </span>
-
-        {favorites.length > 0 && (
-          <span className="flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium text-red-500">
-            <HeartIcon filled />
-            {favorites.length}
-          </span>
-        )}
-
-        {!isFullscreen && !isPip && (
-          <>
-            {availableDisplayModes.includes("pip") && (
-              <button
-                type="button"
-                className={iconButtonClass}
-                title="Picture-in-picture"
-                onClick={() => {
-                  void requestDisplayMode({ mode: "pip" });
-                }}
-              >
-                <PipIcon />
-              </button>
-            )}
-            {availableDisplayModes.includes("fullscreen") && (
-              <button
-                type="button"
-                className={iconButtonClass}
-                title="Fullscreen"
-                onClick={() => {
-                  void requestDisplayMode({ mode: "fullscreen" });
-                }}
-              >
-                <ExpandIcon />
-              </button>
-            )}
-          </>
-        )}
-
-        {(isFullscreen || isPip) && (
-          <button
-            type="button"
-            className={iconButtonClass}
-            title="Exit"
-            onClick={() => {
-              void requestDisplayMode({ mode: "inline" });
-            }}
-          >
-            <CloseIcon />
-          </button>
-        )}
-      </div>
-
-      <div className="p-8 pb-4">
-        <h5 className="mb-1 text-sm text-neutral-500 dark:text-neutral-400">
-          MCP-Apps Template
-        </h5>
-        <h2 className="mb-1 text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
-          Lovely Little Fruit Shop
-        </h2>
-        <p className="text-base text-neutral-600 dark:text-neutral-400">
-          {query
-            ? `Showing results for "${query}"`
-            : "Tap a fruit to see details"}
-        </p>
-      </div>
-
-      <Carousel
-        results={results}
-        favorites={favorites}
-        highlighted={highlighted}
-        onSelectFruit={(fruit: string) => {
-          void details.callTool({ fruit });
-        }}
-        onToggleFavorite={toggleFavorite}
-      />
-
-      {selectedFruit && (
-        <div className="mx-8 my-6 flex items-center gap-6 rounded-2xl border border-neutral-200 bg-neutral-50 p-5 dark:border-neutral-700 dark:bg-neutral-950">
-          <div
-            className={`shrink-0 rounded-xl p-4 ${
-              results.find((r) => r.fruit === selectedFruit.fruit)?.color ?? ""
-            }`}
-          >
-            <Image
-              src={`/fruits/${selectedFruit.fruit}.webp`}
-              alt={selectedFruit.fruit}
-              className="h-24 w-24 object-contain"
-            />
-          </div>
-          <div className="flex-1">
-            {isLoadingDetails ? (
-              <div className="h-4 w-32 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
-            ) : (
-              <>
-                <div className="mb-2 flex items-center gap-2">
-                  <h3 className="text-lg font-semibold capitalize">
-                    {selectedFruit.fruit}
-                  </h3>
-                  <button
-                    type="button"
-                    onClick={() => toggleFavorite(selectedFruit.fruit)}
-                    className={`rounded-full p-1 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800 ${
-                      favorites.includes(selectedFruit.fruit)
-                        ? "text-red-500"
-                        : "text-neutral-500"
-                    }`}
-                    title={
-                      favorites.includes(selectedFruit.fruit)
-                        ? "Remove from favorites"
-                        : "Add to favorites"
-                    }
-                  >
-                    <HeartIcon
-                      filled={favorites.includes(selectedFruit.fruit)}
-                    />
-                  </button>
-                </div>
-                <ul className="space-y-1">
-                  {selectedFruit.facts.map((fact: string) => (
-                    <li
-                      key={fact}
-                      className="flex items-start gap-2 text-sm text-neutral-600 dark:text-neutral-400"
-                    >
-                      <span className="mt-0.5 text-blue-600">•</span>
-                      {fact}
-                    </li>
-                  ))}
-                </ul>
-                <div className="mt-3 flex flex-wrap gap-2">
-                  {hostCapabilities?.message !== undefined && (
-                    <button
-                      type="button"
-                      onClick={() => {
-                        void sendFollowUp({
-                          prompt: `Tell me more interesting facts about ${selectedFruit.fruit}`,
-                        }).catch(() => {});
-                      }}
-                      className="cursor-pointer rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-100 dark:bg-blue-950 dark:text-blue-300 dark:hover:bg-blue-900"
-                    >
-                      Ask the AI for more about {selectedFruit.fruit}
-                    </button>
-                  )}
-                  <button
-                    type="button"
-                    onClick={() => {
-                      void openExternal({
-                        url: `https://images.example.com/producers/${selectedFruit.fruit}`,
-                      });
-                    }}
-                    className="cursor-pointer rounded-lg border border-neutral-300 px-3 py-1.5 text-xs font-medium text-neutral-700 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-800"
-                  >
-                    View producer
-                  </button>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      )}
-
-      <Accordion items={accordionItems} />
-    </div>
-  );
-}
-
-export default function ProductSearchResult() {
-  return (
-    <ThemeProvider>
-      <ViewControls>
-        <ProductSearchResultContent />
-      </ViewControls>
-    </ThemeProvider>
-  );
-}