Krakatoa
A premium AI-powered platform for content creators. Krakatoa hosts multiple AI tools under one monorepo behind a modern, high-conversion landing page. The flagship tool is the Reels Creator (a subtool of the Video studio) — an autonomous pipeline that turns a single theme into a faceless vertical video (Reels/TikTok) with dynamic, burned-in styled captions, across the Seedance and Veo engines.
Features
- Reels Creator (
/tools/video → "Reels Creator") — one text-to-video subtool over two engines (Seedance + Veo):
- Two-step LLM cinematography: generates a consistent visual
style_anchor and per-scene prompts/narration.
- Parallel video + voiceover generation across all scenes (Veo single mode uses the model's native audio).
- Word-level Whisper transcription burned in as styled
.ass captions.
- Cloud FFmpeg stitching via Rendi (no local ffmpeg/Vercel timeouts).
- Final MP4 stored in Supabase Storage and returned to the client.
- Live caption styler with WYSIWYG preview (font, size, primary/highlight/outline colors, vertical margin).
- Premium dark-mode UI with glassmorphism, built on Tailwind CSS.
- Platform foundation & credits — jobs, assets, projects, scheduling, and a ledger-backed credit system. Regular users start at zero and may claim the configured welcome offer; internal admins retain the 500-credit test seed. Charged generation spends before provider work and follows the provider-commit/recovery refund policy in
CLAUDE.md.
Tech Stack
- Framework: Next.js 15.5 (App Router) + React 19 + Node.js 24+ + TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- Storage / DB: Supabase
- AI provider: Replicate
- LLM:
openai/gpt-4o-mini
- Video:
bytedance/seedance-2.0-fast
- TTS:
minimax/speech-02-turbo
- ASR:
vaibhavs10/incredibly-fast-whisper
- Video processing: Rendi (cloud FFmpeg)
Getting Started
1. Install dependencies
npm install
2. Configure environment variables
Create a .env.local file in the project root:
REPLICATE_API_TOKEN=your_replicate_token
RENDI_API_KEY=your_rendi_api_key
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
SUPABASE_STORAGE_BUCKET=krakatoa
# DOKU credit checkout (payments)
DOKU_CLIENT_ID=your_doku_client_id
DOKU_SECRET_KEY=your_doku_secret_key
DOKU_ENV=sandbox # or "production"
# DOKU_API_BASE= # optional override; defaults by DOKU_ENV
# DOKU_NOTIFICATION_URL= # optional per-request webhook override (same PATH as Back Office)
CRON_SECRET=your_random_cron_secret # required on deployment for GET /api/cron/*
GENERATION_WEBHOOK_SECRET=your_random_webhook_secret # required in production
NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY are intentionally
browser-visible. Never expose SUPABASE_SERVICE_ROLE_KEY or any provider,
payment, OAuth, cron, or webhook secret through a NEXT_PUBLIC_ variable.
DOKU_NOTIFICATION_URL is handy for local development: set it to your public
tunnel URL (e.g. https://<id>.trycloudflare.com/api/payments/doku/webhook) and
every checkout overrides DOKU's Back Office notification URL for that request.
The path must match the Notification URL configured on the payment channel in
the DOKU Back Office (only the domain may differ).
DOKU sends payment notifications to POST /api/payments/doku/webhook — register
this URL (and the success redirect /dashboard/settings?tab=credits) in the DOKU
merchant dashboard. NEXTAUTH_URL is reused to build the absolute callback URLs.
Create one private Supabase Storage bucket (default name: krakatoa, or set
SUPABASE_STORAGE_BUCKET in .env.local). Browser reads use owner-checked
signed URLs. Canonical user media paths begin with {userId}/:
| Path | Feature |
|---|
{userId}/videos/ | Generated videos and temporary video inputs |
{userId}/photos/ | Uploaded and generated images |
{userId}/resumable/{jobId}/ | Temporary pipeline-recovery staging |
3. Apply database migrations
npm run db:setup
This applies every file in supabase/migrations/ in order. Migrations are
idempotent and include the current private-storage, billing, auth, scheduling,
and generation-workflow schema. The local script requires a supported Supabase
Management API token or DATABASE_URL; repository agents use the configured
Supabase MCP deployment workflow described in CLAUDE.md.
4. Run the dev server
npm run dev
Open http://localhost:3000 for the landing page, or http://localhost:3000/tools/video for the Video studio (select "Reels Creator" for the reels pipeline).
Scripts
| Command | Description |
|---|
npm run dev | Start the Next.js dev server |
npm run build | Production build |
npm run start | Run the production build |
npm run lint | Lint the codebase |
npm run ci:checks | Run secretless deployment self-checks, audit, lint, and build |
npm run db:setup | Apply every migration in supabase/migrations/ (idempotent) |
Project Structure
app/
page.tsx # Landing page
tools/video/ # Video studio (Reels Creator + other video subtools)
api/generate-reels/route.ts # Unified Reels Creator pipeline (Seedance + Veo)
api/test-stitch/route.ts # Dev utility for re-running the stitching step
lib/reels-pipeline/ # Shared reels pipeline modules (llm, tts, ass, rendi, storage)
lib/ # Shared utilities (Supabase client, etc.)
public/ # Static assets
Pipeline Overview
The POST /api/generate-reels endpoint runs the full pipeline:
- Style anchor + negative prompt generated by gpt-4o-mini.
- Scene breakdown — exactly
SCENE_COUNT scenes, each with the style anchor appended verbatim. Auto-retries up to 3× on bad JSON or wrong scene count.
- Parallel media generation — Seedance for video, MiniMax for voiceover, all scenes concurrent.
- Sequential Whisper transcription for word-level timestamps.
.ass subtitle file built with per-scene time offsets, uploaded to Supabase.- Rendi FFmpeg — normalizes (fps/scale/SAR), concatenates, merges, and burns subtitles into the final MP4.
- Final video uploaded to Supabase and a public URL returned to the client.
See CLAUDE.md for an in-depth architecture description and the rationale behind specific implementation choices (LLM choice, no reference-video chaining, concat input normalization, etc.).
Documentation
Deployment
Deployable to Vercel out of the box. Make sure to set the environment variables above in your Vercel project settings.
Vercel plan limits (maxDuration)
Vercel's Hobby (free) plan hard-caps every Serverless Function at maxDuration = 300 seconds. If any route declares a higher value the deploy fails at the function-validation step with:
Builder returned invalid maxDuration value for Serverless Function "api/generate-reels".
Serverless Functions must have a maxDuration between 1 and 300 for plan hobby.
Because of this, the heavy generation routes — /api/generate-reels and /api/generate-storyboard-video — are pinned to maxDuration = 300 (look for the Vercel Hobby plan caps comment in each route.ts).
Runtime trade-off: generations that take longer than 5 minutes will be terminated by the function timeout. Upgrading to the Vercel Pro plan raises the ceiling to 800s, at which point these routes can be raised back to 600. Do not set any route above 300 while the project is on the Hobby plan.
