create-mcp-use-app 0.5.2 → 0.6.0-canary.1

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

@@ -7,11 +7,13 @@ An MCP server template with OpenAI Apps SDK integration for ChatGPT-compatible w
 ## Features
 
 - **🤖 OpenAI Apps SDK**: Full compatibility with ChatGPT widgets
-- **🎨 React Widgets**: Interactive UI components with theme support
+- **🎨 Official UI Components**: Integrated [OpenAI Apps SDK UI components](https://openai.github.io/apps-sdk-ui/) for consistent, accessible widgets
+- **🛒 Ecommerce Widgets**: Complete ecommerce example with carousel, search, map, and order confirmation
 - **🔄 Automatic Registration**: Widgets auto-register from `resources/` folder
 - **📦 Props Schema**: Zod schema validation for widget props
 - **🌙 Theme Support**: Dark/light theme detection via `useWidget` hook
 - **🛠️ TypeScript**: Complete type safety
+- **🔧 Widget Capabilities**: Full support for `callTool`, `sendFollowUpMessage`, and persistent state
 
 ## What's New: Apps SDK Integration
 
@@ -59,9 +61,13 @@ npm start
 
 ```
 apps-sdk/
-├── resources/                  # React widget components
-│   └── display-weather.tsx      # Weather widget example
-├── index.ts                     # Server entry point
+├── resources/                          # React widget components
+│   ├── display-weather.tsx              # Weather widget example
+│   ├── ecommerce-carousel.tsx           # Ecommerce product carousel
+│   ├── product-search-result.tsx        # Product search with filters
+│   ├── stores-locations-map.tsx         # Store locations map
+│   └── order-confirmation.tsx           # Order confirmation widget
+├── index.ts                             # Server entry point (includes brand info tool)
 ├── package.json
 ├── tsconfig.json
 └── README.md
@@ -153,6 +159,89 @@ const bgColor = theme === 'dark' ? 'bg-gray-900' : 'bg-white';
 const textColor = theme === 'dark' ? 'text-gray-100' : 'text-gray-800';
 ```
 
+## Official UI Components
+
+This template uses the [OpenAI Apps SDK UI component library](https://openai.github.io/apps-sdk-ui/) for building consistent, accessible widgets. The library provides:
+
+- **Button**: Primary, secondary, and outline button variants
+- **Card**: Container component for content sections
+- **Carousel**: Image and content carousel with transitions
+- **Input**: Form input fields
+- **Icon**: Consistent iconography
+- **Transition**: Smooth animations and transitions
+
+Import components like this:
+
+```typescript
+import {
+  Button,
+  Card,
+  Carousel,
+  CarouselItem,
+  Transition,
+  Icon,
+  Input,
+} from '@openai/apps-sdk-ui';
+```
+
+## Ecommerce Widgets
+
+This template includes a complete ecommerce example with four widgets:
+
+### 1. Ecommerce Carousel (`ecommerce-carousel.tsx`)
+
+A product carousel widget featuring:
+- Title and description
+- Carousel of product items with placeholder images
+- Info button and Add to Cart button for each item
+- Uses official Carousel, Card, Button, Icon, and Transition components
+- Integrates with `callTool` for cart operations
+- Persistent state management
+
+### 2. Product Search Result (`product-search-result.tsx`)
+
+A search results widget with:
+- Search input with real-time filtering
+- Price range filters and stock status filter
+- Grid layout of product cards
+- Uses `callTool` to perform searches
+- Uses `sendFollowUpMessage` to update conversation
+- Persistent filter state
+
+### 3. Stores Locations Map (`stores-locations-map.tsx`)
+
+A store locator widget featuring:
+- Interactive map display (placeholder)
+- List of store locations with details
+- Distance calculation
+- Get directions functionality
+- Store details on click
+- Uses `callTool` for directions and store info
+
+### 4. Order Confirmation (`order-confirmation.tsx`)
+
+An order confirmation widget with:
+- Order summary and items list
+- Shipping information
+- Order status tracking
+- Track order and view receipt actions
+- Uses `callTool` for order tracking
+
+## Brand Info Tool
+
+The template includes a `get-brand-info` tool (normal MCP tool, not a widget) that returns brand information:
+
+```typescript
+// Call the tool
+await client.callTool('get-brand-info', {});
+
+// Returns brand details including:
+// - Company name, tagline, description
+// - Mission and values
+// - Contact information
+// - Social media links
+```
+
 ## Example: Weather Widget
 
 The included `display-weather.tsx` widget demonstrates:
@@ -321,8 +410,59 @@ const { props } = useWidget();
 const city = props.city;
 ```
 
+## Using Widget Capabilities
+
+The widgets in this template demonstrate the full capabilities of the Apps SDK:
+
+### Calling Tools (`callTool`)
+
+Widgets can call other MCP tools:
+
+```typescript
+const { callTool } = useWidget();
+
+const handleAction = async () => {
+  const result = await callTool('add-to-cart', {
+    productId: '123',
+    productName: 'Product Name',
+    price: 29.99
+  });
+};
+```
+
+### Sending Follow-up Messages (`sendFollowUpMessage`)
+
+Widgets can send messages to the ChatGPT conversation:
+
+```typescript
+const { sendFollowUpMessage } = useWidget();
+
+await sendFollowUpMessage('Product added to cart successfully!');
+```
+
+### Persistent State (`setState`)
+
+Widgets can maintain state across interactions:
+
+```typescript
+const { setState, state } = useWidget();
+
+// Save state
+await setState({ cart: [...cart, newItem] });
+
+// Read state
+const savedCart = state?.cart || [];
+```
+
+## Component Library Note
+
+This template uses the [OpenAI Apps SDK UI component library](https://openai.github.io/apps-sdk-ui/). The exact component API may vary based on the library version. If you encounter import errors, check the [official documentation](https://openai.github.io/apps-sdk-ui/) for the correct component names and props.
+
+If the official library is not available, you can replace the imports with custom React components or other UI libraries while maintaining the same widget structure.
+
 ## Learn More
 
+- [OpenAI Apps SDK UI Components](https://openai.github.io/apps-sdk-ui/) - Official component library
 - [MCP Documentation](https://modelcontextprotocol.io)
 - [OpenAI Apps SDK](https://platform.openai.com/docs/apps)
 - [mcp-use Documentation](https://docs.mcp-use.com)

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

@@ -11,20 +11,86 @@ const server = createMCPServer("test-app", {
  * Just export widgetMetadata with description and Zod schema, and mcp-use handles the rest!
  *
  * It will automatically add to your MCP server:
- * - server.tool('display-weather')
- * - server.resource('ui://widget/display-weather')
+ * - server.tool('get-brand-info')
+ * - server.resource('ui://widget/get-brand-info')
  *
  * See docs: https://docs.mcp-use.com/typescript/server/ui-widgets
  */
 
 /**
- * Add here yourtandard MCP tools, resources and prompts
+ * Add here your standard MCP tools, resources and prompts
  */
+
+// Fruits data for the API
+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" },
+];
+
+// API endpoint for fruits data
+server.get("/api/fruits", (c) => {
+  return c.json(fruits);
+});
+
+// Brand Info Tool - Returns brand information
 server.tool({
-  name: "get-my-city",
-  description: "Get my city",
+  name: "get-brand-info",
+  description:
+    "Get information about the brand, including company details, mission, and values",
   cb: async () => {
-    return { content: [{ type: "text", text: `My city is San Francisco` }] };
+    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
+          ),
+        },
+      ],
+    };
   },
 });
 

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

@@ -27,11 +27,14 @@
     "deploy": "mcp-use deploy"
   },
   "dependencies": {
+    "@openai/apps-sdk-ui": "^0.1.0",
+    "@tanstack/react-query": "^5.0.0",
     "cors": "^2.8.5",
     "express": "^4.18.0",
     "mcp-use": "workspace:*",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-router": "^7.9.6",
     "tailwindcss": "^4.0.0",
     "zod": "^4.1.12"
   },

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

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { AccordionItem } from "./AccordionItem";
+
+export interface AccordionItemData {
+  question: string;
+  answer: string;
+}
+
+interface AccordionProps {
+  items: AccordionItemData[];
+  title?: string;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  items,
+  title = "Can fruit be cute?",
+}) => {
+  const [openAccordionIndex, setOpenAccordionIndex] = useState<number | null>(
+    null
+  );
+
+  return (
+    <div className="p-8 pt-4 border-t border-gray-200 dark:border-gray-800 mt-4">
+      <h3 className="heading-lg mb-4">{title}</h3>
+      <div className="rounded-lg border border-gray-200 dark:border-gray-800 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/apps-sdk/resources/product-search-result/components/AccordionItem.tsx

@@ -0,0 +1,34 @@
+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-gray-200 dark:border-gray-800 last:border-b-0">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors"
+      >
+        <span className="font-medium text-gray-900 dark:text-gray-100">
+          {question}
+        </span>
+        <span className="text-xl text-gray-500 dark:text-gray-400 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/apps-sdk/resources/product-search-result/components/Carousel.tsx

@@ -0,0 +1,65 @@
+import { Animate } from "@openai/apps-sdk-ui/components/Transition";
+import { useQuery } from "@tanstack/react-query";
+import React, { useRef } from "react";
+import { CarouselItem } from "./CarouselItem";
+import { useCarouselAnimation } from "../hooks/useCarouselAnimation";
+
+interface CarouselProps {
+  mcpUrl: string | undefined;
+}
+
+export const Carousel: React.FC<CarouselProps> = ({ mcpUrl }) => {
+  const carouselContainerRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // Fetch fruits from the API using React Query
+  const {
+    data: items,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["fruits"],
+    queryFn: async () => {
+      const response = await fetch(`${mcpUrl}/api/fruits`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch fruits");
+      }
+      return response.json() as Promise<
+        Array<{ fruit: string; color: string }>
+      >;
+    },
+    enabled: !!mcpUrl, // Only run query if mcpUrl is available
+  });
+
+  // Carousel animation with pointer tracking
+  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">
+        {isLoading ? (
+          <div className="flex items-center justify-center p-8">
+            <p className="text-secondary">Loading fruits...</p>
+          </div>
+        ) : error ? (
+          <div className="flex items-center justify-center p-8">
+            <p className="text-red-500">Failed to load fruits</p>
+          </div>
+        ) : (
+          <Animate className="flex gap-4">
+            {items?.map((item: { fruit: string; color: string }) => (
+              <CarouselItem
+                key={item.fruit}
+                fruit={item.fruit}
+                color={item.color}
+              />
+            ))}
+          </Animate>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { Image } from "mcp-use/react";
+import React from "react";
+
+export interface CarouselItemProps {
+  fruit: string;
+  color: string;
+}
+
+export const CarouselItem: React.FC<CarouselItemProps> = ({ fruit, color }) => {
+  return (
+    <div
+      className={`carousel-item size-52 rounded-xl border border-gray-200 dark:border-gray-800 ${color}`}
+    >
+      <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/apps-sdk/resources/product-search-result/constants.ts

@@ -0,0 +1,4 @@
+import { QueryClient } from "@tanstack/react-query";
+
+// Create a client
+export const queryClient = new QueryClient();

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

@@ -0,0 +1,78 @@
+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/apps-sdk/resources/product-search-result/types.ts

@@ -0,0 +1,14 @@
+import { z } from "zod";
+
+export const propSchema = z.object({
+  query: z.string().describe("The search query"),
+});
+
+export type ProductSearchResultProps = z.infer<typeof propSchema>;
+
+export type AccordionItemProps = {
+  question: string;
+  answer: string;
+  isOpen: boolean;
+  onToggle: () => void;
+};

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

@@ -0,0 +1,61 @@
+import { AppsSDKUIProvider } from "@openai/apps-sdk-ui/components/AppsSDKUIProvider";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { McpUseProvider, useWidget } from "mcp-use/react";
+import React from "react";
+import { Link } from "react-router";
+import { Accordion } from "./components/Accordion";
+import { Carousel } from "./components/Carousel";
+import { queryClient } from "./constants";
+import type { ProductSearchResultProps } from "./types";
+import { propSchema } from "./types";
+import "../../styles.css";
+
+export const widgetMetadata = {
+  description:
+    "Display product search results with filtering, state management, and tool interactions",
+  inputs: propSchema,
+};
+
+const ProductSearchResult: React.FC = () => {
+  const { props, mcp_url } = useWidget<ProductSearchResultProps>();
+
+  console.log(props);
+
+  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 OpenAI apps sdk https://developers.openai.com/apps-sdk/build/mcp-server/",
+    },
+  ];
+
+  return (
+    <McpUseProvider debugger viewControls autoSize>
+      <AppsSDKUIProvider linkComponent={Link}>
+        <div className="relative bg-white dark:bg-black border border-gray-200 dark:border-gray-800 rounded-3xl">
+          <div className="p-8">
+            <h5 className="text-secondary mb-1">Apps SDK Template</h5>
+            <h2 className="heading-xl mb-3">Lovely Little Fruit Shop</h2>
+            <p className="text-md">
+              Start building your ChatGPT widget this this mcp-use template. It
+              features the openai apps sdk ui components, dark/light theme
+              support, actions like callTool and sendFollowUpMessage, and more.
+            </p>
+          </div>
+          <Carousel mcpUrl={mcp_url} />
+          <Accordion items={accordionItems} />
+        </div>
+      </AppsSDKUIProvider>
+    </McpUseProvider>
+  );
+};
+
+const ProductSearchResultWithProvider: React.FC = () => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ProductSearchResult />
+    </QueryClientProvider>
+  );
+};
+
+export default ProductSearchResultWithProvider;

package/dist/templates/apps-sdk/styles.css

@@ -1,4 +1,16 @@
 @import "tailwindcss";
+@import "@openai/apps-sdk-ui/css";
+
+/* Configure Tailwind v4 to scan for classes */
+@source "../node_modules/@openai/apps-sdk-ui";
+@source "./**/*.{ts,tsx,js,jsx,html}";
+
+@theme {
+  /* Enable class-based dark mode */
+  --color-scheme: light dark;
+}
+
+@variant dark (&:where(.dark, .dark *));
 
 /* Custom styles */
 body {
@@ -9,3 +21,95 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply text-gray-900 dark:text-white;
+}
+
+p {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+a {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+/* 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;
+  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);
+  mask:
+    linear-gradient(#fff 0 100%) border-box,
+    linear-gradient(#fff 0 100%) padding-box;
+  mask-composite: exclude;
+  z-index: 3;
+  transform: translateZ(0);
+}

package/package.json

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

package/dist/templates/apps-sdk/resources/display-weather.tsx

@@ -1,103 +0,0 @@
-import React from "react";
-import { z } from "zod";
-import { useWidget } from "mcp-use/react";
-import "../styles.css";
-
-/*
- * Apps SDK widget
- * Just export widgetMetadata with description and Zod schema, and mcp-use handles the rest!
- * See docs: https://docs.mcp-use.com/typescript/server/ui-widgets
- */
-
-const propSchema = z.object({
-  city: z.string().describe("The city to display weather for"),
-  weather: z
-    .enum(["sunny", "rain", "snow", "cloudy"])
-    .describe("The weather condition"),
-  temperature: z
-    .number()
-    .min(-20)
-    .max(50)
-    .describe("The temperature in Celsius"),
-});
-
-export const widgetMetadata = {
-  description: "Display weather for a city",
-  inputs: propSchema,
-};
-
-type WeatherProps = z.infer<typeof propSchema>;
-
-const WeatherWidget: React.FC = () => {
-  // Use the useWidget hook to get props from OpenAI Apps SDK
-  const { props, theme } = useWidget<WeatherProps>();
-
-  console.log(props);
-
-  const { city, weather, temperature } = props;
-  const getWeatherIcon = (weatherType: string) => {
-    switch (weatherType?.toLowerCase()) {
-      case "sunny":
-        return "☀️";
-      case "rain":
-        return "🌧️";
-      case "snow":
-        return "❄️";
-      case "cloudy":
-        return "☁️";
-      default:
-        return "🌤️";
-    }
-  };
-
-  const getWeatherColor = (weatherType: string) => {
-    switch (weatherType?.toLowerCase()) {
-      case "sunny":
-        return "from-yellow-400 to-orange-500";
-      case "rain":
-        return "from-blue-400 to-blue-600";
-      case "snow":
-        return "from-blue-100 to-blue-300";
-      case "cloudy":
-        return "from-gray-400 to-gray-600";
-      default:
-        return "from-gray-300 to-gray-500";
-    }
-  };
-
-  // Theme-aware styling
-  const bgColor = theme === "dark" ? "bg-gray-900" : "bg-white";
-  const textColor = theme === "dark" ? "text-gray-100" : "text-gray-800";
-  const subtextColor = theme === "dark" ? "text-gray-400" : "text-gray-600";
-
-  return (
-    <div
-      className={`max-w-sm mx-auto ${bgColor} rounded-xl shadow-lg overflow-hidden`}
-    >
-      <div
-        className={`h-32 bg-gradient-to-br ${getWeatherColor(weather)} flex items-center justify-center`}
-      >
-        <div className="text-6xl">{getWeatherIcon(weather)}</div>
-      </div>
-
-      <div className="p-6">
-        <div className="text-center">
-          <h2 className={`text-2xl font-bold ${textColor} mb-2`}>{city}</h2>
-          <div className="flex items-center justify-center space-x-4">
-            <span className={`text-4xl font-light ${textColor}`}>
-              {temperature}°
-            </span>
-            <div className="text-right">
-              <p className={`text-lg font-medium ${subtextColor} capitalize`}>
-                {weather}
-              </p>
-              <p className={`text-sm ${subtextColor}`}>Current</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default WeatherWidget;