# Dev Inspector Mcp

> AI-powered visual debugging for your React, Vue, Svelte, SolidJS, Preact & Next.js app via MCP and ACP

- **Type:** MCP server
- **Install:** `agentstack add mcp-mcpc-tech-dev-inspector-mcp`
- **Verified:** Pending review
- **Seller:** [mcpc-tech](https://agentstack.voostack.com/s/mcpc-tech)
- **Installs:** 0
- **Category:** [Integrations](https://agentstack.voostack.com/c/integrations)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [mcpc-tech](https://github.com/mcpc-tech)
- **Source:** https://github.com/mcpc-tech/dev-inspector-mcp

## Install

```sh
agentstack add mcp-mcpc-tech-dev-inspector-mcp
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# dev-inspector-mcp

[](https://www.npmjs.com/package/@mcpc-tech/unplugin-dev-inspector-mcp)
[](https://www.npmjs.com/package/@mcpc-tech/unplugin-dev-inspector-mcp)

**The missing runtime context for AI coding agents.**

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.

**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)).

> **Using Claude Code or another AI agent?** Install the DevInspector skill so your agent knows how to set up and troubleshoot the inspector:
>
> ```bash
> npx skills add mcpc-tech/dev-inspector-mcp
> ```

## Table of Contents

- [Demo Video](#demo-video)
- [Social Media](#social-media)
- [Key Features](#key-features)
- [Quick Start](#quick-start)
  - [Installation](#installation)
  - [Automated Setup](#automated-setup-recommended)
  - [Framework Setup](#framework-setup)
- [Agent Skills](#agent-skills)
- [Configuration](#configuration)
  - [Auto-Update MCP Config](#auto-update-mcp-config)
  - [Agent Installation](#agent-installation)
  - [Custom Agents](#custom-agents)
  - [MCP Servers Configuration](#mcp-servers-configuration)
- [What It Does](#what-it-does)
- [Two Workflow Modes](#two-workflow-modes)
- [MCP Tools](#mcp-tools)
- [Custom Inspector Tools](#custom-inspector-tools)
- [MCP Prompts](#mcp-prompts)
- [Architecture](#architecture)

## Demo Video

**Watch the demo:** [https://www.youtube.com/shorts/TCt2oOtPS_k](https://www.youtube.com/shorts/TCt2oOtPS_k)

## Social Media

**Twittter/X Post:** [https://x.com/yaoandyan/status/1995082020431753600](https://x.com/yaoandyan/status/1995082020431753600?s=20)

## Key Features

### 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.

### 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.

### Multi-Agent Workflow

Switch between agents (Claude Code, Codex, Gemini, Opencode...) and track their debugging progress visually with a **floating status bar**.

## Quick Start

### Installation

```bash
# npm - basic installation
npm i -D @mcpc-tech/unplugin-dev-inspector-mcp

# pnpm - basic installation
pnpm add -D @mcpc-tech/unplugin-dev-inspector-mcp

# yarn - basic installation
yarn add -D @mcpc-tech/unplugin-dev-inspector-mcp
```

> **Note:** If you don't need the ACP agents (Inspector Bar mode), add `--no-optional` to skip installing agent packages:
>
> ```bash
> npm i -D @mcpc-tech/unplugin-dev-inspector-mcp --no-optional
> pnpm add -D @mcpc-tech/unplugin-dev-inspector-mcp --no-optional
> yarn add -D @mcpc-tech/unplugin-dev-inspector-mcp --no-optional
> ```

### Automated Setup (Recommended)

Run the setup command to automatically configure your `vite.config.ts`, `webpack.config.js`, or `next.config.ts`:

```bash
npx @mcpc-tech/unplugin-dev-inspector-mcp setup
```

**Options:**

- `--dry-run` - Preview changes without applying them
- `--config ` - Specify config file path (auto-detect by default)
- `--bundler ` - Specify bundler type: vite, webpack, nextjs
- `--no-backup` - Skip creating backup files
- `--help` - Show help message

**Examples:**

```bash
# Preview changes before applying
npx @mcpc-tech/unplugin-dev-inspector-mcp setup --dry-run

# Setup specific config file
npx @mcpc-tech/unplugin-dev-inspector-mcp setup --config vite.config.ts

# Setup for specific bundler
npx @mcpc-tech/unplugin-dev-inspector-mcp setup --bundler vite
```

This will:

- Detect your bundler configuration
- Add the necessary import
- Add the plugin to your configuration
- Create a backup of your config file

### Framework Setup

Pick your framework below. Each section is self-contained -- just copy the config.

Vite (React / Vue / Svelte / Solid / Preact)

```ts
// vite.config.ts
import DevInspector from '@mcpc-tech/unplugin-dev-inspector-mcp';
import react from '@vitejs/plugin-react'; // or vue(), svelte(), solid(), preact()

export default {
  plugins: [
    DevInspector.vite({ enabled: true }),
    react(),
  ],
};
```

> **Plugin order matters:** Place `DevInspector.vite()` **before** framework plugins. Otherwise source locations may show `unknown:0:0`.

Next.js (Webpack + Turbopack)

**Step 1 -- next.config.ts:**

```ts
import DevInspector, { turbopackDevInspector } from '@mcpc-tech/unplugin-dev-inspector-mcp';

const nextConfig = {
  webpack: (config) => {
    config.plugins.push(DevInspector.webpack({ enabled: true }));
    return config;
  },
  turbopack: {
    rules: turbopackDevInspector({ enabled: true }),
  },
};

export default nextConfig;
```

**Step 2 -- app/layout.tsx (required):**

```tsx
import { DevInspector } from "@mcpc-tech/unplugin-dev-inspector-mcp/next";

export default function RootLayout({ children }) {
  return (
    
      
        
        {children}
      
    
  );
}
```

Run with `next dev` (webpack) or `next dev --turbopack` (turbopack).

React Router v7+ (Remix)

```ts
// 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, entry: "app/root.tsx" }),
    reactRouter(),
  ],
});
```

Webpack (standalone)

```js
// webpack.config.js
const DevInspector = require('@mcpc-tech/unplugin-dev-inspector-mcp');

