sunpeak 0.1.22 → 0.2.2

package/README.md

@@ -1,3 +1,11 @@
+<div align="center">
+  <a href="https://sunpeak.ai">
+    <picture>
+      <img alt="Sunpeak logo" src="https://sunpeak.ai/images/sunpeak_github.svg">
+    </picture>
+  </a>
+</div>
+
 # sunpeak
 
 [![npm version](https://img.shields.io/npm/v/sunpeak.svg?style=flat-square)](https://www.npmjs.com/package/sunpeak)
@@ -7,71 +15,26 @@
 [![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/)
 
-React library for cross-platform genAI App UIs. Supports **OpenAI ChatGPT Apps**, with pluggable architecture for **Gemini**, **Claude**, and other platforms.
+The ChatGPT Apps UI SDK. Build and test your ChatGPT App UI locally with approved shadcn React components.
 
-![ChatGPT Simulator](./assets/chatgpt-simulator.png)
+![ChatGPT Simulator](https://sunpeak.ai/images/chatgpt-simulator.png)
 
 **Key Features:**
 - 📺 ChatGPT simulator for rapid UI component development.
-- 📱 Interface for cross-platform custom components.
-- 🤝 [Material UI](https://mui.com/material-ui/)-based components compliant with the OpenAI design system.
-- 📚 Library of approved Apps.
-- 🧪 Testing framework that replicates advanced platform behavior locally.
+- 📚 React component library built with [shadcn/ui](https://ui.shadcn.com/) and [Tailwind](https://tailwindcss.com/).
+- 📱 Interface for custom components that work across genAI platforms.
+- 🤝 Styles that fit the [OpenAI design system](https://developers.openai.com/apps-sdk/build/chatgpt-ui).
+- 🧪 Testing framework that replicates advanced ChatGPT behavior locally.
 
 ## Quickstart
 
 Requirements: Node (20+), pnpm (10+)
 
-Use our `create-sunpeak` utility to scaffold your own sunpeak app:
-
 ```bash
-pnpm dlx create-sunpeak my-app
+pnpm dlx sunpeak init my-app
 cd my-app && pnpm dev
 ```
 
-## Building Apps
-
-### Use library components
-
-```tsx
-import { GenAI, Carousel, Card } from 'sunpeak';
-
-export const MyCarousel = GenAI(() => (
-  <Carousel>
-    <Card
-      image="https://sunpeak.ai/images/sun.svg"
-      imageAlt="Sunpeak logo"
-      imageMaxWidth={400}
-      imageMaxHeight={400}
-      header="Card Title"
-    >
-      Card content
-    </Card>
-  </Carousel>
-));
-```
-
-### Create a custom App
-
-```tsx
-import { GenAI } from 'sunpeak';
-import { Box, Typography } from '@mui/material';
-
-export const MyApp = GenAI(({ maxHeight, colorScheme }) => (
-  <Box sx={{ p: 3 }}>
-    <Typography variant="h5" gutterBottom>
-      Hello GenAI!
-    </Typography>
-    <Typography variant="body1" color="text.secondary">
-      Theme: {colorScheme}
-    </Typography>
-    <Typography variant="body2">
-      Max height: {maxHeight}px
-    </Typography>
-  </Box>
-));
-```
-
 ## Supported Platforms
 
 - ✅ **OpenAI ChatGPT** - Fully supported ([design guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines))
@@ -79,29 +42,6 @@ export const MyApp = GenAI(({ maxHeight, colorScheme }) => (
 - 🔄 **Anthropic Claude** - Design system available (SDK support coming soon)
 - 🔧 **Custom platforms** - Implement your own platform adapter
 
-## What's Included
-
-### Components
-- **GenAI** - Single interface for building Apps, all Apps must use this wrapper
-  - Automatic MUI theming (light/dark mode)
-  - Platform constraints (maxHeight)
-- **Card** - Responsive card component
-- **Carousel** - Horizontal scrolling carousel
-- **ChatGPTSimulator** - Local development & testing environment
-
-### Hooks
-- **usePlatformGlobal** - Platform-agnostic global state access
-- **useDisplayMode** - Get current display mode
-- **useRequestDisplayMode** - Request a specific display mode (e.g., fullscreen)
-- **useWidgetProps** - Access tool output data
-- **useWidgetState** - Manage persistent widget state
-- **useMaxHeight** - Get height constraints
-- **useColorScheme** - Get current color scheme (light/dark)
-
-### Design Systems
-- **ChatGPT** - MUI theme following OpenAI Apps SDK guidelines
-- **Custom** - Build your own MUI theme
-
 ## Contributing
 
 We welcome your contributions!
@@ -110,5 +50,6 @@ For development quickstart on this package, see [DEVELOPMENT.md](./DEVELOPMENT.m
 
 ## Resources
 
-- [OpenAI ChatGPT Apps SDK Design Guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines)
-- [OpenAI ChatGPT Apps SDK Examples](https://github.com/openai/openai-apps-sdk-examples)
+- [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 Examples](https://github.com/openai/openai-apps-sdk-examples)

package/bin/sunpeak.js

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+
+import { existsSync, mkdirSync, cpSync, readFileSync, writeFileSync } from 'fs';
+import { join, dirname, basename } from 'path';
+import { fileURLToPath } from 'url';
+import { createInterface } from 'readline';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+function prompt(question) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+async function init(projectName) {
+  if (!projectName) {
+    projectName = await prompt('☀️ 🏔️ Project name [my-app]: ');
+    if (!projectName) {
+      projectName = 'my-app'
+    }
+  }
+
+  const targetDir = join(process.cwd(), projectName);
+
+  if (existsSync(targetDir)) {
+    console.error(`Error: Directory "${projectName}" already exists`);
+    process.exit(1);
+  }
+
+  const templateDir = join(__dirname, '..', 'template');
+
+  console.log(`☀️ 🏔️ Creating ${projectName}...`);
+
+  mkdirSync(targetDir, { recursive: true });
+
+  cpSync(templateDir, targetDir, {
+    recursive: true,
+    filter: (src) => {
+      const name = basename(src);
+      return name !== 'node_modules' && name !== 'pnpm-lock.yaml';
+    }
+  });
+
+  // Read sunpeak version from root package.json
+  const rootPkgPath = join(__dirname, '..', 'package.json');
+  const rootPkg = JSON.parse(readFileSync(rootPkgPath, 'utf-8'));
+  const sunpeakVersion = `^${rootPkg.version}`;
+
+  // Update project package.json
+  const pkgPath = join(targetDir, 'package.json');
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+  pkg.name = projectName;
+
+  // Replace workspace:* with actual version
+  if (pkg.dependencies?.sunpeak === 'workspace:*') {
+    pkg.dependencies.sunpeak = sunpeakVersion;
+  }
+
+  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+
+  console.log(`
+Done! To get started:
+
+  cd ${projectName}
+  pnpm install && pnpm dev
+
+See README.md for more details.
+`);
+}
+
+const [,, command, ...args] = process.argv;
+
+if (command === 'init') {
+  init(args[0]);
+} else {
+  console.log(`
+sunpeak - ChatGPT Apps UI SDK
+
+Commands:
+  init [name]  Create a new project from template
+`);
+}