Edit with AI — Dev Inspector Tool

A browser overlay dev tool that lets you visually select UI elements and instantly request AI changes, eliminating the need to describe where to edit.

Features

✨ Visual Selection — Click elements directly instead of describing locations 🎨 Context Menu — Right-click any element to see component info 📝 Quick Instructions — Type what you want to change 🔍 Component Detection — Auto-detects React component name, file path, and line number 🎯 Element Highlighting — Visual feedback on selection 🌈 Quick Color Picker — Easy color changes without typing hex codes ⌨️ Keyboard Shortcuts — Ctrl+Shift+E to toggle inspect mode ✓ Toast Notifications — Confirmation when requests are sent

How It Works

1. Activate Inspect Mode — Press Ctrl+Shift+E or right-click any element
2. Select Element — Click/hover to highlight the element you want to edit
3. Choose Action — Right-click to open context menu, click "Edit with AI"
4. Type Instruction — Type what you want changed (e.g., "make this button red and bigger")
5. Submit — Click "Send to Claude" or press Ctrl+Enter
6. Sit Back — The request is saved to .ai-edit-request.json and Claude makes the edit

Installation

1. Add to Your React + Vite Project

npm install ../Dev\ Tool

2. Add DevInspector to Your App Layout

In your main app component (e.g., src/App.tsx):

import { DevInspector } from 'edit-with-ai'

export function App() {
  return (
    <div>
      {/* Your app content */}

      {/* Add inspector at root level */}
      <DevInspector />
    </div>
  )
}

3. Configure Vite Plugin

In your vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { editWithAIPlugin } from 'edit-with-ai'

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

4. (Optional) Add CSS Import

The component comes with built-in styles, but if you want to import them explicitly:

import 'edit-with-ai/dist/styles/inspector.css'

Usage in Claude Code

Once you've submitted an edit request:

1. In Claude Code, just type "check"
2. Claude reads .ai-edit-request.json with full context:
   • Component name
   • File path & line number
   • Current CSS classes
   • Your instruction
3. Claude opens the file and makes the edit
4. App hot-reloads and you see the change instantly

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl+Shift+E | Toggle inspect mode (shows crosshair cursor) | | Escape | Close dialog / exit menu | | Ctrl+Enter | Submit instruction |

File Structure

.
├── src/
│   ├── DevInspector.tsx          # Main component
│   ├── components/
│   │   ├── ContextMenu.tsx       # Right-click menu
│   │   ├── InspectDialog.tsx     # Instruction input dialog
│   │   └── Toast.tsx             # Notification toast
│   ├── utils/
│   │   └── fiber.ts              # React fiber traversal (component detection)
│   ├── styles/
│   │   └── inspector.css         # All styles (self-contained)
│   ├── vite/
│   │   └── plugin.ts             # Vite middleware plugin
│   └── types/
│       └── index.ts              # TypeScript types
├── package.json
├── tsconfig.json
└── README.md

Output Files

When you submit an edit request, the tool creates:

• .ai-edit-request.json — Current request (latest, read this in Claude Code)
• .ai-requests/ai-edit-TIMESTAMP.json — Historical archive of all requests

Example .ai-edit-request.json:

{
  "component": "CreateInvoiceButton",
  "file": "src/pages/invoices/create-invoice-button.tsx",
  "line": 34,
  "classes": "bg-primary text-white rounded-md px-4 py-2",
  "props": {
    "onClick": "function",
    "disabled": false
  },
  "instruction": "make this button larger with a green gradient",
  "colorOverride": "#10b981",
  "timestamp": "2026-03-28T12:34:56.789Z"
}

Dev Mode Only

The <DevInspector /> component is automatically disabled in production builds. It only activates in development.

Future Enhancements

• [ ] Capture screenshot and include in request
• [ ] Annotate/draw on screenshot
• [ ] Undo/redo request history UI
• [ ] Real-time edit preview
• [ ] Multi-element batch editing
• [ ] Custom color picker (hex input)
• [ ] Save/load instruction templates

Roadmap: From Dev Tool to Product

If this proves valuable as a dev tool, future versions could:

• Standalone SaaS (no code setup required)
• Browser extension for any web app
• Team collaboration features
• Design-to-code pipeline integration
• Multi-language support

License

MIT (Adam's Projects)