🎬 ClipForge

MCP-Powered Short-Form Video Repurposing Studio for Tech Coaches & Job-Search Creators

Transform your long-form content into viral clips with AI-powered highlight detection, branded captions, and automated social media scheduling.

✨ Features

🎯 Core Workflow

• YouTube URL & File Upload - Seamless video ingestion
• AI Highlight Detection - Automatically identify viral moments
• Multi-Format Rendering - Generate 9:16, 1:1, and 16:9 clips
• Brand Kit Integration - Consistent visual identity across clips
• Thumbnail Generation - Multiple variants with custom headlines
• Review & Approval - Quality control before publishing
• Social Scheduling - One-click LinkedIn posting with templates

🎨 Modern UI/UX

• Glassmorphic Design - Pointer AI-inspired interface
• Dark Mode - Electric violet & cyber yellow color scheme
• Responsive Layout - Mobile-first design approach
• Accessibility - WCAG compliant with 4.5:1 contrast ratios
• Micro-animations - Smooth transitions and hover effects

🔌 MCP Integrations

• Supadata - YouTube metadata & transcript extraction
• VideoDB Director - AI-powered video editing & rendering
• Orshot - Automated thumbnail generation
• LiGo - LinkedIn scheduling with caption templates

🚀 Quick Start

# Clone the repository
git clone https://github.com/yourusername/clipforge.git
cd clipforge

# Install dependencies
npm install

# Start development server
npm run dev

# Open in browser
open http://localhost:3000

📁 Project Structure

clipforge/
├── apps/
│   └── web/              # Next.js web application
│       ├── src/
│       │   ├── app/      # App router pages
│       │   └── components/
├── packages/
│   ├── ui/               # Shared UI components
│   ├── core/             # Core types and utilities
│   └── mcp-clients/      # MCP integration clients
├── e2e/                  # Cypress end-to-end tests
└── docs/                 # Documentation

🛠️ Tech Stack

Frontend

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• Framer Motion - Smooth animations
• Zustand - State management

Backend Services (MCP)

• Supadata - Video metadata extraction
• VideoDB Director - AI video processing
• Orshot - Thumbnail generation
• LiGo - Social media scheduling

Testing

• Cypress - End-to-end testing
• Jest - Unit testing
• React Testing Library - Component testing

Development

• Turbo - Monorepo build system
• ESLint - Code linting
• Prettier - Code formatting

🎨 Design System

Colors

• Primary: Electric Violet (#8B5CF6)
• Accent: Cyber Yellow (#FBBF24)
• Background: Ultra Dark (#060608)
• Cards: Glassmorphic with backdrop blur

Typography

• Headings: Inter Bold with gradient text
• Body: Inter Regular
• Code: JetBrains Mono

Animations

• Hover Effects: Scale, glow, gradient shifts
• Loading States: Shimmer skeletons
• Status Indicators: Pulsing dots and progress bars

📊 Key Pages

Dashboard (/)

• Real-time KPIs (clips generated, watch time, AI accuracy)
• Recent projects with performance metrics
• Render queue with live progress
• Quick action shortcuts

Upload (/upload)

• Dual upload methods (YouTube URL / File)
• Progress tracking and metadata extraction
• Chapter detection and preview
• Quality validation

Highlights (/highlights)

• AI-detected moment scoring
• Interactive waveform visualization
• Karaoke transcript overlay
• Bulk selection tools

🧪 Testing

End-to-End Tests

# Run Cypress tests
npm run e2e

# Open Cypress GUI
npm run e2e:open

Key Test Scenarios

• YouTube URL ingestion workflow
• File upload and processing
• Highlight selection and bulk operations
• Brand kit configuration
• Social media scheduling

🚀 Deployment

Development

npm run dev

Production Build

npm run build
npm run start

Environment Variables

# MCP API Keys
SUPADATA_API_KEY=your_key_here
VIDEODB_API_KEY=your_key_here
ORSHOT_API_KEY=your_key_here
LIGO_API_KEY=your_key_here

# Database
DATABASE_URL=your_database_url

📈 Roadmap

Phase 1 ✅

• Core UI components and design system
• Dashboard with mock data
• Upload workflow (YouTube URL + File)
• Highlights selection interface
• MCP client integrations

Phase 2 🚧

• Brand kit management
• Render pipeline with progress tracking
• Thumbnail generation and editing
• Review and approval workflow

Phase 3 📋

• Social media scheduling
• Analytics and performance tracking
• Team collaboration features
• Advanced AI configuration

🤝 Contributing

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

Development Guidelines

• Follow the existing code style
• Write tests for new features
• Update documentation as needed
• Ensure accessibility compliance

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Pointer AI - Design inspiration
• MCP Ecosystem - External service integrations
• Next.js Team - Amazing React framework
• Tailwind CSS - Utility-first CSS framework

---

Built with ❤️ for content creators who want to scale their impact through AI-powered video repurposing.