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

package/README.md

@@ -289,7 +289,25 @@ export default {
 - "This API call is failing" → AI analyzes network requests, timing, responses
 - "Where is this component?" → Jump to source file and line number
 
-## MCP Tools
+## 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`
 Activates visual selector. Returns source location, DOM hierarchy, styles, dimensions, and user notes.

package/dist/cli.cjs

@@ -0,0 +1,180 @@
+#!/usr/bin/env node
+const require_chunk = require('./chunk.cjs');
+const require_config_updater = require('./config-updater.cjs');
+let node_http = require("node:http");
+node_http = require_chunk.__toESM(node_http);
+
+//#region src/utils/standalone-server.ts
+var StandaloneServer = class {
+	server;
+	middlewares = [];
+	port = 0;
+	host = "localhost";
+	stack = [];
+	constructor() {
+		this.server = node_http.default.createServer(async (req, res) => {
+			let index = 0;
+			const next = async () => {
+				if (index >= this.middlewares.length) {
+					if (!res.writableEnded) {
+						res.statusCode = 404;
+						res.end("Not Found");
+					}
+					return;
+				}
+				const layer = this.middlewares[index++];
+				if ((req.url || "/").startsWith(layer.route)) try {
+					const originalUrl = req.url;
+					if (layer.route !== "/" && req.url) {}
+					await layer.handle(req, res, next);
+					if (layer.route !== "/") req.url = originalUrl;
+				} catch (error) {
+					console.error("Middleware error:", error);
+					if (!res.writableEnded) {
+						res.statusCode = 500;
+						res.end("Internal Server Error");
+					}
+				}
+				else next();
+			};
+			await next();
+		});
+	}
+	use(routeOrHandle, handle) {
+		let route = "/";
+		let handler;
+		if (typeof routeOrHandle === "string") {
+			route = routeOrHandle;
+			if (!handle) throw new Error("Handler is required when route is provided");
+			handler = handle;
+		} else handler = routeOrHandle;
+		this.middlewares.push({
+			route,
+			handle: handler
+		});
+		return this;
+	}
+	listen(...args) {
+		return this.server.listen(...args);
+	}
+	async start(options = {}) {
+		const startPort = options.port || 8888;
+		this.host = options.host || "localhost";
+		for (let port = startPort; port < startPort + 100; port++) try {
+			await new Promise((resolve, reject) => {
+				this.server.listen(port, this.host, () => {
+					this.port = port;
+					resolve();
+				});
+				this.server.on("error", (err) => {
+					if (err.code === "EADDRINUSE") {
+						this.server.close();
+						reject(err);
+					} else reject(err);
+				});
+			});
+			return {
+				host: this.host,
+				port: this.port
+			};
+		} catch (error) {
+			if (error.code !== "EADDRINUSE") throw error;
+		}
+		throw new Error(`Could not find a free port starting from ${startPort}`);
+	}
+	close() {
+		this.server.close();
+	}
+};
+let globalServer = null;
+async function startStandaloneServer(options = {}) {
+	if (globalServer) return {
+		server: globalServer,
+		host: globalServer.host,
+		port: globalServer.port
+	};
+	globalServer = new StandaloneServer();
+	const { host, port } = await globalServer.start(options);
+	return {
+		server: globalServer,
+		host,
+		port
+	};
+}
+
+//#endregion
+//#region src/cli.ts
+/**
+* Standalone dev-inspector server for Turbopack/other non-webpack builds
+* 
+* Usage:
+*   npx dev-inspector-server
+*   npx dev-inspector-server --port 8888 --host localhost
+*/
+async function main() {
+	const args = process.argv.slice(2);
+	let port = 8888;
+	let host = "localhost";
+	for (let i = 0; i < args.length; i++) if (args[i] === "--port" && args[i + 1]) {
+		port = parseInt(args[i + 1], 10);
+		i++;
+	} else if (args[i] === "--host" && args[i + 1]) {
+		host = args[i + 1];
+		i++;
+	} else if (args[i] === "--help" || args[i] === "-h") {
+		console.log(`
+dev-inspector-server - Standalone MCP server for dev-inspector
+
+Usage:
+  npx dev-inspector-server [options]
+
+Options:
+  --port <number>   Port to run the server on (default: 8888)
+  --host <string>   Host to bind to (default: localhost)
+  --help, -h        Show this help message
+
+Example:
+  npx dev-inspector-server --port 3001
+`);
+		process.exit(0);
+	}
+	try {
+		const { server, host: actualHost, port: actualPort } = await startStandaloneServer({
+			port,
+			host
+		});
+		const serverContext = {
+			host: actualHost,
+			port: actualPort
+		};
+		const baseUrl = `http://${actualHost === "0.0.0.0" ? "localhost" : actualHost}:${actualPort}/__mcp__/sse`;
+		console.log(`
+╔══════════════════════════════════════════════════════════╗
+║              🔍 Dev Inspector MCP Server                 ║
+╠══════════════════════════════════════════════════════════╣
+║                                                          ║
+║  MCP Endpoint: ${baseUrl.padEnd(40)}║
+║                                                          ║
+║  Use this in your editor's MCP config or with           ║
+║  the DevInspector React component.                       ║
+║                                                          ║
+╚══════════════════════════════════════════════════════════╝
+`);
+		require_config_updater.setupMcpMiddleware(server, serverContext);
+		require_config_updater.setupAcpMiddleware(server, serverContext, {});
+		require_config_updater.setupInspectorMiddleware(server, {});
+		await require_config_updater.updateMcpConfigs(process.cwd(), baseUrl, {});
+		process.on("SIGINT", () => {
+			console.log("\n👋 Shutting down dev-inspector server...");
+			process.exit(0);
+		});
+	} catch (error) {
+		console.error("Failed to start dev-inspector server:", error);
+		process.exit(1);
+	}
+}
+main();
+
+//#endregion
+exports.StandaloneServer = StandaloneServer;
+exports.startStandaloneServer = startStandaloneServer;

package/dist/cli.d.cts

@@ -0,0 +1 @@
+export { };

package/dist/cli.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/cli.js

@@ -0,0 +1,177 @@
+#!/usr/bin/env node
+import { i as setupMcpMiddleware, n as setupAcpMiddleware, r as setupInspectorMiddleware, t as updateMcpConfigs } from "./config-updater.js";
+import http from "node:http";
+
+//#region src/utils/standalone-server.ts
+var StandaloneServer = class {
+	server;
+	middlewares = [];
+	port = 0;
+	host = "localhost";
+	stack = [];
+	constructor() {
+		this.server = http.createServer(async (req, res) => {
+			let index = 0;
+			const next = async () => {
+				if (index >= this.middlewares.length) {
+					if (!res.writableEnded) {
+						res.statusCode = 404;
+						res.end("Not Found");
+					}
+					return;
+				}
+				const layer = this.middlewares[index++];
+				if ((req.url || "/").startsWith(layer.route)) try {
+					const originalUrl = req.url;
+					if (layer.route !== "/" && req.url) {}
+					await layer.handle(req, res, next);
+					if (layer.route !== "/") req.url = originalUrl;
+				} catch (error) {
+					console.error("Middleware error:", error);
+					if (!res.writableEnded) {
+						res.statusCode = 500;
+						res.end("Internal Server Error");
+					}
+				}
+				else next();
+			};
+			await next();
+		});
+	}
+	use(routeOrHandle, handle) {
+		let route = "/";
+		let handler;
+		if (typeof routeOrHandle === "string") {
+			route = routeOrHandle;
+			if (!handle) throw new Error("Handler is required when route is provided");
+			handler = handle;
+		} else handler = routeOrHandle;
+		this.middlewares.push({
+			route,
+			handle: handler
+		});
+		return this;
+	}
+	listen(...args) {
+		return this.server.listen(...args);
+	}
+	async start(options = {}) {
+		const startPort = options.port || 8888;
+		this.host = options.host || "localhost";
+		for (let port = startPort; port < startPort + 100; port++) try {
+			await new Promise((resolve, reject) => {
+				this.server.listen(port, this.host, () => {
+					this.port = port;
+					resolve();
+				});
+				this.server.on("error", (err) => {
+					if (err.code === "EADDRINUSE") {
+						this.server.close();
+						reject(err);
+					} else reject(err);
+				});
+			});
+			return {
+				host: this.host,
+				port: this.port
+			};
+		} catch (error) {
+			if (error.code !== "EADDRINUSE") throw error;
+		}
+		throw new Error(`Could not find a free port starting from ${startPort}`);
+	}
+	close() {
+		this.server.close();
+	}
+};
+let globalServer = null;
+async function startStandaloneServer(options = {}) {
+	if (globalServer) return {
+		server: globalServer,
+		host: globalServer.host,
+		port: globalServer.port
+	};
+	globalServer = new StandaloneServer();
+	const { host, port } = await globalServer.start(options);
+	return {
+		server: globalServer,
+		host,
+		port
+	};
+}
+
+//#endregion
+//#region src/cli.ts
+/**
+* Standalone dev-inspector server for Turbopack/other non-webpack builds
+* 
+* Usage:
+*   npx dev-inspector-server
+*   npx dev-inspector-server --port 8888 --host localhost
+*/
+async function main() {
+	const args = process.argv.slice(2);
+	let port = 8888;
+	let host = "localhost";
+	for (let i = 0; i < args.length; i++) if (args[i] === "--port" && args[i + 1]) {
+		port = parseInt(args[i + 1], 10);
+		i++;
+	} else if (args[i] === "--host" && args[i + 1]) {
+		host = args[i + 1];
+		i++;
+	} else if (args[i] === "--help" || args[i] === "-h") {
+		console.log(`
+dev-inspector-server - Standalone MCP server for dev-inspector
+
+Usage:
+  npx dev-inspector-server [options]
+
+Options:
+  --port <number>   Port to run the server on (default: 8888)
+  --host <string>   Host to bind to (default: localhost)
+  --help, -h        Show this help message
+
+Example:
+  npx dev-inspector-server --port 3001
+`);
+		process.exit(0);
+	}
+	try {
+		const { server, host: actualHost, port: actualPort } = await startStandaloneServer({
+			port,
+			host
+		});
+		const serverContext = {
+			host: actualHost,
+			port: actualPort
+		};
+		const baseUrl = `http://${actualHost === "0.0.0.0" ? "localhost" : actualHost}:${actualPort}/__mcp__/sse`;
+		console.log(`
+╔══════════════════════════════════════════════════════════╗
+║              🔍 Dev Inspector MCP Server                 ║
+╠══════════════════════════════════════════════════════════╣
+║                                                          ║
+║  MCP Endpoint: ${baseUrl.padEnd(40)}║
+║                                                          ║
+║  Use this in your editor's MCP config or with           ║
+║  the DevInspector React component.                       ║
+║                                                          ║
+╚══════════════════════════════════════════════════════════╝
+`);
+		setupMcpMiddleware(server, serverContext);
+		setupAcpMiddleware(server, serverContext, {});
+		setupInspectorMiddleware(server, {});
+		await updateMcpConfigs(process.cwd(), baseUrl, {});
+		process.on("SIGINT", () => {
+			console.log("\n👋 Shutting down dev-inspector server...");
+			process.exit(0);
+		});
+	} catch (error) {
+		console.error("Failed to start dev-inspector server:", error);
+		process.exit(1);
+	}
+}
+main();
+
+//#endregion
+export { startStandaloneServer as n, StandaloneServer as t };