Merge pull request #243 from pulkitsharma07/add_proxy_config

Add MCP proxy address config support, better error messages, redesigned Config panel

README.md

@@ -53,6 +53,7 @@ The MCP Inspector supports the following configuration settings. To change them
 | Name                       | Purpose                                                                                   | Default Value |
 | -------------------------- | ----------------------------------------------------------------------------------------- | ------------- |
 | MCP_SERVER_REQUEST_TIMEOUT | Maximum time in milliseconds to wait for a response from the MCP server before timing out | 10000         |
+| MCP_PROXY_FULL_ADDRESS     | The full URL of the MCP Inspector proxy server (e.g. `http://10.2.1.14:2277`)             | `null`        |
 
 ### From this repository
 

client/package.json

@@ -32,6 +32,7 @@
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@radix-ui/react-toast": "^1.2.6",
     "@types/prismjs": "^1.26.5",
     "class-variance-authority": "^0.7.0",

client/src/App.tsx

@@ -20,7 +20,6 @@ import {
 import React, { Suspense, useEffect, useRef, useState } from "react";
 import { useConnection } from "./lib/hooks/useConnection";
 import { useDraggablePane } from "./lib/hooks/useDraggablePane";
-
 import { StdErrNotification } from "./lib/notificationTypes";
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -46,10 +45,12 @@ import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 import { DEFAULT_INSPECTOR_CONFIG } from "./lib/constants";
 import { InspectorConfig } from "./lib/configurationTypes";
+import {
+  getMCPProxyAddress,
+  getMCPServerRequestTimeout,
+} from "./utils/configUtils";
 import { useToast } from "@/hooks/use-toast";
 const params = new URLSearchParams(window.location.search);
-const PROXY_PORT = params.get("proxyPort") ?? "6277";
-const PROXY_SERVER_URL = `http://${window.location.hostname}:${PROXY_PORT}`;
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 
 const App = () => {
@@ -95,7 +96,13 @@ const App = () => {
 
   const [config, setConfig] = useState<InspectorConfig>(() => {
     const savedConfig = localStorage.getItem(CONFIG_LOCAL_STORAGE_KEY);
-    return savedConfig ? JSON.parse(savedConfig) : DEFAULT_INSPECTOR_CONFIG;
+    if (savedConfig) {
+      return {
+        ...DEFAULT_INSPECTOR_CONFIG,
+        ...JSON.parse(savedConfig),
+      } as InspectorConfig;
+    }
+    return DEFAULT_INSPECTOR_CONFIG;
   });
   const [bearerToken, setBearerToken] = useState<string>(() => {
     return localStorage.getItem("lastBearerToken") || "";
@@ -153,8 +160,8 @@ const App = () => {
     sseUrl,
     env,
     bearerToken,
-    proxyServerUrl: PROXY_SERVER_URL,
+    proxyServerUrl: getMCPProxyAddress(config),
-    requestTimeout: config.MCP_SERVER_REQUEST_TIMEOUT.value as number,
+    requestTimeout: getMCPServerRequestTimeout(config),
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification as ServerNotification]);
     },
@@ -218,7 +225,7 @@ const App = () => {
   }, [connectMcpServer, toast]);
 
   useEffect(() => {
-    fetch(`${PROXY_SERVER_URL}/config`)
+    fetch(`${getMCPProxyAddress(config)}/config`)
       .then((response) => response.json())
       .then((data) => {
         setEnv(data.defaultEnvironment);
@@ -232,6 +239,7 @@ const App = () => {
       .catch((error) =>
         console.error("Error fetching default environment:", error),
       );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {

client/src/components/Sidebar.tsx

@@ -10,6 +10,7 @@ import {
   EyeOff,
   RotateCcw,
   Settings,
+  HelpCircle,
   RefreshCwOff,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -27,12 +28,17 @@ import {
   LoggingLevelSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { InspectorConfig } from "@/lib/configurationTypes";
-
+import { ConnectionStatus } from "@/lib/constants";
 import useTheme from "../lib/useTheme";
 import { version } from "../../../package.json";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 interface SidebarProps {
-  connectionStatus: "disconnected" | "connected" | "error";
+  connectionStatus: ConnectionStatus;
   transportType: "stdio" | "sse";
   setTransportType: (type: "stdio" | "sse") => void;
   command: string;
@@ -180,6 +186,7 @@ const Sidebar = ({
                 variant="outline"
                 onClick={() => setShowEnvVars(!showEnvVars)}
                 className="flex items-center w-full"
+                data-testid="env-vars-button"
               >
                 {showEnvVars ? (
                   <ChevronDown className="w-4 h-4 mr-2" />
@@ -301,6 +308,7 @@ const Sidebar = ({
               variant="outline"
               onClick={() => setShowConfig(!showConfig)}
               className="flex items-center w-full"
+              data-testid="config-button"
             >
               {showConfig ? (
                 <ChevronDown className="w-4 h-4 mr-2" />
@@ -316,9 +324,19 @@ const Sidebar = ({
                   const configKey = key as keyof InspectorConfig;
                   return (
                     <div key={key} className="space-y-2">
-                      <label className="text-sm font-medium">
+                      <div className="flex items-center gap-1">
-                        {configItem.description}
+                        <label className="text-sm font-medium text-green-600">
+                          {configKey}
                         </label>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {configItem.description}
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
                       {typeof configItem.value === "number" ? (
                         <Input
                           type="number"
@@ -380,7 +398,7 @@ const Sidebar = ({
           <div className="space-y-2">
             {connectionStatus === "connected" && (
               <div className="grid grid-cols-2 gap-4">
-                <Button onClick={onConnect}>
+                <Button data-testid="connect-button" onClick={onConnect}>
                   <RotateCcw className="w-4 h-4 mr-2" />
                   {transportType === "stdio" ? "Restart" : "Reconnect"}
                 </Button>
@@ -399,20 +417,32 @@ const Sidebar = ({
 
             <div className="flex items-center justify-center space-x-2 mb-4">
               <div
-                className={`w-2 h-2 rounded-full ${
+                className={`w-2 h-2 rounded-full ${(() => {
-                  connectionStatus === "connected"
+                  switch (connectionStatus) {
-                    ? "bg-green-500"
+                    case "connected":
-                    : connectionStatus === "error"
+                      return "bg-green-500";
-                      ? "bg-red-500"
+                    case "error":
-                      : "bg-gray-500"
+                      return "bg-red-500";
-                }`}
+                    case "error-connecting-to-proxy":
+                      return "bg-red-500";
+                    default:
+                      return "bg-gray-500";
+                  }
+                })()}`}
               />
               <span className="text-sm text-gray-600">
-                {connectionStatus === "connected"
+                {(() => {
-                  ? "Connected"
+                  switch (connectionStatus) {
-                  : connectionStatus === "error"
+                    case "connected":
-                    ? "Connection Error"
+                      return "Connected";
-                    : "Disconnected"}
+                    case "error":
+                      return "Connection Error, is your MCP server running?";
+                    case "error-connecting-to-proxy":
+                      return "Error Connecting to MCP Inspector Proxy - Check Console logs";
+                    default:
+                      return "Disconnected";
+                  }
+                })()}
               </span>
             </div>
 

client/src/components/__tests__/Sidebar.test.tsx

@@ -1,8 +1,9 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, beforeEach, jest } from "@jest/globals";
 import Sidebar from "../Sidebar";
-import { DEFAULT_INSPECTOR_CONFIG } from "../../lib/constants";
+import { DEFAULT_INSPECTOR_CONFIG } from "@/lib/constants";
-import { InspectorConfig } from "../../lib/configurationTypes";
+import { InspectorConfig } from "@/lib/configurationTypes";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 // Mock theme hook
 jest.mock("../../lib/useTheme", () => ({
@@ -36,11 +37,15 @@ describe("Sidebar Environment Variables", () => {
   };
 
   const renderSidebar = (props = {}) => {
-    return render(<Sidebar {...defaultProps} {...props} />);
+    return render(
+      <TooltipProvider>
+        <Sidebar {...defaultProps} {...props} />
+      </TooltipProvider>,
+    );
   };
 
   const openEnvVarsSection = () => {
-    const button = screen.getByText("Environment Variables");
+    const button = screen.getByTestId("env-vars-button");
     fireEvent.click(button);
   };
 
@@ -216,7 +221,11 @@ describe("Sidebar Environment Variables", () => {
       const updatedEnv = setEnv.mock.calls[0][0] as Record<string, string>;
 
       // Rerender with the updated env
-      rerender(<Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />);
+      rerender(
+        <TooltipProvider>
+          <Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />
+        </TooltipProvider>,
+      );
 
       // Second key edit
       const secondKeyInput = screen.getByDisplayValue("SECOND_KEY");
@@ -247,7 +256,11 @@ describe("Sidebar Environment Variables", () => {
       fireEvent.change(keyInput, { target: { value: "NEW_KEY" } });
 
       // Rerender with updated env
-      rerender(<Sidebar {...defaultProps} env={{ NEW_KEY: "test_value" }} />);
+      rerender(
+        <TooltipProvider>
+          <Sidebar {...defaultProps} env={{ NEW_KEY: "test_value" }} />
+        </TooltipProvider>,
+      );
 
       // Value should still be visible
       const updatedValueInput = screen.getByDisplayValue("test_value");
@@ -312,7 +325,7 @@ describe("Sidebar Environment Variables", () => {
 
   describe("Configuration Operations", () => {
     const openConfigSection = () => {
-      const button = screen.getByText("Configuration");
+      const button = screen.getByTestId("config-button");
       fireEvent.click(button);
     };
 
@@ -327,12 +340,14 @@ describe("Sidebar Environment Variables", () => {
       );
       fireEvent.change(timeoutInput, { target: { value: "5000" } });
 
-      expect(setConfig).toHaveBeenCalledWith({
+      expect(setConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
           MCP_SERVER_REQUEST_TIMEOUT: {
             description: "Timeout for requests to the MCP server (ms)",
             value: 5000,
           },
-      });
+        }),
+      );
     });
 
     it("should handle invalid timeout values entered by user", () => {
@@ -346,12 +361,14 @@ describe("Sidebar Environment Variables", () => {
       );
       fireEvent.change(timeoutInput, { target: { value: "abc1" } });
 
-      expect(setConfig).toHaveBeenCalledWith({
+      expect(setConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
           MCP_SERVER_REQUEST_TIMEOUT: {
             description: "Timeout for requests to the MCP server (ms)",
             value: 0,
           },
-      });
+        }),
+      );
     });
 
     it("should maintain configuration state after multiple updates", () => {
@@ -362,7 +379,6 @@ describe("Sidebar Environment Variables", () => {
       });
 
       openConfigSection();
-
       // First update
       const timeoutInput = screen.getByTestId(
         "MCP_SERVER_REQUEST_TIMEOUT-input",
@@ -374,11 +390,13 @@ describe("Sidebar Environment Variables", () => {
 
       // Rerender with the updated config
       rerender(
+        <TooltipProvider>
           <Sidebar
             {...defaultProps}
             config={updatedConfig}
             setConfig={setConfig}
-        />,
+          />
+        </TooltipProvider>,
       );
 
       // Second update
@@ -388,12 +406,14 @@ describe("Sidebar Environment Variables", () => {
       fireEvent.change(updatedTimeoutInput, { target: { value: "3000" } });
 
       // Verify the final state matches what we expect
-      expect(setConfig).toHaveBeenLastCalledWith({
+      expect(setConfig).toHaveBeenLastCalledWith(
+        expect.objectContaining({
           MCP_SERVER_REQUEST_TIMEOUT: {
             description: "Timeout for requests to the MCP server (ms)",
             value: 3000,
           },
-      });
+        }),
+      );
     });
   });
 });

client/src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

client/src/lib/configurationTypes.ts

@@ -15,4 +15,5 @@ export type InspectorConfig = {
    * Maximum time in milliseconds to wait for a response from the MCP server before timing out.
    */
   MCP_SERVER_REQUEST_TIMEOUT: ConfigItem;
+  MCP_PROXY_FULL_ADDRESS: ConfigItem;
 };

client/src/lib/constants.ts

@@ -8,9 +8,26 @@ export const SESSION_KEYS = {
   CLIENT_INFORMATION: "mcp_client_information",
 } as const;
 
+export type ConnectionStatus =
+  | "disconnected"
+  | "connected"
+  | "error"
+  | "error-connecting-to-proxy";
+
+export const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
+
+/**
+ * Default configuration for the MCP Inspector, Currently persisted in local_storage in the Browser.
+ * Future plans: Provide json config file + Browser local_storage to override default values
+ **/
 export const DEFAULT_INSPECTOR_CONFIG: InspectorConfig = {
   MCP_SERVER_REQUEST_TIMEOUT: {
     description: "Timeout for requests to the MCP server (ms)",
     value: 10000,
   },
+  MCP_PROXY_FULL_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: "",
+  },
 } as const;

client/src/lib/hooks/useConnection.ts

@@ -27,7 +27,7 @@ import {
 import { useState } from "react";
 import { useToast } from "@/hooks/use-toast";
 import { z } from "zod";
-import { SESSION_KEYS } from "../constants";
+import { ConnectionStatus, SESSION_KEYS } from "../constants";
 import { Notification, StdErrNotificationSchema } from "../notificationTypes";
 import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
 import { authProvider } from "../auth";
@@ -70,10 +70,9 @@ export function useConnection({
   onPendingRequest,
   getRoots,
 }: UseConnectionOptions) {
+  const [connectionStatus, setConnectionStatus] =
+    useState<ConnectionStatus>("disconnected");
   const { toast } = useToast();
-  const [connectionStatus, setConnectionStatus] = useState<
-    "disconnected" | "connected" | "error"
-  >("disconnected");
   const [serverCapabilities, setServerCapabilities] =
     useState<ServerCapabilities | null>(null);
   const [mcpClient, setMcpClient] = useState<Client | null>(null);
@@ -210,6 +209,20 @@ export function useConnection({
     }
   };
 
+  const checkProxyHealth = async () => {
+    try {
+      const proxyHealthUrl = new URL(`${proxyServerUrl}/health`);
+      const proxyHealthResponse = await fetch(proxyHealthUrl);
+      const proxyHealth = await proxyHealthResponse.json();
+      if (proxyHealth?.status !== "ok") {
+        throw new Error("MCP Proxy Server is not healthy");
+      }
+    } catch (e) {
+      console.error("Couldn't connect to MCP Proxy Server", e);
+      throw e;
+    }
+  };
+
   const handleAuthError = async (error: unknown) => {
     if (error instanceof SseError && error.code === 401) {
       sessionStorage.setItem(SESSION_KEYS.SERVER_URL, sseUrl);
@@ -222,7 +235,6 @@ export function useConnection({
   };
 
   const connect = async (_e?: unknown, retryCount: number = 0) => {
-    try {
     const client = new Client<Request, Notification, Result>(
       {
         name: "mcp-inspector",
@@ -238,17 +250,23 @@ export function useConnection({
       },
     );
 
-      const backendUrl = new URL(`${proxyServerUrl}/sse`);
+    try {
-
+      await checkProxyHealth();
-      backendUrl.searchParams.append("transportType", transportType);
+    } catch {
+      setConnectionStatus("error-connecting-to-proxy");
+      return;
+    }
+    const mcpProxyServerUrl = new URL(`${proxyServerUrl}/sse`);
+    mcpProxyServerUrl.searchParams.append("transportType", transportType);
     if (transportType === "stdio") {
-        backendUrl.searchParams.append("command", command);
+      mcpProxyServerUrl.searchParams.append("command", command);
-        backendUrl.searchParams.append("args", args);
+      mcpProxyServerUrl.searchParams.append("args", args);
-        backendUrl.searchParams.append("env", JSON.stringify(env));
+      mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env));
     } else {
-        backendUrl.searchParams.append("url", sseUrl);
+      mcpProxyServerUrl.searchParams.append("url", sseUrl);
     }
 
+    try {
       // Inject auth manually instead of using SSEClientTransport, because we're
       // proxying through the inspector server first.
       const headers: HeadersInit = {};
@@ -259,7 +277,7 @@ export function useConnection({
         headers["Authorization"] = `Bearer ${token}`;
       }
 
-      const clientTransport = new SSEClientTransport(backendUrl, {
+      const clientTransport = new SSEClientTransport(mcpProxyServerUrl, {
         eventSourceInit: {
           fetch: (url, init) => fetch(url, { ...init, headers }),
         },
@@ -299,7 +317,10 @@ export function useConnection({
       try {
         await client.connect(clientTransport);
       } catch (error) {
-        console.error("Failed to connect to MCP server:", error);
+        console.error(
+          `Failed to connect to MCP Server via the MCP Inspector Proxy: ${mcpProxyServerUrl}:`,
+          error,
+        );
         const shouldRetry = await handleAuthError(error);
         if (shouldRetry) {
           return connect(undefined, retryCount + 1);

client/src/main.tsx

@@ -3,10 +3,13 @@ import { createRoot } from "react-dom/client";
 import { Toaster } from "@/components/ui/toaster.tsx";
 import App from "./App.tsx";
 import "./index.css";
+import { TooltipProvider } from "./components/ui/tooltip.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
+    <TooltipProvider>
       <App />
+    </TooltipProvider>
     <Toaster />
   </StrictMode>,
 );

client/src/utils/configUtils.ts

@@ -0,0 +1,14 @@
+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 `http://${window.location.hostname}:${DEFAULT_MCP_PROXY_LISTEN_PORT}`;
+};
+
+export const getMCPServerRequestTimeout = (config: InspectorConfig): number => {
+  return config.MCP_SERVER_REQUEST_TIMEOUT.value as number;
+};

server/src/index.ts

@@ -38,7 +38,7 @@ app.use(cors());
 
 let webAppTransports: SSEServerTransport[] = [];
 
-const createTransport = async (req: express.Request) => {
+const createTransport = async (req: express.Request): Promise<Transport> => {
   const query = req.query;
   console.log("Query parameters:", query);
 
@@ -70,6 +70,7 @@ const createTransport = async (req: express.Request) => {
     const headers: HeadersInit = {
       Accept: "text/event-stream",
     };
+
     for (const key of SSE_HEADERS_PASSTHROUGH) {
       if (req.headers[key] === undefined) {
         continue;
@@ -172,6 +173,12 @@ app.post("/message", async (req, res) => {
   }
 });
 
+app.get("/health", (req, res) => {
+  res.json({
+    status: "ok",
+  });
+});
+
 app.get("/config", (req, res) => {
   try {
     res.json({