Youtube Tutor

Learn while you watch: ask questions, get summaries, and take instant quizzes from a local Chrome AI—right inside YouTube.

Comment

💡 Inspiration

I love learning from YouTube, but most of the time I just watch and forget. There’s no way to ask questions, get a summary, or check if I really understood something. That’s why I built YouTube Tutor — a simple Chrome extension that turns any video into a small interactive class powered by local AI.

🧠 What it does

When you open a YouTube video, a sidebar appears on the right side. Inside it lives your personal tutor — powered by Gemini Nano and Chrome’s built-in AI APIs.

You can:

  • Chat about the video topic (“Explain this part”, “Give me an example”).
  • Get instant summaries with the Summarizer API.
  • Take short quizzes with multiple-choice answers — choose how many questions and how hard you want them to be. The tutor checks your answers, explains mistakes, and even encourages you to keep learning.

Everything runs locally in Chrome — fast, private, and offline.

⚙️ How I built it

  • Chrome Extension (Manifest V3) with React + shadcn/ui for a clean, modern look.
  • Used Prompt API for the interactive tutor chat.
  • Summarizer API for quick video recaps.
  • Writer and Rewriter APIs for generating quiz questions and feedback.
  • Connected all parts with a lightweight state manager and custom hooks for real-time updates.

The whole thing works without external servers — 100% client-side.

🚀 What I learned

Building with Chrome’s built-in AI APIs was surprisingly smooth. I learned how to:

  • Use local models (Gemini Nano) directly inside the browser.
  • Design UI that makes learning fun and natural.
  • Balance speed, privacy, and simplicity in a real AI app.

I also realized how powerful client-side AI can be — it opens the door to more personal, private, and offline experiences.

⚡ Challenges

The biggest challenges were:

  • Managing context limits when working with local models.
  • Designing a quiz flow that felt natural and not robotic.
  • Making the sidebar UX clean and responsive on different video layouts.

But overcoming these made the final result feel much smoother and more polished.

🎯 What’s next

Next steps:

  • Add voice chat so users can talk with the tutor.
  • Support more languages using the Translator API.
  • Create learning progress tracking across multiple videos.

My goal is to make YouTube Tutor a go-to companion for anyone who learns through videos — from students to lifelong learners.

Built With

  • google
  • googlenano
  • jspdf
  • nextjs
  • react
  • shadcn
  • summarizerapi
  • tailwindcss
Share this project:

Updates