The MCP App framework.
Quickstart, build, test, and ship your ChatGPT App locally!
Demo (Hosted) ~ Demo (Video) ~ Discord (NEW) ~ Documentation ~ GitHub
Requirements: Node (20+), pnpm (10+)
pnpm dlx sunpeak newTo add sunpeak to an existing project, refer to the documentation.
sunpeak is an npm package consisting of:
- The
sunpeaklibrary (./src). An npm package for running & testing MCP Apps. This standalone library contains:- Runtime APIs - Strongly typed, multi-platform APIs for interacting with the ChatGPT runtime, architected to support future platforms (Gemini, Claude).
- ChatGPT simulator - React component replicating ChatGPT's runtime.
- MCP server - Mock data MCP server for testing local Resources in the real ChatGPT.
- The
sunpeakframework (./template). An end-to-end framework MCP Apps, from quickstart to shipped. This templated npm package includes:- Project scaffold - Complete development setup with build, test, and mcp tooling.
- UI components - Production-ready components following ChatGPT design guidelines and using OpenAI apps-sdk-ui React components.
- CLI utility (
./bin) - Commands for working with the sunpeak framework.
Note that the sunpeak library can be used without the framework.
import { Card } from '../card';
export function MCPResource() {
return (
<Card
image="https://images.unsplash.com/photo-1520950237264-dfe336995c34"
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>
);
}We welcome your contributions!
For development quickstart on this package, see DEVELOPMENT.md.