First App: Clone the Starter Kit

Now that your environment is ready, let’s get the Starter Kit running locally.

Clone the Repository

Clone from GitHub

git clone https://github.com/VibeCodingStarter/starter-kit.git
cd starter-kit

This downloads the complete Next.js template with all pre-built features.

Install dependencies

Using make (recommended):

make install

Or using npm directly:

npm install

Installation takes 1-3 minutes depending on your internet speed. The package manager downloads Next.js, React, Tailwind CSS, and all UI components.

Start the development server

npm run dev

The server starts on port 3004. You’ll see output like:

▲ Next.js 15.5.6
- Local:        http://localhost:3004
- Environments: .env.local

✓ Ready in 2.3s

Open in your browser

Visit http://localhost:3004You should see:

The Starter Kit homepage
An amber configuration banner at the top
Navigation menu and theme toggle

Configuration errors expected: The banner appears because environment variables aren’t set yet. This is normal - we’ll fix it in the next step.

What You Just Installed

Technology Stack

Next.js 15: Latest version with App Router and Turbopack
React 19: Server Components and Server Actions
TypeScript: Full type safety throughout
Tailwind CSS: Utility-first styling with dark mode
Radix UI: Accessible component primitives

Pre-Built Features

Authentication pages

User registration form
Login page with error handling
Password reset flow
Email verification support

User dashboard

Responsive dashboard layout
User profile display
Account information
Sign out functionality

UI components

Buttons, forms, and inputs
Cards and containers
Navigation (header, footer, mobile menu)
Tables and data display
Modals and dialogs
Theme switcher (light/dark)

Example pages

Landing page templates
AI use case examples
Component showcase
Pricing page templates

Verify the Installation

Check the Development Server

Make sure these work:

# Homepage loads
curl http://localhost:3004

# Health check works (will fail without env vars)
curl http://localhost:3004/api/health

Explore the Interface

Browse through:

Homepage: See the marketing template
Navigation: Try the mobile menu
Theme toggle: Switch between light/dark mode
Example pages: Click “All examples” to see templates
Login page: Visit /login to see the auth form

Don’t try to log in yet - we need to configure environment variables first!

The amber banner shows configuration issues: Current errors you’ll see:

❌ DEVKIT4AI_DEVELOPER_KEY is missing
❌ DEVKIT4AI_PROJECT_ID is missing
❌ DEVKIT4AI_PROJECT_KEY is missing
❌ NEXT_PUBLIC_API_URL is not set

This is expected! The Starter Kit validates environment variables on startup to help you catch configuration problems early.

Project Structure

Key folders you’ll work with:

starter-kit/
├── app/              # Next.js pages (App Router)
│   ├── (auth)/      # Login, registration
│   ├── dashboard/   # User dashboard
│   └── page.tsx     # Homepage
│
├── components/       # React components  
│   ├── ui/          # Base UI (buttons, forms)
│   ├── generic/     # Reusable components
│   └── project/     # Header, footer
│
├── config/          # App configuration
│   └── app.config.ts  # Branding, navigation
│
├── lib/             # Utilities
│   ├── deployment-mode.ts  # Config validation
│   └── auth-server.ts      # Auth helpers
│
└── public/          # Static files (images, fonts)

Keep Your Repository Updated

Link to Upstream

Stay updated with improvements:

# Add upstream remote
git remote add upstream https://github.com/VibeCodingStarter/starter-kit.git

# Fetch updates
git fetch upstream

# Merge updates (after you've committed your changes)
git merge upstream/main

Pull updates regularly: The Starter Kit receives bug fixes, new features, and security updates. Check for updates every few weeks.

Next Steps

Your Starter Kit is running! Now let’s configure it:

Configure Environment

Add your Cloud Admin credentials

Customize UI

Update branding and styling

Environment Guide

Detailed environment variable reference

Project Structure

Understand the codebase organization

​Clone the Repository

​What You Just Installed

​Technology Stack

​Pre-Built Features

​Verify the Installation

​Check the Development Server

​Explore the Interface

​Understanding the Configuration Banner

​Project Structure

​Keep Your Repository Updated

​Link to Upstream

​Next Steps

Configure Environment

Customize UI

Environment Guide

Project Structure

Clone the Repository

What You Just Installed

Technology Stack

Pre-Built Features

Verify the Installation

Check the Development Server

Explore the Interface

Understanding the Configuration Banner

Project Structure

Keep Your Repository Updated

Link to Upstream

Next Steps