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

​
Clone the Repository

1

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.
2

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.
3

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
4

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

  • User registration form
  • Login page with error handling
  • Password reset flow
  • Email verification support
  • Responsive dashboard layout
  • User profile display
  • Account information
  • Sign out functionality
  • Buttons, forms, and inputs
  • Cards and containers
  • Navigation (header, footer, mobile menu)
  • Tables and data display
  • Modals and dialogs
  • Theme switcher (light/dark)
  • 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:
  1. Homepage: See the marketing template
  2. Navigation: Try the mobile menu
  3. Theme toggle: Switch between light/dark mode
  4. Example pages: Click “All examples” to see templates
  5. Login page: Visit /login to see the auth form
Don’t try to log in yet - we need to configure environment variables first!

​
Understanding the Configuration Banner

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

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