sunpeak 0.3.7 → 0.4.1

package/README.md

@@ -17,9 +17,17 @@
 
 The ChatGPT Apps SDK.
 
-Build and test your ChatGPT App UI locally with OpenAI apps-sdk-ui React components.
+Build and test your MCP App UI locally with OpenAI apps-sdk-ui React components.
 
-![ChatGPT Simulator](https://sunpeak.ai/images/chatgpt-simulator.png)
+[Documentation](https://docs.sunpeak.ai/)
+
+<div align="center">
+  <a href="https://docs.sunpeak.ai/library/chatgpt-simulator">
+    <picture>
+      <img alt="ChatGPT Simulator" src="https://sunpeak.ai/images/chatgpt-simulator.png">
+    </picture>
+  </a>
+</div>
 
 ## Quickstart 
 
@@ -31,37 +39,24 @@ Requirements: Node (20+), pnpm (10+)
 pnpm dlx sunpeak new
 ```
 
-### Existing Projects
-
-Requirements: React (18+), Tailwind 4
-
-```bash
-pnpm add sunpeak
-```
-
-When using `ChatGPTSimulator`, import the styles in your entry file:
-
-```tsx
-import 'sunpeak/style.css';
-import { ChatGPTSimulator } from 'sunpeak';
-```
+To add sunpeak to an existing project, refer to the [documentation](https://docs.sunpeak.ai/add-to-existing-project).
 
 ## Key Features
-- 📺 ChatGPT simulator for local UI component development.
-- 📚 Pre-built component library built on [openai/apps-sdk-ui](https://github.com/openai/apps-sdk-ui).
-- 📱 Interface for cross-platforms MCP UI App development.
-- 🛜 Basic MCP server to serve your UI to ChatGPT prod out-of-the-box.
-- 🧪 Testing framework that replicates advanced ChatGPT behavior locally.
+- 📺 [ChatGPT simulator](https://docs.sunpeak.ai/library/chatgpt-simulator) for local UI component development.
+- 📚 [Pre-built component library](https://docs.sunpeak.ai/template/ui-components) built on [openai/apps-sdk-ui](https://github.com/openai/apps-sdk-ui).
+- 📱 [Multi-platform interface](https://docs.sunpeak.ai/library/multi-platform-apis) for portable MCP UI App development.
+- 🛜 [Basic MCP server](https://docs.sunpeak.ai/library/mcp-server) to serve your UI to ChatGPT prod out-of-the-box.
+- 🧪 [Testing framework](https://docs.sunpeak.ai/guides/testing) that replicates advanced ChatGPT behavior locally.
 
 ## Example Component
 ```tsx
-import '@/styles/globals.css';
-import { OpenAICard } from "@/components";
+import "./styles/globals.css";
+import { Card } from "./components/card";
 
 export default function App() {
   return (
-    <OpenAICard
-      image="https://example.com/photo.jpg"
+    <Card
+      image="https://images.unsplash.com/photo-1520950237264-dfe336995c34?w=400&h=400&fit=crop"
       imageAlt="Lady Bird Lake"
       header="Lady Bird Lake"
       metadata="⭐ 4.5 • Austin, TX"
@@ -69,26 +64,23 @@ export default function App() {
       button2={{ children: "Learn More", onClick: () => {} }}
     >
       Scenic lake perfect for kayaking, paddleboarding, and trails.
-    </OpenAICard>
+    </Card>
   );
 }
 ```
 
-## Supported Platforms
-
-- ✅ **OpenAI ChatGPT** - Fully supported ([design guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines))
-- 🔄 **Google Gemini** - Design system available (SDK support coming soon)
-- 🔄 **Anthropic Claude** - Design system available (SDK support coming soon)
-- 🔧 **Custom platforms** - Implement your own platform adapter
-
 ## What is sunpeak exactly?
 
 sunpeak is an npm package consisting of:
 
 1. **A CLI utility** for working with sunpeak (`./bin`).
-2. **A `sunpeak` library** (`./src`). This library contains common runtime APIs and testing utilities, including a ChatGPT simulator, to be used as a dependency by sunpeak projects.
-3. **A templated npm package** (`./template`) that is initialized by the CLI to help developers set up sunpeak projects. These projects have the `sunpeak` dependency already wired up alongside a collection of pre-built UI components (`./template/src/components`) to copy, modify, or use as an example.
-    1. Developers build their UI in the `App` component.
+2. **A templated npm package** (`./template`). This template includes:
+    1. Project scaffold - Complete development setup with build, test, and dev tooling.
+    2. Pre-built UI components - Production-ready components following ChatGPT design guidelines.
+3. **The `sunpeak` library** (`./src`). This library contains:
+    1. Multi-platform APIs - Abstraction layer for future platform support (Gemini, Claude).
+    2. ChatGPT simulator - Local development environment replicating ChatGPT's widget runtime.
+    3. MCP server - View local widgets in the real ChatGPT.
 
 ## Contributing
 

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

@@ -1,11 +1,21 @@
 import * as React from 'react';
-interface ChatGPTSimulatorProps {
-    children: React.ReactNode;
+/**
+ * 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;
 }
-export declare function ChatGPTSimulator({ children, appName, appIcon, userMessage, toolOutput, widgetState, }: ChatGPTSimulatorProps): import("react/jsx-runtime").JSX.Element;
+interface ChatGPTSimulatorProps {
+    children?: React.ReactNode;
+    simulations?: Simulation[];
+}
+export declare function ChatGPTSimulator({ children, simulations, }: ChatGPTSimulatorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/chatgpt/index.d.ts

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

package/dist/index.cjs

@@ -3626,13 +3626,18 @@ const DEFAULT_THEME = "dark";
 const DEFAULT_DISPLAY_MODE = "inline";
 function ChatGPTSimulator({
   children,
-  appName,
-  appIcon,
-  userMessage,
-  toolOutput = null,
-  widgetState = null
+  simulations = []
 }) {
   const [screenWidth, setScreenWidth] = React__namespace.useState("full");
+  const [selectedKey, setSelectedKey] = React__namespace.useState(
+    simulations.length > 0 ? simulations[0].value : ""
+  );
+  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 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,
@@ -3660,10 +3665,23 @@ function ChatGPTSimulator({
       }
     };
   }, []);
+  const SelectedComponent = selectedSim == null ? void 0 : selectedSim.component;
+  const content = SelectedComponent ? /* @__PURE__ */ jsxRuntime.jsx(SelectedComponent, {}) : children;
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(
     SimpleSidebar,
     {
       controls: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        simulations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Simulation", children: /* @__PURE__ */ jsxRuntime.jsx(
+          SidebarSelect,
+          {
+            value: selectedKey,
+            onChange: (value) => setSelectedKey(value),
+            options: simulations.map((sim) => ({
+              value: sim.value,
+              label: sim.label
+            }))
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Theme", children: /* @__PURE__ */ jsxRuntime.jsx(
           SidebarSelect,
           {
@@ -3708,7 +3726,7 @@ function ChatGPTSimulator({
           appName,
           appIcon,
           userMessage,
-          children
+          children: content
         }
       )
     }