BugSnap AI 🐛

Turn screenshots of broken interfaces into actionable, developer-ready bug reports.

Reporting a software bug shouldn’t mean spending time writing lengthy descriptions, figuring out what information is missing, and formatting everything for an issue tracker.

BugSnap AI streamlines this process using multimodal AI. Upload a screenshot, describe what went wrong and what you expected, and generate a structured, editable bug report that can be exported as Markdown and used in GitHub Issues.

✨ What Makes It Different?

Most AI-generated bug reports risk presenting assumptions as facts. BugSnap AI takes an evidence-aware approach by keeping four things separate:

• Visible Evidence: What can actually be observed in the screenshot.
• User-Provided Facts: Context and behavior explicitly described by the user.
• Missing Information: Details needed to investigate or reproduce the issue.
• Unverified Hypotheses: Possible explanations clearly labeled as unconfirmed.

This helps developers get useful reports without quietly turning guesses into diagnoses.

⚙️ How It Works

1. Upload a screenshot of a broken UI, unexpected behavior, or application error.
2. Describe the issue and the expected behavior.
3. Use Gemma 4’s multimodal capabilities to analyze the screenshot alongside the description.
4. Review and edit the generated report, including observed behavior, expected behavior, reproduction steps, and supporting evidence.
5. Copy or download the report as Markdown, ready to be adapted for GitHub Issues.

🛠️ Built With

• Frontend: React, Vite, TypeScript, Tailwind CSS
• Backend: Node.js, Express, TypeScript
• AI: Gemma 4 through the Google Gemini API
• Validation: Zod
• Deployment: Render

🎯 Our Goal

Make bug reporting faster, clearer, and more reliable for developers, QA testers, and open-source contributors—while keeping humans in control of the final report.

BugSnap AI doesn’t just describe a screenshot. It helps turn visual evidence into a better engineering issue, while making uncertainty explicit.