StudioKit

Scaffold a production-ready Next.js site from a single text prompt. Two API keys. No cloud account required.

Alpha release — core pipeline works. 21st.dev component step is currently manual. Full automation coming in v1.0.

By MMKPC Studios — Matt Mitchell © 2026

---

How It Works

Your Prompt
    │
    ▼
Gemini 2.0 Flash  →  Generates all Next.js components (Hero, sections, Footer)
    │
    ▼
shadcn/ui         →  Wires in accessible, unstyled component primitives
    │
    ▼
21st.dev registry →  Replaces scaffolded UI with real production components
    │                 (AuroraBackground, GlowingEffect, TubeLightNavbar, etc.)
    ▼
npm run dev       →  Running site at localhost:3000

---

Prerequisites

• Node.js 18+
• A free Gemini API key (Google AI Studio)
• A free 21st.dev API key

That's it. No GCP. No Docker. No cloud billing.

---

Quick Start

1. Clone

git clone https://github.com/MMKPC/studiokit.git
cd studiokit

2. Install

npm install

3. Add Your Keys

cp .env.example .env

Open .env and fill in:

GEMINI_API_KEY=your_key_here
TWENTY_FIRST_API_KEY=your_key_here

Key	Where to get it	Cost
GEMINI_API_KEY	aistudio.google.com/app/apikey	Free
TWENTY_FIRST_API_KEY	21st.dev/magic/console	Free tier available

4. Generate a Site

node scripts/generate.js --prompt "SaaS analytics dashboard, dark mode, glassmorphism" --name my-dashboard

5. Run It

cd generated/my-dashboard
npm install
npm run dev

Opens at http://localhost:3000

6. Add 21st.dev Components (optional upgrade)

npx shadcn@latest init -d
npx shadcn@latest add "https://21st.dev/r/aceternity/aurora-background"
npx shadcn@latest add "https://21st.dev/r/ayushmxxn/tubelight-navbar"

Browse all components at 21st.dev.

---

Example Prompts

# Game studio
node scripts/generate.js --prompt "AAA game development studio, dark cinematic theme, purple and cyan" --name game-studio

# SaaS
node scripts/generate.js --prompt "fintech analytics dashboard, glassmorphism, dark mode" --name fintech-dash

# Portfolio
node scripts/generate.js --prompt "creative developer portfolio, minimal, black and white with one accent color" --name portfolio

# Agency
node scripts/generate.js --prompt "design agency, bold typography, high contrast, editorial layout" --name agency

---

The Stack

Tool	Role	Docs
Gemini 2.0 Flash	Code generation	Google AI Studio
shadcn/ui	Component primitives	npx shadcn@latest
21st.dev	Production UI components	npx shadcn@latest add <url>
Next.js 14	App framework	Vercel
Tailwind CSS	Styling	Tailwind Labs
framer-motion	Animations	Framer

---

What Gets Generated

For every --prompt, the pipeline outputs a complete Next.js 14 project with:

• app/page.tsx — main page with navbar
• app/layout.tsx — root layout with metadata
• app/globals.css — base styles + CSS keyframe animations
• components/Hero.tsx — full-viewport hero with particles
• components/GamesShowcase.tsx (or equivalent) — feature/product section
• components/About.tsx — about/stats section
• components/Careers.tsx — CTA / team / roles section
• components/Footer.tsx — links, socials, newsletter
• public/images/ — placeholder stubs (swap in your own assets)
• package.json, tsconfig.json, tailwind.config.ts, next.config.ts

---

About Images

The pipeline generates CSS gradient fallbacks for all image slots. To add real images:

1. Drop .png or .jpg files into generated/<name>/public/images/
2. Name them to match: hero-bg.png, game-card-1.png, game-card-2.png, studio-bg.png

For AI-generated images, Ideogram, Midjourney, or Adobe Firefly all work well.

---

Roadmap

• CLI generator (Gemini + shadcn + 21st.dev)
• Interactive prompt wizard (npm run create)
• Multi-page support (landing + inner pages)
• Deploy step (npx vercel integration)

---

License

MIT — use freely, build openly.

---

StudioKit is an open-source project by MMKPC Studios. Built by Matt Mitchell, 2026.