DebugLens

Inspiration

As developers, we've all been there: staring at a cryptic 403 Forbidden or a CORS error for hours, wondering which specific header we missed or why the payload format is being rejected. Standard API clients show you the error, but they don't help you solve it. I wanted to build a "Smarter API Client"—one that doesn't just act as a proxy but acts as a mentor, using the latest LLMs to analyze the request/response cycle and provide instant, actionable fixes.

What it does

DebugLens is a real-time API debugging suite that combines a powerful request builder with an AI-driven diagnosis engine.

• Request Builder: Full control over methods (GET, POST, PUT, DELETE, PATCH), headers, and JSON bodies.
• Live Response Viewer: Instant feedback with automated JSON syntax highlighting and status color-coding.
• AI Debug Assistant: Powered by Gemini 1.5 Flash, it automatically analyzes failed requests to identify authentication gaps, malformed payloads, or CORS issues.
• Quick Fixes: A curated library of one-click solutions that intelligently match the current error context.
• History Tracking: Never lose a successful configuration with local history persistence and one-click replay.

How I built it

I built DebugLens using a modern, lightweight stack focused on performance and visual excellence:

• Core Logic: Built with React 18 and Vite for lightning-fast development and optimized bundles.
• AI Integration: Implemented a robust dual-layer AI service. It primarily uses the Gemini API for high-speed analysis, with a fallback to HuggingFace (Mixtral 8x7B) to ensure the "Debug" button always works.
• UI Architecture: Eschewed heavy UI libraries for a custom Vanilla CSS system using CSS Variables and Glassmorphism principles to create a premium, "living" interface.
• JSON Engine: Developed a custom recursive JSON viewer that supports syntax highlighting and collapsible nodes for deep object inspection.

Challenges I ran into

The biggest challenge was handling the inherent limitations of browser-based API calls—specifically CORS (Cross-Origin Resource Sharing). Since DebugLens runs in the browser, many APIs block direct requests. Instead of just showing a "Failed to Fetch" error, I programmed the AI service to detect these specific network signatures and explain the concept of CORS to the user, suggesting proxy solutions or server-side header adjustments.

Another challenge was optimizing the AI prompt to be concise yet helpful. I had to balance the token cost with the quality of the fix examples provided to the user.

Accomplishments that I'm proud of

I'm particularly proud of the AI Debugging Workflow. The way the app detects a 4xx or 5xx error and immediately prepares an analysis that feels like a senior developer looking over your shoulder is incredibly satisfying. I'm also proud of the Glassmorphism UI which maintains high performance while using heavy backdrop blurs and gradients.

What I learned

I deepened my understanding of the Gemini 1.5 model's ability to reason about structured data (HTTP raw requests). I also refined my skills in building accessible and performant React components without relying on external UI kits, which allowed for a much smaller final bundle size: $$S_{bundle} = \sum_{i=1}^{n} size(Component_i) \approx 220 \text{ KB}$$ compared to several megabytes with standard frameworks.

What's next for DebugLens

• CORS Proxy Integration: Adding an optional server-side proxy to bypass browser restrictions.
• Team Workspaces: Saving and sharing "Debug Sessions" with teammates via unique links.
• Auto-generated Documentation: Converting successful API calls into beautiful Swagger/OpenAPI specifications with one click.
• Mobile Debugger: A simplified mobile view for checking API health on the go.

Built With

• gemini
• react