sunpeak 0.3.6 → 0.3.8

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 
 
@@ -28,30 +36,17 @@ Build and test your ChatGPT App UI locally with OpenAI apps-sdk-ui React compone
 Requirements: Node (20+), pnpm (10+)
 
 ```bash
-pnpm dlx sunpeak init
-```
-
-### Existing Projects
-
-Requirements: React (18+), Tailwind 4
-
-```bash
-pnpm add sunpeak
+pnpm dlx sunpeak new
 ```
 
-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
@@ -74,21 +69,18 @@ export default function App() {
 }
 ```
 
-## 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
 
@@ -99,6 +91,7 @@ For development quickstart on this package, see [DEVELOPMENT.md](./DEVELOPMENT.m
 ## Resources
 
 - [ChatGPT Apps SDK Design Guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines)
-- [ChatGPT Apps SDK UI Documentation](https://developers.openai.com/apps-sdk/build/chatgpt-ui)
+- [ChatGPT Apps SDK Documentation - UI](https://developers.openai.com/apps-sdk/build/chatgpt-ui)
 - [ChatGPT Apps SDK window.openai Reference](https://developers.openai.com/apps-sdk/build/mcp-server#understand-the-windowopenai-widget-runtime)
 - [ChatGPT Apps SDK Examples](https://github.com/openai/openai-apps-sdk-examples)
+- [ChatGPT Apps SDK UI Documentation](https://openai.github.io/apps-sdk-ui/)

package/bin/sunpeak.js

@@ -80,13 +80,13 @@ See README.md for more details.
 
 const [,, command, ...args] = process.argv;
 
-if (command === 'init') {
+if (command === 'new') {
   init(args[0]);
 } else {
   console.log(`
 sunpeak - ChatGPT Apps UI SDK
 
 Commands:
-  init [name]  Create a new project from template
+  new [name]  Create a new project from template
 `);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "The ChatGPT Apps UI SDK. Build and test your ChatGPT App UI locally with OpenAI apps-sdk-ui components.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -66,6 +66,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@playwright/test": "^1.56.1",
     "@tailwindcss/vite": "^4.1.17",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -105,6 +106,8 @@
     "dev": "pnpm --filter my-sunpeak-app dev",
     "lint": "eslint . --ext .ts,.tsx --fix",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:e2e": "playwright test",
+    "validate": "node scripts/validate.mjs"
   }
 }

package/template/README.md

@@ -2,6 +2,8 @@
 
 A ChatGPT App UI built with [sunpeak](https://github.com/Sunpeak-AI/sunpeak).
 
+For an initial overview of your new app and the sunpeak API, refer to the [documentation](https://docs.sunpeak.ai/template/project-structure).
+
 ## Quickstart
 
 ```bash
@@ -12,31 +14,24 @@ Edit [src/App.tsx](./src/App.tsx) to build your app UI.
 
 ## Development
 
-### Initial Project Structure
+## Testing
 
-```
-src/
-├── App.tsx          # Your main app component
-└── components/      # Your React components
+### Testing Locally
 
-mcp/
-└── server.ts        # MCP server for testing in ChatGPT
+Run all the checks with the following:
 
-dist/                # Build output (generated)
-└── chatgpt/         # ChatGPT builds
+```bash
+pnpm validate
 ```
 
-## Testing
-
-### Testing Locally
+This will:
+- Run linting, typechecking, and unit tests
+- Build your app
+- Verify that build outputs are created correctly
 
-Run the following scripts, and manually QA the UI from the dev server:
+For manual QA of the UI, run:
 
 ```bash
