sunpeak 0.4.2 → 0.5.1

package/template/src/index-carousel.tsx

@@ -0,0 +1,9 @@
+import './styles/globals.css';
+import { createRoot } from 'react-dom/client';
+import { PlacesResource } from './components/resources/PlacesResource';
+
+// Mount the PlacesResource
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(<PlacesResource />);
+}

package/template/src/index-counter.tsx

@@ -0,0 +1,9 @@
+import './styles/globals.css';
+import { createRoot } from 'react-dom/client';
+import { CounterResource } from './components/resources/CounterResource';
+
+// Mount the CounterResource
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(<CounterResource />);
+}

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

@@ -0,0 +1,157 @@
+import type { SimulationConfig } from './types';
+
+/**
+ * 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 albumsSimulation: SimulationConfig = {
+  userMessage: 'Pizza time',
+
+  // MCP Tool protocol - official Tool type from MCP SDK used in ListTools response
+  tool: {
+    name: 'albums',
+    description: 'Show photo albums',
+    inputSchema: { type: 'object', properties: {}, additionalProperties: false } as const,
+    title: 'Show',
+    annotations: { readOnlyHint: true },
+    _meta: {
+      'openai/outputTemplate': 'ui://widget/album.html',
+      'openai/toolInvocation/invoking': 'Loading albums',
+      'openai/toolInvocation/invoked': 'Album loaded',
+      'openai/widgetAccessible': true,
+      'openai/resultCanProduceWidget': true,
+    },
+  },
+
+  // MCP Resource protocol - official Resource type from MCP SDK used in ListResources response
+  // resource.name is used as the simulation identifier
+  // resource.title is used as the simulation display label
+  resource: {
+    uri: 'ui://widget/album.html',
+    name: 'albums',
+    title: 'Albums',
+    description: 'Show photo albums widget markup',
+    mimeType: 'text/html+skybridge',
+    _meta: {},
+  },
+
+  // MCP CallTool protocol - data for CallTool response
+  toolCall: {
+    structuredContent: albumsData,
+    _meta: {},
+  },
+};

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

@@ -0,0 +1,94 @@
+import type { SimulationConfig } from './types';
+
+/**
+ * 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 carouselSimulation: SimulationConfig = {
+  userMessage: 'Show me popular places to visit in Austin Texas',
+
+  // MCP Tool protocol - official Tool type from MCP SDK used in ListTools response
+  tool: {
+    name: 'carousel',
+    description: 'Show popular places to visit',
+    inputSchema: { type: 'object', properties: {}, additionalProperties: false } as const,
+    title: 'Show',
+    annotations: { readOnlyHint: true },
+    _meta: {
+      'openai/outputTemplate': 'ui://widget/carousel.html',
+      'openai/toolInvocation/invoking': 'Loading carousel',
+      'openai/toolInvocation/invoked': 'Carousel loaded',
+      'openai/widgetAccessible': true,
+      'openai/resultCanProduceWidget': true,
+    },
+  },
+
+  // MCP Resource protocol - official Resource type from MCP SDK used in ListResources response
+  // resource.name is used as the simulation identifier
+  // resource.title is used as the simulation display label
+  resource: {
+    uri: 'ui://widget/carousel.html',
+    name: 'carousel',
+    title: 'Carousel',
+    description: 'Show popular places to visit widget markup',
+    mimeType: 'text/html+skybridge',
+    _meta: {},
+  },
+
+  // MCP CallTool protocol - data for CallTool response
+  toolCall: {
+    structuredContent: placesData,
+    _meta: {},
+  },
+};

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

@@ -0,0 +1,43 @@
+import type { SimulationConfig } from './types';
+
+/**
+ * Server-safe configuration for the counter simulation.
+ * This file contains only metadata and doesn't import React components or CSS.
+ */
+export const counterSimulation: SimulationConfig = {
+  userMessage: 'Help me count something',
+
+  // MCP Tool protocol - official Tool type from MCP SDK used in ListTools response
+  tool: {
+    name: 'counter',
+    description: 'Show a simple counter tool',
+    inputSchema: { type: 'object', properties: {}, additionalProperties: false } as const,
+    title: 'Show',
+    annotations: { readOnlyHint: true },
+    _meta: {
+      'openai/outputTemplate': 'ui://widget/counter.html',
+      'openai/toolInvocation/invoking': 'Counting beans',
+      'openai/toolInvocation/invoked': 'Beans counted',
+      'openai/widgetAccessible': true,
+      'openai/resultCanProduceWidget': true,
+    },
+  },
+
+  // MCP Resource protocol - official Resource type from MCP SDK used in ListResources response
+  // resource.name is used as the simulation identifier
+  // resource.title is used as the simulation display label
+  resource: {
+    uri: 'ui://widget/counter.html',
+    name: 'counter',
+    title: 'Counter',
+    description: 'Show a simple counter tool widget markup',
+    mimeType: 'text/html+skybridge',
+    _meta: {},
+  },
+
+  // MCP CallTool protocol - data for CallTool response
+  toolCall: {
+    structuredContent: null,
+    _meta: {},
+  },
+};

