sunpeak 0.4.4 → 0.5.3

package/template/src/components/{apps/PlacesApp.tsx → resources/CarouselResource.tsx}

@@ -1,15 +1,16 @@
 import * as React from "react"
 import { useWidgetProps } from "sunpeak"
-import { Carousel, Card } from ".."
+import { Carousel } from "../carousel/carousel"
+import { Card } from "../card/card"
 
 /**
- * Production-ready Places App
+ * Production-ready Carousel Resource
  *
- * This app displays places in a carousel layout with cards.
+ * This resource displays places in a carousel layout with cards.
  * Can be dropped into any production environment without changes.
  */
 
-export interface Place {
+interface CarouselCard {
   id: string
   name: string
   rating: number
@@ -19,17 +20,17 @@ export interface Place {
   description: string
 }
 
-export interface PlacesData extends Record<string, unknown> {
-  places: Place[]
+interface CarouselData extends Record<string, unknown> {
+  places: CarouselCard[]
 }
 
-export const PlacesApp = React.forwardRef<HTMLDivElement>((_props, ref) => {
-  const data = useWidgetProps<PlacesData>(() => ({ places: [] }))
+export const CarouselResource = React.forwardRef<HTMLDivElement>((_props, ref) => {
+  const data = useWidgetProps<CarouselData>(() => ({ places: [] }))
 
   return (
     <div ref={ref}>
       <Carousel gap={16} showArrows={true} showEdgeGradients={true} cardWidth={220}>
-        {(data.places || []).map((place) => (
+        {(data.places || []).map((place: CarouselCard) => (
           <Card
             key={place.id}
             image={place.image}
@@ -54,4 +55,4 @@ export const PlacesApp = React.forwardRef<HTMLDivElement>((_props, ref) => {
     </div>
   )
 })
-PlacesApp.displayName = "PlacesApp"
+CarouselResource.displayName = "CarouselResource"

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

@@ -1,5 +1,3 @@
-import '../../styles/globals.css';
-
 import { useWidgetState } from 'sunpeak';
 import { Button } from '@openai/apps-sdk-ui/components/Button';
 
@@ -8,19 +6,12 @@ interface CounterState extends Record<string, unknown> {
 }
 
 /**
- * Welcome to your Sunpeak App!
- *
- * This is a simple counter app to get you started.
- * Try building your own app here!
+ * Production-ready Counter Resource
  *
- * Tips:
- * - Use the Component dropdown in the sidebar to see example apps
- * - 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 ../../simulations/app-simulation.tsx to customize your simulation
+ * This resource displays a counter to demonstrate useWidgetState.
+ * Can be dropped into any production environment without changes.
  */
-export function App() {
+export function CounterResource() {
   const [widgetState, setWidgetState] = useWidgetState<CounterState>(() => ({
     count: 0,
   }));
@@ -46,7 +37,7 @@ export function App() {
           Welcome to Sunpeak!
         </h1>
         <p className="text-secondary">
-          Build your ChatGPT app here
+          Build your MCP resource here
         </p>
       </div>
 

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

@@ -0,0 +1,3 @@
+export { CounterResource } from './CounterResource';
+export { AlbumsResource } from './AlbumsResource';
+export { CarouselResource } from './CarouselResource';

package/template/src/index-resource.tsx

@@ -0,0 +1,11 @@
+import '../src/styles/globals.css';
+// @ts-expect-error - Template file with placeholders
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { createRoot } from 'react-dom/client';
+// RESOURCE_IMPORT
+
+// Mount the resource
+const root = document.getElementById('root');
+if (root) {
+  // RESOURCE_MOUNT
+}

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

@@ -116,14 +116,40 @@ const albumsData = {
   ]
 };
 
-export const albumsSimulationConfig = {
-  appName: 'Pizzaz',
-  value: 'albums',
-  label: 'Albums',
-  appIcon: '🍕',
+export const albumsSimulation = {
   userMessage: 'Pizza time',
-  toolOutput: albumsData,
-  widgetState: null,
-  toolName: 'show-app',
-  toolDescription: 'Show photo albums',
+
+  // MCP Tool protocol - official Tool type from MCP SDK used in ListTools response
+  tool: {
+    name: 'show-albums',
+    description: 'Show photo albums',
+    inputSchema: { type: 'object', properties: {}, additionalProperties: false } as const,
+    title: 'Show Albums',
+    annotations: { readOnlyHint: true },
+    _meta: {
+      'openai/outputTemplate': 'ui://AlbumsResource.tsx',
+      '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://AlbumsResource.tsx',
+    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: {},
+  },
 } as const;

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

@@ -53,14 +53,40 @@ const placesData = {
   ]
 };
 
-export const carouselSimulationConfig = {
-  appName: 'Splorin',
-  value: 'carousel',
-  label: 'Carousel',
-  appIcon: '✈️',
+export const carouselSimulation = {
   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',
+
+  // MCP Tool protocol - official Tool type from MCP SDK used in ListTools response
+  tool: {
+    name: 'show-carousel',
+    description: 'Show popular places to visit',
+    inputSchema: { type: 'object', properties: {}, additionalProperties: false } as const,
+    title: 'Show Carousel',
+    annotations: { readOnlyHint: true },
+    _meta: {
+      'openai/outputTemplate': 'ui://CarouselResource.tsx',
+      '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://CarouselResource.tsx',
+    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: {},
+  },
 } as const;

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

@@ -0,0 +1,41 @@
+/**
+ * Server-safe configuration for the counter simulation.
+ * This file contains only metadata and doesn't import React components or CSS.
+ */
+export const counterSimulation = {
+  userMessage: 'Help me count something',
+
+  // MCP Tool protocol - official Tool type from MCP SDK used in ListTools response
+  tool: {
+    name: 'show-counter',
+    description: 'Show a simple counter tool',
+    inputSchema: { type: 'object', properties: {}, additionalProperties: false } as const,
+    title: 'Show Counter',
+    annotations: { readOnlyHint: true },
+    _meta: {
+      'openai/outputTemplate': 'ui://CounterResource.tsx',
+      '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://CounterResource.tsx',
+    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: {},
+  },
+} as const;

package/template/src/simulations/index.ts

@@ -1,16 +1,16 @@
 /**
- * Simulation configurations
+ * Server-safe simulation configurations
  *
- * These configs contain only metadata and can be safely imported in Node.js contexts
+ * 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.
  */
 
-export { appSimulationConfig } from './app-simulation';
-export { carouselSimulationConfig } from './carousel-simulation';
-export { albumsSimulationConfig } from './albums-simulation';
+import { counterSimulation } from './counter-simulation';
+import { albumsSimulation } from './albums-simulation';
+import { carouselSimulation } from './carousel-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';
+export const SIMULATIONS = {
+  counter: counterSimulation,
+  albums: albumsSimulation,
+  carousel: carouselSimulation,
+} as const;

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 distDir = path.resolve(__dirname, process.env.OUT_DIR || 'dist/chatgpt');
       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: process.env.OUT_DIR || 'dist/chatgpt',
+    emptyOutDir: process.env.OUT_DIR ? true : 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;