AI Feedbacks is a state-of-the-art web application designed to transform application issues and bugs into actionable prompts for coding agents. Built with Next.js 15, Tailwind CSS v4, and powered by Google's Gemini 3 Flash Preview, it offers a seamless way to bridge the gap between reporting an issue and fixing it.
- AI Prompt Generation: Upload a screenshot and provide a description of any bug. Gemini analyzes the visual and textual context to craft a perfect, copy-pasteable prompt for your favorite coding agent.
- Extension Integration: An optional Chrome Extension captures precisely cropped screenshots, unhandled promise rejections, DOM state, and network logs straight from your active browser tab allowing you to skip manual uploads.
- Natural Language Search: Don't remember the exact issue? Search through feedbacks using semantic, natural language queries powered by AI.
- Monochrome Aesthetic: A premium, high-contrast monochrome design system (Black, White, and
#87ae73accent) with light and dark mode support. - Modern Interaction: Smooth animations with
framer-motionand a responsive, glassmorphic layout. - Optimistic UI: Instant feedback on form submissions for a snappy user experience.
- Framework: Next.js (App Router)
- Styling: Tailwind CSS v4
- AI Engine: Google Gemini 3 Flash Preview via Vercel AI SDK
- Components: Shadcn UI
- State & Forms: @tanstack/react-form
- Animations: Framer Motion
- Extension: Manifest V3, React, Vite CRX
Ensure you have Bun or Node.js installed on your system.
Clone the repository and install dependencies:
bun installStart the app locally:
bun run devOpen http://localhost:3000 (or the port shown in your terminal) to see the result.
AI Feedbacks includes a powerful companion Chrome Extension that you can use to capture issues seamlessly.
- Navigate to the extension folder and install dependencies:
cd extension
bun install- Build the extension bundle:
bun run build- Open your Chromium-based browser (Chrome, Edge, Brave, etc).
- Go to
chrome://extensions/ - Turn on Developer mode in the top right.
- Click Load unpacked in the top left.
- Select the
extension/distfolder from this project directory. - Start capturing bugs directly from any webpage you are working on!
app/api/: Backend routes handling AI logic and storage.components/: Reusable UI components and layout elements.lib/: Core utilities including local JSON storage logic.public/: Static assets including your custom logo and uploads.data/: Local persistent store for feedback entries.
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
Built with 💖 by bhaumic. Enjoy hacking!