module.exports = {
  plugins: [
    DevInspector.webpack({ enabled: true }),
  ],
};
```

Advanced options

#### Non-HTML Projects (Miniapps, Library Bundles)

```ts
DevInspector.vite({
  enabled: true,
  autoInject: false,
  entry: 'src/main.ts',
})
```

#### TypeScript Types

If you import `virtual:dev-inspector-mcp`, add to your tsconfig:

```jsonc
{
  "compilerOptions": {
    "types": ["vite/client", "@mcpc-tech/unplugin-dev-inspector-mcp/client"]
  }
}
```

#### Custom Virtual Module Name

```ts
DevInspector.vite({
  enabled: true,
  autoInject: false,
  virtualModuleName: 'virtual:my-custom-inspector',
})
```

#### Disable Chrome DevTools

Set `disableChrome: true` in plugin options or `DEV_INSPECTOR_DISABLE_CHROME=1` env var.

**Zero Production Impact:** In production builds, `virtual:dev-inspector-mcp` becomes a no-op module.

### Supported Frameworks

React, Vue, Svelte, SolidJS, Preact, Next.js (Webpack + Turbopack), React Router v7+. Angular support in progress.

## Agent Skills

DevInspector ships a built-in **Agent Skill** for Claude Code (and compatible AI agents) that teaches the agent how to integrate and troubleshoot the inspector.

Install it with one command:

```bash
npx skills add mcpc-tech/dev-inspector-mcp
```

The skill covers setup for all supported bundlers, common gotchas, and troubleshooting -- so the agent can guide you through the entire integration without back-and-forth.

> **What are Agent Skills?** Skills are Markdown-based instruction sets that AI agents load at session start to gain domain-specific knowledge. See the [Claude Code docs](https://code.claude.com/docs/en/skills) for more.

## Configuration

### Auto-Update MCP Config

The plugin automatically updates MCP configuration files for detected editors when the dev server starts. This saves you from manually configuring MCP endpoints.

**Supported editors:** Cursor, VSCode, Windsurf, Claude Code, Antigravity

```typescript
// vite.config.ts
DevInspector.vite({
  // Auto-detect and update (default: true)
  updateConfig: true,

  // Or specify editors manually
  updateConfig: ['cursor', 'vscode'],

  // Or disable
  updateConfig: false,

  // Server name in MCP config (default: 'dev-inspector')
  updateConfigServerName: 'my-app-inspector',
})
```

**Custom editors:** For non-standard editors, use `customEditors`:

```typescript
DevInspector.vite({
  customEditors: [
    {
      id: 'my-editor',
      name: 'My Editor',
      configPath: '~/.my-editor',        // absolute, ~/relative, or project-relative
      configFileName: 'mcp.json',
      serverUrlKey: 'url',               // default: 'url'
      configFormat: 'mcpServers',        // 'mcpServers' or 'servers' (vscode-style)
    },
  ],
})
```

### Agent Installation

DevInspector supports multiple AI agents via [ACP](https://agentclientprotocol.com).

**For npm-based agents** (Claude Code, Codex CLI, Cursor Agent, Droid), you can pre-install them as dev dependencies for faster loading.

**For system-level agents**, install globally:

#### Gemini CLI

```bash
npm install -g @google/gemini-cli
```

[Documentation →](https://github.com/google-gemini/gemini-cli)

#### Kimi CLI

```bash
uv tool install --python 3.13 kimi-cli
```

[Documentation →](https://github.com/MoonshotAI/kimi-cli)

#### Goose

```bash
pipx install goose-ai
```

[Documentation →](https://block.github.io/goose/docs/guides/acp-clients)

#### Opencode

```bash
curl -fsSL https://opencode.ai/install | bash
```

[Documentation →](https://github.com/sst/opencode)

#### CodeBuddy Code

```bash
npm install -g @tencent-ai/codebuddy-code
```

[Documentation →](https://copilot.tencent.com/docs/cli/acp)

> **Note:** If you don't pre-install npm-based agents, they will be launched via `npx` on first use (slower startup).

#### Pre-installing npm-based Agents (Recommended)

The recommended way is to install agents during initial setup (see [Installation](#installation) above).

Alternatively, install them later as dev dependencies:

```bash
# npm
npm i -D @zed-industries/claude-code-acp

