An AI-powered learning assistant that runs directly in your browser, built with WXT, React, and on-device Gemini Nano. This project was developed as part of a Google Hackathon.
Learning Buddy addresses the problem of passive information consumption online. Students often highlight text without engaging deeply with it. This extension transforms those highlights into interactive explanations, analogies, and quizzes - all powered locally by Gemini Nano, preserving privacy and enabling offline study.
This extension leverages Gemini Nano, Google's most efficient model built to run directly on your device. This provides two key benefits:
- Privacy-First: Your highlighted text and learning data are processed locally. Nothing is sent to a server.
- Works Offline: Once the model is downloaded by your browser, the core AI features are available without an internet connection.
Note: The availability and performance of on-device AI features depend on your browser version (e.g., Chrome 140+) and underlying hardware. Your mileage may vary.
- Contextual Activation: Activate the panel by highlighting text on any webpage and clicking the "Learn" button.
- On-Device AI Insights: Get in-depth explanations, key idea extraction, simple analogies, and quick quizzes for your selected text, all generated locally by Gemini Nano.
- One-Click Card Creation: Click the "Make Card" button to instantly save the AI-generated summary and the content of the current tab (Explanation, Key Ideas, etc.) as a new flashcard in your databank.
- Add & Edit Cards: Manually create new flashcards or edit existing ones in a dedicated form within the sidebar.
- Spaced Repetition (SRS) Testing: The "Test" tab launches a quiz game that uses an SRS algorithm to schedule card reviews. Questions about the concepts on your cards are automatically generated by the AI to help you prepare.
- Review Your Library: Browse, search, and manage all your saved cards in the "Cards" tab.
- On-Demand Quizzes: While reviewing your card library, you can generate a new, unique quiz for any individual card to instantly test your knowledge on that specific topic.
- WXT - The Next-gen Web Extension Framework.
- React - A JavaScript library for building user interfaces.
- TypeScript - Typed JavaScript at scale.
- Node.js - JavaScript runtime environment.
- Gemini Nano (on-device LLM): Accessed via Chrome's built-in AI for local, private, and offline-capable text generation and summarization.
- Prompt API: Used for interacting with the on-device model to generate explanations, analogies, and quizzes.
- WXT APIs: Utilized for the overall extension structure, including the background service worker, side panel, and content scripts.
- Chrome Storage API (
storage.local): For local persistence of the user's flashcard databank. - Chrome Runtime and Tabs APIs: For messaging between extension components and managing tab interactions.
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
You need to have Node.js (version 18 or newer) and Bun installed on your system.
npm install -g bun- Clone the repository:
git clone https://github.com/your-username/learning-buddy.git cd learning-buddy - Install dependencies:
bun install
- Start the development server:
bun dev
The project follows the standard WXT directory structure:
learning-buddy/
├── .wxt/ # Build output, gitignored
├── entrypoints/ # Your extension's entrypoints (popup, background, etc.)
├── components/ # Shared React components
├── public/ # Static assets (icons, images, etc.)
├── package.json
└── wxt.config.ts # WXT configuration file
To create a production build of the extension, run:
bun buildThis will generate a production-ready extension in the .wxt/ directory.