Visual Diff

Visual Diff is a local-first Next.js app for reviewing git changes with AI context. Open a repository folder, inspect one changed file at a time, jump between change blocks, and ask targeted questions about specific code changes.

Select Folder	Visual Diff using AI

Features

• Native folder picker for opening a local git repository
• File-by-file diff review built on CodeMirror MergeView
• Floating changed-file map with keyboard navigation
• AI summaries for the selected file diff
• AI-generated labels for change blocks
• Click a changed code block to ask for a detailed explanation
• Follow-up chat that keeps prior answers visible

Privacy Model

Visual Diff runs locally and reads files through the local Next.js server. No account, database, or hosted backend is required.

AI features call the OpenAI API from local server routes. When AI feedback is requested, the relevant diff, code context, and question are sent to OpenAI. Do not use AI features on repositories whose code you are not allowed to send to your configured OpenAI account.

Requirements

• Node.js 20 or newer
• pnpm 10
• Git
• OPENAI_API_KEY for AI features

The folder chooser uses platform tools:

• macOS: AppleScript through osascript
• Windows: PowerShell
• Linux: zenity

Setup

pnpm install
cp .env.example .env.local

Set your API key in .env.local:

OPENAI_API_KEY=your_api_key_here

Run

pnpm dev

Open http://localhost:3000, click Open folder, choose a local git repository, and start reviewing the current git state.

Development

Useful scripts:

pnpm dev           # start the local app
pnpm test          # run Vitest
pnpm typecheck     # run TypeScript checks
pnpm lint          # run oxlint
pnpm format        # format with oxfmt
pnpm format:check  # check formatting with oxfmt
pnpm check         # typecheck + lint + format check
pnpm build         # production build

Lefthook installs on pnpm install and runs the required pre-commit gate:

pnpm typecheck
pnpm lint
pnpm format:check

If hooks were skipped during install, run:

pnpm exec lefthook install

Tech Stack

• Next.js App Router
• React 19
• Tailwind CSS 4
• shadcn-style Radix UI primitives
• CodeMirror MergeView
• Vercel AI SDK with the OpenAI provider
• oxlint and oxfmt
• Vitest
• Lefthook

Contributing

Before opening a pull request, run:

pnpm check
pnpm test
pnpm build

Keep changes focused and avoid committing local .env files or generated build output.

License

MIT