flowing env vars to the client app for inspector

client/bin/client.js

@@ -1,18 +1,114 @@
 #!/usr/bin/env node
 
-import { join, dirname } from "path";
-import { fileURLToPath } from "url";
-import handler from "serve-handler";
+import fs from "fs";
 import http from "http";
+import https from "https";
+import { dirname, join } from "path";
+import handler from "serve-handler";
+import { fileURLToPath } from "url";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const distPath = join(__dirname, "../dist");
 
+// Function to determine the MCP server URL
+const getMcpServerUrl = () => {
+  if (process.env.MCP_PROXY_FULL_ADDRESS) {
+    return process.env.MCP_PROXY_FULL_ADDRESS;
+  }
+
+  // Use current host with custom port if specified
+  const port = process.env.SERVER_PORT || "6277";
+  // Default to http://localhost:port
+  return `http://localhost:${port}`;
+};
+
 const server = http.createServer((request, response) => {
-  return handler(request, response, {
-    public: distPath,
-    rewrites: [{ source: "/**", destination: "/index.html" }],
-  });
+  // Handle the /config endpoint as a proxy to the MCP server
+  if (request.url === "/config") {
+    const mcpServerUrl = getMcpServerUrl();
+    const configUrl = `${mcpServerUrl}/config`;
+
+    try {
+      const clientModule = mcpServerUrl.startsWith("https:") ? https : http;
+      const proxyReq = clientModule.request(configUrl, (proxyRes) => {
+        // Capture the response data to modify it
+        let data = "";
+        proxyRes.on("data", (chunk) => {
+          data += chunk;
+        });
+
+        proxyRes.on("end", () => {
+          try {
+            // Parse the JSON response
+            const jsonResponse = JSON.parse(data);
+
+            // Add the MCP_PROXY_FULL_ADDRESS to the response
+            jsonResponse.config = {
+              MCP_PROXY_FULL_ADDRESS: { value: mcpServerUrl },
+            };
+
+            // Send the modified response
+            response.writeHead(proxyRes.statusCode, {
+              "Content-Type": "application/json",
+            });
+            response.end(JSON.stringify(jsonResponse));
+          } catch (e) {
+            // If parsing fails, just forward the original response
+            response.writeHead(proxyRes.statusCode, proxyRes.headers);
+            response.end(data);
+          }
+        });
+      });
+
+      proxyReq.on("error", (err) => {
+        console.error(`Error proxying request to ${configUrl}:`, err.message);
+        response.statusCode = 500;
+        response.end(
+          JSON.stringify({
+            error: "Failed to connect to MCP server",
+            defaultEnvironment: {},
+            mcpServerUrl: mcpServerUrl,
+          }),
+        );
+      });
+
+      request.pipe(proxyReq);
+    } catch (error) {
+      console.error(`Error setting up proxy to ${configUrl}:`, error.message);
+      response.statusCode = 500;
+      response.end(
+        JSON.stringify({
+          error: "Failed to connect to MCP server",
+          defaultEnvironment: {},
+          mcpServerUrl: mcpServerUrl,
+        }),
+      );
+    }
+  }
+  // Check if this is a request for index.html (either directly or via SPA routing)
+  else if (
+    request.url === "/" ||
+    request.url === "/index.html" ||
+    !request.url.includes(".")
+  ) {
+    const indexPath = join(distPath, "index.html");
+    fs.readFile(indexPath, "utf-8", (err, data) => {
+      if (err) {
+        response.statusCode = 500;
+        response.end(`Error loading index.html: ${err.message}`);
+        return;
+      }
+
+      response.setHeader("Content-Type", "text/html");
+      response.end(data);
+    });
+  } else {
+    // For all other assets, use serve-handler as before
+    return handler(request, response, {
+      public: distPath,
+      rewrites: [{ source: "/**", destination: "/index.html" }],
+    });
+  }
 });
 
 const port = process.env.PORT || 6274;

client/bin/start.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { resolve, dirname } from "path";
+import { dirname, resolve } from "path";
 import { spawnPromise } from "spawn-rx";
 import { fileURLToPath } from "url";
 
