Inspector

Inspector is a visual front-end editor that connects to AI coding agents like Cursor, Claude Code, and OpenAI Codex. It provides a browser-based visual interface where you can click to edit text, drag to move elements, and leave comments—all changes are applied to your local codebase automatically by the AI. The tool bridges the gap between visual design and code, making it easier for developers and designers to ship front-end changes faster.

• Visual Element Editing - Move any element visually on the page, click apply, and have the changes saved directly to your codebase without writing code manually.

• AI Coding Agent Integration - Connect your Claude Code, Cursor, or OpenAI Codex account to leverage AI-powered code generation and modifications through a visual interface.

• Click-to-Context Linking - Inspector links visual elements to their exact line of code, providing instant context for AI agents to understand what you want to change.

• Page-Aware Screenshots - Take screenshots that snap to any element on your page, providing visual context for AI coding agents to understand your design intent.

• Inline Text Editing - Double-click to edit any text on the page and save it directly to your codebase without navigating through files.

• GitHub Integration - Create branches, commit changes, and publish pull requests directly from Inspector without leaving the application.

• Completely Local - All data is stored locally on your device. Inspector doesn't train on proprietary code, and chat histories remain on your machine.

• React Optimization - Works best with React apps, linking visual elements directly to React components in your codebase, though it supports other front-end frameworks as well.

To get started, download Inspector for MacOS, select your codebase or start from a template, and connect to your preferred AI coding agent. If you have projects from tools like Lovable, Figma Make, or Bolt, you can download the code and open the folder in Inspector to continue working on it visually.