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

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/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,

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/dist/templates/starter/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-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.6.0-canary.1",
+  "version": "0.6.0-canary.2",
   "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;
-}