How nishant-838/youtube-chatbot-extension works
This is a YouTube video Q&A browser extension backed by a FastAPI service. A user asks a question in the extension; the service fetches the video’s English transcript, splits and indexes it, retrieves relevant context, and generates an answer constrained to that transcript. The extension displays the returned answer. The sampled source supports this runtime flow; integrations and stages below reflect the implementation in backend/chatbot.py.
Main entry points: chatbot.py Question handler · content.js Question sidebar · app.py Ask endpoint
Components 15
Browser extension
- Question sidebar
extension/content.js
Backend API
- Ask endpoint
backend/app.py
Transcript indexing
- Question handler
backend/chatbot.py - Transcript API
- Transcript splitter
backend/chatbot.py - FAISS index
backend/chatbot.py - Embedding model
backend/chatbot.py
RAG answering
- Similarity retriever
backend/chatbot.py - RAG chain
backend/chatbot.py - Transcript prompt
backend/chatbot.py - Chat model
backend/chatbot.py - Answer parser
backend/chatbot.py
Other components
- User
- YouTube page
- Hugging Face endpoint
Connections 21
- User → Question sidebar: asks question
- Question sidebar → YouTube page: reads current URL
- Question sidebar → Ask endpoint: posts question and URL
- Ask endpoint → Question handler: calls
- Question handler → Transcript API: fetches transcript
- Question handler → Transcript splitter: splits transcript
- Question handler → FAISS index: creates index
- Transcript splitter → FAISS index: provides chunks
- FAISS index → Embedding model: embeds chunks
- Question handler → Similarity retriever: creates retriever
- Similarity retriever → FAISS index: searches index
- Question handler → RAG chain: builds and invokes
- RAG chain → Similarity retriever: retrieves context
- RAG chain → Transcript prompt: formats inputs
- RAG chain → Chat model: generates answer
- Chat model → Hugging Face endpoint: requests generation
- RAG chain → Answer parser: parses output
- Answer parser → RAG chain: returns answer
- Question handler → Ask endpoint: returns answer
- Ask endpoint → Question sidebar: responds with answer
- Question sidebar → User: displays answer