CodeMentor AI

Instant code explanations using Chrome's built-in AI - select any code snippet and get intelligent, private analysis without sending data to external servers.

Comment

CodeMentor AI

Author: Leandro Meyer Dal Cortivo (lmdcorti@gmail.com)

Inspiration

As a developer, I've spent countless hours staring at unfamiliar codebases, trying to decode what previous developers intended. The moment of inspiration came during my first week at a new company - I opened a React application with 50,000+ lines of code, outdated documentation, and no original developers available. After spending three days just understanding a single authentication flow, I thought: "What if I could select any function and instantly understand it, like having a senior developer explain it to me?"

Research shows developers spend 58% of their time reading code versus writing it, yet we have sophisticated tools for writing but almost nothing for understanding existing code. When Google announced Chrome's built-in AI APIs, I realized this was the perfect solution: instant, private code analysis without the security concerns of sending proprietary code to external servers.

What it does

CodeMentor AI transforms code browsing into an interactive learning experience. Simply select code on GitHub, GitLab, or any web-based code platform, and instantly receive:

  • Intelligent Explanations: Clear, contextual descriptions of what the code does using Chrome's built-in AI
  • Context Understanding: Analyzes code within its file context, detecting language, frameworks, and local patterns
  • Interactive Q&A: Ask questions in natural language like "How does this connect to the authentication system?"
  • Smart Summaries: Concise overviews of complex code sections and large files
  • Documentation Assistance: AI-powered suggestions for code documentation and explanations
  • Multi-Language Detection: Automatic recognition of 15+ programming languages
  • Framework Recognition: Identifies React, Vue, Angular, Django, Flask, and more

The extension provides a floating tooltip for quick insights and a sidebar panel for deeper analysis, all while keeping your code completely private on your device.

Performance: Analysis typically completes in under 2 seconds, with intelligent caching reducing subsequent queries to under 200ms.

Privacy: 100% local processing using Chrome's built-in AI APIs - absolutely zero data transmission to external servers.

How we built it

Architecture Overview

CodeMentor AI Extension
├── Content Script (Code Detection & UI Injection)
├── AI Manager (Chrome AI APIs Orchestration)
├── Context Analyzer (Intelligent Code Understanding)
├── Q&A System (Interactive Question Answering)
├── Security Layer (Privacy & Data Protection)
└── UI System (Overlay & Sidebar Components)

Technical Implementation

Chrome AI APIs Integration: We leverage all four Chrome built-in AI APIs in sophisticated combination:

  • Prompt API: Powers contextual code explanations and reasoning about code behavior
  • Writer API: Generates documentation suggestions and code explanations
  • Summarizer API: Creates concise overviews of large files and modules
  • Rewriter API: Improves existing code explanations and optimizes descriptions

This makes CodeMentor AI the first Chrome extension to orchestrate all four AI APIs in a unified workflow.

Smart Context System: Our core innovation is multi-layered context analysis:

class ContextAnalyzer {
  buildAnalysisContext(selectedCode, pageData) {
    return {
      immediate: selectedCode,
      surrounding: this.getSurroundingLines(pageData, 50),
      file: this.extractFileMetadata(pageData),
      language: this.detectLanguage(selectedCode, pageData.fileName),
      frameworks: this.detectFrameworks(selectedCode)
    };
  }
}

The context analyzer detects:

  • 15+ Programming Languages: JavaScript, TypeScript, Python, Java, C++, Go, Rust, PHP, Ruby, and more
  • Popular Frameworks: React, Vue, Angular, Django, Flask, Express, Spring
  • Code Patterns: Function definitions, class structures, import dependencies
  • Complexity Metrics: Code structure and nesting depth

Intelligent Prompting: We developed adaptive prompts that change based on code type and context:

buildContextualPrompt(code, context) {
  return `
    You are a senior ${context.language} developer reviewing code.

    File: ${context.fileName}
    Framework Context: ${context.frameworks.join(', ')}

    Code to analyze:
    ${code}

    Provide clear explanation covering:
    1. Primary purpose and functionality
    2. Input parameters and return values
    3. How it fits within this file's context
    4. Potential improvements or concerns

    Keep explanations practical and beginner-friendly.
  `;
}

