AI PR Reviewer

Paste a GitHub pull request URL. Get an instant, streaming AI code review — powered by Claude.

---

What it does

Drop in any public GitHub PR URL and the app:

1. Fetches the diff via the GitHub API (Octokit)
2. Chunks the diff by file, capping at ~4 000 tokens per chunk so nothing gets truncated
3. Streams a review from Claude Opus 4.6 over SSE — you see the output as it's generated
4. Renders the result as formatted Markdown with syntax-highlighted code blocks

Error states (bad URL, expired token, rate-limited, network failure) are caught and displayed with contextual hints and a retry button.

---

Tech stack

Layer	Choice	Why
Framework	Next.js 16 App Router	File-based routing, built-in API routes, RSC-ready
Language	TypeScript 6 strict	Zero any, type only, full inference
Styling	Tailwind CSS v4	Utility-first, zero runtime
AI	Anthropic SDK + Claude Opus 4.6	Best-in-class code reasoning
GitHub	Octokit REST	Typed GitHub API client
Streaming	SSE (Server-Sent Events)	Unidirectional, HTTP-native, works with Next.js routes
Animations	LottieFiles (lottie-react)	Loading, success, and error states
Markdown	react-markdown	Safe, extensible renderer

---

Project structure

src/
├── app/
│   ├── api/review/route.ts   # POST endpoint — fetches diff, calls Claude, streams SSE
│   ├── layout.tsx
│   └── page.tsx              # Thin orchestrator — state + wiring only
├── components/
│   ├── BackgroundScene.tsx   # CSS hero glow + dot grid + noise grain
│   ├── Navbar.tsx
│   ├── HeroSection.tsx
│   ├── ReviewForm.tsx        # URL input, GitHub token, submit button
│   ├── LoadingStatus.tsx     # Lottie spinner + cycling status messages
│   ├── ErrorCard.tsx         # Lottie error animation + categorised hint
│   ├── ReviewOutput.tsx      # Streaming pre / Markdown prose + Lottie checkmark
│   ├── icons/                # SVG icons, barrel export
│   └── ui/                   # LoadingDots, Spinner
├── lib/
│   ├── github.ts             # parsePrUrl, fetchPrDiff (Octokit)
│   ├── chunker.ts            # chunkDiff — splits files at ~4 000 tokens
│   ├── categorizeError.ts    # Maps error messages to user-friendly titles + hints
│   └── types.ts              # Shared types: ReviewPhase, PRInfo, DiffChunk, SSEEvent …
└── styles/
    ├── animations.css        # @keyframes only
    ├── background.css        # Hero glow, dot grid, noise overlay, text-gradient
    ├── components.css        # glass-card, fancy-input, fancy-button, error-card …
    └── prose.css             # .prose-review — Markdown typography
public/
└── animations/
    ├── loading.json          # LottieFiles — concentric spinner
    ├── success.json          # LottieFiles — checkmark
    └── error.json            # LottieFiles — bouncy fail

---

Getting started

Prerequisites

• Node.js 20+
• pnpm
• Anthropic API key → console.anthropic.com
• GitHub personal access token (optional — only needed for private repos)

Local setup

git clone https://github.com/YOUR_USERNAME/ai-pr-reviewer.git
cd ai-pr-reviewer

pnpm install

cp .env.example .env.local
# fill in ANTHROPIC_API_KEY (and optionally GITHUB_TOKEN)

pnpm dev
# → http://localhost:3000

Environment variables

Variable	Required	Description
ANTHROPIC_API_KEY	Yes	Your Anthropic API key
GITHUB_TOKEN	No	GitHub PAT — raises rate limit and enables private repo access