AI-powered code review tool. Paste your code, get an instant quality score, issues list, and a refactored version — all streamed in real time.
- Score 0–100 — animated circular gauge with color by range; counter animates from 0 to final score; particles burst for scores ≥ 90, shake animation for scores < 30
- Issues — error / warning / suggestion with line numbers and concrete fixes; click any fix to copy it to clipboard
- Positives — what the code already does well
- Refactored code — complete rewrite that fixes every listed issue; fetched automatically via
/api/refactorwhen the review skips it - Diff view — split (Shiki-highlighted) and unified (GitHub-style hunks) modes
- Fullscreen diff — expand the diff to full screen, close with Esc
- Streaming — results appear as they are generated (~3s first token)
- Line numbers — desktop editor shows a synchronized line number gutter
- Editor status bar — live line count, file size in KB, and selected language shown below the editor
- Share link — encode the full review in a URL, no backend needed
- File upload — drag & drop or click to upload, language auto-detected from extension
- Embed badge — HTML/Markdown snippets to add a score badge to your README
- History — last 20 reviews saved in localStorage, accessible in a History tab
- Responsive — full desktop layout, tablet grid, mobile bottom tab bar
TypeScript · JavaScript · Python · Go · Rust · Java · C# · CSS · SQL
| Layer | Tech |
|---|---|
| Frontend | React 19 + TypeScript + Vite |
| Animations | Framer Motion |
| Async state | TanStack Query |
| Syntax highlight | Shiki |
| LLM (review) | Groq API — meta-llama/llama-4-scout-17b-16e-instruct (free tier) |
| LLM (refactor) | Groq API — qwen/qwen3-32b (free tier) |
| Backend | Vercel Edge Functions |
| Storage | localStorage (no database) |
| Tests | Vitest + React Testing Library (45 tests) |
Browser → React App → POST /api/review → Vercel Edge Function → Groq API (streaming)
→ POST /api/refactor → Vercel Edge Function → Groq API (streaming)
Both Edge Functions proxy requests to Groq, keeping the API key server-side only.
The SSE stream from Groq is transformed into a plain-text stream that the browser reads chunk by chunk.
/api/review uses meta-llama/llama-4-scout-17b-16e-instruct (temperature 0.3, max_tokens 4096).
/api/refactor uses qwen/qwen3-32b (temperature 0.2, max_tokens 8192) and is called when score < 90 and refactored is null.
- Node.js 20+
- Vercel CLI:
npm i -g vercel - Groq API key (free)
git clone https://github.com/ghiberti85/ai-code-reviewer.git
cd ai-code-reviewer
npm install
cp .env.example .env.local
# paste your GROQ_API_KEY into .env.local
vercel devOpen http://localhost:3000.
vercel dev runs both Vite (frontend) and the Edge Functions (/api/review, /api/refactor) together.
npm test # run all tests once
npm run test:watch # watch mode
npm run test:coverage # HTML coverage report in coverage/- Import the repo at vercel.com → Add New → Project
- Add
GROQ_API_KEYin Settings → Environment Variables before the first deploy - Click Deploy
vercel --prod
vercel env add GROQ_API_KEY production
vercel --prod # redeploy to apply the env varAdd these secrets to your GitHub repo (Settings → Secrets → Actions):
| Secret | Where to find it |
|---|---|
VERCEL_TOKEN |
vercel.com → Account Settings → Tokens |
VERCEL_ORG_ID |
.vercel/project.json → orgId after first vercel run |
VERCEL_PROJECT_ID |
.vercel/project.json → projectId |
After that, every merge to main triggers an automatic production deploy. CI runs on every push.
| Variable | Required | Description |
|---|---|---|
GROQ_API_KEY |
Yes | Groq API key — console.groq.com |
Never commit .env.local — it is already in .gitignore.
GROQ_API_KEYnever reaches the browser — all LLM calls go through the Edge Function- Input validated and limited to 50 KB per request
- Language parameter validated against an allowlist
- Groq API errors logged server-side, generic message returned to client
- Security headers on all responses: CSP, HSTS, X-Frame-Options, nosniff, Permissions-Policy
- User code stored only in the browser's localStorage, never in a database
See docs/SECURITY.md for the full threat model.
ai-code-reviewer/
├── api/
│ ├── review.ts # Vercel Edge Function — Groq review proxy (streaming)
│ └── refactor.ts # Vercel Edge Function — Groq refactor proxy (streaming)
├── src/
│ ├── App.tsx # Main layout, tabs, editor, results; EditorStatusBar component
│ ├── index.css # Global styles + responsive media queries
│ ├── types/review.ts # ReviewResult, Issue, HistoryEntry types
│ ├── lib/
│ │ ├── groq.ts # System prompt + language config
│ │ └── share.ts # URL-based review sharing (base64)
│ ├── hooks/
│ │ ├── useReview.ts # State machine: idle→streaming→refactoring→done|error
│ │ ├── useHistory.ts # localStorage CRUD (20-entry cap)
│ │ └── useMediaQuery.ts # Responsive breakpoint hook
│ ├── components/
│ │ ├── FileDropZone.tsx # File upload + drag & drop
│ │ ├── EmbedBadge.tsx # Portfolio badge generator
│ │ └── Review/
│ │ ├── ScoreBadge.tsx # Animated SVG score gauge (counter, particles, shake)
│ │ ├── IssueCard.tsx # Severity-coded issue card with click-to-copy fix
│ │ └── DiffView.tsx # Split + Unified diff
│ └── test/ # 45 tests across 7 files
├── .github/workflows/
│ ├── ci.yml # Type-check + tests on every push
│ └── deploy.yml # Production deploy on merge to main
├── docs/
│ ├── ARCHITECTURE.md
│ ├── SECURITY.md
│ └── TESTING.md
├── CLAUDE.md # Architecture guide for Claude Code
├── ROADMAP.md # Feature roadmap
└── vercel.json # Security headers + CSP
MIT