@mcpc-tech/unplugin-dev-inspector-mcp 0.0.12 → 0.0.14

package/dist/index.cjs

@@ -1,8 +1,45 @@
 const require_chunk = require('./chunk.cjs');
 const require_config_updater = require('./config-updater.cjs');
 const require_vue_transform = require('./vue-transform.cjs');
+let __modelcontextprotocol_sdk_client_index_js = require("@modelcontextprotocol/sdk/client/index.js");
+let __modelcontextprotocol_sdk_client_sse_js = require("@modelcontextprotocol/sdk/client/sse.js");
 let unplugin = require("unplugin");
 
+//#region src/utils/browser-launcher.ts
+/**
+* Launch browser via Chrome DevTools MCP
+* Uses MCP Client to connect to the MCP server endpoint
+*/
+async function launchBrowserWithDevTools(options) {
+	const { url, serverContext } = options;
+	const sseUrl = `http://${serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host || "localhost"}:${serverContext.port || 5173}/__mcp__/sse?clientId=auto-browser`;
+	let client = null;
+	try {
+		client = new __modelcontextprotocol_sdk_client_index_js.Client({
+			name: "dev-inspector-auto-browser",
+			version: "1.0.0"
+		});
+		const transport = new __modelcontextprotocol_sdk_client_sse_js.SSEClientTransport(new URL(sseUrl));
+		await client.connect(transport);
+		await client.callTool({
+			name: "chrome_devtools",
+			arguments: {
+				useTool: "chrome_navigate_page",
+				hasDefinitions: ["chrome_navigate_page"],
+				chrome_navigate_page: { url }
+			}
+		});
+		await new Promise((resolve) => setTimeout(resolve, 500));
+		return true;
+	} catch (error) {
+		console.error(`[dev-inspector] ⚠️  Failed to auto-open browser:`, error instanceof Error ? error.message : String(error));
+		return false;
+	} finally {
+		if (client) await client.close().catch(() => {});
+	}
+}
+
+//#endregion
 //#region src/core.ts
 const unplugin$1 = (0, unplugin.createUnplugin)((options = {}) => {
 	const enabled = options.enabled ?? process.env.NODE_ENV !== "production";
@@ -117,7 +154,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						host: options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost"),
 						port: options.port ?? server.config.server.port ?? 5173
 					};
-					const baseUrl = `http://${serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host}:${serverContext.port}/__mcp__/sse`;
+					const displayHost = serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host;
+					const baseUrl = `http://${displayHost}:${serverContext.port}/__mcp__/sse`;
 					console.log(`[dev-inspector] 📡 MCP: ${baseUrl}\n`);
 					await require_config_updater.setupMcpMiddleware(server.middlewares, serverContext);
 					require_config_updater.setupAcpMiddleware(server.middlewares, serverContext, {
@@ -132,6 +170,19 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						updateConfigAdditionalServers: options.updateConfigAdditionalServers,
 						customEditors: options.customEditors
 					});
+					if (options.autoOpenBrowser ?? true) {
+						const targetUrl = options.browserUrl ?? `http://${displayHost}:${serverContext.port}`;
+						setTimeout(async () => {
+							if (await launchBrowserWithDevTools({
+								url: targetUrl,
+								serverContext
+							})) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
+							else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
+						}, 1e3);
+					} else {
+						console.log(`[dev-inspector] ⚠️  autoOpenBrowser: false - Console/Network context unavailable`);
+						console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
+					}
 				}
 				require_config_updater.setupInspectorMiddleware(server.middlewares, {
 					agents: options.agents,
@@ -163,7 +214,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						port
 					};
 					if (enableMcp) {
-						const baseUrl = `http://${host === "0.0.0.0" ? "localhost" : host}:${port}/__mcp__/sse`;
+						const displayHost = host === "0.0.0.0" ? "localhost" : host;
+						const baseUrl = `http://${displayHost}:${port}/__mcp__/sse`;
 						console.log(`[dev-inspector] 📡 MCP (Standalone): ${baseUrl}\n`);
 						require_config_updater.setupMcpMiddleware(server, serverContext);
 						require_config_updater.setupAcpMiddleware(server, serverContext, {
@@ -178,6 +230,19 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 							updateConfigAdditionalServers: options.updateConfigAdditionalServers,
 							customEditors: options.customEditors
 						});
+						if (options.autoOpenBrowser ?? true) {
+							const targetUrl = options.browserUrl ?? `http://${displayHost}:${port}`;
+							setTimeout(async () => {
+								if (await launchBrowserWithDevTools({
+									url: targetUrl,
+									serverContext
+								})) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
+								else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
+							}, 1e3);
+						} else {
+							console.log(`[dev-inspector] ⚠️  autoOpenBrowser: false - Console/Network context unavailable`);
+							console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
+						}
 					}
 					require_config_updater.setupInspectorMiddleware(server, {
 						agents: options.agents,

package/dist/index.d.cts

@@ -118,6 +118,18 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
    * @example "virtual:my-inspector" or "virtual:custom-mcp"
    */
   virtualModuleName?: string;
+  /**
+   * Automatically open browser with Chrome DevTools when dev server starts
+   * Uses Chrome DevTools Protocol for full debugging capabilities (console, network, etc.)
+   * @default true when enableMcp is true
+   */
+  autoOpenBrowser?: boolean;
+  /**
+   * Custom browser launch URL
+   * If not specified, uses the dev server URL (e.g., http://localhost:5173)
+   * @example "http://localhost:5173/dashboard"
+   */
+  browserUrl?: string;
 }
 declare const unplugin: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
 //#endregion

package/dist/index.d.ts

@@ -118,6 +118,18 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
    * @example "virtual:my-inspector" or "virtual:custom-mcp"
    */
   virtualModuleName?: string;
+  /**
+   * Automatically open browser with Chrome DevTools when dev server starts
+   * Uses Chrome DevTools Protocol for full debugging capabilities (console, network, etc.)
+   * @default true when enableMcp is true
+   */
+  autoOpenBrowser?: boolean;
+  /**
+   * Custom browser launch URL
+   * If not specified, uses the dev server URL (e.g., http://localhost:5173)
+   * @example "http://localhost:5173/dashboard"
+   */
+  browserUrl?: string;
 }
 declare const unplugin: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
 //#endregion

package/dist/index.js

@@ -1,7 +1,44 @@
 import { i as setupMcpMiddleware, n as setupAcpMiddleware, r as setupInspectorMiddleware, t as updateMcpConfigs } from "./config-updater.js";
 import { n as transformJSX, t as compileVue } from "./vue-transform.js";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import { createUnplugin } from "unplugin";
 
+//#region src/utils/browser-launcher.ts
+/**
+* Launch browser via Chrome DevTools MCP
+* Uses MCP Client to connect to the MCP server endpoint
+*/
+async function launchBrowserWithDevTools(options) {
+	const { url, serverContext } = options;
+	const sseUrl = `http://${serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host || "localhost"}:${serverContext.port || 5173}/__mcp__/sse?clientId=auto-browser`;
+	let client = null;
+	try {
+		client = new Client({
+			name: "dev-inspector-auto-browser",
+			version: "1.0.0"
+		});
+		const transport = new SSEClientTransport(new URL(sseUrl));
+		await client.connect(transport);
+		await client.callTool({
+			name: "chrome_devtools",
+			arguments: {
+				useTool: "chrome_navigate_page",
+				hasDefinitions: ["chrome_navigate_page"],
+				chrome_navigate_page: { url }
+			}
+		});
+		await new Promise((resolve) => setTimeout(resolve, 500));
+		return true;
+	} catch (error) {
+		console.error(`[dev-inspector] ⚠️  Failed to auto-open browser:`, error instanceof Error ? error.message : String(error));
+		return false;
+	} finally {
+		if (client) await client.close().catch(() => {});
+	}
+}
+
+//#endregion
 //#region src/core.ts
 const unplugin = createUnplugin((options = {}) => {
 	const enabled = options.enabled ?? process.env.NODE_ENV !== "production";
@@ -116,7 +153,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						host: options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost"),
 						port: options.port ?? server.config.server.port ?? 5173
 					};
-					const baseUrl = `http://${serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host}:${serverContext.port}/__mcp__/sse`;
+					const displayHost = serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host;
+					const baseUrl = `http://${displayHost}:${serverContext.port}/__mcp__/sse`;
 					console.log(`[dev-inspector] 📡 MCP: ${baseUrl}\n`);
 					await setupMcpMiddleware(server.middlewares, serverContext);
 					setupAcpMiddleware(server.middlewares, serverContext, {
@@ -131,6 +169,19 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						updateConfigAdditionalServers: options.updateConfigAdditionalServers,
 						customEditors: options.customEditors
 					});
+					if (options.autoOpenBrowser ?? true) {
+						const targetUrl = options.browserUrl ?? `http://${displayHost}:${serverContext.port}`;
+						setTimeout(async () => {
+							if (await launchBrowserWithDevTools({
+								url: targetUrl,
+								serverContext
+							})) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
+							else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
+						}, 1e3);
+					} else {
+						console.log(`[dev-inspector] ⚠️  autoOpenBrowser: false - Console/Network context unavailable`);
+						console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
+					}
 				}
 				setupInspectorMiddleware(server.middlewares, {
 					agents: options.agents,
@@ -162,7 +213,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						port
 					};
 					if (enableMcp) {
-						const baseUrl = `http://${host === "0.0.0.0" ? "localhost" : host}:${port}/__mcp__/sse`;
+						const displayHost = host === "0.0.0.0" ? "localhost" : host;
+						const baseUrl = `http://${displayHost}:${port}/__mcp__/sse`;
 						console.log(`[dev-inspector] 📡 MCP (Standalone): ${baseUrl}\n`);
 						setupMcpMiddleware(server, serverContext);
 						setupAcpMiddleware(server, serverContext, {
@@ -177,6 +229,19 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 							updateConfigAdditionalServers: options.updateConfigAdditionalServers,
 							customEditors: options.customEditors
 						});
+						if (options.autoOpenBrowser ?? true) {
+							const targetUrl = options.browserUrl ?? `http://${displayHost}:${port}`;
+							setTimeout(async () => {
+								if (await launchBrowserWithDevTools({
+									url: targetUrl,
+									serverContext
+								})) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
+								else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
+							}, 1e3);
+						} else {
+							console.log(`[dev-inspector] ⚠️  autoOpenBrowser: false - Console/Network context unavailable`);
+							console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
+						}
 					}
 					setupInspectorMiddleware(server, {
 						agents: options.agents,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpc-tech/unplugin-dev-inspector-mcp",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Universal dev inspector plugin for React/Vue - inspect component sources and API calls in any bundler",
   "type": "module",
   "license": "MIT",
@@ -84,7 +84,7 @@
     "@ai-sdk/react": "^2.0.95",
     "@babel/parser": "^7.28.5",
     "@babel/traverse": "^7.28.5",
-    "@mcpc-tech/acp-ai-provider": "^0.1.25",
+    "@mcpc-tech/acp-ai-provider": "^0.1.31",
     "@mcpc-tech/cmcp": "^0.0.15",
     "@mcpc-tech/core": "^0.3.8",
     "@modelcontextprotocol/sdk": "^1.20.1",