# ninjacoder98/yt-video-ai architecture

> Architecture diagram of the GitHub repository ninjacoder98/yt-video-ai, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ninjacoder98/yt-video-ai
- Repository: https://github.com/ninjacoder98/yt-video-ai

## Overview

YT Video AI lets a user preview a YouTube video and ask a question, then returns a concise AI-generated answer. The frontend extracts a video ID for its embedded preview and posts the video link and question to the backend. The backend validates the request, tries to obtain a transcript and metadata, and asks Gemini to answer using available context. The README describes this workflow; sampled source shows a frontend request to port 4000 while the backend listens on port 5000, so deployment configuration must reconcile them.

Main entry points: [`backend/server.mjs`](https://github.com/ninjacoder98/yt-video-ai/blob/main/backend/server.mjs) (Ask endpoint), [`frontend/src/App.jsx`](https://github.com/ninjacoder98/yt-video-ai/blob/main/frontend/src/App.jsx) (Video question UI), [`frontend/src/main.jsx`](https://github.com/ninjacoder98/yt-video-ai/blob/main/frontend/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend experience"]
  node_app["Video question UI<br/>[App.jsx]"]
  node_preview["Embedded preview<br/>[App.jsx]"]
  node_entry["React entry<br/>[main.jsx]"]
end

subgraph group_backend["Answer service"]
  node_ask["Ask endpoint<br/>[server.mjs]"]
  node_videoid["Video ID extraction<br/>[server.mjs]"]
  node_synthesis["Prompt and answer<br/>[server.mjs]"]
end

subgraph group_context["Video context"]
  node_transcript["Transcript retrieval<br/>[server.mjs]"]
  node_metadata["Metadata retrieval<br/>[server.mjs]"]
end

subgraph group_integrations["External services"]
  node_youtube_embed["YouTube embed"]
  node_transcript_api["Transcript provider"]
  node_youtube_data["YouTube Data API"]
  node_gemini["Gemini Flash"]
end

node_user(("Video viewer"))

node_entry -->|"renders"| node_app
node_user -->|"enters question"| node_app
node_app -->|"extracts video ID"| node_preview
node_preview -->|"embeds video"| node_youtube_embed
node_app -->|"posts question"| node_ask
node_ask -->|"extracts ID"| node_videoid
node_ask -->|"fetches transcript"| node_transcript
node_transcript -->|"requests transcript"| node_transcript_api
node_ask -->|"fetches metadata"| node_metadata
node_metadata -->|"requests video details"| node_youtube_data
node_ask -->|"builds prompt"| node_synthesis
node_synthesis -->|"generates answer"| node_gemini
node_ask -->|"returns answer"| node_app

click node_app "https://github.com/ninjacoder98/yt-video-ai/blob/main/frontend/src/App.jsx"
click node_preview "https://github.com/ninjacoder98/yt-video-ai/blob/main/frontend/src/App.jsx"
click node_entry "https://github.com/ninjacoder98/yt-video-ai/blob/main/frontend/src/main.jsx"
click node_ask "https://github.com/ninjacoder98/yt-video-ai/blob/main/backend/server.mjs"
click node_videoid "https://github.com/ninjacoder98/yt-video-ai/blob/main/backend/server.mjs"
click node_transcript "https://github.com/ninjacoder98/yt-video-ai/blob/main/backend/server.mjs"
click node_metadata "https://github.com/ninjacoder98/yt-video-ai/blob/main/backend/server.mjs"
click node_synthesis "https://github.com/ninjacoder98/yt-video-ai/blob/main/backend/server.mjs"

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_app,node_preview,node_entry,node_user toneBlue
class node_ask,node_videoid,node_synthesis toneAmber
class node_transcript,node_metadata toneMint
class node_youtube_embed,node_transcript_api,node_youtube_data,node_gemini toneRose
```

## Components

### Frontend experience

- [Video question UI](https://github.com/ninjacoder98/yt-video-ai/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Embedded preview](https://github.com/ninjacoder98/yt-video-ai/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [React entry](https://github.com/ninjacoder98/yt-video-ai/blob/main/frontend/src/main.jsx): `frontend/src/main.jsx`

### Answer service

- [Ask endpoint](https://github.com/ninjacoder98/yt-video-ai/blob/main/backend/server.mjs): `backend/server.mjs`
- [Video ID extraction](https://github.com/ninjacoder98/yt-video-ai/blob/main/backend/server.mjs): `backend/server.mjs`
- [Prompt and answer](https://github.com/ninjacoder98/yt-video-ai/blob/main/backend/server.mjs): `backend/server.mjs`

### Video context

- [Transcript retrieval](https://github.com/ninjacoder98/yt-video-ai/blob/main/backend/server.mjs): `backend/server.mjs`
- [Metadata retrieval](https://github.com/ninjacoder98/yt-video-ai/blob/main/backend/server.mjs): `backend/server.mjs`

### External services

- **YouTube embed**
- **Transcript provider**
- **YouTube Data API**
- **Gemini Flash**

### Other components

- **Video viewer**

## Connections

- React entry → Video question UI: renders (evidence: `frontend/src/main.jsx`)
- Video viewer → Video question UI: enters question (evidence: `frontend/src/App.jsx`)
- Video question UI → Embedded preview: extracts video ID (evidence: `frontend/src/App.jsx`)
- Embedded preview → YouTube embed: embeds video (evidence: `frontend/src/App.jsx`)
- Video question UI → Ask endpoint: posts question (evidence: `frontend/src/App.jsx`)
- Ask endpoint → Video ID extraction: extracts ID (evidence: `backend/server.mjs`)
- Ask endpoint → Transcript retrieval: fetches transcript (evidence: `backend/server.mjs`)
- Transcript retrieval → Transcript provider: requests transcript (evidence: `backend/server.mjs`)
- Ask endpoint → Metadata retrieval: fetches metadata (evidence: `backend/server.mjs`)
- Metadata retrieval → YouTube Data API: requests video details (evidence: `backend/server.mjs`)
- Ask endpoint → Prompt and answer: builds prompt (evidence: `backend/server.mjs`)
- Prompt and answer → Gemini Flash: generates answer (evidence: `backend/server.mjs`)
- Ask endpoint → Video question UI: returns answer (evidence: `frontend/src/App.jsx`)