How ninjacoder98/yt-video-ai works
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: server.mjs Ask endpoint · App.jsx Video question UI · main.jsx React entry
Components 13
Frontend experience
- Video question UI
frontend/src/App.jsx - Embedded preview
frontend/src/App.jsx - React entry
frontend/src/main.jsx
Answer service
- Ask endpoint
backend/server.mjs - Video ID extraction
backend/server.mjs - Prompt and answer
backend/server.mjs
Video context
- Transcript retrieval
backend/server.mjs - Metadata retrieval
backend/server.mjs
External services
- YouTube embed
- Transcript provider
- YouTube Data API
- Gemini Flash
Other components
- Video viewer
Connections 13
- React entry → Video question UI: renders
frontend/src/main.jsx - Video viewer → Video question UI: enters question
frontend/src/App.jsx - Video question UI → Embedded preview: extracts video ID
frontend/src/App.jsx - Embedded preview → YouTube embed: embeds video
frontend/src/App.jsx - Video question UI → Ask endpoint: posts question
frontend/src/App.jsx - Ask endpoint → Video ID extraction: extracts ID
backend/server.mjs - Ask endpoint → Transcript retrieval: fetches transcript
backend/server.mjs - Transcript retrieval → Transcript provider: requests transcript
backend/server.mjs - Ask endpoint → Metadata retrieval: fetches metadata
backend/server.mjs - Metadata retrieval → YouTube Data API: requests video details
backend/server.mjs - Ask endpoint → Prompt and answer: builds prompt
backend/server.mjs - Prompt and answer → Gemini Flash: generates answer
backend/server.mjs - Ask endpoint → Video question UI: returns answer
frontend/src/App.jsx