CodeScan AI

CodeScan AI is a frontend-only React and Vite application for AI-assisted code review of patches, diffs, and change sets. It lets you paste a diff, upload a patch file, or fetch changes from GitLab, then runs analysis through either Google Gemini or an OpenAI-compatible endpoint configured through LiteLLM.

The app is optimized for structured review output: issues are grouped by file and severity, stored in local history, and presented through a dashboard and dedicated results view.

What It Does

• Analyzes pasted diffs, uploaded .patch / .diff / .txt files, and GitLab merge request or commit URLs.
• Supports multiple review modes:
  • standard for general quality and bug checks.
  • deep for architecture and maintainability review.
  • security for vulnerability-focused analysis.
• Works with two provider flows:
  • Google Gemini via @google/genai.
  • OpenAI-compatible chat completion APIs via LiteLLM or similar gateways.
• Stores review history, settings, and the active user profile in browser localStorage.
• Provides a dashboard with recent activity and issue counts.
• Includes a debug mode that can show the original submitted patch alongside the generated findings.

Tech Stack

• React 18
• TypeScript
• Vite 5
• Tailwind CSS 3
• Google OAuth for sign-in

Local Development

Requirements

• Node.js 18+ recommended
• npm

Install

npm install

Environment Variables

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

API_KEY=your_gemini_api_key
VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id

Notes:

• API_KEY is required only when using the Google Gemini provider.
• VITE_GOOGLE_CLIENT_ID enables Google sign-in. If it is not set, the app still allows a guest demo login from the auth screen.

Start the Dev Server

npm run dev

Production Build

npm run build

Preview the Production Build

npm run preview

Usage Flow

1. Sign in with Google or continue in guest mode.
2. Open Settings and choose your analysis provider.
3. If needed, add:
   • a GitLab token for private merge requests or commits,
   • a LiteLLM base URL and credential,
   • a preferred OpenAI-compatible model name.
4. Paste a diff, upload a patch file, or fetch changes from a GitLab URL.
5. Add optional review context such as focus areas or architectural concerns.
6. Run analysis and inspect the structured results by severity and file.

Provider Configuration

Google Gemini

Google Gemini is the default provider. It uses the API_KEY environment variable at build/runtime through Vite config injection.

Current model selection in the app:

• standard: gemini-2.5-flash
• deep and security: gemini-3-pro-preview

OpenAI-Compatible / LiteLLM

The settings screen also supports OpenAI-compatible chat completion endpoints.

You can configure:

• Base URL
• API key authentication
• OAuth access token authentication
• Explicit model name

The app sends requests to a /chat/completions endpoint and expects JSON-formatted review output.

GitLab Support

The submission screen can fetch diffs from:

• GitLab merge request URLs
• GitLab commit URLs

For private repositories, set a GitLab personal access token in settings. If API-based fetch fails, the app also attempts a direct fetch of the provided URL.

Data Storage

This project has no backend persistence layer.

The browser stores the following data in localStorage:

• review settings
• review history
• signed-in user profile
• sidebar width preferences

Security Notes

Because this is a frontend-only app:

• provider credentials are handled in the browser,
• settings are stored locally in browser storage,
• GitLab tokens and LiteLLM credentials entered in the UI remain client-side.

Use scoped, non-production credentials where possible. Do not treat this app as a secure secret-storage solution.

Project Structure

.
├── App.tsx                         # Main app shell and view routing
├── config.ts                       # Environment variable access
├── types.ts                        # Shared application types
├── components/
│   ├── AuthScreen.tsx              # Google sign-in / guest entry
│   ├── DashboardView.tsx           # Review history dashboard
│   ├── ResultsView.tsx             # Structured review results UI
│   ├── SettingsView.tsx            # Provider, token, and dev settings
│   └── SubmissionView.tsx          # Patch input, upload, and GitLab fetch
├── services/
│   ├── geminiService.ts            # Analysis orchestration and provider calls
│   └── contextEnrichmentService.ts # Lightweight tech detection and reference hints
└── tailwind.config.js              # Tailwind source scanning and theme config

Development Notes

• The app is client-rendered and does not depend on a custom backend.
• Analysis history is capped locally to the most recent 50 items.
• Tailwind content scanning is limited to the actual app source directories to avoid scanning node_modules.

Current Status

The project currently builds successfully with:

npm run build

There may still be npm deprecation warnings from transitive dependencies pulled in by @google/genai, but they do not currently block the build.