-pnpm lint
-pnpm typecheck
-pnpm test
-pnpm build
 pnpm dev
 ```
 

package/template/package.json

@@ -5,11 +5,12 @@
   "type": "module",
   "scripts": {
     "build": "vite build --config vite.config.build.ts",
-    "dev": "vite",
+    "dev": "vite --port ${PORT:-6767}",
     "mcp": "tsx mcp/server.ts",
     "lint": "eslint . --ext .ts,.tsx --fix",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "validate": "node scripts/validate.mjs"
   },
   "dependencies": {
     "@openai/apps-sdk-ui": "^0.2.0",

package/template/scripts/validate.mjs

@@ -0,0 +1,171 @@
+#!/usr/bin/env node
+
+/**
+ * Local testing script for Sunpeak project.
+ */
+
+import { execSync, spawn } from 'child_process';
+import { existsSync, readdirSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import http from 'http';
+
+// Color codes for output
+const colors = {
+  red: '\x1b[0;31m',
+  green: '\x1b[0;32m',
+  blue: '\x1b[0;34m',
+  yellow: '\x1b[1;33m',
+  reset: '\x1b[0m',
+};
+
+// Get project root
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const PROJECT_ROOT = join(__dirname, '..');
+
+function printSuccess(text) {
+  console.log(`${colors.green}✓ ${text}${colors.reset}`);
+}
+
+function printError(text) {
+  console.log(`${colors.red}✗ ${text}${colors.reset}`);
+}
+
+function runCommand(command, cwd) {
+  try {
+    execSync(command, {
+      cwd,
+      stdio: 'inherit',
+      env: { ...process.env, FORCE_COLOR: '1' },
+    });
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+function waitForServer(port, timeout = 10000) {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    const checkServer = () => {
+      const req = http.get(`http://localhost:${port}`, () => {
+        resolve();
+      });
+      req.on('error', () => {
+        if (Date.now() - startTime > timeout) {
+          reject(new Error(`Server did not start within ${timeout}ms`));
+        } else {
+          setTimeout(checkServer, 500);
+        }
+      });
+      req.end();
+    };
+    checkServer();
+  });
+}
+
+// Main testing flow
+console.log(`${colors.yellow}Starting local testing for Sunpeak project...${colors.reset}`);
+console.log(`Project root: ${PROJECT_ROOT}\n`);
+
+try {
+  console.log('Running: pnpm install');
+  if (!runCommand('pnpm install', PROJECT_ROOT)) {
+    throw new Error('pnpm install failed');
+  }
+  console.log()
+  printSuccess('pnpm install');
+
+  console.log('\nRunning: pnpm lint');
+  if (!runCommand('pnpm lint', PROJECT_ROOT)) {
+    throw new Error('pnpm lint failed');
+  }
+  printSuccess('pnpm lint');
+
+  console.log('\nRunning: pnpm typecheck');
+  if (!runCommand('pnpm typecheck', PROJECT_ROOT)) {
+    throw new Error('pnpm typecheck failed');
+  }
+  printSuccess('pnpm typecheck');
+
+  console.log('\nRunning: pnpm test');
+  if (!runCommand('pnpm test', PROJECT_ROOT)) {
+    throw new Error('pnpm test failed');
+  }
+  printSuccess('pnpm test');
+
+  console.log('\nRunning: pnpm build');
+  if (!runCommand('pnpm build', PROJECT_ROOT)) {
+    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 files = readdirSync(chatgptDir);
+  if (files.length !== 1 || files[0] !== 'index.js') {
+    printError(`Unexpected files in ./dist/chatgpt/: ${files.join(', ')}`);
+    printError('Expected only: index.js');
+    process.exit(1);
+  }
+  console.log()
+  printSuccess('pnpm build');
+
+  // MCP Server Check
+  console.log('\nRunning: pnpm mcp');
+  const mcpProcess = spawn('pnpm', ['mcp'], {
+    cwd: PROJECT_ROOT,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    env: { ...process.env, FORCE_COLOR: '1' },
+  });
+
+  const mcpErrors = [];
+
+  mcpProcess.stderr.on('data', (data) => {
+    const message = data.toString();
+    if (message.includes('error') || message.includes('Error')) {
+      mcpErrors.push(message.trim());
+    }
+  });
+
+  // Store process for cleanup
+  process.on('exit', () => {
+    if (mcpProcess && !mcpProcess.killed) {
+      mcpProcess.kill();
+    }
+  });
+
+  try {
+    console.log('\nWaiting for MCP server to start on port 6766...');
+    await waitForServer(6766, 10000);
+
+    // Give it a moment to ensure no immediate errors
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    if (mcpErrors.length > 0) {
+      printError('MCP server started but reported errors:');
+      mcpErrors.forEach(err => console.log(`  ${err}`));
+      throw new Error('MCP server has errors');
+    }
+
+  } catch (error) {
+    printError(`MCP server failed to start: ${error.message}`);
+    throw error;
+  } finally {
+    console.log('Stopping MCP server...');
+    mcpProcess.kill();
+    // Give it a moment to shut down
+    await new Promise(resolve => setTimeout(resolve, 1000));
+  }
+  console.log()
+  printSuccess('pnpm mcp\n');
+
+  printSuccess('All systems GO!\n\n');
+  process.exit(0);
+} catch (error) {
+  console.error(`\n${colors.red}Error: ${error.message}${colors.reset}\n`);
+  process.exit(1);
+}