Overview
Inspector is a visual front-end editor designed specifically for AI coding agents. It bridges the gap between visual design and code by allowing developers to edit user interfaces directly in a browser while their AI coding agent (Claude Code, Cursor, or Codex) handles the underlying code changes. The application runs locally on your machine with your codebase, though you'll need an internet connection to use AI agent features and GitHub integration. Inspector is particularly valuable for developers who want to iterate on front-end designs faster by combining visual editing with AI-powered code generation. Currently available for MacOS with Windows support on the waitlist.
Key Features
- Visual Element Editor — Move UI elements with drag-and-drop, edit text inline, and apply changes directly to your codebase without writing code manually.
- AI Coding Agent Integration — Connect seamlessly to Claude Code, Cursor, or Codex, enabling your preferred AI assistant to handle code modifications based on your visual edits.
- Click-to-Code Mapping — Click any element on the page to see its exact source code location, making it easy to understand component structure and relationships.
- Local-First Architecture — Your codebase and chat histories stay on your device. Inspector itself doesn't train on your code, though connected services (AI agents, GitHub) have their own data handling policies.
- Page-Aware Screenshots — Capture screenshots that automatically snap to UI elements, providing precise visual context for documentation or feedback.
- GitHub Integration — Create branches, commit changes, and publish pull requests directly from Inspector using built-in GitHub CLI capabilities, streamlining the version control workflow.
Pricing & Plans
Inspector offers a free download for MacOS users. Connecting to external AI coding agents (Claude Code, Cursor, Codex) is free to use. However, Inspector also offers a paid subscription at approximately $20/month that provides access to Inspector's built-in AI agent with usage credits and additional model options.
The free tier is suitable for most developers who already have Claude Code, Cursor, or Codex subscriptions. The paid plan is designed for users who want to use Inspector's native agent capabilities without separate AI tool subscriptions.
Windows support is not yet available. You can join the waitlist on the Inspector website to be notified when it launches.
Pros & Cons
Pros
- Minimal setup required — Download and connect to your project folder quickly without complex configuration
- Visual workflow for developers — Bridges the gap between designers and developers by making front-end editing more intuitive
- Local data storage — Your code and chat histories remain on your device; Inspector itself doesn't upload or train on your code
- Multi-agent compatibility — Works with three major AI coding tools (Claude Code, Cursor, Codex) instead of locking you into one platform
- GitHub workflow integration — Commit and publish changes without leaving the tool
Cons
- MacOS only — Windows users must join a waitlist and wait for future releases
- React-optimized — While it works with any front-end framework, the visual context engine performs best with React applications
- Limited to front-end — Focused exclusively on UI editing, not suitable for backend development or full-stack workflows
Best For
- Front-end developers using AI coding assistants who want to speed up UI iteration cycles
- Designers with coding knowledge who need to push changes directly to production codebases
- Teams using Claude Code, Cursor, or Codex who want a visual layer for their development workflow
- Developers working on React applications who need precise element-to-code mapping
- Solo developers building web apps with visual coding tools like Lovable, Bolt, or Figma Make who want to continue editing locally
FAQ
Is there any setup required?
No setup is required. Simply download Inspector, select your codebase folder or start from a template, and begin editing. The tool automatically detects your project structure.
Is this a browser or an IDE?
Inspector functions as both. It provides a browser interface where you can visually edit elements, but these edits are immediately saved to your codebase like an IDE would. Think of it as a visual layer on top of your code editor.
How do I get started with Inspector?
Download Inspector for MacOS, connect to Claude Code, Cursor, or Codex through the app settings, then open a local project folder. If you have a project from Lovable, Figma Make, Bolt, or another AI website builder, download that project's code and open the folder in Inspector.
Is Windows supported?
Windows is not currently supported. You can join the waitlist on the Inspector website to be notified if and when Windows compatibility becomes available.
How do I publish my changes?
Inspector integrates with GitHub, allowing you to create a new branch, commit your changes, and publish a pull request directly from the application without switching to a terminal or separate Git client.
What about data and privacy?
Your codebase and chat histories are stored locally on your device. Inspector itself does not train AI models on your code or upload your files. However, when you use connected services like Claude Code, Cursor, Codex, or GitHub, those platforms have their own data handling policies that are independent of Inspector.
I'm a designer, can I use Inspector?
Yes. Many designers are already using Inspector to make changes to production codebases. The visual editing interface is designed to be intuitive for designers while still maintaining connection to the underlying code.
Does this work with any front-end framework?
Inspector works with any front-end framework, but it performs best with React applications. The visual context engine can directly link elements to React components in your codebase. For other frameworks, you can still use visual editing features, but the code mapping may be less precise.
