AI Code Reviewer

A modern, AI-powered code review tool built with Next.js 14, Monaco Editor, and OpenAI. Select code, ask questions, and get intelligent feedback in real-time.

Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3000

Features

• Monaco Editor - Full VS Code editing experience with syntax highlighting for 18+ languages
• AI Code Review - Get intelligent feedback on selected code using OpenAI GPT-4
• Multiple Threads - Create independent review threads for different code sections
• Visual Indicators - See which code has active threads with gutter highlights
• Thread Management - Resolve, reopen, and delete review threads
• Conversation History - Follow-up questions maintain context within threads
• Keyboard Shortcuts - Enter to send, Cmd/Ctrl+Enter for multi-line

Configuration

AI Provider Setup

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

# Use mock provider (no API key needed - great for demos)
AI_PROVIDER=mock

# OR use OpenAI (requires API key)
AI_PROVIDER=openai
OPENAI_API_KEY=sk-your-api-key-here
OPENAI_MODEL=gpt-4o-mini  # or gpt-4o for better quality

Available Providers

Provider	Description	API Key Required
mock	Returns simulated responses for testing/demos	No
openai	Uses OpenAI's GPT models for real AI reviews	Yes

Architecture

app/
├── page.tsx              # Main application with state management
├── api/ai/route.ts       # AI endpoint (Node.js runtime)
├── layout.tsx            # Root layout with dark mode
└── globals.css           # Tailwind + custom styles

components/
├── Editor/
│   └── CodeEditor.tsx    # Monaco wrapper with thread decorations
├── Threads/
│   ├── ThreadPanel.tsx   # Thread list + conversation view
│   ├── ThreadCard.tsx    # Thread preview cards
│   ├── MessageBubble.tsx # Chat message display
│   └── ThreadInput.tsx   # Message input with keyboard shortcuts
├── Toolbar/
│   └── Toolbar.tsx       # Language selector + Ask AI button
└── ui/                   # shadcn/ui components

lib/ai/
├── index.ts              # AI provider factory
├── types.ts              # TypeScript interfaces
├── providers/
│   ├── mock.ts           # Mock provider for testing
│   └── openai.ts         # OpenAI integration
└── prompts/
    └── code-review.ts    # Prompt engineering

hooks/
├── useThreads.ts         # Thread state management
└── useAI.ts              # AI API interaction

Key Design Decisions

1. Per-Thread Loading State

Each thread tracks its own loading state independently, allowing users to switch between threads and ask questions while another thread is processing.

2. Provider Abstraction

The AI layer uses a factory pattern with pluggable providers, making it easy to:

• Test with mock responses (no API costs)
• Switch between OpenAI models
• Add new providers (Anthropic, Ollama, etc.)

3. Monaco Decorations

Thread indicators are rendered using Monaco's decoration API, providing:

• Gutter dots for threads
• Line highlighting for selected code
• Hover tooltips with thread info
• Click-to-navigate functionality

4. Edge Cases Handled

• Empty code gracefully handled
• Long code selections truncated with "Show more" toggle
• No selection shows helpful tooltip on Ask AI button
• Error messages displayed inline and as auto-dismissing toasts

Trade-offs Made

Decision	Trade-off	Reason
In-memory storage	Data lost on refresh	MVP speed, no backend complexity
Single file only	No multi-file projects	Focused on core review experience
No authentication	Anyone can use	Prototype scope
Node.js runtime	Slightly slower than Edge	OpenAI SDK compatibility

What I'd Do Differently With More Time

1. Supabase Integration - Persist threads and conversations across sessions
2. Streaming Responses - Real-time AI output as it generates
3. Diff View - Show suggested code changes with accept/reject
4. Multi-file Support - Review entire projects with file tree
5. Collaborative Features - Share review sessions via URL
6. Export Functionality - Generate markdown report of all threads
7. Language Auto-Detection - Automatically detect code language

Tech Stack

• Framework: Next.js 14 (App Router)
• Editor: Monaco Editor (VS Code's editor)
• Styling: Tailwind CSS + shadcn/ui
• AI: OpenAI GPT-4o-mini (configurable)
• Language: TypeScript

AI Tools Used in Development

This project was built using Claude Code (Anthropic's AI coding assistant) for:

• Rapid prototyping and iteration
• Component architecture decisions
• TypeScript type definitions
• Bug fixing and debugging
• Documentation generation

Scripts

npm run dev        # Start development server
npm run build      # Build for production
npm run start      # Start production server
npm run lint       # Run ESLint
npm run type-check # Run TypeScript compiler

License

MIT