React Inspector Prompt

A dev-only React tool for visually inspecting UI elements, attaching prompts, and triggering AI-assisted fixes via Claude Code CLI.

Quick Start

npx create-react-inspector-prompt

What It Does

React Inspector enables a visual workflow for marking UI issues in your browser and having Claude fix them:

1. Inspect elements in browser with overlay
2. Add prompts describing what needs to change
3. Save structured context to .react-inspector/session.json
4. Run claude "fix react-inspector" to apply fixes

Installation

The CLI installer will:

• Detect your framework (Vite, Next.js, etc.)
• Install required packages
• Configure the Vite plugin
• Create the .react-inspector/ directory
• Add <DevInspector /> to your entry file

Manual Installation

If you prefer manual setup:

# Install packages
npm install react-inspector-prompt-react
npm install -D react-inspector-prompt-vite-plugin

# Add to vite.config.ts
import reactInspector from 'react-inspector-prompt-vite-plugin'

export default defineConfig({
  plugins: [react(), reactInspector()]
})

# Add to your app (main.tsx or App.tsx)
import { DevInspector } from 'react-inspector-prompt-react'

function App() {
  return (
    <>
      {import.meta.env.DEV && <DevInspector enabled={false} />}
      {/* Your app */}
    </>
  )
}

Usage

1. Start dev server and look for the 🔍 button in bottom-right

2. Click to enable the inspector, then hover over elements

3. Click an element to open the prompt modal

4. Describe the issue and save

5. Run Claude:

   claude "fix react-inspector"

Features

• Interactive Toggle Menu - Toggle inspector, view issues panel, copy issues
• Component Detection - Shows React component names via fiber tree
• DOM Path Generation - Stable CSS selectors (data-testid → id → React name → nth-child)
• Issues Panel - View all saved issues in a scrollable list
• Session Persistence - Auto-saves to .react-inspector/session.json
• Dev-Only - Tree-shaken in production, never shipped to users

CLI Options

npx create-react-inspector-prompt [path] [options]

# Options:
  -d, --debug    Enable debug output
  --yes          Skip prompts and use defaults

Session Schema

Issues are saved to .react-inspector/session.json:

{
  "version": "1.0.0",
  "project": "my-app",
  "issues": [
    {
      "id": "uuid",
      "timestamp": 1709000000000,
      "url": "http://localhost:5173",
      "viewport": { "width": 1920, "height": 1080 },
      "element": {
        "tag": "button",
        "classList": ["primary"],
        "domPath": "#root > button.primary",
        "reactComponentName": "SubmitButton"
      },
      "prompt": "Make this button larger"
    }
  ]
}

Packages

• react-inspector-prompt-core - Shared utilities, DOM helpers, session I/O
• react-inspector-prompt-react - DevInspector React component & overlay UI
• react-inspector-prompt-vite-plugin - Vite plugin for dev middleware
• create-react-inspector-prompt - CLI installer (this package)

Requirements

• React 18+ or React 19
• Vite 5+ (for plugin functionality)
• Node.js 18+
• pnpm 8+ (for development)

Development

# Clone repo
git clone https://github.com/yourusername/react-inspector-prompt.git
cd react-inspector-prompt

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

Security

• Dev-only: All components are tree-shaken in production
• Local-only: Data never leaves your machine
• Vite middleware: Only active in dev mode, rejects production requests

License

MIT

Contributing

Contributions welcome! This is an open-source project for improving the React developer workflow.

Built with ❤️ for the React + Claude ecosystem