From a3d542c0a3e36bd78f1dd5033fc66c227f15f15c Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Tue, 26 Nov 2024 13:12:45 -0500
Subject: [PATCH] make server port configurable via URL query param

---
 bin/cli.js         | 3 ++-
 client/src/App.tsx | 9 +++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/bin/cli.js b/bin/cli.js
index 1a11b76..62513a0 100755
--- a/bin/cli.js
+++ b/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 {
diff --git a/client/src/App.tsx b/client/src/App.tsx
index c881869..312be8f 100644
--- a/client/src/App.tsx
+++ b/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") {