# pnpm
pnpm add -D @zed-industries/claude-code-acp

# Or add directly to package.json
```

```json
{
  "devDependencies": {
    "@zed-industries/claude-code-acp": "^0.12.4",
    "@zed-industries/codex-acp": "^0.7.1",
    "@blowmage/cursor-agent-acp": "^0.1.0",
    "@yaonyan/droid-acp": "^0.0.8"
  }
}
```

> **About optionalDependencies:** Agent packages are installed by default. If you don't need them, use `--no-optional` when installing.

**Why install as `devDependencies`?**

- Ensures faster startup (uses local package via `require.resolve` instead of `npx`)
- Won't affect production bundle (tree-shaken out unless imported)
- Standard practice for development tools

### Custom Agents

This plugin uses the [Agent Client Protocol (ACP)](https://agentclientprotocol.com) to connect with AI agents.

⏱️ **Note:** Initial connection may be slow as agents are launched via `npx` (downloads packages on first run).

Default agents: [View configuration →](https://github.com/mcpc-tech/dev-inspector-mcp/blob/main/packages/unplugin-dev-inspector/client/constants/agents.ts)

You can customize available AI agents, filter visible agents, and set a default agent:

```typescript
// vite.config.ts
export default {
  plugins: [
    DevInspector.vite({
      enabled: true,

      // Option 1: Only show specific agents (filters merged agents)
      visibleAgents: ['Claude Code', 'Gemini CLI', 'Goose'],

      // Option 2: Add custom agents (merges with defaults)
      agents: [
        {
          name: "Claude Code", // Matches default - auto-fills icon and env
          command: "npx",
          args: ["-y", "@zed-industries/claude-code-acp"],
        },
        {
          name: "My Custom Agent",
          command: "my-agent-cli",
          args: ["--mode", "acp"],
          env: [{ key: "MY_API_KEY", required: true }],
          meta: { icon: "https://example.com/icon.svg" }
        }
      ],

      // Option 3: Combine both - add custom agents and filter visibility
      agents: [
        {
          name: "My Custom Agent",
          command: "my-agent-cli",
          args: ["--mode", "acp"],
          env: [{ key: "MY_API_KEY", required: true }],
          meta: { icon: "https://example.com/icon.svg" }
        }
      ],
      visibleAgents: ['Claude Code', 'My Custom Agent'], // Only show these

      // Set default agent to show on startup
      defaultAgent: "Claude Code"
    }),
  ],
};
```

**Key Features:**

- **`agents`**: Merges your custom agents with defaults. Agents with the **same name** as [default agents](https://agentclientprotocol.com/overview/agents) automatically inherit missing properties (icons, env)
- **`visibleAgents`**: Filters which agents appear in the UI (applies after merging). Great for limiting options to only what your team uses
- **`defaultAgent`**: Sets which agent is selected on startup
- If no custom agents provided, defaults are: Claude Code, Codex CLI, Gemini CLI, Kimi CLI, Goose, Opencode, Cursor Agent, Droid, CodeBuddy Code

### MCP Servers Configuration

You can configure external MCP servers for agents to access additional tools.

```typescript
DevInspector.vite({
  mcpServers: [
    // HTTP/SSE Server
    {
      name: 'remote-server',
      type: 'sse', // or 'http'
      url: 'https://api.example.com/sse',
      headers: [{ name: 'Authorization', value: process.env.MCP_TOKEN ?? '' }]
    },
    // Local Stdio Server
    {
      name: 'local-server',
      command: 'npx',
      args: ['-y', '@modelcontextprotocol/server-memory'],
      env: { MY_VAR: 'value' }
    }
  ]
})
```

## What It Does

**Click element → Describe issue → AI analyzes → Get fix**

1. Click any UI element to capture context (source, styles, DOM)
2. Describe what's wrong or ask a question about the element
3. AI diagnoses using Chrome DevTools integration
4. Get intelligent solutions through natural conversation

**Examples:**

- "Why is this button not clickable?" → AI checks `pointer-events`, z-index, overlays
- "This API call is failing" → AI analyzes network requests, timing, responses
- "Where is this component?" → Jump to source file and line number

## Two Workflow Modes

DevInspector offers two ways to interact with your AI, depending on your preference:

### 1. Editor Mode

**Best for:** Code-heavy tasks, refactoring, and maintaining flow.

- **How it works:** You use your IDE's AI assistant (Cursor, Windsurf, Copilot).
- **The Flow:** Click an element in the browser -> The context (source, props, styles) is sent to your Editor via MCP -> You ask your Editor to fix it.
- **Why:** Keeps you in your coding environment.

### 2. Inspector Bar Mode (Recommended)

**Best for:** Quick fixes, visual tweaks, or if you don't use an AI editor.

- **How it works:** You use the floating "Inspector Bar" directly in the browser.
- **The Flow:** Click "Ask AI" in the browser -> Select an agent (e.g., Claude Code, Custom Script) -> The agent runs in your terminal but interacts with the browser overlay.
- **Why:** No context switching. Great for "what is this?" questions or network debugging.

## MCP Tools

### `capture_element_context`

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, fo

…

## Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mcpc-tech](https://github.com/mcpc-tech)
- **Source:** [mcpc-tech/dev-inspector-mcp](https://github.com/mcpc-tech/dev-inspector-mcp)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: flagged — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-mcpc-tech-dev-inspector-mcp
- Seller: https://agentstack.voostack.com/s/mcpc-tech
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.