The MCP App SDK.
Quickstart, build, and test your ChatGPT App locally with OpenAI apps-sdk-ui React components.
Requirements: Node (20+), pnpm (10+)
pnpm dlx sunpeak newTo add sunpeak to an existing project, refer to the documentation.
- 📺 ChatGPT simulator for local UI component development.
- 📚 Pre-built component library built on openai/apps-sdk-ui.
- 📱 Multi-platform interface for portable 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.
import './styles/globals.css';
import { Card } from './components/card';
export default function App() {
return (
<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"
button1={{ children: 'Visit', isPrimary: true, onClick: () => {} }}
button2={{ children: 'Learn More', onClick: () => {} }}
>
Scenic lake perfect for kayaking, paddleboarding, and trails.
</Card>
);
}sunpeak is an npm package consisting of:
- A CLI utility for working with sunpeak (
./bin). - A templated npm package (
./template). This template includes:- Project scaffold - Complete development setup with build, test, and dev tooling.
- Pre-built UI components - Production-ready components following ChatGPT design guidelines.
- The
sunpeaklibrary (./src). This library contains:- Multi-platform APIs - Abstraction layer for future platform support (Gemini, Claude).
- ChatGPT simulator - Local development environment replicating ChatGPT's widget runtime.
- MCP server - View local widgets in the real ChatGPT.
We welcome your contributions!
For development quickstart on this package, see DEVELOPMENT.md.