sunpeak 0.4.2 → 0.5.1

package/README.md

@@ -15,9 +15,9 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.6-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
 [![React](https://img.shields.io/badge/React-18%20%7C%2019-blue?style=flat-square&logo=react)](https://reactjs.org/)
 
-The ChatGPT Apps SDK.
+The MCP App SDK.
 
-Build and test your MCP App UI locally with OpenAI apps-sdk-ui React components.
+Quickstart, build, and test your ChatGPT App locally with OpenAI apps-sdk-ui React components.
 
 [Documentation](https://docs.sunpeak.ai/)
 

package/bin/sunpeak.js

@@ -84,7 +84,7 @@ if (command === 'new') {
   init(args[0]);
 } else {
   console.log(`
-sunpeak - ChatGPT Apps UI SDK
+sunpeak - The MCP App SDK
 
 Commands:
   new [name]  Create a new project from template

package/dist/chatgpt/chatgpt-simulator-types.d.ts

@@ -1,4 +1,4 @@
-import { DisplayMode, Theme } from './openai-types';
+import { DisplayMode, Theme } from '../types/runtime';
 export type ScreenWidth = 'mobile-s' | 'mobile-l' | 'tablet' | 'full';
 export type SimulatorConfig = {
     theme: Theme;

package/dist/chatgpt/chatgpt-simulator.d.ts

@@ -1,21 +1,10 @@
+import { Simulation } from '../types/simulation';
 import * as React from 'react';
-/**
- * A simulation packages a component with its example data and metadata.
- * Each simulation represents a complete app experience in the simulator.
- */
-export interface Simulation {
-    value: string;
-    label: string;
-    component: React.ComponentType;
-    appName?: string;
-    appIcon?: string;
-    userMessage?: string;
-    toolOutput?: Record<string, unknown> | null;
-    widgetState?: Record<string, unknown> | null;
-}
 interface ChatGPTSimulatorProps {
     children?: React.ReactNode;
     simulations?: Simulation[];
+    appName?: string;
+    appIcon?: string;
 }
-export declare function ChatGPTSimulator({ children, simulations, }: ChatGPTSimulatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatGPTSimulator({ children, simulations, appName, appIcon, }: ChatGPTSimulatorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/chatgpt/index.d.ts

@@ -1,4 +1,4 @@
 export { ChatGPTSimulator } from './chatgpt-simulator';
-export type { Simulation } from './chatgpt-simulator';
+export type { Simulation, SimulationCallToolResult, SimulationGlobals } from '../types/simulation';
 export { initMockOpenAI } from './mock-openai';
 export * from './theme-provider';

package/dist/chatgpt/mock-openai.d.ts

@@ -1,15 +1,8 @@
-import { OpenAiGlobals, OpenAiAPI, Theme, DisplayMode, View, ViewMode, UnknownObject } from '../types';
+import { OpenAiGlobals, OpenAiAPI } from '../providers/openai';
+import { Theme, DisplayMode, View, ViewMode, UnknownObject } from '../types/runtime';
 declare class MockOpenAI implements OpenAiAPI, OpenAiGlobals {
     theme: Theme;
-    userAgent: {
-        device: {
-            type: "desktop";
-        };
-        capabilities: {
-            hover: boolean;
-            touch: boolean;
-        };
-    };
+    userAgent: OpenAiGlobals['userAgent'];
     locale: string;
     maxHeight: number;
     displayMode: DisplayMode;
@@ -52,10 +45,5 @@ declare class MockOpenAI implements OpenAiAPI, OpenAiGlobals {
     setWidgetStateExternal(widgetState: Record<string, unknown> | null): void;
     emitUpdate(globals: Partial<OpenAiGlobals>): void;
 }
-export declare function initMockOpenAI(initialData?: {
-    theme?: Theme;
-    displayMode?: DisplayMode;
-    toolOutput?: Record<string, unknown> | null;
-    widgetState?: Record<string, unknown> | null;
-}): MockOpenAI;
+export declare function initMockOpenAI(initialData?: Partial<OpenAiGlobals>): MockOpenAI;
 export type { MockOpenAI };

package/dist/index.cjs

@@ -23,12 +23,6 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
-class SetGlobalsEvent extends CustomEvent {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "type", SET_GLOBALS_EVENT_TYPE);
-  }
-}
 function isOpenAiAvailable() {
   return typeof window !== "undefined" && window.openai != null;
 }
@@ -85,7 +79,7 @@ function getOpenAiProvider() {
 }
 let cachedProvider = null;
 let detectionComplete = false;
-function getProvider() {
+function detectProvider() {
   if (detectionComplete) {
     return cachedProvider;
   }
@@ -95,8 +89,18 @@ function getProvider() {
   detectionComplete = true;
   return cachedProvider;
 }
+function isProviderAvailable$1() {
+  return detectProvider() !== null;
+}
+function resetProviderCache$1() {
+  cachedProvider = null;
+  detectionComplete = false;
+}
+function getProvider() {
+  return detectProvider();
+}
 function isProviderAvailable() {
-  return getProvider() !== null;
+  return isProviderAvailable$1();
 }
 function getGlobal(key) {
   const provider = getProvider();
@@ -112,8 +116,7 @@ function getAPI() {
   return (provider == null ? void 0 : provider.getAPI()) ?? null;
 }
 function resetProviderCache() {
-  cachedProvider = null;
-  detectionComplete = false;
+  resetProviderCache$1();
 }
 function useWidgetGlobal(key) {
   return React.useSyncExternalStore(
@@ -3395,9 +3398,9 @@ const SCREEN_WIDTHS = {
 function Conversation({
   children,
   screenWidth,
-  appName = "ChatGPT",
+  appName = "Sunpeak App",
   appIcon,
-  userMessage = "Show me some interesting places to visit."
+  userMessage = "What have you got for me today?"
 }) {
   const displayMode = useDisplayMode() ?? "inline";
   const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
@@ -3405,7 +3408,7 @@ function Conversation({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col bg-surface w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "h-12 border-b border-subtle bg-surface flex items-center px-4 text-lg", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: "ChatGPT" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "h-12 border-b border-subtle bg-surface flex items-center px-4 text-lg", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: "SimGPT" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -3476,7 +3479,7 @@ function Conversation({
               type: "text",
               name: "userInput",
               disabled: true,
-              placeholder: "Message ChatGPT",
+              placeholder: "Message SimGPT",
               className: "w-full bg-[var(--color-background-primary)] dark:bg-[#303030] text-secondary-foreground placeholder:text-muted-foreground rounded-3xl px-5 py-3 pr-12 shadow-md light:border border-[#0000000f]"
             }
           ) }) }) })
@@ -3572,12 +3575,33 @@ function initMockOpenAI(initialData) {
     if ((initialData == null ? void 0 : initialData.theme) !== void 0) {
       mock.theme = initialData.theme;
     }
+    if ((initialData == null ? void 0 : initialData.userAgent) !== void 0) {
+      mock.userAgent = initialData.userAgent;
+    }
+    if ((initialData == null ? void 0 : initialData.locale) !== void 0) {
+      mock.locale = initialData.locale;
+    }
+    if ((initialData == null ? void 0 : initialData.maxHeight) !== void 0) {
+      mock.maxHeight = initialData.maxHeight;
+    }
     if ((initialData == null ? void 0 : initialData.displayMode) !== void 0) {
       mock.displayMode = initialData.displayMode;
     }
+    if ((initialData == null ? void 0 : initialData.safeArea) !== void 0) {
+      mock.safeArea = initialData.safeArea;
+    }
+    if ((initialData == null ? void 0 : initialData.view) !== void 0) {
+      mock.view = initialData.view;
+    }
+    if ((initialData == null ? void 0 : initialData.toolInput) !== void 0) {
+      mock.toolInput = initialData.toolInput;
+    }
     if ((initialData == null ? void 0 : initialData.toolOutput) !== void 0) {
       mock.toolOutput = initialData.toolOutput;
     }
+    if ((initialData == null ? void 0 : initialData.toolResponseMetadata) !== void 0) {
+      mock.toolResponseMetadata = initialData.toolResponseMetadata;
+    }
     if ((initialData == null ? void 0 : initialData.widgetState) !== void 0) {
       mock.widgetState = initialData.widgetState;
     }
@@ -3626,38 +3650,42 @@ const DEFAULT_THEME = "dark";
 const DEFAULT_DISPLAY_MODE = "inline";
 function ChatGPTSimulator({
   children,
-  simulations = []
+  simulations = [],
+  appName = "Sunpeak App",
+  appIcon
 }) {
   const [screenWidth, setScreenWidth] = React__namespace.useState("full");
+  const getSimulationKey = (sim) => `${sim.resource.name}-${sim.tool.name}`;
   const [selectedKey, setSelectedKey] = React__namespace.useState(
-    simulations.length > 0 ? simulations[0].value : ""
+    simulations.length > 0 ? getSimulationKey(simulations[0]) : ""
   );
-  const selectedSim = simulations.find((sim) => sim.value === selectedKey);
-  const appName = selectedSim == null ? void 0 : selectedSim.appName;
-  const appIcon = selectedSim == null ? void 0 : selectedSim.appIcon;
+  const selectedSim = simulations.find((sim) => getSimulationKey(sim) === selectedKey);
   const userMessage = selectedSim == null ? void 0 : selectedSim.userMessage;
-  const toolOutput = (selectedSim == null ? void 0 : selectedSim.toolOutput) ?? null;
-  const widgetState = (selectedSim == null ? void 0 : selectedSim.widgetState) ?? null;
   const mock = React.useMemo(
-    () => initMockOpenAI({
-      theme: DEFAULT_THEME,
-      displayMode: DEFAULT_DISPLAY_MODE
-    }),
-    []
+    () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+      return initMockOpenAI({
+        theme: ((_a = selectedSim == null ? void 0 : selectedSim.simulationGlobals) == null ? void 0 : _a.theme) ?? DEFAULT_THEME,
+        userAgent: (_b = selectedSim == null ? void 0 : selectedSim.simulationGlobals) == null ? void 0 : _b.userAgent,
+        locale: (_c = selectedSim == null ? void 0 : selectedSim.simulationGlobals) == null ? void 0 : _c.locale,
+        maxHeight: (_d = selectedSim == null ? void 0 : selectedSim.simulationGlobals) == null ? void 0 : _d.maxHeight,
+        displayMode: ((_e = selectedSim == null ? void 0 : selectedSim.simulationGlobals) == null ? void 0 : _e.displayMode) ?? DEFAULT_DISPLAY_MODE,
+        safeArea: (_f = selectedSim == null ? void 0 : selectedSim.simulationGlobals) == null ? void 0 : _f.safeArea,
+        view: (_g = selectedSim == null ? void 0 : selectedSim.simulationGlobals) == null ? void 0 : _g.view,
+        toolInput: (_h = selectedSim == null ? void 0 : selectedSim.simulationGlobals) == null ? void 0 : _h.toolInput,
+        widgetState: ((_i = selectedSim == null ? void 0 : selectedSim.simulationGlobals) == null ? void 0 : _i.widgetState) ?? null,
+        toolOutput: ((_j = selectedSim == null ? void 0 : selectedSim.toolCall) == null ? void 0 : _j.structuredContent) ?? null
+      });
+    },
+    [selectedSim]
   );
   const theme = useTheme() ?? DEFAULT_THEME;
   const displayMode = useDisplayMode() ?? DEFAULT_DISPLAY_MODE;
   React.useLayoutEffect(() => {
     if (mock && typeof window !== "undefined") {
       window.openai = mock;
-      if (toolOutput !== void 0) {
-        mock.setToolOutput(toolOutput);
-      }
-      if (widgetState !== void 0) {
-        mock.setWidgetStateExternal(widgetState);
-      }
     }
-  }, [mock, toolOutput, widgetState]);
+  }, [mock]);
   React.useEffect(() => {
     return () => {
       if (typeof window !== "undefined") {
@@ -3665,7 +3693,7 @@ function ChatGPTSimulator({
       }
     };
   }, []);
-  const SelectedComponent = selectedSim == null ? void 0 : selectedSim.component;
+  const SelectedComponent = selectedSim == null ? void 0 : selectedSim.resourceComponent;
   const content = SelectedComponent ? /* @__PURE__ */ jsxRuntime.jsx(SelectedComponent, {}) : children;
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(
     SimpleSidebar,
@@ -3676,10 +3704,14 @@ function ChatGPTSimulator({
           {
             value: selectedKey,
             onChange: (value) => setSelectedKey(value),
-            options: simulations.map((sim) => ({
-              value: sim.value,
-              label: sim.label
-            }))
+            options: simulations.map((sim) => {
+              const resourceTitle = sim.resource.title || sim.resource.name;
+              const toolTitle = sim.tool.title || sim.tool.name;
+              return {
+                value: getSimulationKey(sim),
+                label: `${resourceTitle} ${toolTitle}`
+              };
+            })
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Theme", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3734,17 +3766,13 @@ function ChatGPTSimulator({
 }
 exports.ChatGPTSimulator = ChatGPTSimulator;
 exports.SCREEN_WIDTHS = SCREEN_WIDTHS;
-exports.SET_GLOBALS_EVENT_TYPE = SET_GLOBALS_EVENT_TYPE;
-exports.SetGlobalsEvent = SetGlobalsEvent;
 exports.ThemeProvider = ThemeProvider;
 exports.cn = cn;
 exports.getAPI = getAPI;
 exports.getGlobal = getGlobal;
-exports.getOpenAiProvider = getOpenAiProvider;
 exports.getProvider = getProvider;
 exports.initMockOpenAI = initMockOpenAI;
 exports.isHoverAvailable = isHoverAvailable;
-exports.isOpenAiAvailable = isOpenAiAvailable;
 exports.isPrimarilyTouchDevice = isPrimarilyTouchDevice;
 exports.isProviderAvailable = isProviderAvailable;
 exports.prefersReducedMotion = prefersReducedMotion;