Content
<div align="center">
<a href="https://sunpeak.ai">
<picture>
<img alt="Sunpeak logo" src="https://d10djik02wlf6x.cloudfront.net/sunpeak-github.svg">
</picture>
</a>
</div>
# sunpeak
[](https://www.npmjs.com/package/sunpeak)
[](https://www.npmjs.com/package/sunpeak)
[](https://github.com/Sunpeak-AI/sunpeak/actions)
[](https://github.com/Sunpeak-AI/sunpeak/blob/main/LICENSE)
[](https://www.typescriptlang.org/)
[](https://reactjs.org/)
The MCP App SDK.
Quickstart, build, and test your ChatGPT App locally with OpenAI apps-sdk-ui React components.
[Documentation](https://docs.sunpeak.ai/)
<div align="center">
<a href="https://docs.sunpeak.ai/library/chatgpt-simulator">
<picture>
<img alt="ChatGPT Simulator" src="https://d10djik02wlf6x.cloudfront.net/chatgpt-simulator.png">
</picture>
</a>
</div>
## Quickstart
### New Projects
Requirements: Node (20+), pnpm (10+)
```bash
# Install the CLI globally
pnpm add -g sunpeak
# Create a new project
sunpeak new
```
To add sunpeak to an existing project, refer to the [documentation](https://docs.sunpeak.ai/add-to-existing-project).
## Key Features
- 📺 [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 { 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>
);
}
```
## What is sunpeak exactly?
sunpeak is an npm package consisting of:
1. **A CLI utility** for working with sunpeak (`./bin`).
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
We welcome your contributions!
For development quickstart on this package, see [DEVELOPMENT.md](./DEVELOPMENT.md).
## Resources
- [ChatGPT Apps SDK Design Guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines)
- [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/)
MCP Store
