Introducing oops2okay: AI-Powered Debugging for Developers

#ai #react #python #opensource

Debugging just got smarter - Paste your code + error, get a fix. Powered by Google’s Gemini AI.

🌟 Intro

Debugging code can be tedious, especially when cryptic errors slow down your workflow. That is why I built oops2okay, an open-source, full-stack app that leverages AI to help you debug smarter, not harder.

In this post, I will walk you through:

What oops2okay does
How it works (tech stack)
How I integrated Gemini 2.0 Flash for AI debugging
Lessons learned while building it
Why I Built This

🚀 What is oops2okay?

oops2okay is a web app where you can paste your code and error messages, and instantly get:

The root cause of your bug
Non-technical and technical explanations
Suggested fixes (with code)
Reference links for further reading
A history of your debug sessions

It is designed to be fast, user-friendly, and accessible on any device.

🛠️ Tech Stack

Frontend: React (with Vite), Tailwind CSS, Lucide Icons, Axios
Backend: FastAPI (Python), Google Gemini 2.0 Flash API

🔍 How it works

1. Frontend (/client)

Built with Vite + React
User pastes code and error → submits form
Sends POST request to backend (/debug) with the inputs
Displays AI-generated fix + stores history in local storage

2. Backend (/server)

Accepts the input via FastAPI
Calls the Gemini 2.0 Flash API with a well-crafted prompt
Returns the AI’s suggestion/fix

3. Gemini Integration

import google.generativeai as genai
from dotenv import load_dotenv
import os

load_dotenv()
GOOGLE_API_KEY = os.getenv("GOOGLE_AI_API_KEY")
genai.configure(api_key=GOOGLE_API_KEY)

model = genai.GenerativeModel("gemini-2.0-flash")

def getGoogleaiResponse(prompt: str) -> dict:
    response = model.generate_content(prompt)
    cleaned = cleanJsonResponse(response.text)
    return json.loads(cleaned)

The Gemini model used is "gemini-2.0-flash", chosen for its speed and lightweight performance.
The response is expected to be structured JSON, returned inside markdown-style code blocks.
Parses the cleaned response as JSON and returns it.

def cleanJsonResponse(text: str) -> str:
    return re.sub(r"^```

(?:json)?\n([\s\S]*?)\n

```$", r"\1", text.strip())

🌐Hosting

Frontend: Hosted on Vercel
Backend: Hosted on Render

⚠️ Backend Cold Start:

Render spins down the backend server to save resources.

The first request after idling may take 15–20 seconds to respond as the server spins back up.

💡Challenges Faced

Cold Start Delays: Since the backend is hosted on Render’s free tier, it can take 15–20 seconds to respond after being idle, which impacts the initial user experience.
Parsing AI Responses: Gemini’s output sometimes included markdown or malformed JSON, so I built a cleaning function to reliably extract and parse the data.
History Management: Debug history is managed locally using localStorage, requiring careful handling to store, retrieve, and limit entries for a smooth user experience.

💭 Future Plans

Show example prompts or error templates
Version control for saved results
Optional login with GitHub or Google
Enhanced Reference & Learning Links

❤️ Why I Built This

I wanted a tool that could bridge the gap between cryptic error messages and actionable solutions, especially for newer developers or anyone learning a new stack. By combining a modern UI with powerful AI, oops2okay helps you understand and fix bugs faster, with less frustration.