Skip to main content

​
New projects

1

Create a project

Requirements: Node.js 20+, pnpm 10+
pnpm dlx sunpeak new
You will be prompted to name your project. We’ll choose my-app for now.
2

Install dependencies

Navigate to your project directory and install dependenceies:
cd my-app
pnpm install
3

Run the development server

pnpm dev
Open http://localhost:6767 to see the ChatGPT simulator running your app.
The simulator updates automatically as you edit your components!
4

Build your first component

Edit src/components/apps/App.tsx to create your first ChatGPT widget:
import '../../styles/globals.css';
import { Card } from "../card";

export function App() {
  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>
  );
}
Save the file and watch your changes appear instantly in the simulator.

Project Structure

Explore your new MCP App project