CodeCompass

• 

Inspiration

As someone who struggled with LeetCode, I noticed a frustrating pattern: whenever I got stuck, I'd search for solutions online. I'd understand the code, solve that specific problem, but completely fail on similar issues later. I was memorizing answers, not learning to think. I wanted a tutor who would guide my thinking without giving away the answer, someone who could see where I was stuck and ask the right questions. I used ChatGPT and Claude to help me with this, but they still hallucinated now and then, providing answers and missing the context. When Chrome announced its built-in AI APIs, I realized: this is possible now, and it can run entirely on-device with complete privacy.

What it does

Code Compass is a Chrome extension that acts as your personal Socratic tutor for coding problems:

• Analyzes your actual code to understand your progress (0-100%)
• Provides adaptive hints that change based on where you are
• Uses Socratic questioning to guide thinking, never giving solutions
• Runs 100% locally using Chrome's AI APIs - zero data collection

It's like having a patient tutor sitting next to you, but one that never gets tired and never accidentally spoils the answer.

How I built it

Tech Stack:

• React 18 + Vite + Tailwind CSS
• Chrome Extension (Manifest V3, Side Panel API)
• Chrome's Prompt API + Summarization API
• Monaco Editor parsing for code analysis

Architecture:

1. Content Script extracts user's code from LeetCode's Monaco editor
2. Code Analyzer determines completion % and approach (hash map, DP, etc.)
3. Adaptive Prompt Generator creates context-aware system prompts
4. Prompt API generates structured hints via JSON schema validation
5. React UI displays hints with smooth animations and progress tracking

Challenges we ran into

Challenge 1: AI Consistency

• LLMs are non-deterministic; responses varied wildly
• Solution: Implemented strict JSON schema validation with retry logic
• Result: 95%+ consistent responses

Challenge 2: Code Extraction

• LeetCode uses Monaco editor with a complex DOM structure
• Different layouts for different problems
• Solution: Robust selector fallbacks and text extraction from view-lines

Challenge 3: Preventing Solution Leakage

• AI naturally wants to help by writing code
• Need to prevent this architecturally, not just in prompts
• Solution: Multi-layer validation:
  • System prompt rules ("NEVER write code")
  • Output filtering (detect code patterns)
  • JSON schema that doesn't allow code fields

Challenge 4: Progress Estimation

• How do you quantify "40% done"?
• Solution: Heuristic-based scoring:
  • userUnderstanding
  • missedUnderstanding
  • userAnalysis

Challenge 5: Chrome AI API Limitations

• No native JSON schema enforcement (unlike OpenAI)
• Had to build a custom validation layer
• Solution: Robust parsing with fallback rendering

Accomplishments that we're proud of

• Learned to fine-tune prompt logic to personalize AI feedback for real user code.
• Gained hands-on experience in building context-aware developer assistance tools.
• Integrated structured JSON-based hint generation for consistent, machine-readable AI outputs.

What we learned

Technical:

• Chrome's built-in AI is surprisingly powerful for structured tasks
• JSON schema enforcement is critical for consistent UX
• System prompts are 80% of the battle with LLMs
• Extension side panels are perfect for persistent AI interfaces

AI Engineering:

• You can't fully control LLMs, only guide them
• Validation layers are essential
• Context is everything - generic prompts = generic results
• Asking AI NOT to do something is harder than asking it TO do something

What's next for CodeCompass

Short-term:

• Support more coding platforms (HackerRank, CodeForces)
• Pattern recognition ("This is a Two Pointer problem")
• Export conversation history

Long-term:

• Gamify the progress with limited hints and track previous similar questions solved.

Built With

• daisyui
• javascript
• react
• tailwindcss