AI Code Reviewer

→ Live Demo

No sign-up needed. Paste code, pick a language, click Review.

Paste any code, pick the language, get back a structured review — bugs, security issues, performance problems, accessibility notes, and best practice violations — broken into categories with severity levels and concrete fix suggestions. Results stream in live as Gemini generates them.

Built this because every "AI code reviewer" I found was just a textarea piped into a chatbot. I wanted something that actually looks and feels like a developer tool.

---

What it does

• Reviews code in 22 languages — JavaScript, TypeScript, Python, Go, Rust, Java, C#, Ruby, PHP, Swift, Kotlin, C, C++, HTML, CSS, React, Tailwind, Node.js, PostgreSQL, MySQL, MongoDB, GraphQL
• Streams results live — you see each category appear as Gemini finishes it, not one wall of text at the end
• Structured output — every issue has a severity badge (Critical / Warning / Info), a description, and a specific fix suggestion you can copy with one click
• Health score — a 0–100 score computed from the issue breakdown, shown as an animated circular ring
• Review history — last 3 reviews are saved to localStorage so you can flip back without re-running
• Live line and character count in the editor as you type

---

The parts worth talking about

Getting Gemini to always return structured JSON

This was the actual engineering problem. If you just ask an LLM to "review this code", you get prose. Getting it to return consistent, parseable JSON across hundreds of different inputs — some well-formatted, some minified, some deliberately broken — required careful prompt work.

The prompt ends with Respond with raw JSON only. Begin your response with { which forces the model to start its response with the opening brace rather than any preamble. Temperature is set to 0.1 to reduce creativity in the output structure.

Even with that, Gemini occasionally wraps the response in markdown code fences. parseReview() handles this by stripping fences, then finding the first { and last } in the response and slicing to that range before parsing. This catches most malformed responses:

const start = cleaned.indexOf('{')
const end   = cleaned.lastIndexOf('}')
cleaned = cleaned.slice(start, end + 1)

Streaming that actually renders progressively

Most "streaming" implementations just wait for the full response and display it at once. This uses Gemini's SSE endpoint (alt=sse) and processes each data: line as it arrives. The tricky part is that SSE chunks don't always align with line breaks — a single data: line can arrive split across multiple read() calls.

The fix is buffering: incomplete lines get appended to a buffer, and only complete lines (ending in \n) get processed:

buffer += decoder.decode(value, { stream: true })
const lines = buffer.split('\n')
buffer = lines.pop() // keep incomplete last line for next iteration

Health score calculation

The score comes from Gemini — the prompt specifies the rules (start at 100, subtract 15 per critical, 7 per warning, 2 per info). parseReview() clamps it to 0–100 regardless of what the model returns. The circular ring uses SVG stroke-dashoffset to animate the progress:

circumference = 2π × 36
offset = circumference - (score / 100) × circumference

The color shifts from red → yellow → green at the 60 and 80 thresholds.

---

Stack

React + Vite, Framer Motion for animations, Gemini 3.5 Flash for the reviews. No charting library — the health score ring is plain SVG.

---

Run locally

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

Create a .env file (see .env.example):

VITE_GEMINI_API_KEY=your_key_here

Get a free API key at aistudio.google.com — no credit card needed.

npm run dev

Open http://localhost:5173.

---

Code structure

src/
├── gemini.js            # API layer — prompt, streaming, parsing
├── App.jsx              # State, layout, editor, history
└── components/
    └── ReviewPanel.jsx  # Health score, category sections, issue cards, copy button

gemini.js has no React in it. The data pipeline is completely separate from the UI — reviewCode() takes callbacks, parseReview() takes a string and returns structured data or null. Made it easier to test the prompt engineering without touching the UI.

---

Known limitations

• Code over 8,000 characters gets truncated — a warning shows in the UI when this happens
• Gemini's free tier rate-limits to roughly 15 requests per minute — the app surfaces a readable error when this happens
• The health score is generated by the model, not recomputed from the returned issues — they can occasionally disagree slightly
• No multi-file support — reviews a single paste only

---

© 2026 Raghavendra Tripathi. All rights reserved. This repository is for portfolio demonstration only. The code may not be reused or redistributed without explicit written permission.