AI Code Reviewer

Live Demo: ai-code-reviewer-lyart-xi.vercel.app

An AI-powered code review tool that analyzes your code and delivers instant, structured feedback — bugs, security vulnerabilities, performance issues, and a fully refactored version — all in seconds.

Design

A "phosphor audit terminal": warm graphite with an amber CRT accent, all-mono typography (JetBrains Mono), faint scanlines, a segmented instrument gauge for the score, compiler-style diagnostics (E01 · SEC · L42), and a vim-style status line. No gradients, no glassmorphism.

Features

• Quality Score — animated 0–100 instrument gauge with a stamped PASS / REVIEW / CAUTION / REJECT verdict
• Bug Detection — pinpoints issues with exact line numbers
• Security Analysis — flags SQL injection, XSS, and other OWASP vulnerabilities
• Performance Suggestions — highlights inefficient patterns and proposes fixes
• AI Refactor — delivers a fully rewritten, improved version of your code
• 13 Languages — JavaScript, TypeScript, Python, Java, C++, Go, Rust, PHP, Ruby, Swift, Kotlin, CSS, SQL
• Monaco Editor — VS Code-style editor with syntax highlighting
• Copy as Markdown — export the full review report in one click
• Keyboard Shortcut — Ctrl+Enter to trigger a review instantly

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
Styling	Tailwind CSS 4
Editor	Monaco Editor (@monaco-editor/react)
AI / LLM	Groq API — Llama 3.3 70B Versatile
Icons	Lucide React

Getting Started

Prerequisites

• Node.js 18+
• A Groq API key (free tier available)

Installation

git clone https://github.com/yourusername/ai-code-reviewer.git
cd ai-code-reviewer
npm install

Environment Variables

Create a .env.local file in the project root:

GROQ_API_KEY=your_groq_api_key_here

Run

npm run dev

Open http://localhost:3000.

How It Works

1. Paste any code snippet into the Monaco editor
2. Select the language from the dropdown (or use a built-in example)
3. Click Review Code or press Ctrl+Enter
4. The review panel renders your quality score, detected issues, and a refactored version side-by-side
5. Copy the full report as Markdown with one click

Project Structure

├── app/
│   ├── api/review/route.ts   # Groq API integration
│   └── page.tsx              # Main layout
├── components/
│   ├── CodeEditor.tsx        # Monaco editor wrapper
│   ├── ReviewPanel.tsx       # Results display
│   ├── ScoreRing.tsx         # Animated quality score ring
│   └── IssueCard.tsx         # Bug / security / performance cards

License

MIT