Vizora - AI-Powered Thumbnail Generator

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

1. Clone the repository

git clone <repository-url>
cd thumbnail-generator

2. Install dependencies

npm install

3. Set up environment variables Create a .env file 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="..."

4. Set up the database

npx prisma generate
npx prisma db push

5. Run development server

npm run dev

Open 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

• 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[];
}

1. Push to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy

Set all .env variables in Vercel dashboard.

npx prisma migrate deploy

• npm run dev - Start development server with Turbopack
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run Biome linter
• npm run format - Format code with Biome
• npm run check - Lint and fix issues

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is private and proprietary.

Built with:

• Next.js
• OpenRouter
• Google Gemini
• Vercel AI SDK
• Prisma
• Better Auth

Live Application: vizora.kushagramathur.com

Made with ❤️ by Kushagra Mathur