Stop Copy-Pasting Context to AI — Click a Component, AI Knows Where to Fix It

hugo.felix — Thu, 09 Apr 2026 06:51:30 +0000

Why Inspecto

Since frontend development entered the AI-assisted era, tools like Claude Code, Cursor, and Copilot have dramatically accelerated how we write code. But the more you use them, the more you realize: the bottleneck isn't writing code anymore — it's finding it.

Picture this: your PM says "make that button rounded and fix the click handler." So you open DevTools, inspect the element, copy the class name, switch to your editor, search across dozens of files with similar names, finally locate the component, then copy-paste the path and context to your AI assistant…

That loop takes 2–3 minutes every time. In complex projects, even longer. 20 small changes a day = nearly an hour lost just finding code. You're constantly context-switching between browser, DevTools, editor, and AI — breaking your flow over and over.

To eliminate this loop entirely, we built Inspecto.

What Is Inspecto

Inspecto is a browser-first frontend development workflow tool. Its core idea in one sentence:

Start from the webpage, precisely locate the source code, and seamlessly hand off context to your AI assistant. No DevTools, no manual file searching, no copy-pasting context. You click it on the page, AI knows where to fix it.

Three Core Modes

1. Quick Jump — Source Code Navigation

The lightest capability — worth using even without AI. Hold Alt + Click on any element in the browser, and your editor instantly opens the exact source file and line. No searching, no guessing.

inspecto-dev.github.io

Use cases: Quick bug location, navigating legacy codebases, tracing component hierarchies.

2. Inspect Mode — Click a Component, Ask AI Directly

Click any component on the page, and Inspecto opens a menu with AI actions — including built-in and custom commands.

When you activate Inspect Mode and click a component, Inspecto automatically collects:

Source file location (path + line number)
Component tree path
Runtime errors on the page
CSS styles associated with the element

Then sends everything to your local AI assistant in one click. You can use built-in commands for common tasks, or define custom commands for your team's workflow.

inspecto-dev.github.io

Use cases: Single-point UI tweaks, localized logic fixes, high-frequency command execution.

3. Annotate Mode — Batch Annotations, Packaged for AI

Select multiple components across the page, add notes to each, and send them all to AI at once.

Sometimes you need to fix more than one thing. Your PM drops 5 UI adjustments at once, scattered across the page. Going through Inspect Mode one by one is still slow. Annotate Mode lets you work like commenting on a design file: circle multiple components, add annotations to each, then send the entire batch to AI for coordinated changes.

Normal Mode:

inspecto-dev.github.io

Quick Mode:

inspecto-dev.github.io

Use cases: Page-level refactors, post-UI-review batch fixes, multi-component coordinated changes.

Zero-Friction Setup

We know how complex frontend toolchains can be, so Inspecto is designed for minimal onboarding.

Step 1: Navigate to your project root.

Step 2: Run the install command matching your IDE + AI assistant:

🔥 VS Code + Claude Code

npx @inspecto-dev/cli integrations install claude-code --scope project --host-ide vscode

🎯 Cursor Built-in AI

npx @inspecto-dev/cli integrations install cursor --host-ide cursor

🎯 Trae Built-in AI

npx @inspecto-dev/cli integrations install trae --host-ide trae-cn

💡 We also fully support Copilot, Codex, and Gemini, and work with pnpm / yarn / bun. See the full setup docs for details.

Step 3: Start your dev server, open the browser, and enjoy.

Broad Build Tool Support

Vite, Webpack, Rspack, Rollup, esbuild, Next.js, Nuxt — all supported.

Production safety is built in:

Tree-shaking removes all Inspecto code from production builds
Shadow DOM isolation prevents any style pollution
Zero runtime injection — no hooks, no patches, no monkey-patching

⭐ Like It? Give Us a Star!

Inspecto is fully open source. As frontend developers who've been burned by the "find the code" loop too many times, we hope this tool saves you real time every day.

If Inspecto solves a real pain point for you, or you find the design approach interesting, a Star on GitHub helps more people discover it.

👉 github.com/inspecto-dev/inspecto

More links:

📖 Documentation: inspecto-dev.github.io/inspecto
💬 Feedback: GitHub Discussions or Issues

Happy to answer any questions in the comments!

DEV Community: hugo.felix

Stop Copy-Pasting Context to AI — Click a Component, AI Knows Where to Fix It

Why Inspecto

What Is Inspecto

Three Core Modes

1. Quick Jump — Source Code Navigation

2. Inspect Mode — Click a Component, Ask AI Directly

3. Annotate Mode — Batch Annotations, Packaged for AI

Zero-Friction Setup

Broad Build Tool Support

⭐ Like It? Give Us a Star!