Live Demo: https://vizora.kushagramathur.com/
Vizora is an intelligent thumbnail generation platform that leverages cutting-edge AI models to create stunning, click-worthy thumbnails for content creators. Built with Next.js 15 and powered by Google's Gemini via OpenRouter.
- AI Thumbnail Generation - Generate professional thumbnails with custom prompts
- Intelligent Image Editing - Edit and refine thumbnails with conversational AI
- Multi-Format Support - 10 aspect ratios including 16:9 (YouTube), 9:16 (Shorts), 1:1 (Instagram), and more
- Real-time Chat Interface - Iterative editing through natural language conversations
- Fullscreen Preview - View thumbnails in immersive fullscreen mode
- Batch Processing - Upload reference images for context-aware generation
- OpenRouter Integration - Cost-effective AI routing with automatic fallback
- Gemini 2.5 Flash Image - State-of-the-art image generation at $0.30/M input tokens
- Smart Aspect Ratio Control - Platform-optimized outputs (YouTube, Instagram, TikTok)
- Credit System - Flexible usage tracking with FREE, PLUS, and PRO tiers
- Secure Authentication - Better Auth integration with email/Google/GitHub
- Payment Processing - DodoPayments integration for subscriptions
- Rate Limiting - Arcjet-powered bot detection and request throttling
- Next.js 15 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS 4 - Utility-first styling
- Radix UI - Accessible component primitives
- Framer Motion - Smooth animations
- Vercel AI SDK - AI chat interface
- OpenRouter - Multi-provider AI routing
- Google Gemini 2.5 Flash Image - Image generation model
- OpenAI GPT-4o - Chat orchestration
- Prisma - Type-safe database ORM
- PostgreSQL (Neon) - Serverless database
- Vercel Blob - Image storage
- Better Auth - Authentication
- DodoPayments - Payment processing
- Arcjet - Security & rate limiting
- Vercel Analytics - Usage tracking
- Resend - Email delivery
- Node.js 20+
- PostgreSQL database (or Neon account)
- OpenRouter API key
- OpenAI API key
- Clone the repository
git clone <repository-url>
cd thumbnail-generator- Install dependencies
npm install- Set up environment variables
Create a
.envfile with the following:
# Database
DATABASE_URL="postgresql://..."
# Authentication
BETTER_AUTH_URL="http://localhost:3000"
BETTER_AUTH_SECRET="your-secret"
# OAuth
GOOGLE_CLIENT_ID="..."
GOOGLE_CLIENT_SECRET="..."
GITHUB_CLIENT_ID="..."
GITHUB_CLIENT_SECRET="..."
# AI Services
OPENROUTER_API_KEY="sk-or-v1-..."
OPENAI_API_KEY="sk-proj-..."
# Storage
BLOB_READ_WRITE_TOKEN="vercel_blob_rw_..."
# Payments
DODO_PAYMENTS_API_KEY="..."
DODO_WEBHOOK_SECRET="..."
# Email
RESEND_API_KEY="..."
RESEND_SENDER_EMAIL="..."
# Security
ARCJET_KEY="..."
CRON_SECRET="..."- Set up the database
npx prisma generate
npx prisma db push- Run development server
npm run devOpen http://localhost:3000 to see the app.
src/
├── app/
│ ├── (app)/ # Authenticated routes
│ │ ├── billing/ # Subscription management
│ │ ├── chat/ # AI chat interface
│ │ └── credit-logs/ # Usage history
│ ├── (auth)/ # Auth pages (login, signup)
│ ├── api/ # API routes
│ │ ├── chat/ # Chat/editing endpoint
│ │ ├── generate/ # Image generation endpoint
│ │ └── webhooks/ # Payment webhooks
│ └── new/ # Thumbnail creation page
├── components/
│ ├── chat/ # Chat UI components
│ └── ui/ # Reusable UI components
├── actions/ # Server actions
├── dal/ # Data access layer
└── lib/ # Utilities & configs
- Uses OpenRouter's Gemini 2.5 Flash Image model
- Supports 10 aspect ratios:
1:1,16:9,9:16,4:3,3:4,3:2,2:3,5:4,4:5,21:9 - Platform-specific optimization (YouTube, Instagram, TikTok)
- ~1024px native resolution, expandable to 1024x1792
- GPT-4o orchestrates editing requests
- Gemini generates edited images
- Preserves aspect ratio by default
- Supports iterative refinements
| Tier | Credits/Month | Edit Access | Price |
|---|---|---|---|
| FREE | 10 | ❌ | $0 |
| PLUS | 50 | ✅ | $9.99 |
| PRO | 200 | ✅ | $24.99 |
- Image Generation: 1 credit per image (~$0.039)
- Image Editing: 1 credit per edit
- Token Costs: $0.30/M input, $2.50/M output
Generate a new thumbnail from scratch.
Request:
{
title: string;
videoType?: string;
mood?: string;
aspectRatio: "16:9" | "9:16" | "1:1" | ...;
imagePosition?: "center" | "left" | "right" | ...;
prompt: string;
uploadedImages?: File[];
}Edit existing thumbnails via conversational AI.
Request:
{
chatId: string;
messages: UIMessage[];
}- Push to GitHub
- Import project in Vercel
- Add environment variables
- Deploy
Set all .env variables in Vercel dashboard.
npx prisma migrate deploynpm run dev- Start development server with Turbopacknpm run build- Build for productionnpm run start- Start production servernpm run lint- Run Biome linternpm run format- Format code with Biomenpm run check- Lint and fix issues
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is private and proprietary.
Built with:
Live Application: vizora.kushagramathur.com
Made with ❤️ by Kushagra Mathur