package/template/src/simulations/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Server-safe simulation configurations
+ * Safe to import in Node.js/MCP server contexts.
+ */
+export { SIMULATIONS, type SimulationConfig, type SimulationName } from './simulation-configs';
+
+/**
+ * Simulations - DO NOT import in Node.js/MCP server contexts!
+ * These include React components and CSS imports.
+ */
+export { counterSimulation, albumsSimulation, carouselSimulation, simulations } from './simulations';

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

@@ -0,0 +1,23 @@
+/**
+ * Server-safe simulation 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.
+ */
+
+import { counterSimulation } from './counter-simulation';
+import { albumsSimulation } from './albums-simulation';
+import { carouselSimulation } from './carousel-simulation';
+
+export type { SimulationConfig } from './types';
+
+/**
+ * Server-safe simulation configs - contains only metadata, no React components
+ */
+export const SIMULATIONS = {
+  counter: counterSimulation,
+  albums: albumsSimulation,
+  carousel: carouselSimulation,
+} as const;
+
+export type SimulationName = keyof typeof SIMULATIONS;

package/template/src/simulations/simulations.ts

@@ -0,0 +1,36 @@
+/**
+ * Simulations - combines resources with their simulation configs
+ *
+ * This file creates simulations by pairing production-ready resources 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 simulation-configs.ts instead.
+ */
+
+import type { Simulation } from "sunpeak"
+import { CounterResource } from "../components/resources/CounterResource"
+import { AlbumsResource } from "../components/resources/AlbumsResource"
+import { PlacesResource } from "../components/resources/PlacesResource"
+import { SIMULATIONS } from "./simulation-configs"
+
+export const counterSimulation: Simulation = {
+  ...SIMULATIONS.counter,
+  resourceComponent: CounterResource,
+}
+
+export const albumsSimulation: Simulation = {
+  ...SIMULATIONS.albums,
+  resourceComponent: AlbumsResource,
+}
+
+export const carouselSimulation: Simulation = {
+  ...SIMULATIONS.carousel,
+  resourceComponent: PlacesResource,
+}
+
+export const simulations: Simulation[] = [
+  counterSimulation,
+  carouselSimulation,
+  albumsSimulation,
+]

package/template/src/simulations/types.ts

@@ -0,0 +1,12 @@
+/**
+ * Type definitions for simulations.
+ */
+
+import type { Simulation } from 'sunpeak';
+
+/**
+ * Server-safe simulation configuration.
+ * This is a Simulation without the resourceComponent, safe to use in Node.js/MCP server contexts.
+ * Contains metadata for both MCP server and simulation purposes.
+ */
+export type SimulationConfig = Omit<Simulation, 'resourceComponent'>;

package/template/vite.config.build.ts

