@mcpc-tech/unplugin-dev-inspector-mcp 0.1.32 → 0.1.34

package/README.md

@@ -3,11 +3,11 @@
 [![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)
 
-**AI-powered visual debugging for React, Vue, Svelte, SolidJS, Preact & Next.js via MCP and ACP.**
+**The missing runtime context for AI coding agents.**
 
-DevInspector connects your web app directly to your AI agent. Click any element to instantly send its source code, style, and network context to the AI for analysis and fixing.
+AI can read your code, but can't see what's happening at runtime. DevInspector provides the missing context: source code location, DOM state, styles, network, console, terminal output, and screenshots.
 
-Works with any MCP-compatible AI client. Supports ACP agents: **Claude Code**, **Codex CLI**, **Gemini CLI**, **OpenCode**, and [more](https://agentclientprotocol.com/overview/agents).
+**Two modes**: Use with your IDE's AI (Cursor, VSCode) via MCP, or run AI agents directly in the browser via ACP (**Claude Code**, **Codex CLI**, **Gemini CLI**, **OpenCode**, [more](https://agentclientprotocol.com/overview/agents)).
 
 ## Table of Contents
 
@@ -47,15 +47,14 @@ Works with any MCP-compatible AI client. Supports ACP agents: **Claude Code**, *
 
 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.
 
+### Page Overview & Accessibility Tree
+
+`get_page_info` provides AI with a semantic understanding of the page: URL, viewport, and an **accessibility tree** showing landmarks, headings, forms, and links. AI can navigate the page structure without screenshots.
 
 ### Universal 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.
 
-### 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, Codex, Gemini, Opencode...) and track their debugging progress visually with a **floating status bar**.
@@ -555,21 +554,47 @@ DevInspector offers two ways to interact with your AI, depending on your prefere
 
 ### `capture_element_context`
 
-Activates visual selector. Returns source location, DOM hierarchy, styles, dimensions, and user notes.
+Capture single element context. Two modes:
+- **Interactive (default)**: User clicks element to select
+- **Automated**: Use `selector` param for programmatic capture
+
+Returns: source location, DOM hierarchy, computed styles, dimensions, user notes, screenshot.
+
+### `capture_area_context`
+
+Capture multiple elements in an area. Two modes:
+- **Interactive (default)**: User draws rectangle to select area
+- **Automated**: Use `containerSelector` or `bounds` param
+
+Returns: array of element contexts (max 50).
+
+### `get_page_info`
+
+Get page overview with accessibility tree. Returns URL, title, viewport, document size, and semantic structure (landmarks, headings, forms, links). Start here to understand the page.
 
 ### `list_inspections`
 
-Shows all inspections with ID, element details, notes, and status (pending/in-progress/completed/failed).
+List all captured inspections with ID, element details, source location, notes, and status (pending/in-progress/completed/failed).
 
 ### `update_inspection_status`
 
-Updates inspection status with optional progress steps.
-
-**Parameters:** `status`, `message` (required for completed/failed), `progress`, `inspectionId` (optional)
+Update inspection status. Parameters: `inspectionId` (optional, auto-detects), `status` ('in-progress'|'completed'|'failed'|'deleted'), `message` (required for completed/failed).
 
 ### `execute_page_script`
 
-Executes JavaScript in browser context. Access to window, document, React/Vue instances, localStorage.
+Execute JavaScript in browser context. Access: window, document, DOM APIs, React/Vue instances, localStorage. Must return a value.
+
+### `get_network_requests`
+
+Get network requests from browser. Returns list with reqid, method, URL, status. Use `reqid` param to get full request/response details (headers, body, timing).
+
+### `get_console_messages`
+
+Get console messages from browser. Returns list with msgid, level (log/warn/error), message. Use `msgid` param to get full message details.
+
+### `get_stdio_messages`
+
+Get dev server stdout/stderr. Returns list with stdioid, stream type, content. Use `stdioid` param to get full message.
 
 ### `chrome_devtools`
 
@@ -615,33 +640,35 @@ These custom tools are automatically discovered and made available to the connec
 
 ## MCP Prompts
 
-### `capture_element`
+### `capture_element_context`
+
+Capture single element context. Interactive (user clicks) or automated (selector param).
 
-Capture and analyze UI element context.
+### `capture_area_context`
 
-### `view_inspections`
+Capture multiple elements in area. Interactive (user draws rectangle) or automated (containerSelector/bounds param).
 
-View all pending, in-progress, and completed inspections.
+### `list_inspections`
 
-### `launch_chrome_devtools`
+View all element inspections in the queue with their status.
 
-Opens Chrome with DevTools API. Unlocks network analysis, console logs, performance metrics.
+### `launch_chrome_devtools`
 
-**Parameter:** `url` (defaults to dev server)
+Launch Chrome DevTools and navigate to a specified URL for debugging and inspection.
 
-💡 Optional if Chrome is already open. Use when you need to launch a new Chrome instance.
+**Parameter:** `url` (required) - The URL to navigate to (e.g., http://localhost:3000)
 
 ### `get_network_requests`
 
 List network requests or get details of a specific one. Always refreshes the list first.
 
-**Parameter:** `reqid` (optional) - If provided, get details for that request. If omitted, just list all requests.
-
 ### `get_console_messages`
 
 List console messages or get details of a specific one. Always refreshes the list first.
 
-**Parameter:** `msgid` (optional) - If provided, get details for that message. If omitted, just list all messages.
+### `get_stdio_messages`
+
+List stdio (stdout/stderr) messages from the server process. Always refreshes the list first.
 
 ## Architecture