A production-grade SaaS that lets users submit YouTube URLs and chat with the video using visual understanding — not just transcripts. The AI sees every frame.
Most "chat with YouTube" tools read spoken words. This one reads what's on screen: code, diagrams, whiteboards, charts, terminal output.
YouTube URL → Download → Extract Frames → AI Describes Each Frame
→ Embed Descriptions → Store in Vector DB
User Question → Embed → Find Matching Frames → AI Looks at Real Images → Answer
Two stages:
- Ingestion (runs once per video): download → frame extraction → vision AI → embeddings → store
- Query (runs per question): embed question → vector search → load frames → vision AI → answer
| Layer | Technology |
|---|---|
| Frontend | Next.js 15, TypeScript, Tailwind CSS, shadcn/ui |
| Auth | Clerk |
| API | FastAPI (Python 3.12) |
| Background Jobs | Celery + Redis |
| Relational DB | PostgreSQL (Neon) |
| Vector DB | Qdrant |
| File Storage | Cloudflare R2 |
| Vision AI | Google Gemini 2.5 Flash |
| Embeddings | gemini-embedding-001 (3072-dim) |
| Billing | Stripe |
| Error Tracking | Sentry (planned, not yet wired up) |
| Analytics | PostHog (planned) |
| Deployment | Vercel + Railway (planned, not yet deployed) |
| Doc | Description |
|---|---|
| docs/ARCHITECTURE.md | System architecture + component diagrams |
| docs/DATABASE.md | Entity Relationship Diagram + schema reference |
| docs/PIPELINES.md | Sequence diagrams for ingestion and query flows |
| docs/API.md | REST API endpoint reference |
| docs/DEPLOYMENT.md | Local dev setup + production deployment guide |
| docs/CI_CD.md | CI/CD pipeline, branch strategy, secrets reference, rollback |
| docs/ROADMAP.md | What's shipped and what's planned |
# 1. Clone and install
git clone https://github.com/Ashish-CodeJourney/frameiq.git
cd frameiq
# 2. Copy environment variables
cp .env.example .env
# Fill in GEMINI_API_KEY, CLERK keys, Stripe keys
# 3. Start everything
docker compose up
# 4. Open the app
open http://localhost:3000All services start automatically:
- Next.js frontend →
http://localhost:3000 - FastAPI backend →
http://localhost:8000 - API docs →
http://localhost:8000/docs - Qdrant dashboard →
http://localhost:6333/dashboard
| Plan | Videos | Queries/month | Frame interval |
|---|---|---|---|
| Free | 3 | 50 | 60s |
| Pro ($9/mo) | 50 | 1,000 | 30s |
| Enterprise | Unlimited | Unlimited | 10s |
frameiq/
├── apps/
│ ├── web/ # Next.js 15 frontend
│ │ ├── app/ # App router pages
│ │ ├── components/ # UI components
│ │ └── lib/ # API client, auth helpers
│ └── api/ # FastAPI backend
│ ├── routers/ # Route handlers
│ ├── workers/ # Celery tasks
│ ├── services/ # Business logic
│ ├── models/ # SQLAlchemy models
│ └── schemas/ # Pydantic schemas
├── packages/
│ └── shared-types/ # Scaffolded but not yet wired into apps/web
├── docs/ # All documentation
├── docker-compose.yml
├── turbo.json
└── .github/workflows/
See CONTRIBUTING.md for dev conventions, testing requirements, and the PR process. See docs/ROADMAP.md for what's shipped and what's planned next.