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
Install dependencies
Using make (recommended):Or using npm directly: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
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
- 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:
- 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!
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
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:
