@mcpc-tech/unplugin-dev-inspector-mcp 0.1.2 → 0.1.4

package/README.md

@@ -1,8 +1,4 @@
-<p align="center">
-  <img src="./assets/logo.svg" alt="DevInspector Logo" width="50" height="50" />
-</p>
-
-# @mcpc-tech/unplugin-dev-inspector-mcp
+# dev-inspector-mcp
 
 [![npm version](https://img.shields.io/npm/v/@mcpc-tech/unplugin-dev-inspector-mcp.svg)](https://www.npmjs.com/package/@mcpc-tech/unplugin-dev-inspector-mcp)
 [![npm downloads](https://img.shields.io/npm/dm/@mcpc-tech/unplugin-dev-inspector-mcp.svg)](https://www.npmjs.com/package/@mcpc-tech/unplugin-dev-inspector-mcp)
@@ -46,17 +42,22 @@ Works with any MCP-compatible AI client. Supports ACP agents: **Claude Code**, *
 
 ## Key Features
 
-### 🎯 Visual Context
+### 🎯 Visual Context & Region Selection
+
+Click any element to inspect it, or **drag to select a region**. AI gets the full context: source code location, computed styles, component hierarchy, IDs, classes, text content, and **automatically captures screenshots** for pixel-perfect visual understanding.
+
 
-Click any element to instantly send its source code location, computed styles, and DOM hierarchy to AI. No more explaining "it's the blue button in the header".
+### 🛠️ Universal DevTools Access
 
-### 🛠️ Full DevTools Access
+AI can access Network and Console logs from **any browser** (via client-side interception) or full Chrome DevTools (via chrome devtools mcp). It sees what you see, regardless of your environment.
 
-AI can access Chrome DevTools to analyze network requests, console logs, and performance metrics. It sees what you see.
+### ✨ Smart Select
+
+Let AI do the heavy lifting. "Smart Select" automatically analyzes recent console errors and failed network requests to construct the perfect context for your debugging session.
 
 ### 🤖 Multi-Agent Workflow
 
-Switch between agents (Claude Code, Goose) and track their debugging progress visually with step-by-step status updates.
+Switch between agents (Claude Code, Codex, Gemini, Opencode...) and track their debugging progress visually with a **floating status bar**.
 
 ## Quick Start
 
@@ -266,6 +267,31 @@ export default function RootLayout({ children }) {
 - **Webpack mode:** `next dev` (uses webpack configuration)
 - **Turbopack mode:** `next dev --turbopack` (uses turbopack configuration, Next.js 16+ default)
 
+
+### React Router v7+
+
+Since React Router handles HTML generation via its own SSR/SPA mechanism, it bypasses the standard Vite HTML transformation hooks. You need to manually import the virtual module in your entry file.
+
+```typescript
+// app/root.tsx or app/entry.client.tsx
+import 'virtual:dev-inspector-mcp';
+```
+
+And ensure your `vite.config.ts` has the plugin:
+
+```typescript
+// vite.config.ts
+import { reactRouter } from "@react-router/dev/vite";
+import DevInspector from '@mcpc-tech/unplugin-dev-inspector-mcp';
+
+export default defineConfig({
+  plugins: [
+    DevInspector.vite({ enabled: true }),
+    reactRouter(),
+  ],
+});
+```
+
 ## Framework Support
 
 ### ✅ Fully Supported
@@ -281,6 +307,8 @@ export default function RootLayout({ children }) {
 
 - **Angular** - Support coming soon
 
+
+
 ## Configuration
 
 ### Auto-Update MCP Config