YouTube Shorts Clipper 🎬

AI-powered YouTube Shorts creation tool built with Next.js 15. Automatically extract, edit, and upload 9:16 vertical clips with captions, hooks, and AI-generated metadata.

Features

• 🎥 YouTube Video Download - Download any YouTube video using ytdl-core
• ✂️ Smart Clipping - Extract clips with custom length and timestamps
• 📐 9:16 Conversion - Automatic vertical format conversion for Shorts
• 💬 Auto Captions - AI-powered caption generation using Whisper
• 🤖 AI Metadata - Generate hooks, titles, tags, and descriptions with Gemini AI
• 📤 Auto Upload - Direct upload to YouTube Shorts
• 🔐 OAuth2 Authentication - Secure YouTube account connection
• 📊 Upload History - Track all your generated clips

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS + Radix UI
• Database: PostgreSQL with Drizzle ORM (Neon)
• Video Processing: ytdl-core + fluent-ffmpeg
• AI Services:
  • Google Gemini 2.0 (metadata generation)
  • OpenAI Whisper (caption extraction)
• Authentication: NextAuth v5 with YouTube OAuth2
• YouTube API: googleapis (Data API v3)

Prerequisites

• Node.js 18.17+
• FFmpeg installed on your system
• PostgreSQL database (Neon recommended)
• API Keys:
  • Google Cloud (YouTube Data API + OAuth2)
  • Google AI Studio (Gemini API)
  • OpenAI (Whisper API)

Installation

# Clone the repository
git clone https://github.com/EslamSad3/yt-shorts-clipper.git
cd yt-shorts-clipper

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Edit .env with your API keys

# Run database migrations
npm run db:push

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

Configuration

1. YouTube API Setup

1. Go to Google Cloud Console
2. Create a new project
3. Enable YouTube Data API v3
4. Create OAuth 2.0 credentials
5. Add authorized redirect URI: http://localhost:3000/api/auth/callback/youtube
6. Copy Client ID and Client Secret to .env

2. Gemini AI Setup

1. Visit Google AI Studio
2. Generate API key
3. Add to .env as GEMINI_API_KEY

3. OpenAI Setup

1. Get API key from OpenAI Platform
2. Add to .env as OPENAI_API_KEY

4. Database Setup

1. Create a Neon PostgreSQL database
2. Copy connection string to .env as DATABASE_URL
3. Run migrations: npm run db:push

Usage

1. Connect YouTube Account: Sign in with your YouTube account via OAuth2
2. Paste Video URL: Enter any YouTube video link
3. Select Clip Duration: Choose length (15s, 30s, 60s, or custom)
4. Customize Settings:
   • Enable/disable captions
   • Choose caption style
   • Set clipping position
5. Generate AI Metadata: Let Gemini create hooks, titles, and tags
6. Preview & Edit: Review the clip before uploading
7. Upload to YouTube: Automatically publish as a Short

Project Structure

├── app/
│   ├── api/              # API routes
│   │   ├── auth/         # YouTube OAuth
│   │   ├── video/        # Video processing
│   │   ├── captions/     # Caption generation
│   │   ├── ai/           # Gemini AI integration
│   │   └── upload/       # YouTube upload
│   ├── dashboard/        # Main app UI
│   └── layout.tsx
├── components/
│   ├── ui/               # Radix UI components
│   ├── video-editor/     # Clipping interface
│   └── upload-queue/     # Upload management
├── lib/
│   ├── db/               # Database schema
│   ├── youtube.ts        # YouTube API client
│   ├── gemini.ts         # Gemini AI client
│   └── ffmpeg.ts         # Video processing utils
└── types/                # TypeScript types

API Endpoints

• POST /api/video/download - Download YouTube video
• POST /api/video/clip - Create 9:16 clip
• POST /api/captions/generate - Extract captions with Whisper
• POST /api/ai/metadata - Generate titles/tags with Gemini
• POST /api/upload/youtube - Upload Short to YouTube
• GET /api/auth/status - Check OAuth status

Environment Variables

See .env.example for all required environment variables.

Deployment

Vercel (Recommended for Frontend)

vercel deploy

Backend Processing

For video processing, consider:

• Render - Full-stack hosting with persistent storage
• Railway - Easy deployment with FFmpeg support
• AWS Lambda - Serverless with FFmpeg layer

Note: Video processing requires FFmpeg. Most serverless platforms need custom layers.

Roadmap

• Batch processing multiple clips
• Advanced caption styling (fonts, colors, animations)
• Multi-language caption support
• TikTok & Instagram Reels upload
• AI-powered clip detection (highlight extraction)
• Analytics dashboard
• Whop marketplace integration

License

MIT License - See LICENSE for details

Contributing

Pull requests are welcome! For major changes, please open an issue first.

Support

For issues and questions:

• GitHub Issues: Report a bug
• Email: eslamcontact3@gmail.com

---

Built with ❤️ for content creators