DevLearn - AI Code Comprehension Assistant

Turn confusing GitHub code into clear explanations with AI. DevLearn uses Gemini Nano to help developers learn faster—all processed locally in your browser.

Comment

DevLearn – AI Code Comprehension Assistant

Note for Judges: DevLearn is built exclusively for Google Chrome using Chrome's Built-in AI APIs (Prompt API + Summarizer API). The demo video was recorded in Microsoft Edge for screen capture performance; the extension is tested and fully functional in Chrome 126+ with identical behavior. If Chrome's AI APIs are unavailable in your environment, enable "Use Mock AI" in the popup settings to reproduce all features deterministically.

Inspiration

Understanding unfamiliar code on GitHub consumes most of a developer's day. Switching between tabs for documentation, explanations, and tutorials breaks flow and slows onboarding. DevLearn was built to bring AI-powered help directly onto the page—explaining code, summarizing READMEs, and generating tutorials without leaving GitHub.

What it does

DevLearn adds a floating "DL" button on GitHub that opens an intelligent, in-page assistant panel. It offers three core features:

  • Analyze Code: Converts the visible file into a clear, human-readable explanation with language detection, line counts, and key logic highlights.
  • Summarize README: Condenses repo documentation into quick takeaways so developers can understand a project in seconds.
  • Tutorial Writer: Generates beginner-friendly, step-by-step onboarding guides for contributors new to the codebase.

Power users can trigger actions via keyboard shortcut (Ctrl+Shift+1) or right-click context menu. The extension works seamlessly with GitHub's modern React code viewer and single-page app navigation.

How we built it

DevLearn is a Chrome extension (Manifest V3) with three key components:

  • Content script (content.js): Renders the in-page panel, extracts code and README content from GitHub's DOM, and manages the UX.
  • Page-world bridge (bridge.js): Runs in the page context to access window.ai (Chrome's built-in Prompt and Summarizer APIs), with capability checks and error-handled sessions.
  • Background service worker (background.js): Registers context menus, keyboard shortcuts, and optional telemetry hooks.

When Chrome's built-in AI is available, the bridge creates a local model session and runs prompts on-device. If the APIs aren't exposed, a deterministic Mock Mode provides consistent, testable responses so the UX never breaks.

Optional backend URL/token fields are present for team analytics but disabled by default to keep all processing local and privacy-first.

Challenges we ran into

  • GitHub's evolving DOM: The new React code viewer required resilient selectors (react-code-text, data-hpc, testids) and SPA navigation event handling to avoid breaking on route changes.
  • Variable AI availability: Built-in AI APIs vary across Chrome channels, flags, and regions. Designing robust capability checks and graceful fallback logic was essential to ensure consistent UX.
  • Readability across themes: GitHub supports dark and light modes. We needed careful CSS overrides to keep panel text readable without interfering with the site's native styles.

Accomplishments that we're proud of

  • Privacy-first by default: All AI processing happens locally on-device with no external API calls unless a user explicitly configures a backend URL.
  • Reliable Mock Mode: Even when AI is unavailable, the extension delivers a fully functional experience with deterministic outputs—perfect for demos and testing.
  • Native-feeling UX: One-click panel access, keyboard shortcuts, and context menu integration that feels built into GitHub.
  • Hybrid AI architecture: Seamlessly switches between real AI and Mock, demonstrating production-ready graceful degradation.

What we learned

  • Chrome AI API best practices: Capability checks (window.ai?.languageModel?.capabilities()), session management (create() + prompt()), and error-handled fallback paths are critical for exploratory APIs.
  • Robust DOM extraction: React-rendered code requires flexible selectors and mutation observers; we can't rely on brittle class names.
  • Designing for uncertainty: Building features that degrade gracefully without sacrificing usefulness ensures better user experience and wider adoption.

What's next for DevLearn

  • Language-aware explanations: Add heuristics and examples specific to PHP/Laravel, JavaScript/React, Python, and other popular ecosystems.
  • Team mode: Opt-in backend integration to share explanations, annotations, and onboarding notes across developer teams.
  • Inline annotations: Anchor explanations to specific code lines with hover tooltips and copy-to-clipboard actions.
  • Extended platform support: Bring DevLearn to GitLab, Bitbucket, and Stack Overflow code snippets.
  • Real-time collaboration: Let multiple developers annotate and discuss code in shared sessions.

Built with

Chrome Extensions (Manifest V3), JavaScript, HTML, CSS, Chrome Built-in AI (Prompt API, Summarizer API), GitHub DOM. Optional backend hooks (Laravel) planned but disabled by default.

Demo and source

Try it

  1. Open chrome://extensions and enable Developer mode
  2. Click "Load unpacked" and select the DevLearn project folder
  3. Visit any GitHub file or README and click the DL button
  4. If AI isn't available in your Chrome build, enable "Use Mock AI" in the popup to test all features

Built With

Share this project:

Updates