@@ -2,30 +2,35 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import tailwindcss from '@tailwindcss/vite';
-import { readFileSync, writeFileSync, unlinkSync, existsSync } from 'fs';
+import { readFileSync, writeFileSync, unlinkSync, existsSync, readdirSync } from 'fs';
 
 // Check if we're in the sunpeak workspace (directory is named "template")
 const isTemplate = path.basename(__dirname) === 'template';
 const parentSrc = path.resolve(__dirname, '../src');
 
-// Plugin to inline CSS into the JS bundle
+// Plugin to inline CSS into the JS bundle for all output files
 function inlineCssPlugin() {
   return {
     name: 'inline-css',
     closeBundle() {
       const distDir = path.resolve(__dirname, 'dist/chatgpt');
-      const jsFile = path.join(distDir, 'index.js');
       const cssFile = path.join(distDir, 'style.css');
 
-      if (existsSync(cssFile) && existsSync(jsFile)) {
+      if (existsSync(cssFile)) {
         const css = readFileSync(cssFile, 'utf-8');
-        const js = readFileSync(jsFile, 'utf-8');
-
-        // Inject CSS at the start of the JS file
         const injectCss = `(function(){var s=document.createElement('style');s.textContent=${JSON.stringify(css)};document.head.appendChild(s);})();`;
-        writeFileSync(jsFile, injectCss + js);
 
-        // Remove the separate CSS file
+        // Find all .js files in the dist directory and inject CSS
+        const files = readdirSync(distDir);
+        files.forEach(file => {
+          if (file.endsWith('.js')) {
+            const jsFile = path.join(distDir, file);
+            const js = readFileSync(jsFile, 'utf-8');
+            writeFileSync(jsFile, injectCss + js);
+          }
+        });
+
+        // Remove the separate CSS file after injecting into all bundles
         unlinkSync(cssFile);
       }
     },
@@ -49,18 +54,19 @@ export default defineConfig({
   },
   build: {
     target: 'es2020',
+    outDir: 'dist/chatgpt',
+    emptyOutDir: false,
+    cssCodeSplit: false,
     lib: {
-      entry: path.resolve(__dirname, 'src/index.chatgpt.tsx'),
+      entry: path.resolve(__dirname, process.env.ENTRY_FILE || 'src/index-app.tsx'),
       name: 'SunpeakApp',
       formats: ['iife'],
-      fileName: () => 'index.js',
+      fileName: () => process.env.OUTPUT_FILE || 'app.js',
     },
-    outDir: 'dist/chatgpt',
-    cssCodeSplit: false,
     rollupOptions: {
       output: {
         inlineDynamicImports: true,
-        assetFileNames: '[name][extname]',
+        assetFileNames: 'style.css',
       },
     },
     minify: true,

package/dist/chatgpt/mcp-provider.d.ts

@@ -1,25 +0,0 @@
-import { Resource, Tool } from '@modelcontextprotocol/sdk/types.js';
-import { MCPProviderImplementation, WidgetDescriptorMeta, WidgetInvocationMeta } from '../mcp/types.js';
-/**
- * ChatGPT MCP provider implementation.
- */
-export declare class ChatGPTMCPProvider implements MCPProviderImplementation {
-    getWidgetDescriptorMeta(): WidgetDescriptorMeta;
-    getWidgetInvocationMeta(): WidgetInvocationMeta;
-    readWidgetContent(distPath: string): string;
-    getWidgetMimeType(): string;
-    getWidgetResourceUri(): string;
-    createTool(config: {
-        name: string;
-        description: string;
-        inputSchema: Tool["inputSchema"];
-    }): Tool;
-    createResource(config: {
-        name: string;
-        description: string;
-    }): Resource;
-}
-/**
- * Get the ChatGPT MCP provider instance.
- */
-export declare function getChatGPTMCPProvider(): MCPProviderImplementation;

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"
-        }
-      ]
-    }
-  ]
-}

package/template/data/places.json

@@ -1,49 +0,0 @@
-{
-  "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."
-    }
-  ]
-}