LogWhisperer

A zero-fluff, terminal-style debugging utility that translates messy stack traces into actionable fixes.

Comment

Inspiration

As developers, we waste countless hours staring at cryptic, messy stack traces. When we turn to general AI chatbots (like ChatGPT or standard Gemini) for help, we hit another wall: we have to write custom prompts, and the AI often responds with conversational fluff ("Sure, I can help you with that!"). I wanted a frictionless, zero-fluff solution. The inspiration for LogWhisperer was to create a single-purpose, terminal-native utility where a developer can just paste an error, hit analyze, and instantly get structured, actionable answers without any chit-chat.

What it does

  • LogWhisperer is a fast, web-based debugging utility with a dark, IDE-style split-pane interface. You simply paste a raw error log into the input pane. The AI processes it and returns exactly three distinct, structured cards:
  • The Translation: A plain-English explanation of the error.
  • The Root Cause: The technical mechanism behind the crash.
  • The Fix: Actionable steps and a code snippet with a one-click "Copy" button. There is no prompt engineering required from the user, and absolutely no conversational filler from the AI.

How we built it

This project was strictly guided by the Devpost AI Agent using a "Plan-First" workflow. The entire scope, Product Requirements Document (PRD), and Technical Specification were defined and committed before a single line of code was written. Tech Stack:

  • Frontend: React 19, Vite, and Tailwind CSS (used to rapidly build the sleek, monospaced terminal aesthetic).
  • Backend: A lightweight Node.js/Express proxy server to securely hold the API key. AI Engine: Google Gemini 4 Argon API (@google/genai).
  • The Secret Sauce: To guarantee the strict 3-card output, we leveraged Gemini's JSON Schema (responseSchema). By forcing the model's response format to match a predefined JSON object, we completely eliminated AI hallucinations and conversational fluff, mapping the response directly to our React UI components.

Challenges we ran into

  • The biggest technical challenge was ensuring the AI didn't return Markdown text when we needed strict data. Learning how to properly configure the responseMimeType: "application/json" and pass a strongly typed schema to the Gemini SDK was a hurdle, but ultimately the most rewarding part of the build.
  • From a product perspective, keeping the scope small (avoiding feature creep like user accounts or database history) was challenging, but the "Plan-first" methodology helped us ruthlessly prioritize the core loop for this hackathon.

Accomplishments that we're proud of

  • I am incredibly proud of the UI/UX. The split-pane terminal design, the animated [ANALYZING] loading states, and the seamless "1-Click Copy" feature make LogWhisperer feel like a native developer tool rather than a generic AI wrapper.
  • I am also proud of successfully completing a working, bug-free Proof of Concept (PoC) strictly following the Devpost Learn Skill Pack over a single weekend.

What we learned

  • The biggest takeaway was the sheer power of the Plan-First Methodology. Spending time upfront with the AI Agent to define the scope.md, prd.md, and spec.md felt slow at first, but it made the actual coding phase incredibly fast and error-free. It shifted my mindset from "coding and guessing" to "architecting and executing."
  • I also learned how to effectively implement Structured Outputs with LLMs, which is a game-changer for building reliable AI applications.

What's next for LogWhisperer

  • While this is a complete Proof of Concept, the next logical steps would be:
  • Building a VS Code Extension so developers don't even need to leave their IDE.
  • Adding a CLI tool (e.g., logwhisperer < error.log) that pipes terminal errors directly to the backend.
  • Adding multi-language syntax highlighting for the code snippets.

Built With

Share this project:

Updates

Submission history