Skip to main content
The Starter Kit is your foundation for building AI-powered SaaS applications. It’s a production-ready Next.js template that connects to the Cloud API for backend services.

​
What’s Included

​
Core Technology

  • Next.js 15 with App Router and React 19 Server Components
  • Tailwind CSS with dark mode support and responsive design
  • TypeScript for type safety and better developer experience
  • Radix UI components for accessible, production-ready UI elements

​
Authentication System

  • User registration and login flows
  • JWT-based authentication with the Cloud API
  • Protected routes and role-based access
  • Email verification support
  • Secure httpOnly cookie storage

​
Pre-Built Features

  • User Dashboard: Responsive dashboard with user information and actions
  • AI Generation UI: Ready-to-use interfaces for AI image generation
  • Subscription Billing: Checkout flows, billing management, and customer portal
  • Profile Management: User profile pages and settings
  • Theme Switcher: Built-in light/dark mode toggle
  • Example Pages: Landing pages, use cases, and component showcases

​
UI Component Library

  • Buttons, cards, forms, and inputs
  • Navigation components (header, footer, mobile menu)
  • Data display (tables, badges, avatars)
  • Feedback components (alerts, modals, toasts)
  • Layout primitives (containers, grids, columns)

​
How It Works

1

Clone from GitHub

The Starter Kit is open-source and available at github.com/VibeCodingStarter/starter-kit
2

Configure credentials

Add your Cloud Admin credentials (developer key, project ID, API key) to environment variables
3

Customize

Update branding, colors, and content to match your product
4

Deploy

Deploy to Vercel, Netlify, or any hosting provider that supports Next.js

​
Key Concepts

​
Environment Configuration

The Starter Kit validates your environment variables on startup:
  • DEVKIT4AI_MODE: Set to “project” for production apps
  • NEXT_PUBLIC_API_URL: Points to the Cloud API (https://api.vibecoding.ad)
  • DEVKIT4AI_DEVELOPER_KEY: Your developer key from Cloud Admin
  • DEVKIT4AI_PROJECT_ID: Your project’s unique identifier
  • DEVKIT4AI_PROJECT_KEY: API key for your specific project
If any configuration is missing or invalid, you’ll see a banner at the top of your app with specific error messages.

​
Authentication Flow

All authentication happens through the Cloud API:
  1. User submits login/registration form
  2. Starter Kit sends request to Cloud API
  3. Cloud API validates credentials and returns JWT tokens
  4. Tokens are stored in secure httpOnly cookies
  5. Subsequent requests include tokens for authentication

​
Customization Options

  • Branding: Update logo, colors, and typography in config files
  • Pages: Add new pages using Next.js App Router conventions
  • Components: Modify existing or create new React components
  • Styling: Customize Tailwind theme in tailwind.config.ts
  • Features: Add custom AI features using the Cloud API

​
Next Steps

Install the Starter Kit

Get started with installation and setup

Add Billing

Implement subscription billing for your users

Customize Branding

Update colors, logo, and styling

Deploy to Production

Deploy your customized app