TeachMe

Inspiration

We've all been there - staring at a dense technical article, struggling to understand complex concepts, or wishing we could learn at our own pace. Traditional web content is one-size-fits-all, but every learner is unique. Some need ELI5 explanations with fun analogies, while others prefer academic breakdowns or quick bullet points. We created TeachMe to democratize learning by transforming any webpage into a personalized learning experience that adapts to your unique learning style - all while keeping your data completely private.

What it does

TeachMe is a Chrome extension that acts like a personal tutor for the web. It uses Chrome’s built-in AI (Gemini Nano) to instantly summarize and rewrite webpages in your preferred learning style. Key features: Custom learning profiles: Create as many styles as you want - “Explain Like I’m 5,” “Professional Summary,” “Quick Notes,” or anything else. Two-stage AI pipeline: First condenses long content using Chrome’s Summarizer API, then reformats it via the Prompt API to fit your chosen tone. Real-time streaming: See summaries appear word-by-word as the AI works. Complete privacy: Everything runs locally on your device - no data sent anywhere. Works offline: Once set up, it keeps working without internet access. Free forever: No logins, no API keys, no subscriptions. Just open any article, pick your profile, and click Generate. TeachMe extracts the key ideas, condenses them, and rewrites the page in your voice - within seconds.

How we built it

TeachMe is a Chrome Manifest V3 extension built with vanilla JavaScript and modern browser APIs. Architecture overview: Frontend: Responsive HTML/CSS/JS UI with a Side Panel for seamless browsing. APIs: Side Panel API for display, Storage API for user profiles, Scripting API for content extraction. AI Pipeline: Summarizer API condenses the text. Prompt API with Gemini Nano personalizes it to your selected style. A custom streaming system outputs text live in the UI. Technical highlights: Dual-stage summarization + personalization for quality and efficiency. Smart DOM parsing to isolate main content and ignore ads/navigation. Custom abort-controller logic to stop long AI runs instantly. Local profile management supporting unlimited user-defined styles.

Challenges we ran into

On-Device AI Limitations: Chrome's built-in AI is incredibly powerful but has token limits. We had to engineer a two-stage pipeline - using the Summarizer API first to condense content before personalization - to work within these constraints.

Prompt API Quality Optimization: We quickly discovered that the Prompt API's output quality isn't always consistent - especially when given large chunks of text at once. The AI works best with smaller, focused inputs. Feeding it an entire summarized article in one go often produced mediocre results. To maximize quality, we engineered our system to prompt the API little by little, breaking content into digestible chunks. This progressive feeding strategy required careful balancing - chunks small enough for optimal quality but large enough to maintain coherence and context. The result was a dramatic improvement in output quality, making summaries genuinely helpful rather than just technically functional.

Streaming Implementation: Getting real-time streaming to work smoothly was tricky. We had to handle async iteration, abort signals, and UI updates while maintaining a responsive experience and preventing memory leaks.

Content Extraction: Different websites structure content differently. We spent considerable time perfecting the content extraction algorithm to reliably identify main content across diverse site layouts while filtering noise.

API Availability Detection: Chrome's AI features are bleeding-edge (requires Chrome 127+ on Dev/Canary). We had to implement robust capability detection and provide clear user guidance for enabling experimental flags.

State Management: Managing state across the extension's service worker, side panel, and settings page while keeping everything synchronized required careful architecture planning.

Accomplishments that we're proud of

Fully private learning experience: No external APIs or servers - everything stays local. Novel two-stage AI design: Combining Summarizer and Prompt APIs unlocked better summaries than either API alone. Endless flexibility: Unlimited learning profiles for every mood or goal. Production-ready build: Manifest V3, robust error handling, and a polished UI that feels like a commercial product.

What we learned

Browser AI is a game-changer: On-device inference makes AI apps faster, cheaper, and more private. Streaming transforms UX: Seeing text appear live feels interactive and keeps users engaged. Constraints fuel creativity: Token limits pushed us to design a pipeline that’s actually better than the naive approach. Prompt quality > size: Feeding the AI smaller, focused chunks produces dramatically better output. Customization wins: Letting users define their own learning styles makes the tool far more personal and useful. Modern Chrome APIs rock: Side Panel, Scripting, and AI APIs make the browser itself a powerful app platform.

What's next for TeachMe

Multi-modal support: Summarize PDFs, screenshots, and image-based content. Learning analytics: Optional insights into your reading and learning patterns. Cross-site learning paths: Chain summaries from multiple sources into cohesive guides. Interactive Q&A: Chat with TeachMe about the content you’re reading. Rich formatting: Support for code, math, and diagrams in summaries. Mobile expansion: Bring TeachMe to mobile browsers as AI APIs mature. Community profiles: Share and discover specialized learning styles. Compare modes: See how different learning styles interpret the same content.