Privacy-First Design: Every architectural decision prioritizes data locality:

  • All analysis happens locally using Chrome's built-in AI
  • No external API calls for code analysis
  • Memory-only caching with automatic cleanup (5-minute timeout)
  • Minimal permissions (only activeTab and storage)
  • No telemetry, tracking, or data collection

Intelligent Fallback System: When Chrome AI APIs are unavailable, the extension gracefully falls back to pattern-based analysis:

  • Regex-based language and framework detection
  • Pattern matching for common code structures
  • Basic complexity analysis
  • Syntax highlighting hints

Challenges we ran into

Chrome AI API Availability

Challenge: Chrome's built-in AI is in early preview with limited availability and requires specific Chrome versions (127+) and system requirements.

Solution: Implemented comprehensive fallback system:

  • Detects API availability at startup
  • Pattern-based analysis when APIs unavailable
  • Clear user messaging about API status
  • Graceful degradation of features

Performance Optimization

Challenge: Real-time code analysis without impacting browser performance.

Solution: Implemented intelligent caching and request optimization:

  • Cache identical code analysis for 5 minutes (memory-only)
  • Maximum 100 cache entries with LRU eviction
  • Debounce user selections to prevent analysis spam
  • Lazy-load heavy analysis features
  • Background processing for non-critical tasks

Multi-Language Context Understanding

Challenge: Different programming languages have unique patterns and conventions.

Solution: Built language-specific analysis pipelines:

  • Regex-based language detection from file extensions and syntax patterns
  • Language-specific context building (imports in Python vs JS, classes in Java vs Go)
  • Framework-aware prompting (async/await in JS, decorators in Python, annotations in Java)
  • Adaptive token allocation based on language verbosity

Context Window Management

Challenge: AI models have token limits, but code analysis needs sufficient context.

Solution: Smart context truncation algorithm:

  • Prioritize immediately selected code (always included)
  • Include 25 lines before and after selection
  • Extract and include relevant imports/dependencies
  • Dynamic context sizing based on available tokens
  • Truncate with "..." indicators showing omitted code

Cross-Platform Compatibility

Challenge: Different code hosting platforms structure code differently (GitHub vs GitLab vs CodePen).

Solution: Platform-specific detection strategies:

  • Custom CSS selectors for each platform
  • Pattern-based code block identification
  • Language hints from platform metadata (file extensions, syntax highlighting classes)
  • Fallback to generic code detection patterns

Security and Privacy

Challenge: Ensuring zero data leakage while providing useful analysis.

Solution: Multiple security layers:

  • No network requests except for extension assets
  • Memory-only data storage with strict lifecycle management
  • Minimal Chrome API permissions (activeTab, storage only)
  • Transparent privacy reporting to users
  • Open source code for full auditability

Accomplishments that we're proud of

Technical Achievements

  • First Extension to orchestrate all four Chrome built-in AI APIs in a unified workflow
  • Zero Data Transmission: Complete code analysis without sending any code to external servers
  • Fast Analysis: Typical analysis under 2 seconds, with intelligent caching reducing repeated queries to <200ms
  • Multi-Language Support: Intelligent analysis for 15+ programming languages
  • Multi-Platform Support: Works seamlessly on GitHub, GitLab, Bitbucket, CodePen, JSFiddle, and CodeSandbox
  • Context-Aware Intelligence: Understanding code within file context and framework patterns

User Experience Innovations

  • Non-Intrusive Design: Contextual tooltips and sidebar that don't disrupt development workflow
  • Natural Language Interface: Ask questions about code in plain English
  • Progressive Enhancement: Works from basic pattern analysis to advanced AI-powered explanations
  • Keyboard Shortcuts: Ctrl+Shift+A for quick analysis, Ctrl+Shift+Q for Q&A panel
  • Responsive UI: Beautiful, modern interface with smooth animations

Privacy Leadership

  • Enterprise Ready: Meets strict corporate security requirements out of the box
  • Transparency: Clear privacy reporting and data handling explanations
  • No Vendor Lock-in: Works completely offline (with Chrome AI), no subscription or API dependencies
  • Open Source: Full code transparency for security audits

