Inspector

What is Inspector?

Inspector is a visual front-end editor that connects your browser to an AI coding agent such as Claude Code, Codex, or Cursor. Its core purpose is to let you edit and iterate on a React, Next.js, or Vite app’s front end visually while your agent can be used in the workflow.

Rather than working only through code files, Inspector lets you manipulate elements directly in the interface—moving elements, editing text, and leaving comments—while keeping the changes tied to a local codebase.

Key Features

• Visual editing of front-end elements: Move elements visually and edit text directly in the browser, which helps you adjust UI without switching entirely to code.
• Comment-driven collaboration in the visual editor: Leave comments to indicate what should change, making it easier to iterate with your coding agent.
• Connects to AI coding agents (Claude Code, Codex, Cursor): Inspector links your editing session to an agent account so the workflow can incorporate AI-driven coding.
• Local-codebase workflow: Inspector connects to a local codebase, indicating that edits are performed in the context of your existing app rather than in a separate hosted environment.
• Supports modern front-end frameworks (React, Next.js, Vite): The product positions itself for these stacks, aligning the editor workflow with common web development setups.

How to Use Inspector

1. Install Inspector on macOS (the site indicates availability for MacOS).
2. Open Inspector and connect your AI agent account by selecting an agent such as Claude Code, Codex, or Cursor.
3. Point Inspector to your local codebase for your app (the site states it can connect to any local codebase).
4. Launch the visual editor and start editing your front end by moving elements, editing text, and adding comments to guide changes.

Use Cases

• Rapid UI adjustments during development: When you need to fine-tune layout spacing or reposition components, use the visual editor to move elements and update text while your changes stay connected to your local app.
• Iterating on a design with agent assistance: Leave comments in the visual editor to specify what should be changed, then use the connected AI coding agent to help implement the updates.
• Front-end editing in React/Next.js projects: For teams working in React, Next.js, or Vite, use Inspector as a browser-based UI editing layer while continuing to work from the local codebase.
• Front-end troubleshooting and refinements: If a UI element isn’t behaving as expected, use the visual editor to identify the target element and adjust it visually before syncing changes back into your development workflow.
• Comment-based handoffs: When multiple people review UI changes, comments in the visual editor can capture intent (what to change and where) before implementation is iterated with the agent.

FAQ

• Which operating system is Inspector available for? The website states it is available for macOS.

• Does Inspector work with my local project files? Yes. The site says Inspector connects to any local codebase.

• Which AI coding agents does Inspector support? The site names Claude Code, Codex, and Cursor as supported agents.

• What kinds of front-end apps is it intended for? The site mentions React, Next.js, and Vite.

• What can I edit in the visual editor? The site indicates you can move elements, edit text, and leave comments to make changes.

Alternatives

• Code-first UI editing in React/Next.js/Vite (local IDE): Use a standard editor (e.g., writing and running code changes directly). This typically provides full control but lacks a browser-based visual manipulation workflow.
• Visual UI builders/workflows: Tools that focus on drag-and-drop UI construction can speed up layout changes, though they may not connect to an AI coding agent in the same way or map changes directly onto a local codebase.
• AI-assisted coding tools without a visual front-end editor: Agent-based coding workflows can generate code changes from prompts, but without the ability to move elements and annotate the UI directly in the browser.
• Browser-based component inspection tools: Developer-focused inspection tools help you understand layout and DOM structure, but they generally don’t provide a full visual editing session connected to an AI coding agent for iteration.