# nishant-838/youtube-chatbot-extension architecture

> Architecture diagram of the GitHub repository nishant-838/youtube-chatbot-extension, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nishant-838/youtube-chatbot-extension
- Repository: https://github.com/nishant-838/youtube-chatbot-extension

## Overview

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: [`backend/chatbot.py`](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py) (Question handler), [`extension/content.js`](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/extension/content.js) (Question sidebar), [`backend/app.py`](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/app.py) (Ask endpoint)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_extension["Browser extension"]
  node_sidebar["Question sidebar<br/>[content.js]"]
end

subgraph group_api["Backend API"]
  node_api_service["Ask endpoint<br/>[app.py]"]
end

subgraph group_transcript["Transcript indexing"]
  node_qa_handler["Question handler<br/>[chatbot.py]"]
  node_transcript_api["Transcript API"]
  node_splitter["Transcript splitter<br/>[chatbot.py]"]
  node_vector_store[("FAISS index<br/>[chatbot.py]")]
  node_embeddings["Embedding model<br/>[chatbot.py]"]
end

subgraph group_answering["RAG answering"]
  node_retriever["Similarity retriever<br/>[chatbot.py]"]
  node_rag_chain["RAG chain<br/>[chatbot.py]"]
  node_prompt["Transcript prompt<br/>[chatbot.py]"]
  node_chat_model["Chat model<br/>[chatbot.py]"]
  node_parser["Answer parser<br/>[chatbot.py]"]
end

node_user(("User"))
node_video_page["YouTube page"]
node_hf_endpoint["Hugging Face endpoint"]

node_user -->|"asks question"| node_sidebar
node_sidebar -->|"reads current URL"| node_video_page
node_sidebar -->|"posts question and URL"| node_api_service
node_api_service -->|"calls"| node_qa_handler
node_qa_handler -->|"fetches transcript"| node_transcript_api
node_qa_handler -->|"splits transcript"| node_splitter
node_qa_handler -->|"creates index"| node_vector_store
node_splitter -->|"provides chunks"| node_vector_store
node_vector_store -->|"embeds chunks"| node_embeddings
node_qa_handler -->|"creates retriever"| node_retriever
node_retriever -->|"searches index"| node_vector_store
node_qa_handler -->|"builds and invokes"| node_rag_chain
node_rag_chain -->|"retrieves context"| node_retriever
node_rag_chain -->|"formats inputs"| node_prompt
node_rag_chain -->|"generates answer"| node_chat_model
node_chat_model -->|"requests generation"| node_hf_endpoint
node_rag_chain -->|"parses output"| node_parser
node_parser -->|"returns answer"| node_rag_chain
node_qa_handler -->|"returns answer"| node_api_service
node_api_service -->|"responds with answer"| node_sidebar
node_sidebar -->|"displays answer"| node_user

click node_sidebar "https://github.com/nishant-838/youtube-chatbot-extension/blob/main/extension/content.js"
click node_api_service "https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/app.py"
click node_qa_handler "https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py"
click node_splitter "https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py"
click node_vector_store "https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py"
click node_embeddings "https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py"
click node_retriever "https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py"
click node_rag_chain "https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py"
click node_prompt "https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py"
click node_chat_model "https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py"
click node_parser "https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_sidebar,node_user toneBlue
class node_api_service toneAmber
class node_qa_handler,node_transcript_api,node_splitter,node_vector_store,node_embeddings toneMint
class node_retriever,node_rag_chain,node_prompt,node_chat_model,node_parser toneRose
class node_video_page,node_hf_endpoint toneIndigo
```

## Components

### Browser extension

- [Question sidebar](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/extension/content.js): `extension/content.js`

### Backend API

- [Ask endpoint](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/app.py): `backend/app.py`

### Transcript indexing

- [Question handler](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py): `backend/chatbot.py`
- **Transcript API**
- [Transcript splitter](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py): `backend/chatbot.py`
- [FAISS index](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py): `backend/chatbot.py`
- [Embedding model](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py): `backend/chatbot.py`

### RAG answering

- [Similarity retriever](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py): `backend/chatbot.py`
- [RAG chain](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py): `backend/chatbot.py`
- [Transcript prompt](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py): `backend/chatbot.py`
- [Chat model](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py): `backend/chatbot.py`
- [Answer parser](https://github.com/nishant-838/youtube-chatbot-extension/blob/main/backend/chatbot.py): `backend/chatbot.py`

### Other components

- **User**
- **YouTube page**
- **Hugging Face endpoint**

## Connections

- 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