What we learned

Chrome AI API Mastery

Working with Chrome's built-in AI taught us the power of client-side intelligence. Each API has unique strengths:

  • Prompt API: Excels at reasoning and contextual analysis
  • Writer API: Perfect for creative and structured content generation
  • Summarizer API: Excellent at distilling complex information
  • Rewriter API: Ideal for content improvement and optimization

Key Insight: Combining multiple AI APIs produces better results than using any single API alone. The Summarizer creates a concise overview, which the Prompt API then uses as context for deeper analysis.

Context is Everything

The biggest learning was that code analysis quality depends entirely on contextual understanding. Raw code snippets provide limited insight - but understanding:

  • File structure and position
  • Programming language and frameworks
  • Surrounding code and imports
  • Project patterns and conventions

...enables truly intelligent analysis. We built a sophisticated context analyzer that extracts all these signals.

Privacy as a Competitive Advantage

Building privacy-first taught us that local AI processing isn't just about security - it's about:

  • Performance: No network latency, instant responses
  • Cost-effectiveness: No API costs, unlimited usage
  • User control: Code never leaves the device
  • Compliance: Meets enterprise security requirements
  • Reliability: Works offline (with Chrome AI)

Client-side AI provides superior user experience while eliminating privacy concerns.

Developer Psychology

Through development and testing, we learned that developers don't just want code explanations - they want to build confidence. Our design focuses on:

  • Reducing fear of modifying unfamiliar code
  • Building understanding progressively (quick summary → detailed explanation → Q&A)
  • Connecting new concepts to familiar patterns
  • Encouraging exploration rather than avoidance
  • Providing actionable insights, not just descriptions

Manifest V3 and Modern Extension Development

Building with Manifest V3 taught us about:

  • Service workers vs background pages
  • Content Security Policy restrictions
  • Permission minimization
  • Graceful degradation when APIs fail

What's next for CodeMentor AI

Immediate Enhancements (Next 3 months)

  • Enhanced Language Support: Better support for Rust, Go, Swift, Kotlin
  • Cross-File Context: Analyze relationships between multiple files
  • Code Diff Analysis: Explain changes between versions
  • Custom Prompts: Allow users to customize AI prompting strategies
  • Export Features: Save explanations as markdown or add as code comments

Advanced Features (6-12 months)

  • Visual Code Mapping: Interactive diagrams showing function relationships and data flow
  • IDE Integration: Direct plugins for VS Code, WebStorm, and other popular IDEs
  • Learning Path Generation: Guided tours through complex codebases for new team members
  • Impact Analysis: Preview potential effects of code modifications
  • Team Collaboration: Share insights and annotations with team members

Platform Expansion (12+ months)

  • Code Quality Analysis: Identify technical debt, security vulnerabilities, and performance issues
  • Refactoring Assistance: AI-powered suggestions for code improvements with safety checks
  • Documentation Automation: Generate comprehensive project documentation from codebase analysis
  • Enterprise Dashboard: Team-wide insights into codebase complexity and knowledge gaps
  • Educational Integration: Specialized tools for computer science education and coding bootcamps

Research Directions

  • Semantic Code Search: Find code by describing functionality rather than searching syntax
  • Architectural Pattern Recognition: Identify and explain complex design patterns across codebases
  • Cross-Language Analysis: Understand relationships between services written in different languages
  • Predictive Analysis: Anticipate potential issues before they become bugs
  • Code Generation: Suggest complete implementations based on natural language descriptions

CodeMentor AI represents a new approach to developer tooling - where AI assistance is private, instant, and seamlessly integrated into the development workflow. By leveraging Chrome's built-in AI APIs, we've created a tool that helps every developer feel confident and capable when working with any codebase, regardless of complexity or familiarity.

Built with privacy, performance, and developer experience as core principles.

Built With

  • chrome-built-in-ai-apis-(prompt-api
  • chrome-extension-apis
  • css-grid-&-flexbox
  • css3
  • html5
  • javascript-es6+
  • manifest-v3
  • rewriter-api)
  • service
  • summarizer-api
  • web-components
  • writer-api
Share this project:

Updates