-
-
AI Error Explainer: Instantly understand and fix your coding errors with AI assistance.
Inspiration
Every Computer Science student knows the "Wall." It’s that moment late at night when you’ve written fifty lines of logic, hit run, and are met with a cryptic, multi-line stack trace that looks like a cat walked across a keyboard. The frustration isn't just that the code failed; it's the Complexity Gap. Standard error messages are written for compilers, not for humans in the learning phase. I realized that the time spent debugging often far exceeds the time spent actually writing the code. So I wanted to build something that would reduce by acting as a bridge between the machine's technicality and the student's intuition.
What it does
AI Error Explainer is a multi-modal pedagogical tool that acts as a "Babel Fish" for software development. It translates cryptic, machine-centric error messages into clear, actionable, and friendly explanations. Our app aims to reduce to near-zero by: Web Explainer: A dashboard where you can paste code or upload screenshots (OCR) of errors. Chrome Extension: A tool that lets you highlight an error in any browser-based terminal or documentation and get an instant breakdown. Interactive Solutions: Not just telling you what's wrong, but providing a "Quick Fix" code snippet you can copy and paste immediately.
How we built it
The project is built on a modern, high-performance stack designed for speed and accessibility: The Brain: We utilized the Gemini 3 Flash model via the @google/genai SDK. By using a strict responseSchema, we forced the AI to behave as a structured tutor rather than a generic chatbot. The Interface: Built with React and Tailwind CSS, focusing on a "Soft-Tech" aesthetic. We used indigo and slate color palettes to lower the user's cortisol levels during high-stress debugging sessions. The Extension Engine: One of the most unique features is the Dynamic Extension Bundler. We used JSZip to programmatically generate a Manifest V3 Chrome Extension on-the-fly, tailored to the user's environment. OCR Integration: Using Gemini's multi-modal capabilities, we enabled "Visual Debugging," allowing users to simply take a photo of their monitor.
Challenges we ran into
The primary challenge was the Contextual Accuracy Gap. Standard LLMs often hallucinate fixes. To solve this, we implemented a complex System Instruction that acts as a filter: Another hurdle was Chrome Extension Security. Injecting scripts into every page the user visits is a security risk and is often blocked by strict Content Security Policies (CSP). We overcame this by using a Deep Link Handoff strategy: the extension captures the selection and passes it to our secure web context using URL encoding
Accomplishments that we're proud of
Zero-Setup Extension: We successfully built a system where a user can download and install a functional developer tool in under 60 seconds without a complex build pipeline. The "Beginner-First" Schema: We are proud of our custom JSON schema that forces the AI to provide a "Meaning" section, which is free of technical jargon. Interactive Terminal Demo: We built a mock VS Code environment inside the browser to let users test the tool before they even sign up
What we learned
Building this project taught me that AI is only as good as its constraints. Initially, the AI would give long-winded, technical answers. I learned to use "System Instructions" to force the model into the persona of a friendly senior dev who never uses jargon without explaining it first. I also delved deep into the Chrome Extension API, specifically the difference between content_scripts and action popups, and how to safely pass data from a user's selection on a random website back to my Gemini-powered backend.
What's next for AI Error Explainer
Our roadmap focuses on making the tool even more proactive: Local Terminal Integration: A CLI tool that "pipes" errors directly to the explainer as they happen in your local terminal: npm start | error-explainer. Collaborative Debugging: A feature to generate a "Public Explanation Link" so a student can share their error and the AI's explanation with a TA or peer. Predictive Debugging: Using the Gemini 2.5 Native Audio capabilities to allow a student to talk through their logic and have the AI spot the flaw before they even hit "Run." History fFeature: Users can revisit previous errors without retyping them. We believe that the time spent debugging should never be a barrier to the joy of creation
Log in or sign up for Devpost to join the conversation.