create-mcp-use-app 0.6.0 → 0.7.0

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

@@ -79,13 +79,14 @@ All React components in the `resources/` folder are automatically registered as
 
 ```typescript
 import { z } from 'zod';
+import type { WidgetMetadata } from 'mcp-use/react';
 
 const propSchema = z.object({
   city: z.string().describe('The city name'),
   temperature: z.number().describe('Temperature in Celsius'),
 });
 
-export const widgetMetadata = {
+export const widgetMetadata: WidgetMetadata = {
   description: 'My widget description',
   inputs: propSchema,
 };
@@ -135,6 +136,7 @@ Use Zod schemas to define widget inputs:
 
 ```typescript
 import { z } from 'zod';
+import type { WidgetMetadata } from 'mcp-use/react';
 
 const propSchema = z.object({
   name: z.string().describe('Person name'),
@@ -142,7 +144,7 @@ const propSchema = z.object({
   email: z.string().email().describe('Email address'),
 });
 
-export const widgetMetadata = {
+export const widgetMetadata: WidgetMetadata = {
   description: 'Display user information',
   inputs: propSchema,
 };
@@ -285,13 +287,13 @@ await client.readResource('ui://widget/display-weather');
 ```tsx
 import React from 'react';
 import { z } from 'zod';
-import { useWidget } from 'mcp-use/react';
+import { useWidget, type WidgetMetadata } from 'mcp-use/react';
 
 const propSchema = z.object({
   message: z.string().describe('Message to display'),
 });
 
-export const widgetMetadata = {
+export const widgetMetadata: WidgetMetadata = {
   description: 'Display a message',
   inputs: propSchema,
 };

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

@@ -20,9 +20,9 @@ export const Accordion: React.FC<AccordionProps> = ({
   );
 
   return (
-    <div className="p-8 pt-4 border-t border-gray-200 dark:border-gray-800 mt-4">
+    <div className="p-8 pt-4 border-t border-subtle mt-4">
       <h3 className="heading-lg mb-4">{title}</h3>
-      <div className="rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden">
+      <div className="rounded-lg border border-default overflow-hidden">
         {items.map((item, index) => (
           <AccordionItem
             key={index}

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

@@ -9,16 +9,14 @@ export const AccordionItem: React.FC<AccordionItemProps> = ({
   onToggle,
 }) => {
   return (
-    <div className="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
+    <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-gray-50 dark:hover:bg-gray-900/50 transition-colors"
+        className="w-full flex items-center justify-between p-4 text-left hover:bg-primary-soft-hover 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">
+        <span className="font-medium text-default">{question}</span>
+        <span className="text-xl text-tertiary transition-transform duration-200">
           {isOpen ? "−" : "+"}
         </span>
       </button>

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

@@ -46,7 +46,7 @@ export const Carousel: React.FC<CarouselProps> = ({ mcpUrl }) => {
           </div>
         ) : error ? (
           <div className="flex items-center justify-center p-8">
-            <p className="text-red-500">Failed to load fruits</p>
+            <p className="text-danger">Failed to load fruits</p>
           </div>
         ) : (
           <Animate className="flex gap-4">

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

@@ -9,7 +9,7 @@ export interface CarouselItemProps {
 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}`}
+      className={`carousel-item size-52 rounded-xl border border-subtle ${color}`}
     >
       <div className="carousel-item-bg">
         <Image src={"/fruits/" + fruit + ".png"} alt={fruit} />

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

@@ -1,6 +1,6 @@
 import { AppsSDKUIProvider } from "@openai/apps-sdk-ui/components/AppsSDKUIProvider";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { McpUseProvider, useWidget } from "mcp-use/react";
+import { McpUseProvider, useWidget, type WidgetMetadata } from "mcp-use/react";
 import React from "react";
 import { Link } from "react-router";
 import { Accordion } from "./components/Accordion";
@@ -8,9 +8,9 @@ import { Carousel } from "./components/Carousel";
 import { queryClient } from "./constants";
 import type { ProductSearchResultProps } from "./types";
 import { propSchema } from "./types";
-import "../../styles.css";
+import "../styles.css";
 
-export const widgetMetadata = {
+export const widgetMetadata: WidgetMetadata = {
   description:
     "Display product search results with filtering, state management, and tool interactions",
   inputs: propSchema,
@@ -32,7 +32,7 @@ const ProductSearchResult: React.FC = () => {
   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="relative bg-surface-elevated border border-default 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>

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

@@ -0,0 +1,115 @@
+@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 {
+  margin: 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply text-default;
+}
+
+p {
+  @apply text-secondary;
+}
+
+a {
+  @apply text-info;
+}
+
+/* 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/dist/templates/starter/resources/display-weather.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { z } from "zod";
-import { useWidget } from "mcp-use/react";
-import "../styles.css";
+import { useWidget, type WidgetMetadata } from "mcp-use/react";
+import "./styles.css";
 
 /*
  * Apps SDK widget
@@ -21,7 +21,7 @@ const propSchema = z.object({
     .describe("The temperature in Celsius"),
 });
 
-export const widgetMetadata = {
+export const widgetMetadata: WidgetMetadata = {
   description: "Display weather for a city",
   inputs: propSchema,
 };

package/package.json

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

package/dist/templates/starter/styles.css

@@ -1,11 +0,0 @@
-@import "tailwindcss";
-
-/* Custom styles */
-body {
-  margin: 0;
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}