A modern YouTube clone powered by Google's Gemini AI, built with React, TypeScript, and Vite. GenTube uses AI to generate realistic video metadata, comments, and related video recommendations, creating a fully functional YouTube-like experience.
- 🎬 AI-Generated Content: Video metadata, thumbnails, and descriptions generated by Gemini AI
- 🔍 Smart Search: Category-based browsing and search functionality
- 💬 Dynamic Comments: AI-generated realistic comment sections
- 📱 Responsive Design: Fully responsive UI that works on all devices
- 🎯 Related Videos: Intelligent video recommendations based on current content
- 🎨 Modern UI: Clean, YouTube-inspired interface with Tailwind CSS
- ⚡ Fast Performance: Built with Vite for lightning-fast development and builds
- Frontend Framework: React 19.2.0
- Language: TypeScript 5.8.2
- Build Tool: Vite 6.2.0
- Routing: React Router DOM 7.9.6
- AI Integration: Google Generative AI (Gemini 2.5 Flash)
- Icons: Lucide React
- Charts: Recharts 3.4.1
Before you begin, ensure you have the following installed:
- Node.js (v18 or higher)
- npm or yarn
- A Google AI Studio API key (Get one here)
-
Clone the repository
git clone <your-repo-url> cd gentube
-
Install dependencies
npm install
-
Set up environment variables
Create a
.envfile in the root directory:API_KEY=your_google_ai_studio_api_key_here
-
Start the development server
npm run dev
-
Open your browser
Navigate to
http://localhost:5173(or the port shown in your terminal)
npm run buildThe production-ready files will be in the dist directory.
Browse AI-generated videos on the homepage, organized by categories like Tech, Gaming, Music, and more.
Click on category pills to filter videos by topic, or use the search bar to find specific content.
Click any video to watch it (currently shows a placeholder). View AI-generated comments and related video recommendations.
Use the "Create Video" button to generate videos using Google's Veo AI (requires additional setup).
gentube/
├── components/ # React components
│ ├── CategoryPills.tsx
│ ├── CommentSection.tsx
│ ├── CompactVideoCard.tsx
│ ├── CreateVideoModal.tsx
│ ├── Header.tsx
│ ├── Layout.tsx
│ ├── Sidebar.tsx
│ ├── VideoCard.tsx
│ ├── VideoGrid.tsx
│ └── VideoPlayer.tsx
├── services/ # API and AI services
│ └── geminiService.ts
├── App.tsx # Main application component
├── types.ts # TypeScript type definitions
├── constants.ts # Mock data and constants
└── index.tsx # Application entry point
- Layout: Main application layout with sidebar and header
- VideoGrid: Displays videos in a responsive grid
- VideoPlayer: Full video player page with comments and recommendations
- CategoryPills: Horizontal scrolling category selector
- CommentSection: AI-generated comments display
- CreateVideoModal: Interface for video generation with Veo
GenTube uses Google's Gemini AI for:
- Generating video metadata (titles, descriptions, views, etc.)
- Creating realistic comment sections
- Suggesting related videos
- Potentially generating videos via Veo (Google's video generation model)
You can customize the categories by modifying the category list in the CategoryPills component. The AI will automatically generate relevant content based on your custom categories.
Issue: API key not working
- Ensure your
.envfile is properly configured - Check that your API key is valid in Google AI Studio
- Make sure you've enabled the Gemini API
Issue: Videos not loading
- Check browser console for errors
- Verify your internet connection
- Ensure the Gemini API is accessible in your region
This project is open source and available under the MIT License.
- Google Gemini AI for content generation
- React team for the amazing framework
- Vite for blazing fast build tooling
- The open-source community
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Note: This is a demonstration project showcasing AI integration with modern web technologies. Video playback uses placeholder content unless actual video URLs are provided.