@@ -63,6 +63,7 @@ async function main() {
 
   const CLIENT_PORT = process.env.CLIENT_PORT ?? "6274";
   const SERVER_PORT = process.env.SERVER_PORT ?? "6277";
+  const MCP_PROXY_FULL_ADDRESS = process.env.MCP_PROXY_FULL_ADDRESS ?? "";
 
   console.log("Starting MCP inspector...");
 
@@ -100,7 +101,12 @@ async function main() {
   if (serverOk) {
     try {
       await spawnPromise("node", [inspectorClientPath], {
-        env: { ...process.env, PORT: CLIENT_PORT },
+        env: {
+          ...process.env,
+          PORT: CLIENT_PORT,
+          MCP_PROXY_FULL_ADDRESS,
+          SERVER_PORT,
+        },
         signal: abort.signal,
         echoOutput: true,
       });

client/src/App.tsx

@@ -51,7 +51,6 @@ import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 import { DEFAULT_INSPECTOR_CONFIG } from "./lib/constants";
 import { InspectorConfig } from "./lib/configurationTypes";
-import { getMCPProxyAddress } from "./utils/configUtils";
 
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 
@@ -239,16 +238,29 @@ const App = () => {
   );
 
   useEffect(() => {
-    fetch(`${getMCPProxyAddress(config)}/config`)
+    fetch(`/config`)
       .then((response) => response.json())
       .then((data) => {
         setEnv(data.defaultEnvironment);
+        setConfig((prev) => {
+          return {
+            ...prev,
+            ...data.config,
+          };
+        });
         if (data.defaultCommand) {
           setCommand(data.defaultCommand);
         }
         if (data.defaultArgs) {
           setArgs(data.defaultArgs);
         }
+
+        if (data.defaultTransportType) {
+          setTransportType(data.defaultTransportType);
+          if (data.defaultTransportType === "sse") {
+            setSseUrl(data.defaultCommand);
+          }
+        }
       })
       .catch((error) =>
         console.error("Error fetching default environment:", error),

client/src/lib/constants.ts

@@ -49,7 +49,7 @@ export const DEFAULT_INSPECTOR_CONFIG: InspectorConfig = {
   MCP_PROXY_FULL_ADDRESS: {
     label: "Inspector Proxy Address",
     description:
-      "Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577",
-    value: "",
+      "The endpoint of the MCP Proxy server. This is used to connect to the MCP server.",
+    value: `http://${window.location.hostname}:${DEFAULT_MCP_PROXY_LISTEN_PORT}`,
   },
 } as const;

client/src/lib/hooks/useConnection.ts

@@ -34,7 +34,6 @@ import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
 import { InspectorOAuthClientProvider } from "../auth";
 import packageJson from "../../../package.json";
 import {
-  getMCPProxyAddress,
   getMCPServerRequestMaxTotalTimeout,
   resetRequestTimeoutOnProgress,
 } from "@/utils/configUtils";
@@ -232,7 +231,9 @@ export function useConnection({
 
   const checkProxyHealth = async () => {
     try {
-      const proxyHealthUrl = new URL(`${getMCPProxyAddress(config)}/health`);
+      const proxyHealthUrl = new URL(
+        `${config.MCP_PROXY_FULL_ADDRESS.value}/health`,
+      );
       const proxyHealthResponse = await fetch(proxyHealthUrl);
       const proxyHealth = await proxyHealthResponse.json();
       if (proxyHealth?.status !== "ok") {
@@ -278,7 +279,9 @@ export function useConnection({
       setConnectionStatus("error-connecting-to-proxy");
       return;
     }
-    const mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
+    const mcpProxyServerUrl = new URL(
+      `${config.MCP_PROXY_FULL_ADDRESS.value}/sse`,
+    );
     mcpProxyServerUrl.searchParams.append("transportType", transportType);
     if (transportType === "stdio") {
       mcpProxyServerUrl.searchParams.append("command", command);

client/src/utils/configUtils.ts

@@ -1,13 +1,4 @@
 import { InspectorConfig } from "@/lib/configurationTypes";
-import { DEFAULT_MCP_PROXY_LISTEN_PORT } from "@/lib/constants";
-
-export const getMCPProxyAddress = (config: InspectorConfig): string => {
-  const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value as string;
-  if (proxyFullAddress) {
-    return proxyFullAddress;
-  }
-  return `${window.location.protocol}//${window.location.hostname}:${DEFAULT_MCP_PROXY_LISTEN_PORT}`;
-};
 
 export const getMCPServerRequestTimeout = (config: InspectorConfig): number => {
   return config.MCP_SERVER_REQUEST_TIMEOUT.value as number;