AI Storyboard Generator

Transform your story ideas into professional cinematic storyboards with AI-generated black and white sketches.

Overview

This is a full-stack Next.js application that uses Google's Gemini AI to generate complete storyboards from user prompts. The application creates 3-5 scene narratives with corresponding cinematic sketches in a charcoal/sketch style.

Features

• AI-Powered Story Generation: Uses Gemini 2.0 Flash for intelligent story structure creation
• Cinematic Image Generation: Creates professional black & white sketches with Gemini 2.0 Flash Preview
• BYOK (Bring Your Own Key): Users can provide their own Gemini API keys for unlimited usage
• Queue Management: Smart processing queue for shared API key users
• Cost Tracking: Transparent cost calculation (~$0.12-0.20 per storyboard)
• Mobile Responsive: Fully optimized for mobile devices
• Dark/Light Theme: Complete theme switching support
• Real-time Updates: Live status updates during generation

Tech Stack

Frontend

• Next.js 15 with React 19
• Tailwind CSS v4 for styling
• Radix UI + shadcn/ui for components
• Clerk for authentication
• Lucide React for icons

Backend

• Convex for real-time database and serverless functions
• Google Gemini AI for text and image generation
• Convex File Storage for image management
• Cron Jobs for automated queue processing

Getting Started

Prerequisites

1. Node.js 18+ or Bun
2. Convex Account - Sign up at convex.dev
3. Clerk Account - Sign up at clerk.com
4. Google AI Studio API Key - Get one here

Installation

1. Clone the repository:

git clone <your-repo-url>
cd storyboard

2. Install dependencies:

bun install
# or
npm install

3. Set up environment variables:

# Create .env.local
NEXT_PUBLIC_CONVEX_URL=your_convex_url
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
GEMINI_API_KEY=your_gemini_api_key

4. Set up Convex:

npx convex dev

5. Configure Clerk:

   • Add your domain to Clerk dashboard
   • Configure sign-in/sign-up settings

6. Run the development server:

bun dev
# or
npm run dev

Open http://localhost:3000 to see the application.

Project Structure

├── src/
│   ├── app/                 # Next.js app directory
│   │   ├── api/            # API routes
│   │   ├── dashboard/      # Dashboard page
│   │   └── page.tsx        # Home page
│   └── components/         # React components
│       ├── ui/             # shadcn/ui components
│       ├── AppLayout.tsx   # Main layout
│       ├── StoryCreator.tsx # Story creation form
│       └── StoryboardViewer.tsx # Storyboard display
├── convex/                 # Convex backend
│   ├── schema.ts          # Database schema
│   ├── storyboards.ts     # Storyboard functions
│   ├── storyboardProcessor.ts # AI processing
│   ├── storyboardWorkflow.ts # Story generation
│   └── crons.ts           # Scheduled jobs
└── public/                # Static assets

Usage

Creating a Storyboard

1. Sign in using Clerk authentication
2. Enter your story prompt (minimum 20 characters)
3. Click "Create Storyboard" to generate story structure
4. Wait for image generation (1-3 minutes for 3-5 scenes)
5. View your completed storyboard with generated images

BYOK (Bring Your Own Key)

1. Go to Settings in the sidebar
2. Add your Gemini API key from Google AI Studio
3. Enable BYOK to use your own quota
4. Enjoy unlimited generations with your own API key

API Costs

• Text Generation: ~$0.025 per storyboard
• Image Generation: ~$0.039 per scene (3-5 scenes typical)
• Total Cost: $0.12-0.20 per complete storyboard

With BYOK, users pay Google directly and avoid shared quota limitations.

Development

Database Schema

The application uses Convex with the following main tables:

• users - User profiles and BYOK settings
• storyboards - Story metadata and status
• scenes - Individual scenes with images
• storyboardQueue - Processing queue management

AI Processing

1. Story Generation: Gemini creates structured story with scenes
2. Queue Management: Stories added to processing queue
3. Image Generation: Each scene gets a cinematic sketch
4. Rate Limiting: 10 RPM for shared key, unlimited for BYOK

Key Components

• StoryCreator - Handles story input and validation
• StoryboardViewer - Displays generated scenes and images
• AppLayout - Responsive layout with sidebar navigation
• BYOKSettings - API key management interface

Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Add environment variables in Vercel dashboard
3. Deploy automatically on push to main branch

Environment Variables for Production

NEXT_PUBLIC_CONVEX_URL=your_production_convex_url
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
GEMINI_API_KEY=your_gemini_api_key

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is private and proprietary.

Support

For issues or questions, please create an issue in the GitHub repository.