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.
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.
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:
Quick Mode:
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!
Top comments (0)