YouSummarizer is a full-stack AI-powered web application that allows users to summarize YouTube videos, chat with the video, explore auto-generated chapters, and take rich-text notes—all in a sleek, responsive UI.
This project combines RAG (Retrieval-Augmented Generation) using LangChain, Faiss, and LLMs via a Python Flask microservice with a MERN-based application frontend.
Note: This README provides a comprehensive guide to understanding, setting up, and running the project locally.
- 🔍 AI-Powered Summaries: Generate concise summaries from lengthy YouTube video transcripts using advanced LLM pipelines.
- 💬 Chat with Video: Engage in a conversation with the video's content through a RAG-powered semantic search backend.
- 📄 Interactive Transcript: View the full transcript with auto-scroll syncing and click-to-seek video functionality.
- 🧩 Automatic Chapter Generation: Quickly navigate through video topics with auto-generated, timestamped chapters.
- ✍️ Rich Text Note Editor: Take and format notes directly within the app, with persistent storage for each user.
- 🔐 Secure Authentication: Features secure Google Sign-In using OAuth 2.0 and JWT for session management.
- 🌈 Dynamic & Animated UI: A modern, user-friendly interface built with Tailwind CSS, Shadcn UI, and GSAP animations.
Click the thumbnail above to watch the demo of YouSummarizer.
The core AI functionality is powered by a Retrieval-Augmented Generation (RAG) pipeline that seamlessly integrates multiple components:
- 📜 Transcript Loader: Fetches the video transcript using the
YouTranscriptAPI. - ✂️ Text Splitter: Divides the full transcript into smaller, manageable chunks for processing.
- 🧠 Embedding & Storage: Creates vector embeddings for each chunk and stores them in a Faiss vector store for efficient similarity search.
- 🔗 LangChain Orchestration: Manages the flow of data, retrieves relevant chunks based on user queries, and formats prompts for the LLM.
- 🤖 Generation: The LLM (Gemini) generates summaries, chat responses, or chapters based on the retrieved context.
- Flask API: A Python-based microservice that exposes the RAG pipeline's functionalities via RESTful API endpoints.
- React (Vite)
- TypeScript
- Tailwind CSS
- Shadcn UI
- GSAP (for animations)
react-youtube
- Node.js
- Express.js
- MongoDB + Mongoose
- JWT (JSON Web Tokens) for Authentication
- Google OAuth 2.0
- Python + Flask
- LangChain
- Faiss (Vector Store)
- Gemini API
- YouTranscript API
Follow these steps to set up and run the project on your local machine.
- Node.js (v18 or later)
- Python (v3.9 or later)
- MongoDB account (for connection URI)
- Google Cloud Console Project (for OAuth and API keys)
git clone https://github.com/your-username/yousummarizer.git
cd yousummarizerYou will need to create .env files in the frontend, backend, and services directories.
VITE_BACKEND_URI="http://localhost:5000"PORT=5000
MONGO_URI="your_mongodb_connection_string_here"
ACCESS_TOKEN_SECRET="your_strong_jwt_secret_here"
FLASK_URI="http://localhost:8080"
GOOGLE_CLIENT_ID="your_google_client_id.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="your_google_client_secret"GOOGLE_API_KEY="your_google_api_key_for_gemini_or_other_services"Run each component (backend, frontend, services) in a separate terminal.
cd backend
npm install
npm run devThe backend server will start on
http://localhost:5000.
cd services
python -m venv venv
# On macOS/Linux:
source venv/bin/activate
# On Windows:
# venv\Scripts\activate
pip install -r requirements.txt
python app.pyThe Flask service will start on
http://localhost:8080.
cd frontend
npm install
npm run devThe application will be accessible at http://localhost:5173.