Skip to main content
Goal: In 15 minutes you’ll have a working AI SaaS application connected to the backend with management console and user dashboards.

​
What You’ll Build

By the end of this guide, you’ll have:
  • ✅ A developer account with Admin Console access
  • ✅ A local Starter Kit connected to the Cloud API
  • ✅ Working authentication and user dashboard
  • ✅ AI generation endpoints ready to use
Time required: 15 minutes
Prerequisites: Node.js 19 or later, a GitHub account, and access to the hosted Cloud Admin at devkit4ai.com/console or vibecoding.ad/console.

​
Launch in Five Steps

1

Create a developer workspace

Visit devkit4ai.com/register/developer (or the vibecoding.ad equivalent) and complete the registration flow. The backend automatically provisions your developer account, default project, and API credentials as soon as the confirmation succeeds.
2

Collect your credentials

After signing in, open the Console dashboard. Copy the generated developer key, project ID, and project API key. These values are stored securely in the backend as hashed secrets and surface once in the UI, so save them to your password manager.
3

Clone and install the Starter Kit

git clone https://github.com/VibeCodingStarter/starter-kit.git
cd starter-kit
make install   # or npm install
The Starter Kit is built with Next.js 15 and requires Node.js 19+ with Turbopack.
4

Configure environment variables

Create .env.local (or update the existing example) with the credentials you gathered:
DEVKIT4AI_MODE=project
NEXT_PUBLIC_API_URL=https://api.vibecoding.ad
DEVKIT4AI_DEVELOPER_KEY=dk_your_developer_key
DEVKIT4AI_PROJECT_ID=00000000-0000-0000-0000-000000000000
DEVKIT4AI_PROJECT_KEY=ak_your_project_key
The NEXT_PUBLIC_API_URL should match the region of the hosted Cloud API you are targeting.
Common mistakes:
  • Using quotes around values (remove them)
  • Wrong PROJECT_ID format (must be a valid UUID)
  • Mixing up developer key and project key
  • Incorrect API URL (check for https:// and no trailing slash)
5

Run the development server

make dev   # boots npm run dev with Turbopack on port 3004
Sign in using the same credentials you created in Cloud Admin. You will land on /dashboard, which confirms your app is connected to the hosted Cloud API successfully.

​
Verify Your Setup

Use the Cloud API health check to confirm your configuration is correct: 
curl https://api.vibecoding.ad/api/v1/health \
  -H "X-User-Role: end_user" \
  -H "X-Developer-Key: dk_your_developer_key" \
  -H "X-Project-ID: 00000000-0000-0000-0000-000000000000" \
  -H "X-API-Key: pk_your_project_key"
You should receive a JSON payload indicating the service status. Any authentication errors mean an environment variable is missing or mis-typed.

​
Success Checklist

You’re ready to customize when:
  • You can sign in at localhost:3004/login
  • Dashboard loads without configuration errors
  • Health check curl command returns {"status": "healthy"}
  • You see your project in the Cloud Admin console
What you learned: You’ve successfully set up a developer account, cloned the Starter Kit, connected it to the Cloud API, and verified the integration. You now have a production-ready foundation for building AI features.

​
Next Steps

Build Your First AI Feature

Next: Follow the First App tutorial to add custom UI and implement your first AI generation feature.

​
Learn More

Customize the Starter Kit

Update branding, colors, and styling to match your product.

Understand the Architecture

Deep dive into how the platform components work together.

Explore Cloud Admin

Learn to manage multiple projects and API keys.

Deploy to Production

Deploy your application to Vercel, Netlify, or your own hosting.