From 5681ffcc8db274cb8acf3c6d48ad30aa6a30d41c Mon Sep 17 00:00:00 2001
From: Carlos Santana <carrlos@amazon.com>
Date: Tue, 19 Aug 2025 13:34:40 +0000
Subject: [PATCH] add support for proxy base path routing when using
 vscode-server port-forward proxy

---
 client/bin/start.js                   | 12 ++++++++++--
 client/src/lib/hooks/useConnection.ts | 18 ++++++++++++++----
 client/src/utils/configUtils.ts       |  8 ++++++++
 client/vite.config.ts                 |  1 +
 4 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/client/bin/start.js b/client/bin/start.js
index f67301de4..c17c76218 100755
--- a/client/bin/start.js
+++ b/client/bin/start.js
@@ -14,8 +14,16 @@ function delay(ms) {
 }
 
 function getClientUrl(port, authDisabled, sessionToken, serverPort) {
-  const host = process.env.HOST || "localhost";
-  const baseUrl = `http://${host}:${port}`;
+  // Check for custom base URL from environment
+  const customBaseUrl = process.env.MCP_INSPECTOR_BASE_URL;
+
+  let baseUrl;
+  if (customBaseUrl) {
+    baseUrl = `${customBaseUrl}/proxy/${port}`;
+  } else {
+    const host = process.env.HOST || "localhost";
+    baseUrl = `http://${host}:${port}`;
+  }
 
   const params = new URLSearchParams();
   if (serverPort && serverPort !== DEFAULT_MCP_PROXY_LISTEN_PORT) {
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
index d3690f31e..a6ec2f48b 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -284,7 +284,10 @@ export function useConnection({
 
   const checkProxyHealth = async () => {
     try {
-      const proxyHealthUrl = new URL(`${getMCPProxyAddress(config)}/health`);
+      const proxyAddress = getMCPProxyAddress(config);
+      const proxyHealthUrl = proxyAddress.startsWith('http')
+        ? new URL(`${proxyAddress}/health`)
+        : new URL(`${proxyAddress}/health`, window.location.origin);
       const { token: proxyAuthToken, header: proxyAuthTokenHeader } =
         getMCPProxyAuthToken(config);
       const headers: HeadersInit = {};
@@ -408,10 +411,13 @@ export function useConnection({
         | StreamableHTTPClientTransportOptions
         | SSEClientTransportOptions;
 
+      const proxyAddress = getMCPProxyAddress(config);
       let mcpProxyServerUrl;
       switch (transportType) {
         case "stdio":
-          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/stdio`);
+          mcpProxyServerUrl = proxyAddress.startsWith('http')
+            ? new URL(`${proxyAddress}/stdio`)
+            : new URL(`${proxyAddress}/stdio`, window.location.origin);
           mcpProxyServerUrl.searchParams.append("command", command);
           mcpProxyServerUrl.searchParams.append("args", args);
           mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env));
@@ -434,7 +440,9 @@ export function useConnection({
           break;
 
         case "sse":
-          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
+          mcpProxyServerUrl = proxyAddress.startsWith('http')
+            ? new URL(`${proxyAddress}/sse`)
+            : new URL(`${proxyAddress}/sse`, window.location.origin);
           mcpProxyServerUrl.searchParams.append("url", sseUrl);
           transportOptions = {
             eventSourceInit: {
@@ -454,7 +462,9 @@ export function useConnection({
           break;
 
         case "streamable-http":
-          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/mcp`);
+          mcpProxyServerUrl = proxyAddress.startsWith('http')
+            ? new URL(`${proxyAddress}/mcp`)
+            : new URL(`${proxyAddress}/mcp`, window.location.origin);
           mcpProxyServerUrl.searchParams.append("url", sseUrl);
           transportOptions = {
             eventSourceInit: {
diff --git a/client/src/utils/configUtils.ts b/client/src/utils/configUtils.ts
index 418f00078..7885d600a 100644
--- a/client/src/utils/configUtils.ts
+++ b/client/src/utils/configUtils.ts
@@ -24,6 +24,14 @@ export const getMCPProxyAddress = (config: InspectorConfig): string => {
   const proxyPort =
     getSearchParam("MCP_PROXY_PORT") || DEFAULT_MCP_PROXY_LISTEN_PORT;
 
+  // If we're being served through a proxy path (like /proxy/6274/),
+  // construct relative URL to the proxy server port
+  const currentPath = window.location.pathname;
+  if (currentPath.includes('/proxy/')) {
+    const basePath = currentPath.replace(/\/proxy\/\d+\/.*$/, '');
+    return `${basePath}/proxy/${proxyPort}`;
+  }
+
   return `${window.location.protocol}//${window.location.hostname}:${proxyPort}`;
 };
 
diff --git a/client/vite.config.ts b/client/vite.config.ts
index fa817c7b0..28ff39fd4 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -5,6 +5,7 @@ import { defineConfig } from "vite";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: "./",
   server: {
     host: true,
   },