sunpeak 0.4.2 → 0.5.1

package/dist/mcp/types.d.ts

@@ -1,74 +1,28 @@
 import { Resource, Tool } from '@modelcontextprotocol/sdk/types.js';
 /**
- * Supported MCP provider platforms.
+ * MCP CallTool response data (subset used in simulations)
  */
-export declare enum MCPProvider {
-    ChatGPT = "chatgpt"
+export interface SimulationCallToolResult {
+    structuredContent?: Record<string, unknown> | null;
+    _meta?: Record<string, unknown>;
+}
+/**
+ * Simulation configuration for MCP server.
+ * Must include distPath for the built widget file.
+ */
+export interface SimulationWithDist {
+    distPath: string;
+    tool: Tool;
+    resource: Resource;
+    toolCall?: SimulationCallToolResult;
 }
 /**
  * Configuration for the MCP server.
+ * Takes an array of simulations with distPath for each built widget.
  */
 export interface MCPServerConfig {
     name?: string;
     version?: string;
     port?: number;
-    distPath: string;
-    toolName?: string;
-    toolDescription?: string;
-    dummyData?: Record<string, unknown>;
-    provider?: MCPProvider;
-}
-/**
- * Provider-specific metadata for widget descriptors.
- */
-export interface WidgetDescriptorMeta {
-    [key: string]: unknown;
-}
-/**
- * Provider-specific metadata for tool invocations.
- */
-export interface WidgetInvocationMeta {
-    [key: string]: unknown;
-}
-/**
- * Interface for platform-specific MCP provider implementations.
- */
-export interface MCPProviderImplementation {
-    /**
-     * Get metadata for widget descriptors (tools and resources).
-     */
-    getWidgetDescriptorMeta(): WidgetDescriptorMeta;
-    /**
-     * Get metadata for tool invocation responses.
-     */
-    getWidgetInvocationMeta(): WidgetInvocationMeta;
-    /**
-     * Read and wrap the widget content for the platform.
-     * @param distPath - Path to the built widget JS file.
-     * @returns The wrapped HTML content ready for the platform.
-     */
-    readWidgetContent(distPath: string): string;
-    /**
-     * Get the MIME type for widget resources.
-     */
-    getWidgetMimeType(): string;
-    /**
-     * Get the resource URI for the widget.
-     */
-    getWidgetResourceUri(): string;
-    /**
-     * Create the tool definition for the provider.
-     */
-    createTool(config: {
-        name: string;
-        description: string;
-        inputSchema: Tool["inputSchema"];
-    }): Tool;
-    /**
-     * Create the resource definition for the provider.
-     */
-    createResource(config: {
-        name: string;
-        description: string;
-    }): Resource;
+    simulations: SimulationWithDist[];
 }

package/dist/providers/index.d.ts

@@ -1,9 +1,7 @@
 import { WidgetProvider, WidgetGlobals, WidgetAPI } from './types';
 export type { WidgetGlobals, WidgetAPI, WidgetProvider } from './types';
-export { isOpenAiAvailable, getOpenAiProvider } from '../chatgpt/openai-provider';
 /**
- * Detect and return the appropriate provider for the current environment.
- * This function caches the result, so detection only happens once.
+ * Get the detected provider for the current environment.
  *
  * @returns The detected provider, or null if no provider is available.
  */

package/dist/providers/openai/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * OpenAI/ChatGPT provider implementation.
+ * This module provides the OpenAI-specific implementation of the WidgetProvider interface.
+ */
+export { isOpenAiAvailable, getOpenAiProvider } from './provider';
+export type { OpenAiGlobals, OpenAiAPI, CallTool, RequestDisplayMode, RequestModal, NotifyIntrinsicHeight, SetGlobalsEvent, } from './types';
+export { SET_GLOBALS_EVENT_TYPE } from './types';

package/dist/{chatgpt/openai-provider.d.ts → providers/openai/provider.d.ts}

@@ -1,4 +1,4 @@
-import { WidgetProvider, WidgetGlobals, WidgetAPI } from '../providers/types';
+import { WidgetProvider, WidgetGlobals, WidgetAPI } from '../types';
 /**
  * Check if the OpenAI provider is available.
  */

package/dist/{chatgpt/openai-types.d.ts → providers/openai/types.d.ts}

@@ -1,38 +1,9 @@
-export type UnknownObject = Record<string, unknown>;
-export type Theme = 'light' | 'dark';
-export type SafeAreaInsets = {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-};
-export type SafeArea = {
-    insets: SafeAreaInsets;
-};
-export type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'unknown';
-export type UserAgent = {
-    device: {
-        type: DeviceType;
-    };
-    capabilities: {
-        hover: boolean;
-        touch: boolean;
-    };
-};
-export type DisplayMode = 'pip' | 'inline' | 'fullscreen';
+import { UnknownObject, Theme, UserAgent, DisplayMode, ViewMode, View, SafeArea, CallToolResponse } from '../../types/runtime';
 export type RequestDisplayMode = (args: {
     mode: DisplayMode;
 }) => Promise<{
     mode: DisplayMode;
 }>;
-export type ViewMode = 'modal' | 'default';
-export type View = {
-    mode: ViewMode;
-    params?: UnknownObject;
-};
-export type CallToolResponse = {
-    result: string;
-};
 export type CallTool = (name: string, args: Record<string, unknown>) => Promise<CallToolResponse>;
 export type OpenAiGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject, ToolResponseMetadata = UnknownObject, WidgetState = UnknownObject> = {
     theme: Theme;
@@ -46,14 +17,13 @@ export type OpenAiGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject,
     toolOutput: ToolOutput | null;
     toolResponseMetadata: ToolResponseMetadata | null;
     widgetState: WidgetState | null;
-    setWidgetState: (state: WidgetState) => Promise<void>;
 };
 export type RequestModal = (args: {
     mode: ViewMode;
     params?: UnknownObject;
 }) => Promise<void>;
 export type NotifyIntrinsicHeight = (height: number) => void;
-export type OpenAiAPI = {
+export type OpenAiAPI<WidgetState = UnknownObject> = {
     callTool: CallTool;
     sendFollowUpMessage: (args: {
         prompt: string;
@@ -64,6 +34,7 @@ export type OpenAiAPI = {
     requestDisplayMode: RequestDisplayMode;
     requestModal: RequestModal;
     notifyIntrinsicHeight: NotifyIntrinsicHeight;
+    setWidgetState: (state: WidgetState) => Promise<void>;
 };
 export declare const SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
 export declare class SetGlobalsEvent extends CustomEvent<{

package/dist/providers/types.d.ts

@@ -1,12 +1,12 @@
-import { UnknownObject, Theme, UserAgent, DisplayMode, SafeArea, View, ViewMode, CallToolResponse } from '../chatgpt/openai-types';
+import { UnknownObject, Theme, UserAgent, DisplayMode, SafeArea, View, ViewMode, CallToolResponse } from '../types/runtime';
 /**
  * Provider-agnostic types for widget runtime environments.
  * These types abstract away the specific host (OpenAI/ChatGPT, etc.)
  */
-export type { UnknownObject, Theme, SafeAreaInsets, SafeArea, DeviceType, UserAgent, DisplayMode, ViewMode, View, CallToolResponse, } from '../chatgpt/openai-types';
+export type { UnknownObject, Theme, SafeAreaInsets, SafeArea, DeviceType, UserAgent, DisplayMode, ViewMode, View, CallToolResponse, } from '../types/runtime';
 /**
  * Global state available from the widget runtime environment.
- * This is a provider-agnostic alias for OpenAiGlobals.
+ * Provider-agnostic interface that abstracts widget globals.
  */
 export type WidgetGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject, ToolResponseMetadata = UnknownObject, WidgetState = UnknownObject> = {
     theme: Theme;
@@ -20,11 +20,10 @@ export type WidgetGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject,
     toolOutput: ToolOutput | null;
     toolResponseMetadata: ToolResponseMetadata | null;
     widgetState: WidgetState | null;
-    setWidgetState: (state: WidgetState) => Promise<void>;
 };
 /**
  * API methods available from the widget runtime environment.
- * This is a provider-agnostic alias for OpenAiAPI.
+ * Provider-agnostic interface that abstracts widget API methods.
  */
 export type WidgetAPI = {
     callTool?: (name: string, args: Record<string, unknown>) => Promise<CallToolResponse>;

package/dist/runtime/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Runtime utilities for widget environments.
+ *
+ * This module contains runtime-specific logic like provider detection
+ * that needs to know about concrete provider implementations.
+ */
+export { detectProvider, isProviderAvailable, resetProviderCache, } from './provider-detection';

package/dist/runtime/provider-detection.d.ts

@@ -0,0 +1,17 @@
+import { WidgetProvider } from '../providers/types';
+/**
+ * Detect and return the appropriate provider for the current environment.
+ * This function caches the result, so detection only happens once.
+ *
+ * @returns The detected provider, or null if no provider is available.
+ */
+export declare function detectProvider(): WidgetProvider | null;
+/**
+ * Check if any provider is available.
+ */
+export declare function isProviderAvailable(): boolean;
+/**
+ * Reset the provider detection cache.
+ * Useful for testing or when the environment changes.
+ */
+export declare function resetProviderCache(): void;

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
-export * from '../chatgpt/openai-types';
+export * from './runtime';
+export * from './simulation';
 export * from '../chatgpt/chatgpt-simulator-types';

package/dist/types/runtime.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Generic runtime types for widget environments.
+ * These types are provider-agnostic and can be used across different widget platforms.
+ */
+export type UnknownObject = Record<string, unknown>;
+export type Theme = 'light' | 'dark';
+export type SafeAreaInsets = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export type SafeArea = {
+    insets: SafeAreaInsets;
+};
+export type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'unknown';
+export type UserAgent = {
+    device: {
+        type: DeviceType;
+    };
+    capabilities: {
+        hover: boolean;
+        touch: boolean;
+    };
+};
+export type DisplayMode = 'pip' | 'inline' | 'fullscreen';
+export type ViewMode = 'modal' | 'default';
+export type View = {
+    mode: ViewMode;
+    params?: UnknownObject;
+};
+export type CallToolResponse = {
+    result: string;
+};

package/dist/types/simulation.d.ts

@@ -0,0 +1,47 @@
+import { Tool, Resource } from '@modelcontextprotocol/sdk/types.js';
+import { Theme, DisplayMode, UserAgent, SafeArea, View } from './index';
+/**
+ * Core simulation types for development and testing.
+ * These types define how simulations are configured and used in both
+ * the dev simulator and MCP server contexts.
+ */
+import type * as React from 'react';
+/**
+ * Simulation globals that configure the simulator environment.
+ * These values are passed to the mock runtime to set initial values for development/testing.
+ * All fields are optional as simulations can use defaults.
+ * Globals initialized based on tool responses are instead set in SimulationCallToolResult:
+ *  (structuredContent > toolOutput, _meta > toolResponseMetadata)
+ */
+export interface SimulationGlobals {
+    theme?: Theme;
+    userAgent?: UserAgent;
+    locale?: string;
+    maxHeight?: number;
+    displayMode?: DisplayMode;
+    safeArea?: SafeArea;
+    view?: View | null;
+    toolInput?: Record<string, unknown>;
+    widgetState?: Record<string, unknown> | null;
+}
+/**
+ * MCP CallTool response data (subset used in simulations).
+ * Note: toolOutput (structuredContent) and toolResponseMetadata (_meta)
+ * are set here for use by the MCP server as well, not in SimulationGlobals.
+ */
+export interface SimulationCallToolResult {
+    structuredContent?: Record<string, unknown> | null;
+    _meta?: Record<string, unknown>;
+}
+/**
+ * A simulation packages a component with its example data and metadata.
+ * Each simulation represents a complete tool experience in the simulator.
+ */
+export interface Simulation {
+    resourceComponent: React.ComponentType;
+    userMessage?: string;
+    simulationGlobals?: SimulationGlobals;
+    tool: Tool;
+    resource: Resource;
+    toolCall?: SimulationCallToolResult;
+}

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.5.1",
+  "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 the resource files in [./src/components/resources/](./src/components/resources/) to build your resource UI.
 
 ## Development
 

package/template/dev/main.tsx

@@ -3,10 +3,14 @@ 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>
-    <ChatGPTSimulator simulations={simulations} />
+    <ChatGPTSimulator
+      simulations={simulations}
+      appName="Sunpeak App"
+      appIcon="🌄"
+    />
   </StrictMode>
 );

package/template/mcp/server.ts

@@ -1,20 +1,19 @@
 import { runMCPServer } from 'sunpeak/mcp';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { readFileSync } from 'fs';
+import { SIMULATIONS } from '../src/simulations/simulation-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'));
+// Add distPath to each simulation for the MCP server
+const simulations = Object.entries(SIMULATIONS).map(([simulationKey, simulation]) => ({
+  ...simulation,
+  distPath: path.resolve(__dirname, `../dist/chatgpt/${simulationKey}.js`),
+}));
 
 runMCPServer({
-  name: 'my-sunpeak-app',
+  name: 'Sunpeak App',
   version: '0.1.0',
-  distPath: path.resolve(__dirname, '../dist/chatgpt/index.js'),
-  toolName: 'show-places',
-  toolDescription: 'Show popular places in Austin',
-  dummyData: toolOutput,
+  simulations,
   port: 6766,
 });

package/template/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "vite build --config vite.config.build.ts",
+    "build": "node scripts/build-all.mjs",
     "dev": "vite --port ${PORT:-6767}",
     "mcp": "tsx mcp/server.ts",
     "lint": "eslint . --ext .ts,.tsx --fix",

package/template/scripts/build-all.mjs

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process';
+import { existsSync, rmSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const distDir = path.join(__dirname, '../dist/chatgpt');
+
+// Clean dist directory
+if (existsSync(distDir)) {
+  rmSync(distDir, { recursive: true });
+}
+
+const tools = [
+  { entry: 'src/index-counter.tsx', output: 'counter.js' },
+  { entry: 'src/index-albums.tsx', output: 'albums.js' },
+  { entry: 'src/index-carousel.tsx', output: 'carousel.js' },
+];
+
+console.log('Building all tools...\n');
+
+tools.forEach(({ entry, output }, index) => {
+  console.log(`[${index + 1}/${tools.length}] Building ${output}...`);
+  try {
+    execSync(
+      `vite build --config vite.config.build.ts`,
+      {
+        stdio: 'inherit',
+        env: {
+          ...process.env,
+          ENTRY_FILE: entry,
+          OUTPUT_FILE: output,
+        },
+      }
+    );
+  } catch (error) {
+    console.error(`Failed to build ${output}`);
+    process.exit(1);
+  }
+});
+
+console.log('\n✓ All tools built successfully!');

package/template/scripts/validate.mjs

@@ -100,17 +100,26 @@ try {
     throw new Error('pnpm build failed');
   }
   const chatgptDir = join(PROJECT_ROOT, 'dist', 'chatgpt');
-  const builtFile = join(chatgptDir, 'index.js');
-  if (!existsSync(builtFile)) {
-    printError('Missing expected file: ./dist/chatgpt/index.js');
-    process.exit(1);
+  const expectedFiles = ['counter.js', 'albums.js', 'carousel.js'];
+
+  // Check all expected files exist
+  for (const file of expectedFiles) {
+    const filePath = join(chatgptDir, file);
+    if (!existsSync(filePath)) {
+      printError(`Missing expected file: ./dist/chatgpt/${file}`);
+      process.exit(1);
+    }
   }
+
+  // Verify only expected files are present
   const files = readdirSync(chatgptDir);
-  if (files.length !== 1 || files[0] !== 'index.js') {
-    printError(`Unexpected files in ./dist/chatgpt/: ${files.join(', ')}`);
-    printError('Expected only: index.js');
+  const unexpectedFiles = files.filter(f => !expectedFiles.includes(f));
+  if (unexpectedFiles.length > 0) {
+    printError(`Unexpected files in ./dist/chatgpt/: ${unexpectedFiles.join(', ')}`);
+    printError(`Expected only: ${expectedFiles.join(', ')}`);
     process.exit(1);
   }
+
   console.log()
   printSuccess('pnpm build');
 

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/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 './resources';

package/template/src/components/resources/AlbumsResource.tsx

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

package/template/src/{App.tsx → components/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 ./components/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 ChatGPT tool here
         </p>
       </div>
 

package/template/src/components/{simulations/carousel-simulation.tsx → resources/PlacesResource.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 Resource
+ *
+ * This resource 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 PlacesResource = 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,
-}
+PlacesResource.displayName = "PlacesResource"

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

@@ -0,0 +1,3 @@
+export { CounterResource } from './CounterResource';
+export { AlbumsResource } from './AlbumsResource';
+export { PlacesResource, type Place, type PlacesData } from './PlacesResource';

package/template/src/index-albums.tsx

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