Add support in UI to configure request timeout

Author: pulkitsharma07

client/eslint.config.js

@@ -19,6 +19,7 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
+      "react-hooks/rules-of-hooks": "off", // Disable hooks dependency order checking
       "react-refresh/only-export-components": [
         "warn",
         { allowConstantExport: true },

client/src/App.tsx

@@ -45,10 +45,13 @@ import RootsTab from "./components/RootsTab";
 import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
+import { DEFAULT_INSPECTOR_CONFIG } from "./lib/constants";
+import { InspectorConfig } from "./lib/configurationTypes";
 
 const params = new URLSearchParams(window.location.search);
 const PROXY_PORT = params.get("proxyPort") ?? "3000";
 const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
+const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 
 const App = () => {
   // Handle OAuth callback route
@@ -99,6 +102,11 @@ const App = () => {
   >([]);
   const [roots, setRoots] = useState<Root[]>([]);
   const [env, setEnv] = useState<Record<string, string>>({});
+
+  const [config, setConfig] = useState<InspectorConfig>(() => {
+    const savedConfig = localStorage.getItem(CONFIG_LOCAL_STORAGE_KEY);
+    return savedConfig ? JSON.parse(savedConfig) : DEFAULT_INSPECTOR_CONFIG;
+  });
   const [bearerToken, setBearerToken] = useState<string>(() => {
     return localStorage.getItem("lastBearerToken") || "";
   });
@@ -171,6 +179,7 @@ const App = () => {
     env,
     bearerToken,
     proxyServerUrl: PROXY_SERVER_URL,
+    requestTimeout: config.MCP_SERVER_REQUEST_TIMEOUT.value as number,
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification as ServerNotification]);
     },
@@ -209,6 +218,10 @@ const App = () => {
     localStorage.setItem("lastBearerToken", bearerToken);
   }, [bearerToken]);
 
+  useEffect(() => {
+    localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
+  }, [config]);
+
   // Auto-connect if serverUrl is provided in URL params (e.g. after OAuth callback)
   useEffect(() => {
     const serverUrl = params.get("serverUrl");
@@ -439,6 +452,8 @@ const App = () => {
         setSseUrl={setSseUrl}
         env={env}
         setEnv={setEnv}
+        config={config}
+        setConfig={setConfig}
         bearerToken={bearerToken}
         setBearerToken={setBearerToken}
         onConnect={connectMcpServer}

client/src/components/Sidebar.tsx

@@ -8,6 +8,7 @@ import {
   Github,
   Eye,
   EyeOff,
+  Settings,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -23,6 +24,7 @@ import {
   LoggingLevel,
   LoggingLevelSchema,
 } from "@modelcontextprotocol/sdk/types.js";
+import { InspectorConfig } from "@/lib/configurationTypes";
 
 import useTheme from "../lib/useTheme";
 import { version } from "../../../package.json";
@@ -46,6 +48,8 @@ interface SidebarProps {
   logLevel: LoggingLevel;
   sendLogLevelRequest: (level: LoggingLevel) => void;
   loggingSupported: boolean;
+  config: InspectorConfig;
+  setConfig: (config: InspectorConfig) => void;
 }
 
 const Sidebar = ({
@@ -67,10 +71,13 @@ const Sidebar = ({
   logLevel,
   sendLogLevelRequest,
   loggingSupported,
+  config,
+  setConfig,
 }: SidebarProps) => {
   const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = useState(false);
   const [showBearerToken, setShowBearerToken] = useState(false);
+  const [showConfig, setShowConfig] = useState(false);
   const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
 
   return (
@@ -276,6 +283,85 @@ const Sidebar = ({
             </div>
           )}
 
+          {/* Configuration */}
+          <div className="space-y-2">
+            <Button
+              variant="secondary"
+              onClick={() => setShowConfig(!showConfig)}
+              className="flex items-center w-full"
+            >
+              {showConfig ? (
+                <ChevronDown className="w-4 h-4 mr-2" />
+              ) : (
+                <ChevronRight className="w-4 h-4 mr-2" />
+              )}
+              <Settings className="w-4 h-4 mr-2" />
+              Configuration
+            </Button>
+            {showConfig && (
+              <div className="space-y-2">
+                {Object.entries(config).map(([key, configItem]) => {
+                  const configKey = key as keyof InspectorConfig;
+                  return (
+                    <div key={key} className="space-y-2">
+                      <label className="text-sm font-medium">
+                        {configItem.description}
+                      </label>
+                      {typeof configItem.value === "number" ? (
+                        <Input
+                          type="number"
+                          value={configItem.value}
+                          onChange={(e) => {
+                            const newConfig = { ...config };
+                            newConfig[configKey] = {
+                              ...configItem,
+                              value: Number(e.target.value),
+                            };
+                            setConfig(newConfig);
+                          }}
+                          className="font-mono"
+                        />
+                      ) : typeof configItem.value === "boolean" ? (
+                        <Select
+                          value={configItem.value.toString()}
+                          onValueChange={(val) => {
+                            const newConfig = { ...config };
+                            newConfig[configKey] = {
+                              ...configItem,
+                              value: val === "true",
+                            };
+                            setConfig(newConfig);
+                          }}
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="true">True</SelectItem>
+                            <SelectItem value="false">False</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      ) : (
+                        <Input
+                          value={configItem.value}
+                          onChange={(e) => {
+                            const newConfig = { ...config };
+                            newConfig[configKey] = {
+                              ...configItem,
+                              value: e.target.value,
+                            };
+                            setConfig(newConfig);
+                          }}
+                          className="font-mono"
+                        />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
           <div className="space-y-2">
             <Button className="w-full" onClick={onConnect}>
               <Play className="w-4 h-4 mr-2" />

client/src/lib/constants.ts

@@ -1,7 +1,17 @@
+import { InspectorConfig } from "./configurationTypes";
+
+
 // OAuth-related session storage keys
 export const SESSION_KEYS = {
   CODE_VERIFIER: "mcp_code_verifier",
   SERVER_URL: "mcp_server_url",
   TOKENS: "mcp_tokens",
   CLIENT_INFORMATION: "mcp_client_information",
 } as const;
+
+export const DEFAULT_INSPECTOR_CONFIG: InspectorConfig = {
+  MCP_SERVER_REQUEST_TIMEOUT: {
+    description: "Timeout for requests to the MCP server (ms)",
+    value: 10000,
+  },
+} as const;

client/src/lib/hooks/useConnection.ts

@@ -29,10 +29,6 @@ import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
 import { authProvider } from "../auth";
 import packageJson from "../../../package.json";
 
-const params = new URLSearchParams(window.location.search);
-const DEFAULT_REQUEST_TIMEOUT_MSEC =
-  parseInt(params.get("timeout") ?? "") || 10000;
-
 interface UseConnectionOptions {
   transportType: "stdio" | "sse";
   command: string;
@@ -44,7 +40,9 @@ interface UseConnectionOptions {
   requestTimeout?: number;
   onNotification?: (notification: Notification) => void;
   onStdErrNotification?: (notification: Notification) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onPendingRequest?: (request: any, resolve: any, reject: any) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getRoots?: () => any[];
 }
 
@@ -62,7 +60,7 @@ export function useConnection({
   env,
   proxyServerUrl,
   bearerToken,
-  requestTimeout = DEFAULT_REQUEST_TIMEOUT_MSEC,
+  requestTimeout,
   onNotification,
   onStdErrNotification,
   onPendingRequest,