VibeFix: Turn screen recordings into GitHub Pull Requests instantly.

Описание: Project Name: VibeFix
Tagline: Stop writing tickets. Just show the bug.
Bug reporting is broken. Developers waste hours trying to reproduce vague "it doesn't work" tickets. VibeFix solves this by using Gemini 3 Pro’s native multimodality to act as an autonomous engineer. You simply upload a video of the bug and "rant" about what's wrong. VibeFix watches the video to spot the visual glitch, correlates it with your codebase to find the logic error, and automatically opens a GitHub Pull Request with the fix. It’s the "Rant-to-Repo" workflow that turns user frustration into deployed code in seconds.
💡 Inspiration
We’ve all been there: A QA tester finds a UI bug, but they can't describe it technically. They write a vague Jira ticket saying "The button is glitchy." The developer spends 2 hours trying to reproduce it, only to realize it was a simple CSS z-index issue. We wanted to build a tool that bypasses the "translation layer" of bug reporting. We wanted to go straight from Visual Symptom → Code Fix.
🤖 What it does
VibeFix is an agentic workflow tool that transforms screen recordings into code patches.
Watch: The user records a video of the bug, narrating the issue naturally (e.g., "Look, this menu cuts off on mobile!").
Reason: Using Gemini 3 Pro’s multimodal vision capabilities, VibeFix analyzes the video frame-by-frame to identify the UI element in question.
Correlate: It cross-references the video timestamp with the provided repository files to locate the exact lines of code responsible for that element.
Fix: It generates the corrected code and uses the GitHub API to create a new branch and open a Pull Request ready for review.
⚙️ How we built it
True to the theme, 90% of VibeFix's own backend code was generated via "Vibe Coding" sessions with Gemini, using its reasoning to debug our own GitHub API integration.
The Brain: We used Google Gemini 3 Pro via AI Studio. Its massive context window allowed us to feed it both video files and chunks of the codebase simultaneously.
The Backend: A Python (FastAPI) server handles the logic, acting as the bridge between the raw video data and the GitHub API.
The Frontend: A Next.js interface designed for "Vibe Coding"—a conversational UI where the user can talk to the AI to refine the fix before shipping.
The "Vibe" Factor: We engineered a system prompt that interprets user intent and frustration (audio tonality) to prioritize the severity of the bug fix.
🧠 Challenges we ran into
Mapping pixels to code is hard. The biggest challenge was getting the AI to understand that a visual glitch at 0:05 in the video corresponded precisely to styles.css line 42.
How we solved it:
We utilized Gemini 3's ability to ingest the entire directory structure. We created a "Reasoning Trace" prompt that acts as a semantic bridge:
First, we prompt the model to visually describe the component in the video.
Then, it searches the provided context window for matching class names or component logic based on that description.
This intermediate reasoning step allowed us to bypass the disconnect between video pixels and code syntax.
🚀 What's next for VibeFix
Live Stream Debugging: Imagine VibeFix watching your localhost server in real-time and suggesting fixes as you code.
Figma Integration: Comparing the coded implementation against the original design file to spot "Vibe Drifts" automatically.