Code Error Explainer

A full-stack AI-powered Code Error Explainer that helps developers understand and fix programming errors.

Users can paste broken code and an error message, then receive:

• Root cause of the error
• Fixed code
• Clear explanation in plain English

This project is built with Angular, FastAPI, LangChain, Pydantic, and Groq API.

---

Screenshots

Input Form

Result Output

---

Features

• Supports Python, JavaScript, TypeScript, and SQL
• Explains the root cause of code errors
• Generates corrected code
• Provides beginner-friendly explanations
• Copy fixed code to clipboard
• Clean and responsive Angular UI
• Input validation on frontend and backend
• Structured API response using Pydantic
• AI-powered response generation using Groq LLM

---

Tech Stack

Layer	Technology
Frontend	Angular 19, TypeScript, HTML, CSS
Backend	FastAPI, Python
AI Model	Groq API, LLaMA 3.3 70B
LLM Workflow	LangChain
Validation	Pydantic

---

Project Workflow

User enters:
- Programming language
- Broken code
- Error message

        ↓

Angular frontend sends request to FastAPI backend

        ↓

FastAPI validates request using Pydantic

        ↓

LangChain builds a structured prompt

        ↓

Groq LLM analyzes the error

        ↓

Backend returns structured JSON response

        ↓

Frontend displays:
- Root cause
- Fixed code
- Explanation

---

Project Structure

Code_Error_Explainer/
├── backend/
│   ├── services/
│   │   └── explainer.py
│   ├── main.py
│   ├── models.py
│   ├── .env.example
│   └── requirements.txt
│
└── frontend/
    └── src/app/
        ├── explainer/
        │   ├── explainer.ts
        │   ├── explainer.html
        │   └── explainer.css
        └── services/
            └── explainer.ts

---

Getting Started

Prerequisites

Make sure you have installed:

• Python 3.10+
• Node.js 18+
• Angular CLI
• Groq API key

Get your Groq API key from:

https://console.groq.com

---

Backend Setup

Go to the backend folder:

cd backend

Create a virtual environment:

python -m venv venv

Activate the virtual environment:

For Windows:

venv\Scripts\activate

For macOS/Linux:

source venv/bin/activate

Install dependencies:

pip install -r requirements.txt

Create a .env file inside the backend folder:

GROQ_API_KEY=your_groq_api_key_here

Run the FastAPI server:

uvicorn main:app --reload

Backend will run at:

http://localhost:8000

Swagger API docs:

http://localhost:8000/docs

---

Frontend Setup

Go to the frontend folder:

cd frontend

Install dependencies:

npm install

Run the Angular app:

ng serve

Frontend will run at:

http://localhost:4200

---

API Reference

POST /explain

This endpoint accepts broken code and an error message, then returns an AI-generated explanation and fixed code.

Request Body

{
  "language": "python",
  "code": "print(hello)",
  "error_message": "NameError: name 'hello' is not defined"
}

Response Body

{
  "root_cause": "The variable 'hello' is not defined before use.",
  "fixed_code": "hello = 'Hello, World!'\nprint(hello)",
  "explanation": "The variable must be defined before being passed to print()."
}

---

Environment Variables

Variable	Description
GROQ_API_KEY	API key used to call the Groq LLM

Example .env file:

GROQ_API_KEY=your_groq_api_key_here

---

Example Use Case

Input

Language: Python

Code:
print(hello)

Error Message:
NameError: name 'hello' is not defined

Output

Root Cause:
The variable hello is being used before it is defined.

Fixed Code:
hello = "Hello, World!"
print(hello)

Explanation:
Python treats hello as a variable name. Since no variable named hello exists, Python raises a NameError. Defining the variable before using it fixes the issue.

---

Future Improvements

• Add support for more languages such as Java, C++, PHP, and Go
• Add syntax highlighting for code blocks
• Add previous error history
• Add user authentication
• Add streaming AI responses
• Add downloadable fixed code files
• Add unit tests for backend services
• Add deployment support for frontend and backend

---

Important Note

AI-generated fixes should be reviewed before using in production code.
This tool is designed to assist debugging, not replace proper testing and manual code review.

---

Author

Jaldeep Sathvara

GitHub: jaldeepsathvara Portfolio: jaldeep.netlify.app LinkedIn: jaldeep-sathvara-479281234