An automated code review tool powered by Groq AI (free API) with a rule-based fallback.
This application analyzes JavaScript/TypeScript code in real-time using a real AI model (Llama 3.3 70B via Groq), detecting:
- Security vulnerabilities (
eval(),innerHTML, XSS risks) - Type safety issues (
anytypes, missing generics) - Best practices (
console.log,var, loose equality, TODOs) - Performance concerns (long functions, callback nesting)
- Style inconsistencies (magic numbers, formatting)
If the AI service is unavailable, it instantly falls back to a rule-based engine so the app always works.
Paste any JavaScript or TypeScript code into the editor and click Run AI Code Review. The agent returns:
- Overall quality score (0-100)
- Categorized issues with severity levels
- Line-by-line suggestions with code snippets
- Metrics breakdown by category
| Layer | Technology |
|---|---|
| Frontend | Next.js 14 · React · TypeScript |
| Styling | Tailwind CSS · Custom glassmorphism |
| AI Engine | Groq API (Llama 3.3 70B) |
| Fallback Engine | Rule-based (regex + heuristics) |
| Rate Limit | In-memory IP-based (10 req/min) |
| Icons | Lucide React |
Frontend (Next.js)
├── Code Input Editor
├── Review Results Panel
│ ├── Score Ring (SVG animated)
│ ├── Issue Cards (severity colored)
│ └── Category Breakdown
└── Stats Sidebar
API Route (/api/review)
├── Rate Limit Check (10 req/min per IP)
├── Try Groq AI first
│ └── POST api.groq.com/v1/chat/completions → Llama 3.3 70B
└── Fallback: Rule-based analysis
├── Security checks (eval, innerHTML)
├── Type safety (any)
├── Best practices (console, var, ==)
├── Performance (function length)
└── Style (magic numbers)
- Sign up at console.groq.com (free, no credit card)
- Go to API Keys and create one
- Copy the key starting with
gsk_...
cp .env.local.example .env.local
# Edit .env.local:
GROQ_API_KEY=gsk-your-key-herenpm install
npm run dev
# Open http://localhost:3000- Llama 3.3 70B — excellent for code review
- Mixtral 8x7B — fast alternative
- Rate limits: 20 req/min, 600K tokens/min
- No local setup — pure API, works on any server
If Groq is down, rate-limited, or the API key is missing, the app automatically falls back to instant regex/heuristic analysis. No setup required.
To protect the free API tier from abuse (since this is a public portfolio), the API implements IP-based rate limiting:
- 10 requests per minute per IP address
- Returns HTTP 429 with
Retry-Afterheader when exceeded - Uses in-memory store (no Redis needed for portfolio/demo)
ai-code-review-agent/
├── src/
│ ├── app/
│ │ ├── api/review/route.ts # AI engine (Groq + fallback)
│ │ ├── page.tsx # Main dashboard
│ │ ├── layout.tsx # Root layout with fonts
│ │ └── globals.css # Glassmorphism design system
│ └── components/
│ ├── code-input.tsx # Code editor panel
│ ├── issue-card.tsx # Individual issue display
│ ├── review-results.tsx # Score + issues list
│ └── stats-panel.tsx # Category sidebar
├── .env.local.example # Groq API key config
├── tailwind.config.ts
└── package.json
- Real AI analysis — Groq Llama 3.3 70B, free tier
- Rule-based fallback — Works even when AI is offline
- Rate limiting — Protects API from abuse
- Security-first — Detects XSS, eval, unsafe patterns
- Visual score ring — Animated SVG progress indicator
- Categorized issues — Security, Performance, Style, Best Practice, Type Safety
- Severity levels — Critical, Warning, Info with color coding
- Code snippets — Shows the exact line for each issue
- Actionable suggestions — Every issue includes a fix recommendation
- Responsive design — Works on mobile, tablet, desktop
- Dark theme — Cyberpunk/glassmorphism aesthetic
MIT