sunpeak 0.4.2 → 0.4.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunpeak",
-  "version": "0.4.2",
-  "description": "The ChatGPT Apps UI SDK. Build and test your ChatGPT App UI locally with OpenAI apps-sdk-ui components.",
+  "version": "0.4.4",
+  "description": "The MCP App SDK. Quickstart, build, & test your ChatGPT App locally!",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/template/README.md

@@ -10,7 +10,7 @@ For an initial overview of your new app and the sunpeak API, refer to the [docum
 pnpm dev
 ```
 
-Edit [src/App.tsx](./src/App.tsx) to build your app UI.
+Edit [./src/components/apps/App.tsx](./src/components/apps/App.tsx) to build your app UI.
 
 ## Development
 

package/template/dev/main.tsx

@@ -3,7 +3,7 @@ import '../src/styles/globals.css';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ChatGPTSimulator } from 'sunpeak';
-import { simulations } from '../src/components';
+import { simulations } from '../src/simulations';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

package/template/mcp/server.ts

@@ -1,20 +1,16 @@
 import { runMCPServer } from 'sunpeak/mcp';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { readFileSync } from 'fs';
+import { activeConfig } from '../src/simulations/app-configs.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-// Load places data from JSON file
-const placesDataPath = path.resolve(__dirname, '../data/places.json');
-const toolOutput = JSON.parse(readFileSync(placesDataPath, 'utf-8'));
-
 runMCPServer({
-  name: 'my-sunpeak-app',
+  name: activeConfig.appName,
   version: '0.1.0',
   distPath: path.resolve(__dirname, '../dist/chatgpt/index.js'),
-  toolName: 'show-places',
-  toolDescription: 'Show popular places in Austin',
-  dummyData: toolOutput,
+  toolName: activeConfig.toolName,
+  toolDescription: activeConfig.toolDescription,
+  dummyData: activeConfig.toolOutput ?? {},
   port: 6766,
 });

package/template/src/components/album/albums.tsx

@@ -15,22 +15,22 @@ export interface Album {
   }>
 }
 
-export interface OpenAIAlbumsData extends Record<string, unknown> {
+export interface AlbumsData extends Record<string, unknown> {
   albums: Album[]
 }
 
-export interface OpenAIAlbumsState extends Record<string, unknown> {
+export interface AlbumsState extends Record<string, unknown> {
   selectedAlbumId?: string | null
 }
 
-export type OpenAIAlbumsProps = {
+export type AlbumsProps = {
   className?: string
 }
 
-export const OpenAIAlbums = React.forwardRef<HTMLDivElement, OpenAIAlbumsProps>(
+export const Albums = React.forwardRef<HTMLDivElement, AlbumsProps>(
   ({ className }, ref) => {
-    const data = useWidgetProps<OpenAIAlbumsData>(() => ({ albums: [] }))
-    const [widgetState, setWidgetState] = useWidgetState<OpenAIAlbumsState>(() => ({
+    const data = useWidgetProps<AlbumsData>(() => ({ albums: [] }))
+    const [widgetState, setWidgetState] = useWidgetState<AlbumsState>(() => ({
       selectedAlbumId: null,
     }))
     const displayMode = useDisplayMode()
@@ -74,4 +74,4 @@ export const OpenAIAlbums = React.forwardRef<HTMLDivElement, OpenAIAlbumsProps>(
     )
   }
 )
-OpenAIAlbums.displayName = "OpenAIAlbums"
+Albums.displayName = "Albums"

package/template/src/components/apps/AlbumsApp.tsx

@@ -0,0 +1,13 @@
+import * as React from "react"
+import { Albums } from "../album"
+
+/**
+ * Production-ready Albums App
+ *
+ * This app displays photo albums in a carousel layout with fullscreen viewing capability.
+ * Can be dropped into any production environment without changes.
+ */
+export const AlbumsApp = React.forwardRef<HTMLDivElement>((_props, ref) => {
+  return <Albums ref={ref} />
+})
+AlbumsApp.displayName = "AlbumsApp"

package/template/src/{App.tsx → components/apps/App.tsx}

@@ -1,4 +1,4 @@
-import './styles/globals.css';
+import '../../styles/globals.css';
 
 import { useWidgetState } from 'sunpeak';
 import { Button } from '@openai/apps-sdk-ui/components/Button';
@@ -18,7 +18,7 @@ interface CounterState extends Record<string, unknown> {
  * - Check out the components folder for reusable components
  * - Use sunpeak hooks for state management and display modes
  * - Edit this file and see your changes live
- * - Edit ./components/simulations/app-simulation.tsx to customize your simulation
+ * - Edit ../../simulations/app-simulation.tsx to customize your simulation
  */
 export function App() {
   const [widgetState, setWidgetState] = useWidgetState<CounterState>(() => ({

package/template/src/components/{simulations/carousel-simulation.tsx → apps/PlacesApp.tsx}

@@ -1,8 +1,13 @@
 import * as React from "react"
-import type { Simulation } from "sunpeak"
 import { useWidgetProps } from "sunpeak"
 import { Carousel, Card } from ".."
-import placesData from "../../../data/places.json"
+
+/**
+ * Production-ready Places App
+ *
+ * This app displays places in a carousel layout with cards.
+ * Can be dropped into any production environment without changes.
+ */
 
 export interface Place {
   id: string
@@ -14,12 +19,12 @@ export interface Place {
   description: string
 }
 
-export interface CarouselSimulationData extends Record<string, unknown> {
+export interface PlacesData extends Record<string, unknown> {
   places: Place[]
 }
 
-const CarouselComponent = React.forwardRef<HTMLDivElement>((_props, ref) => {
-  const data = useWidgetProps<CarouselSimulationData>(() => ({ places: [] }))
+export const PlacesApp = React.forwardRef<HTMLDivElement>((_props, ref) => {
+  const data = useWidgetProps<PlacesData>(() => ({ places: [] }))
 
   return (
     <div ref={ref}>
@@ -49,15 +54,4 @@ const CarouselComponent = React.forwardRef<HTMLDivElement>((_props, ref) => {
     </div>
   )
 })
-CarouselComponent.displayName = "CarouselComponent"
-
-export const carouselSimulation: Simulation = {
-  value: 'carousel',
-  label: 'Carousel',
-  component: CarouselComponent,
-  appName: 'Splorin',
-  appIcon: '✈️',
-  userMessage: 'Show me popular places to visit in Austin Texas',
-  toolOutput: placesData,
-  widgetState: null,
-}
+PlacesApp.displayName = "PlacesApp"

package/template/src/components/apps/active-app.ts

@@ -0,0 +1,11 @@
+/**
+ * Active app selection - SINGLE SOURCE OF TRUTH
+ *
+ * 👇 CHANGE THIS LINE to switch which app is active for the:
+ * - ChatGPT build (index.chatgpt.tsx)
+ * - MCP server (server.ts)
+ */
+
+export type AppName = 'app' | 'albums' | 'carousel';
+
+export const ACTIVE_APP: AppName = 'app';

package/template/src/components/apps/index.ts

@@ -0,0 +1,3 @@
+export { App } from './App';
+export { AlbumsApp } from './AlbumsApp';
+export { PlacesApp, type Place, type PlacesData } from './PlacesApp';

package/template/src/components/card/card.tsx

@@ -79,6 +79,10 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
           variantClasses[variant],
           className
         )}
+        style={{
+          maxWidth: image ? `${imageMaxWidth}px` : undefined,
+          ...props.style,
+        }}
         onClick={handleCardClick}
         {...props}
       >

package/template/src/components/index.ts

@@ -1,4 +1,4 @@
 export * from './card';
 export * from './carousel';
 export * from './album';
-export * from './simulations';
+export * from './apps';

package/template/src/index.chatgpt.tsx

@@ -1,8 +1,9 @@
 import { createRoot } from 'react-dom/client';
-import { App } from './App';
+import { ActiveComponent as ActiveApp } from './simulations/simulations';
 
-// Mount the App to the root element
+// Mount the active app
+// To switch apps, edit ACTIVE_APP in components/apps/active-app.ts
 const root = document.getElementById('root');
 if (root) {
-  createRoot(root).render(<App />);
+  createRoot(root).render(<ActiveApp />);
 }

package/template/src/index.ts

@@ -1,3 +1,2 @@
 export * from './components';
 export * from './lib';
-export * from './App'

package/template/src/simulations/albums-simulation.ts

@@ -0,0 +1,129 @@
+/**
+ * Server-safe configuration for the albums simulation.
+ * This file contains only metadata and doesn't import React components or CSS.
+ */
+
+const albumsData = {
+  albums: [
+    {
+      id: "summer-escape",
+      title: "Summer Slice",
+      cover: "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png",
+      photos: [
+        {
+          id: "s1",
+          title: "Waves",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        },
+        {
+          id: "s2",
+          title: "Palm trees",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png"
+        },
+        {
+          id: "s3",
+          title: "Sunset",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
+        }
+      ]
+    },
+    {
+      id: "city-lights",
+      title: "Pepperoni Nights",
+      cover: "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png",
+      photos: [
+        {
+          id: "c1",
+          title: "Downtown",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
+        },
+        {
+          id: "c2",
+          title: "Neon",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png"
+        },
+        {
+          id: "c3",
+          title: "Streets",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        }
+      ]
+    },
+    {
+      id: "into-the-woods",
+      title: "Truffle Forest",
+      cover: "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png",
+      photos: [
+        {
+          id: "n1",
+          title: "Forest path",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
+        },
+        {
+          id: "n2",
+          title: "Misty",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png"
+        },
+        {
+          id: "n3",
+          title: "Waterfall",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
+        }
+      ]
+    },
+    {
+      id: "pizza-tour",
+      title: "Pizza tour",
+      cover: "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png",
+      photos: [
+        {
+          id: "tonys-pizza-napoletana",
+          title: "Tony's Pizza Napoletana",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        },
+        {
+          id: "golden-boy-pizza",
+          title: "Golden Boy Pizza",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png"
+        },
+        {
+          id: "pizzeria-delfina-mission",
+          title: "Pizzeria Delfina (Mission)",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
+        },
+        {
+          id: "ragazza",
+          title: "Ragazza",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png"
+        },
+        {
+          id: "del-popolo",
+          title: "Del Popolo",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
+        },
+        {
+          id: "square-pie-guys",
+          title: "Square Pie Guys",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png"
+        },
+        {
+          id: "zero-zero",
+          title: "Zero Zero",
+          url: "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        }
+      ]
+    }
+  ]
+};
+
+export const albumsSimulationConfig = {
+  appName: 'Pizzaz',
+  value: 'albums',
+  label: 'Albums',
+  appIcon: '🍕',
+  userMessage: 'Pizza time',
+  toolOutput: albumsData,
+  widgetState: null,
+  toolName: 'show-app',
+  toolDescription: 'Show photo albums',
+} as const;

package/template/src/simulations/app-configs.ts

@@ -0,0 +1,30 @@
+/**
+ * Server-safe app configurations
+ *
+ * This file contains only metadata and can be safely imported in Node.js contexts
+ * (like MCP servers) without causing issues with CSS imports or React components.
+ *
+ * To switch apps, change ACTIVE_APP in components/apps/active-app.ts
+ */
+
+import { ACTIVE_APP } from '../components/apps/active-app';
+import { appSimulationConfig } from './app-simulation';
+import { albumsSimulationConfig } from './albums-simulation';
+import { carouselSimulationConfig } from './carousel-simulation';
+
+/**
+ * Server-safe config map - contains only metadata, no React components
+ */
+export const CONFIG_MAP = {
+  app: appSimulationConfig,
+  albums: albumsSimulationConfig,
+  carousel: carouselSimulationConfig,
+} as const;
+
+export type AppName = keyof typeof CONFIG_MAP;
+
+// Re-export for convenience
+export { ACTIVE_APP };
+
+// Active config for server use
+export const activeConfig = CONFIG_MAP[ACTIVE_APP];

package/template/src/simulations/app-simulation.ts

@@ -0,0 +1,15 @@
+/**
+ * Server-safe configuration for the app simulation.
+ * This file contains only metadata and doesn't import React components or CSS.
+ */
+export const appSimulationConfig = {
+  appName: 'sunpeak',
+  value: 'app',
+  label: 'My App',
+  appIcon: '🏗️',
+  userMessage: 'What do you have for me today?',
+  toolOutput: null,
+  widgetState: null,
+  toolName: 'show-app',
+  toolDescription: 'Show the Sunpeak app',
+} as const;

package/template/src/simulations/carousel-simulation.ts

@@ -0,0 +1,66 @@
+/**
+ * Server-safe configuration for the carousel simulation.
+ * This file contains only metadata and doesn't import React components or CSS.
+ */
+
+const placesData = {
+  places: [
+    {
+      id: "1",
+      name: "Lady Bird Lake",
+      rating: 4.5,
+      category: "Waterfront",
+      location: "Austin",
+      image: "https://images.unsplash.com/photo-1520950237264-dfe336995c34?w=400&h=400&fit=crop",
+      description: "Scenic lake perfect for kayaking, paddleboarding, and trails."
+    },
+    {
+      id: "2",
+      name: "Texas State Capitol",
+      rating: 4.8,
+      category: "Historic Site",
+      location: "Austin",
+      image: "https://images.unsplash.com/photo-1664231978322-4d0b45c7027b?w=400&h=400&fit=crop",
+      description: "Stunning capitol building with free tours and beautiful grounds."
+    },
+    {
+      id: "3",
+      name: "The Paramount Theatre",
+      rating: 4.7,
+      category: "Architecture",
+      location: "Austin",
+      image: "https://images.unsplash.com/photo-1583097090970-4d3b940ea1a0?w=400&h=400&fit=crop",
+      description: "Century-old performance and movie theatre in the heart of downtown Austin."
+    },
+    {
+      id: "4",
+      name: "Zilker Park",
+      rating: 4.7,
+      category: "Park",
+      location: "Austin",
+      image: "https://images.unsplash.com/photo-1563828568124-f800803ba13c?w=400&h=400&fit=crop",
+      description: "Popular park with trails, sports fields, and Barton Springs Pool."
+    },
+    {
+      id: "5",
+      name: "South Congress Avenue",
+      rating: 4.6,
+      category: "Landmark",
+      location: "Austin",
+      image: "https://images.unsplash.com/photo-1588993608283-7f0eda4438be?w=400&h=400&fit=crop",
+      description: "Vibrant street with unique shops, restaurants, and live music."
+    }
+  ]
+};
+
+export const carouselSimulationConfig = {
+  appName: 'Splorin',
+  value: 'carousel',
+  label: 'Carousel',
+  appIcon: '✈️',
+  userMessage: 'Show me popular places to visit in Austin Texas',
+  toolOutput: placesData,
+  widgetState: null,
+  toolName: 'show-app',
+  toolDescription: 'Show popular places to visit in Austin, Texas',
+} as const;

package/template/src/simulations/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Simulation configurations
+ *
+ * These configs contain only metadata and can be safely imported in Node.js contexts
+ * (like MCP servers) without causing issues with CSS imports or React components.
+ */
+
+export { appSimulationConfig } from './app-simulation';
+export { carouselSimulationConfig } from './carousel-simulation';
+export { albumsSimulationConfig } from './albums-simulation';
+
+/**
+ * Simulations - DO NOT import in Node.js/MCP server contexts!
+ * These include React components and CSS imports.
+ */
+export { appSimulation, albumsSimulation, carouselSimulation, simulations } from './simulations';

package/template/src/simulations/simulations.ts

@@ -0,0 +1,74 @@
+/**
+ * Simulations - combines apps with their simulation configs
+ *
+ * This file creates simulations by pairing production-ready apps with their
+ * server-safe configs. Each simulation is used for development and testing.
+ *
+ * IMPORTANT: This file imports React components and CSS. Do not import this
+ * in Node.js/MCP server contexts. Use app-configs.ts instead.
+ *
+ * To switch apps, change ACTIVE_APP in components/apps/active-app.ts
+ */
+
+import type { Simulation } from "sunpeak"
+import type { ComponentType } from "react"
+import { App } from "../components/apps/App"
+import { AlbumsApp } from "../components/apps/AlbumsApp"
+import { PlacesApp } from "../components/apps/PlacesApp"
+import { CONFIG_MAP, ACTIVE_APP } from "./app-configs"
+
+export const appSimulation: Simulation = {
+  ...CONFIG_MAP.app,
+  component: App,
+}
+
+export const albumsSimulation: Simulation = {
+  ...CONFIG_MAP.albums,
+  component: AlbumsApp,
+}
+
+export const carouselSimulation: Simulation = {
+  ...CONFIG_MAP.carousel,
+  component: PlacesApp,
+}
+
+export const simulations = [
+  appSimulation,
+  carouselSimulation,
+  albumsSimulation,
+]
+
+/**
+ * Static map from simulation name to simulation config and component
+ */
+export const APP_MAP = {
+  app: {
+    config: CONFIG_MAP.app,
+    component: App,
+    simulation: appSimulation,
+  },
+  albums: {
+    config: CONFIG_MAP.albums,
+    component: AlbumsApp,
+    simulation: albumsSimulation,
+  },
+  carousel: {
+    config: CONFIG_MAP.carousel,
+    component: PlacesApp,
+    simulation: carouselSimulation,
+  },
+} as const satisfies Record<string, {
+  config: typeof CONFIG_MAP[keyof typeof CONFIG_MAP];
+  component: ComponentType;
+  simulation: Simulation;
+}>;
+
+export type AppName = keyof typeof APP_MAP;
+
+// Re-export for convenience
+export { ACTIVE_APP, CONFIG_MAP };
+
+// Derived exports for convenience
+export const activeSimulation = APP_MAP[ACTIVE_APP].simulation;
+export const activeConfig = APP_MAP[ACTIVE_APP].config;
+export const ActiveComponent = APP_MAP[ACTIVE_APP].component;

package/template/data/albums.json

@@ -1,112 +0,0 @@
-{
-  "albums": [
-    {
-      "id": "summer-escape",
-      "title": "Summer Slice",
-      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png",
-      "photos": [
-        {
-          "id": "s1",
-          "title": "Waves",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
-        },
-        {
-          "id": "s2",
-          "title": "Palm trees",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png"
-        },
-        {
-          "id": "s3",
-          "title": "Sunset",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
-        }
-      ]
-    },
-    {
-      "id": "city-lights",
-      "title": "Pepperoni Nights",
-      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png",
-      "photos": [
-        {
-          "id": "c1",
-          "title": "Downtown",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
-        },
-        {
-          "id": "c2",
-          "title": "Neon",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png"
-        },
-        {
-          "id": "c3",
-          "title": "Streets",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
-        }
-      ]
-    },
-    {
-      "id": "into-the-woods",
-      "title": "Truffle Forest",
-      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png",
-      "photos": [
-        {
-          "id": "n1",
-          "title": "Forest path",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
-        },
-        {
-          "id": "n2",
-          "title": "Misty",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png"
-        },
-        {
-          "id": "n3",
-          "title": "Waterfall",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
-        }
-      ]
-    },
-    {
-      "id": "pizza-tour",
-      "title": "Pizza tour",
-      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png",
-      "photos": [
-        {
-          "id": "tonys-pizza-napoletana",
-          "title": "Tony's Pizza Napoletana",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
-        },
-        {
-          "id": "golden-boy-pizza",
-          "title": "Golden Boy Pizza",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png"
-        },
-        {
-          "id": "pizzeria-delfina-mission",
-          "title": "Pizzeria Delfina (Mission)",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
-        },
-        {
-          "id": "ragazza",
-          "title": "Ragazza",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png"
-        },
-        {
-          "id": "del-popolo",
-          "title": "Del Popolo",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
-        },
-        {
-          "id": "square-pie-guys",
-          "title": "Square Pie Guys",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png"
-        },
-        {
-          "id": "zero-zero",
-          "title": "Zero Zero",
-          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
-        }
-      ]
-    }
-  ]
-}