LearnLM

Inspiration

We noticed that students and lifelong learners spend countless hours watching educational YouTube videos but often struggle to retain information or turn passive watching into active learning. The gap between consuming content and actually applying knowledge inspired us to create LearnLM — a tool that bridges the divide between watching and doing by transforming any educational video into a structured, actionable study plan.

What it does

LearnLM turns YouTube videos into action. Users simply paste a YouTube URL, and the app:

Extracts the video transcript automatically using the YouTube Innertube API Analyzes content with AI (GPT-4o-mini) to identify 5-7 key concepts and generate 6-10 actionable study tasks with time estimates Displays an interactive learning dashboard with a split-panel view: video on one side, task checklist on the other Tracks progress with a visual progress ring showing completion percentage Provides a context-aware AI chat assistant that can answer questions about the video content or search the web for additional information Saves courses to a library so learners can resume sessions and track their learning journey Generates slides and exports to PDF for offline study

How we built it

We built LearnLM using a modern full-stack architecture:

Frontend: Next.js 14 with App Router, TypeScript, Tailwind CSS, and shadcn/ui components AI Integration: OpenAI GPT-4o-mini via the Vercel AI SDK for transcript analysis and chat functionality YouTube Integration: youtubei.js library to fetch transcripts through YouTube's Innertube API Web Search: Brave Search API integration for context-aware responses beyond video content Authentication: Civic Auth SDK for secure user identity State Management: React hooks with localStorage persistence for course library UI/UX: Custom components including resizable panels, progress rings (SVG-based), shimmer animations, and responsive modals

Challenges we ran into

YouTube transcript extraction — Traditional scraping methods are blocked by YouTube, so we had to integrate the Innertube API via youtubei.js to reliably fetch transcripts Context-aware AI responses — Balancing when to use video context vs. web search required careful prompt engineering and keyword detection logic Consistent JSON output from AI — Getting GPT to reliably return structured JSON with concepts and tasks required iterative prompt refinement Real-time progress tracking — Syncing task completion state across components while persisting to localStorage without performance issues Mobile responsiveness — Making the split-panel dashboard work elegantly on smaller screens

Accomplishments that we're proud of

End-to-end learning pipeline: From YouTube URL to actionable study plan in seconds Intelligent chat assistant that knows when to answer from video context vs. search the web Beautiful, responsive UI with smooth animations, progress visualization, and intuitive interactions Full course library with save/resume functionality and progress persistence PDF export for offline studying Clean, modular architecture with proper TypeScript types and separation of concerns

What we learned

How to integrate YouTube's Innertube API for transcript extraction Advanced prompt engineering techniques for consistent JSON output from LLMs Building context-aware AI systems that combine multiple data sources (video content + web search) Creating smooth, animated SVG-based progress indicators Managing complex state across multiple React components with localStorage persistence Building accessible, responsive UIs with Radix UI primitives and Tailwind CSS

What's next for LearnLM

Multi-video playlists — Generate comprehensive study plans from entire YouTube playlists Spaced repetition — Integrate flashcard generation with SRS scheduling for long-term retention Collaborative learning — Share courses and study plans with friends or study groups Quiz generation — Auto-generate quizzes from video content to test understanding Learning analytics — Track learning patterns, time spent, and knowledge gaps over time Mobile app — Native iOS/Android apps for learning on the go Integration with LMS platforms — Export study plans to Canvas, Moodle, or Notion

Built With

• nextjs
• typescript