Skip to main content

​
Overview

When you create a new project with pnpm dlx sunpeak new, the sunpeak Starter Kit gives you a complete project scaffold with everything needed for ChatGPT widget development.

​
Pre-Configured Tools

​
Vite

Fast build tool with hot-reload (HMR) for instant development feedback. Configured via vite files.

​
Tailwind CSS 4

Utility-first CSS framework for rapid UI development. Configured via Vite plugin & CSS import.

​
TypeScript

Type safety and better developer experience. Configured via tsconfig files.

​
Vitest (Unit Tests)

Vite-native testing framework. Configured via vitest.config.ts.

​
npm Scripts

​
pnpm build
command
Build optimized production bundle.
​
pnpm dev
command
Start development server with ChatGPT simulator at http://localhost:6767.
​
pnpm mcp
command
Start MCP server for ChatGPT testing. Requires pnpm build to be run first.
​
pnpm lint
command
Run linter (ESLint & Prettier).
​
pnpm typecheck
command
Check TypeScript types without building.
​
pnpm test
command
Run unit tests.
​
pnpm validate
command
Run and validate all of the above commands.

​
Key Files

  • src/index.chatgpt.tsx - Production build root. Entrypoint for pnpm build.
  • dev/main.tsx - ChatGPT simulator setup. Entrypoint for pnpm dev.
  • mcp/server.ts - Simple MCP server for live ChatGPT testing with dummy data. Entrypoint for pnpm mcp.
  • src/components/apps/App.tsx - Your main MCP App UI that will ultimately be shipped.
  • src/components/apps/active-app.ts - Where you can change the App to be built or served on the MCP server.