YouSkipSmart - AI-Powered Video Content Extraction

Transform hours of YouTube content into minutes of essential insights

Skip the filler, get the important content with AI-powered timestamps and smart summarization.

---

🎯 Purpose

YouSkipSmart revolutionizes how you consume YouTube content by leveraging AI to extract only the most valuable moments from videos. Instead of watching entire videos, you get:

• Precise timestamps for important segments
• AI-generated summaries of key content
• Priority-based organization (High, Medium, Low importance)
• Interactive video player with seamless navigation
• Time-efficient content consumption

Perfect for educational content, tutorials, lectures, podcasts, and long-form videos where you need to quickly identify and access the most relevant information.

✨ Features

🤖 Smart AI Analysis

• Google Gemini AI integration for intelligent content analysis
• Automatic transcript extraction from YouTube videos
• Context-aware summarization that understands video content
• Intelligent chunking for videos up to 3 hours long

⏱️ Precise Time Navigation

• Exact timestamps for each important segment
• Seamless video integration with YouTube player
• Click-to-jump functionality for instant navigation
• Visual progress tracking for current segment

📊 Content Organization

• Priority-based categorization (High/Medium/Low importance)
• Segment duration tracking for time management
• Statistics overview with content breakdown
• Professional, readable interface

🎨 Modern User Experience

• Clean, professional design with dark/light mode support
• Responsive layout for all device sizes
• Smooth animations and intuitive interactions
• Accessibility-focused design patterns

🚀 How It Works

1. Extract Transcript: Automatically retrieves YouTube video transcripts
2. AI Analysis: Google Gemini AI analyzes content for key moments
3. Smart Segmentation: Breaks content into logical, important segments
4. Priority Assignment: Assigns importance levels based on content value
5. Interactive Display: Presents results with integrated video player

Technical Flow

YouTube URL → Transcript Extraction → AI Processing → Segment Analysis → Interactive UI

🛠️ Technology Stack

• Frontend: Next.js 15.3.3 with React 19
• Styling: Tailwind CSS 4.0 with custom components
• AI Integration: Google Generative AI (Gemini)
• Video Player: React YouTube component
• Transcript: YouTube Transcript API
• Icons: Lucide React
• TypeScript: Full type safety

📦 Installation

Prerequisites

• Node.js 18+ installed
• Google Generative AI API key
• Git

Step 1: Clone the Repository

git clone https://github.com/kolinabir/youskipsmart-app.git
cd youskipsmart-app

Step 2: Install Dependencies

npm install
# or
yarn install
# or
pnpm install

Step 3: Environment Setup

1. Copy the environment example file:

copy .env.example .env.local

2. Add your Google Generative AI API key:

GOOGLE_GENERATIVE_AI_API_KEY=your_api_key_here

Getting Google AI API Key:

1. Visit Google AI Studio
2. Sign in with your Google account
3. Create a new API key
4. Copy the key to your .env.local file

Step 4: Run Development Server

npm run dev
# or
yarn dev
# or
pnpm dev

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

🔧 Configuration

Environment Variables

Variable	Description	Required
GOOGLE_GENERATIVE_AI_API_KEY	Google Gemini AI API key for content analysis	Yes

Customization Options

• Maximum video length: 3 hours (configurable in code)
• Summary styles: Detailed, concise, bullet points
• Target summary length: Based on original video duration
• Chunk processing: 15-minute segments for optimal AI analysis

📋 Usage

1. Enter YouTube URL: Paste any valid YouTube video URL
2. Configure Options: Choose summary style and preferences
3. Analyze: Click "Analyze Video" to start processing
4. Navigate: Use generated segments to jump to important parts
5. Review: Read AI-generated summaries for each segment

Supported Video Types

• Educational content
• Tutorials and how-to videos
• Lectures and presentations
• Podcasts and interviews
• Documentation videos
• Conference talks

🏗️ Project Structure

youtubesum/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── summarize/       # AI summarization endpoint
│   │   │   └── transcript/      # Transcript extraction endpoint
│   │   ├── globals.css          # Global styles
│   │   ├── layout.tsx           # Root layout component
│   │   └── page.tsx             # Main application page
│   ├── components/
│   │   ├── SegmentsList.tsx     # Key segments display
│   │   ├── SummaryOptions.tsx   # Configuration options
│   │   └── VideoPlayer.tsx      # Integrated YouTube player
│   └── lib/
│       ├── types.ts             # TypeScript type definitions
│       └── utils.ts             # Utility functions
├── public/                      # Static assets
├── .env.example                 # Environment variables template
├── package.json                 # Dependencies and scripts
├── tailwind.config.js           # Tailwind CSS configuration
└── tsconfig.json               # TypeScript configuration

🔌 API Endpoints

POST /api/transcript

Extracts transcript from YouTube video.

Request:

{
  "videoId": "dQw4w9WgXcQ"
}

Response:

{
  "transcript": [
    {
      "text": "Video content text",
      "start": 0,
      "duration": 5.5
    }
  ]
}

POST /api/summarize

Generates AI-powered summary with segments.

Request:

{
  "videoId": "dQw4w9WgXcQ",
  "transcript": [...],
  "options": {
    "style": "detailed",
    "targetLength": 15,
    "includeTimestamps": true
  }
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development Guidelines

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

Code Standards

• Use TypeScript for all new code
• Follow existing code style and formatting
• Add appropriate type definitions
• Test thoroughly before submitting

📝 License

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

🔗 Links

• GitHub Repository: https://github.com/kolinabir/youskipsmart-app
• Google AI Studio: https://aistudio.google.com/
• Next.js Documentation: https://nextjs.org/docs

🙏 Acknowledgments

• Google Generative AI for powerful content analysis
• YouTube for transcript accessibility
• Next.js team for the excellent framework
• Open source community for various dependencies

---

Made with ❤️ for efficient content consumption

If you find this project helpful, please consider giving it a ⭐ on GitHub!