ClipNest

• 

• 

• 

  Settings page

• 

  Dark mode

• 

  List of all cards

Inspiration

While learning online, we often screenshot or bookmark explanations to revisit later—but they end up scattered and forgotten. We wanted a way to capture any snippet instantly, get a quick, clear explanation, and turn it into organized study material—without leaving the page or sharing data online.

What it does

ClipNest lets learners crop any part of a webpage, PDF, or diagram and instantly get: A concise AI explanation of what they clipped. 2–3 recall questions for active learning. An automatically generated study card tagged by subject and topic. Cards include a source link or text fragment, and a built-in review queue mixes subjects using spaced and interleaved practice—all right inside Chrome’s Side Panel.

How we built it

Front-end: Chrome’s Side Panel UI, content script overlay for cropping, and a service worker to coordinate captures. Image capture: tabs.captureVisibleTab + an offscreen canvas to crop selected pixels. AI engine: Chrome’s on-device Prompt API (Gemini Nano) produces structured JSON (subject, topic, notes, questions). Storage & scheduling: chrome.storage.local with unlimitedStorage, plus a Leitner-style spaced repetition and interleaving driven by chrome.alarms. Everything runs on-device for privacy; when models aren’t available, it falls back to text-only explanations.

Challenges we ran into

Handling cross-origin pages and PDFs during capture. Managing Chrome’s offscreen document lifecycle without race conditions. Ensuring Prompt API availability and graceful fallback when the on-device model isn’t downloaded. Designing a non-disruptive UI that works across websites and window contexts.

Accomplishments that we're proud of

Built a fully functional AI-assisted study workflow completely inside Chrome. Integrated multimodal (image + text) prompts using the new Prompt API. Achieved a clean, distraction-free Side Panel UX for clipping, explaining, and reviewing—all offline. Created a lightweight spaced + interleaved scheduler that genuinely improves retention.

What we learned

How to combine Chrome’s new built-in AI APIs with extension surfaces effectively. The importance of structured outputs (JSON Schema) for reliable UI rendering. That on-device privacy can coexist with rich AI assistance if designed carefully. Students respond best to active recall and short, focused notes instead of passive summaries.

What's next for ClipNest

Add voice explanations and speech-to-card mode using multimodal audio input. Support team collections so study groups can share curated cards. Introduce cloud sync and export (Markdown/Anki) while preserving local-first privacy. Refine diagram understanding and formula parsing for STEM subjects.

Built With

• css
• html5
• javascript
• typescript