AI Feedbacks

A multimodal bug-to-prompt engine that captures the full context of a web application issue — screenshot, DOM state, console errors, network failures — and synthesizes it into a structured, agent-ready prompt using Google Gemini.

The Problem

Standard bug reporting is fragmented. Developers receive screenshots without logs, or logs without context. When that thin description reaches an AI coding agent, the result is hallucinations or a 5-message back-and-forth before the agent understands what actually broke. Context that exists at the moment of failure is lost within seconds of the user closing the tab.

The Solution

AI Feedbacks unifies bug capture and prompt generation into a single pipeline. The Chrome Extension grabs the screenshot, DOM state, and network errors automatically. The reporter adds a one-line description. The backend calls Gemini and returns a structured fix-ready prompt.

Prerequisites

Before running the project, make sure you have:

• Node.js v18.17.0 or higher (node --version)
• npm v9+ or pnpm v8+
• A Google Gemini API key from aistudio.google.com
• Google Chrome for the extension

Getting Started

1. Clone and Install

git clone https://github.com/Mic-360/ai-feedbacks.git
cd ai-feedbacks
npm install

git clone https://github.com/Mic-360/ai-feedbacks.git
cd ai-feedbacks
npm install

2. Configure Environment Variables

cp .env.example .env.local

cp .env.example .env.local

Fill in .env.local:

# Required
GEMINI_API_KEY=your_gemini_api_key_here

# Optional — defaults shown
GEMINI_MODEL=gemini-3-flash-preview
MAX_IMAGE_SIZE=5242880

3. Start the Development Server

npm run dev

npm run dev

Open http://localhost:3000.

4. Install the Chrome Extension

1. Navigate to chrome://extensions in Chrome.
2. Enable Developer Mode (top-right toggle).
3. Click Load unpacked and select the extension/ directory.
4. The extension icon appears in your Chrome toolbar — you're ready.

How It Works

Capturing a Bug

1. Navigate to the broken page in your browser.
2. Click the extension icon and use the crop selector to highlight the problem area.
3. The extension automatically captures:
   • Your cropped screenshot
   • All console.error / console.warn output from the session
   • Failed network requests (4xx/5xx) from the last 60 seconds
4. Add a one-line description of what went wrong.
5. Submit — the payload goes to the dashboard API.

AI Prompt Generation

The /api/analyze route receives the payload and calls Gemini with the image and context:

const result = streamText({
  model: google('gemini-3-flash-preview'),
  messages: [
    {
      role: 'user',
      content: [
        { type: 'text', text: `Analyze this bug: ${description}` },
        { type: 'image', image: screenshotBuffer },
      ],
    },
  ],
})

const result = streamText({
  model: google('gemini-3-flash-preview'),
  messages: [
    {
      role: 'user',
      content: [
        { type: 'text', text: `Analyze this bug: ${description}` },
        { type: 'image', image: screenshotBuffer },
      ],
    },
  ],
})

Gemini returns a structured prompt identifying the broken component, relevant network failures, and a fix instruction ready to paste into Cursor, Windsurf, or any agentic tool.

Searching Past Reports

The dashboard supports natural language semantic search. Query with:

• "login button error from last week"
• "the white flash on mobile"

No tag system needed. No exact-keyword matching required.

Project Architecture

ai-feedbacks/
├── app/
│   ├── api/
│   │   ├── analyze/        # POST: receives bug payload, calls Gemini
│   │   └── feedbacks/      # GET/POST: feedback CRUD
│   ├── page.tsx            # Main dashboard
│   └── layout.tsx
├── components/             # Tailwind v4 UI components
├── extension/              # Chrome Manifest V3 extension
│   ├── manifest.json
│   ├── content.js          # DOM + network log capture
│   ├── popup.html          # Crop tool UI
│   └── background.js       # Service worker
└── lib/
    └── gemini.ts           # Gemini client wrapper

ai-feedbacks/
├── app/
│   ├── api/
│   │   ├── analyze/        # POST: receives bug payload, calls Gemini
│   │   └── feedbacks/      # GET/POST: feedback CRUD
│   ├── page.tsx            # Main dashboard
│   └── layout.tsx
├── components/             # Tailwind v4 UI components
├── extension/              # Chrome Manifest V3 extension
│   ├── manifest.json
│   ├── content.js          # DOM + network log capture
│   ├── popup.html          # Crop tool UI
│   └── background.js       # Service worker
└── lib/
    └── gemini.ts           # Gemini client wrapper

Deploying to Vercel

vercel --prod

vercel --prod

Add GEMINI_API_KEY under Settings → Environment Variables in your Vercel project. All other variables are optional.

Source: github.com/Mic-360/ai-feedbacks