@mcpc-tech/unplugin-dev-inspector-mcp 0.0.42 → 0.0.44

package/dist/config-updater.cjs

@@ -86411,7 +86411,11 @@ const PROMPT_SCHEMAS = {
 		name: "capture_element",
 		title: "Capture Element Context",
 		description: "Capture context about a UI element for troubleshooting and investigation.",
-		arguments: []
+		arguments: [{
+			name: "automated",
+			description: "If true, the AI will automate the capture process (click/feedback/submit).",
+			required: false
+		}]
 	},
 	view_inspections: {
 		name: "view_inspections",
@@ -86452,10 +86456,19 @@ const PROMPT_SCHEMAS = {
 const TOOL_SCHEMAS = {
 	capture_element_context: {
 		name: "capture_element_context",
-		description: "Capture element context for troubleshooting. Activates visual selector, user clicks element and provides notes, returns source location, DOM hierarchy, computed styles, dimensions, and user notes. Combine with chrome_devtools MCP for deeper diagnostics (Network, Console, Performance, DOM tools).",
+		description: `Capture element context for troubleshooting. 
+
+**Default (automated=false)**: Manual mode - activates visual selector for user interaction.
+
+**Automated (automated=true)**: AI controls capture by clicking elements programmatically. Only set to true when user needs automation.
+
+Returns: source location, DOM hierarchy, computed styles, dimensions, and user notes. Use \`list_inspections\` to view all captured elements.`,
 		inputSchema: {
 			type: "object",
-			properties: {}
+			properties: { automated: {
+				type: "boolean",
+				description: "Set to true ONLY when user explicitly requests automated capture. Default is false (manual mode)."
+			} }
 		}
 	},
 	list_inspections: {
@@ -86606,6 +86619,8 @@ function callMcpMethod(mcpServer, method, params) {
 */
 async function createInspectorMcpServer(serverContext) {
 	const chromeDisabled = isChromeDisabled(serverContext?.disableChrome);
+	const isAutomated = serverContext?.isAutomated ?? false;
+	console.log(`[dev-inspector] Chrome DevTools integration is ${chromeDisabled ? "disabled" : "enabled"}`);
 	const mcpServer = await mcpc([{
 		name: "dev-inspector",
 		version: "1.0.0",
@@ -86620,10 +86635,10 @@ async function createInspectorMcpServer(serverContext) {
 
 Provides tools for inspecting network requests, console logs, and performance metrics.
 
-If Chrome is already open, this tool can connect to it directly. Otherwise, call chrome_navigate_page first to launch Chrome.
-Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}`}
+${isAutomated ? "Chrome is already open and connected. You can use this tool to inspect the page directly." : "The client does not support automation. You MUST ask the user for confirmation before navigating to any URL."}
 
-You MUST ask the user for confirmation before navigating to any URL.`,
+Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}`}
+`,
 		options: { refs: [
 			"<tool name=\"chrome.navigate_page\"/>",
 			"<tool name=\"chrome.list_pages\"/>",
@@ -86761,7 +86776,7 @@ You MUST ask the user for confirmation before navigating to any URL.`,
 		switch (promptName) {
 			case "capture_element": return { messages: (await callMcpMethod(mcpServer, "tools/call", {
 				name: "capture_element_context",
-				arguments: {}
+				arguments: { automated: request.params.arguments?.automated === "true" }
 			}))?.content.map((item) => ({
 				role: "user",
 				content: item
@@ -87142,7 +87157,6 @@ async function handleSseConnection(req, res, serverContext, connectionManager) {
 		}
 		res.socket?.setKeepAlive?.(true);
 		res.socket?.setTimeout?.(0);
-		const mcpServer = await createInspectorMcpServer(serverContext);
 		const host = serverContext?.host || "localhost";
 		const port = serverContext?.port || 5173;
 		const url$1 = new URL(req.url ?? "", `http://${host}:${port}`);
@@ -87150,6 +87164,13 @@ async function handleSseConnection(req, res, serverContext, connectionManager) {
 		const sessionId = transport.sessionId;
 		const clientId = url$1.searchParams.get("clientId") || `agent-${sessionId}`;
 		const puppetId = url$1.searchParams.get("puppetId") || "inspector";
+		const isAutomated = url$1.searchParams.get("isAutomated") === "true";
+		console.log(`[dev-inspector] New SSE connection: sessionId=${sessionId}, clientId=${clientId}, puppetId=${puppetId}, isAutomated=${isAutomated}`);
+		if (isAutomated && serverContext) serverContext.isAutomated = true;
+		const mcpServer = await createInspectorMcpServer({
+			...serverContext,
+			isAutomated
+		});
 		console.log(`[dev-inspector] [sse] New connection request: clientId=${clientId}, puppetId=${puppetId}, sessionId=${sessionId}`);
 		connectionManager.registerTransport(sessionId, transport);
 		if (clientId === "inspector") {
@@ -88651,7 +88672,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 		}
 		try {
 			const body = await readBody(req);
-			const { messages, agent, envVars, sessionId } = JSON.parse(body);
+			const { messages, agent, envVars, sessionId, isAutomated } = JSON.parse(body);
 			const cwd$1 = process.cwd();
 			let provider;
 			let shouldCleanupProvider = true;
@@ -88698,10 +88719,12 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 				await new Promise((resolve$1) => setTimeout(resolve$1, delay));
 			}
 			const abortController = new AbortController();
-			req.on("close", () => {
-				console.log("[dev-inspector] [acp] Client disconnected, aborting stream");
-				abortController.abort();
-				if (shouldCleanupProvider) provider.cleanup();
+			res.on("close", () => {
+				if (!abortController.signal.aborted) {
+					console.log("[dev-inspector] [acp] Client disconnected, aborting stream");
+					abortController.abort();
+					if (shouldCleanupProvider) provider.cleanup();
+				}
 			});
 			const systemPrompt = agent.acpSystemPrompt ?? acpOptions?.acpSystemPrompt ?? DEFAULT_SYSTEM_INSTRUCTIONS;
 			const enhancedMessages = (0, ai.convertToModelMessages)(messages).map((msg, index$1) => {
@@ -88709,7 +88732,11 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 					...msg,
 					content: [{
 						type: "text",
-						text: `<system_instructions>\n${systemPrompt}\n</system_instructions>\n\n`
+						text: `<system_instructions>
+${systemPrompt}
+${isAutomated ? "" : "Currently chrome devtools automation is disabled. You do not have access to Console/Network context."}
+</system_instructions>
+`
 					}, ...msg.content]
 				};
 				return msg;
@@ -88722,7 +88749,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 				tools: acpTools(mcpTools),
 				onError: (error) => {
 					console.error("Error occurred while streaming text:", JSON.stringify(error, null, 2));
-					provider.cleanup();
+					if (shouldCleanupProvider) provider.cleanup();
 				}
 			}).toUIMessageStreamResponse({
 				messageMetadata: ({ part }) => {

package/dist/config-updater.js

@@ -86446,7 +86446,11 @@ const PROMPT_SCHEMAS = {
 		name: "capture_element",
 		title: "Capture Element Context",
 		description: "Capture context about a UI element for troubleshooting and investigation.",
-		arguments: []
+		arguments: [{
+			name: "automated",
+			description: "If true, the AI will automate the capture process (click/feedback/submit).",
+			required: false
+		}]
 	},
 	view_inspections: {
 		name: "view_inspections",
@@ -86487,10 +86491,19 @@ const PROMPT_SCHEMAS = {
 const TOOL_SCHEMAS = {
 	capture_element_context: {
 		name: "capture_element_context",
-		description: "Capture element context for troubleshooting. Activates visual selector, user clicks element and provides notes, returns source location, DOM hierarchy, computed styles, dimensions, and user notes. Combine with chrome_devtools MCP for deeper diagnostics (Network, Console, Performance, DOM tools).",
+		description: `Capture element context for troubleshooting. 
+
+**Default (automated=false)**: Manual mode - activates visual selector for user interaction.
+
+**Automated (automated=true)**: AI controls capture by clicking elements programmatically. Only set to true when user needs automation.
+
+Returns: source location, DOM hierarchy, computed styles, dimensions, and user notes. Use \`list_inspections\` to view all captured elements.`,
 		inputSchema: {
 			type: "object",
-			properties: {}
+			properties: { automated: {
+				type: "boolean",
+				description: "Set to true ONLY when user explicitly requests automated capture. Default is false (manual mode)."
+			} }
 		}
 	},
 	list_inspections: {
@@ -86641,6 +86654,8 @@ function callMcpMethod(mcpServer, method, params) {
 */
 async function createInspectorMcpServer(serverContext) {
 	const chromeDisabled = isChromeDisabled(serverContext?.disableChrome);
+	const isAutomated = serverContext?.isAutomated ?? false;
+	console.log(`[dev-inspector] Chrome DevTools integration is ${chromeDisabled ? "disabled" : "enabled"}`);
 	const mcpServer = await mcpc([{
 		name: "dev-inspector",
 		version: "1.0.0",
@@ -86655,10 +86670,10 @@ async function createInspectorMcpServer(serverContext) {
 
 Provides tools for inspecting network requests, console logs, and performance metrics.
 
-If Chrome is already open, this tool can connect to it directly. Otherwise, call chrome_navigate_page first to launch Chrome.
-Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}`}
+${isAutomated ? "Chrome is already open and connected. You can use this tool to inspect the page directly." : "The client does not support automation. You MUST ask the user for confirmation before navigating to any URL."}
 
-You MUST ask the user for confirmation before navigating to any URL.`,
+Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}`}
+`,
 		options: { refs: [
 			"<tool name=\"chrome.navigate_page\"/>",
 			"<tool name=\"chrome.list_pages\"/>",
@@ -86796,7 +86811,7 @@ You MUST ask the user for confirmation before navigating to any URL.`,
 		switch (promptName) {
 			case "capture_element": return { messages: (await callMcpMethod(mcpServer, "tools/call", {
 				name: "capture_element_context",
-				arguments: {}
+				arguments: { automated: request.params.arguments?.automated === "true" }
 			}))?.content.map((item) => ({
 				role: "user",
 				content: item
@@ -87177,7 +87192,6 @@ async function handleSseConnection(req, res, serverContext, connectionManager) {
 		}
 		res.socket?.setKeepAlive?.(true);
 		res.socket?.setTimeout?.(0);
-		const mcpServer = await createInspectorMcpServer(serverContext);
 		const host = serverContext?.host || "localhost";
 		const port = serverContext?.port || 5173;
 		const url = new URL(req.url ?? "", `http://${host}:${port}`);
@@ -87185,6 +87199,13 @@ async function handleSseConnection(req, res, serverContext, connectionManager) {
 		const sessionId = transport.sessionId;
 		const clientId = url.searchParams.get("clientId") || `agent-${sessionId}`;
 		const puppetId = url.searchParams.get("puppetId") || "inspector";
+		const isAutomated = url.searchParams.get("isAutomated") === "true";
+		console.log(`[dev-inspector] New SSE connection: sessionId=${sessionId}, clientId=${clientId}, puppetId=${puppetId}, isAutomated=${isAutomated}`);
+		if (isAutomated && serverContext) serverContext.isAutomated = true;
+		const mcpServer = await createInspectorMcpServer({
+			...serverContext,
+			isAutomated
+		});
 		console.log(`[dev-inspector] [sse] New connection request: clientId=${clientId}, puppetId=${puppetId}, sessionId=${sessionId}`);
 		connectionManager.registerTransport(sessionId, transport);
 		if (clientId === "inspector") {
@@ -88686,7 +88707,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 		}
 		try {
 			const body = await readBody(req);
-			const { messages, agent, envVars, sessionId } = JSON.parse(body);
+			const { messages, agent, envVars, sessionId, isAutomated } = JSON.parse(body);
 			const cwd$1 = process.cwd();
 			let provider;
 			let shouldCleanupProvider = true;
@@ -88733,10 +88754,12 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 				await new Promise((resolve$2) => setTimeout(resolve$2, delay));
 			}
 			const abortController = new AbortController();
-			req.on("close", () => {
-				console.log("[dev-inspector] [acp] Client disconnected, aborting stream");
-				abortController.abort();
-				if (shouldCleanupProvider) provider.cleanup();
+			res.on("close", () => {
+				if (!abortController.signal.aborted) {
+					console.log("[dev-inspector] [acp] Client disconnected, aborting stream");
+					abortController.abort();
+					if (shouldCleanupProvider) provider.cleanup();
+				}
 			});
 			const systemPrompt = agent.acpSystemPrompt ?? acpOptions?.acpSystemPrompt ?? DEFAULT_SYSTEM_INSTRUCTIONS;
 			const enhancedMessages = convertToModelMessages(messages).map((msg, index$1) => {
@@ -88744,7 +88767,11 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 					...msg,
 					content: [{
 						type: "text",
-						text: `<system_instructions>\n${systemPrompt}\n</system_instructions>\n\n`
+						text: `<system_instructions>
+${systemPrompt}
+${isAutomated ? "" : "Currently chrome devtools automation is disabled. You do not have access to Console/Network context."}
+</system_instructions>
+`
 					}, ...msg.content]
 				};
 				return msg;
@@ -88757,7 +88784,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 				tools: acpTools(mcpTools),
 				onError: (error) => {
 					console.error("Error occurred while streaming text:", JSON.stringify(error, null, 2));
-					provider.cleanup();
+					if (shouldCleanupProvider) provider.cleanup();
 				}
 			}).toUIMessageStreamResponse({
 				messageMetadata: ({ part }) => {

package/dist/index.cjs

@@ -76,7 +76,7 @@ async function launchBrowserWithDevTools(options) {
 		console.log(`[dev-inspector] 📴 Skipping browser launch: Chrome integration disabled (DEV_INSPECTOR_DISABLE_CHROME=1 or disableChrome: true)`);
 		return false;
 	}
-	const sseUrl = `http://${serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host || "localhost"}:${serverContext.port || 5173}/__mcp__/sse?clientId=browser-launcher-${process.pid}`;
+	const sseUrl = `http://${serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host || "localhost"}:${serverContext.port || 5173}/__mcp__/sse?clientId=browser-launcher-${process.pid}&isAutomated=true`;
 	try {
 		await (await getOrCreateClient(sseUrl)).callTool({
 			name: "chrome_devtools",

package/dist/index.js

@@ -72,7 +72,7 @@ async function launchBrowserWithDevTools(options) {
 		console.log(`[dev-inspector] 📴 Skipping browser launch: Chrome integration disabled (DEV_INSPECTOR_DISABLE_CHROME=1 or disableChrome: true)`);
 		return false;
 	}
-	const sseUrl = `http://${serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host || "localhost"}:${serverContext.port || 5173}/__mcp__/sse?clientId=browser-launcher-${process.pid}`;
+	const sseUrl = `http://${serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host || "localhost"}:${serverContext.port || 5173}/__mcp__/sse?clientId=browser-launcher-${process.pid}&isAutomated=true`;
 	try {
 		await (await getOrCreateClient(sseUrl)).callTool({
 			name: "chrome_devtools",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpc-tech/unplugin-dev-inspector-mcp",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "description": "Universal dev inspector plugin for React/Vue - inspect component sources and API calls in any bundler",
   "type": "module",
   "license": "MIT",