Skip to main content

​
Overview

When you create a new project with sunpeak new, the sunpeak framework gives you a minimal, convention-based project structure with everything needed for ChatGPT widget development.

​
Key Files & Directories

  • src/resources/ - Directory containing all your MCP Resources (ChatGPT App UIs).
    • Every file in this directory ending with -resource.tsx will be automatically built by the framework to dist/name.js, where the output name will be whatever was prefixed to -resource.tsx.
    • Each resource must have a companion -resource.json file containing metadata (name, title, description, etc.).
  • src/simulations/ - Directory containing simulation JSON files.
    • Files in this directory matching *-simulation.json are automatically discovered by the dev server and MCP server.
    • Simulations are linked to resources by filename prefix (e.g., albums-show-simulation.json links to albums-resource.tsx).
  • tests/e2e/ - Directory containing end-to-end Playwright tests for each resource. Uses the ChatGPTSimulator to test your resources render properly with any state (tool calls, saved state, dark mode, pip display mode, etc.).
No entry point files needed! The framework automatically discovers your simulations and resources using conventions.

​
Included Tools

The template includes minimal, essential tooling:

​
Vite

Fast build tool with hot-reload (HMR) for instant development feedback. The framework owns the dev server configuration - just run sunpeak dev.

​
Tailwind CSS 4

Utility-first CSS framework for rapid UI development. Pre-configured via Vite plugin. Required for @openai/apps-sdk-ui, which is also configured out-of-the-box.

​
TypeScript

Type safety with TypeScript 5. Configured via tsconfig.json.

​
Vitest (Unit Tests)

Vite-native testing framework for component testing. Run with pnpm test.

​
Playwright (E2E Tests)

End-to-end testing against the ChatGPT Simulator. Tests live in tests/e2e/. Run with pnpm test:e2e.

​
Add Your Own Tooling

The template is intentionally minimal. Add your preferred tools as needed:
  • Linting: ESLint
  • Formatting: Prettier
  • Type checking: Run tsc --noEmit as a script

sunpeak CLI API Reference

All sunpeak CLI commands and configurations.