make server port configurable via URL query param

Author: ashwin-ant

bin/cli.js

@@ -61,8 +61,9 @@ async function main() {
 
   // Make sure our server/client didn't immediately fail
   await Promise.any([server, client, delay(2 * 1000)]);
+  const portParam = SERVER_PORT === "3000" ? "" : `?port=${SERVER_PORT}`;
   console.log(
-    `\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT} 🚀`,
+    `\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT}${portParam} 🚀`,
   );
 
   try {

client/src/App.tsx

@@ -191,7 +191,10 @@ const App = () => {
   }, [args]);
 
   useEffect(() => {
-    fetch("http://localhost:3000/config")
+    const params = new URLSearchParams(window.location.search);
+    const serverPort = params.get('port') || '3000';
+    
+    fetch(`http://localhost:${serverPort}/config`)
       .then((response) => response.json())
       .then((data) => {
         setEnv(data.defaultEnvironment);
@@ -404,7 +407,9 @@ const App = () => {
         },
       );
 
-      const backendUrl = new URL("http://localhost:3000/sse");
+      const params = new URLSearchParams(window.location.search);
+      const serverPort = params.get('port') || '3000';
+      const backendUrl = new URL(`http://localhost:${serverPort}/sse`);
 
       backendUrl.searchParams.append("transportType", transportType);
       if (transportType === "stdio") {