@modelcontextprotocol/inspector-client 0.14.0 → 0.14.2

package/bin/start.js

@@ -100,7 +100,9 @@ async function main() {
 
   if (serverOk) {
     try {
-      if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
+      // Only auto-open when auth is disabled
+      const authDisabled = !!process.env.DANGEROUSLY_OMIT_AUTH;
+      if (process.env.MCP_AUTO_OPEN_ENABLED !== "false" && authDisabled) {
         open(`http://127.0.0.1:${CLIENT_PORT}`);
       }
       await spawnPromise("node", [inspectorClientPath], {

package/dist/assets/{OAuthCallback-CJlw2xLt.js → OAuthCallback-UvVmnvtb.js}

@@ -1,4 +1,4 @@
-import { u as useToast, r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, I as InspectorOAuthClientProvider, a as auth } from "./index-CfNcvwpX.js";
+import { u as useToast, r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, I as InspectorOAuthClientProvider, a as auth } from "./index-Daz_CV25.js";
 import { p as parseOAuthCallbackParams, g as generateOAuthErrorDescription } from "./oauthUtils-DTcoXpSP.js";
 const OAuthCallback = ({ onConnect }) => {
   const { toast } = useToast();

package/dist/assets/{OAuthDebugCallback-0U3Rpr19.js → OAuthDebugCallback-CrRUPVLi.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, S as SESSION_KEYS, j as jsxRuntimeExports } from "./index-CfNcvwpX.js";
+import { r as reactExports, S as SESSION_KEYS, j as jsxRuntimeExports } from "./index-Daz_CV25.js";
 import { p as parseOAuthCallbackParams, g as generateOAuthErrorDescription } from "./oauthUtils-DTcoXpSP.js";
 const OAuthDebugCallback = ({ onConnect }) => {
   reactExports.useEffect(() => {

package/dist/assets/{index-1IEtev7A.css → index-C1MLjTGf.css}

@@ -989,9 +989,6 @@ video {
 .w-8 {
   width: 2rem;
 }
-.w-80 {
-  width: 20rem;
-}
 .w-9 {
   width: 2.25rem;
 }

package/dist/assets/{index-CfNcvwpX.js → index-Daz_CV25.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-CJlw2xLt.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-0U3Rpr19.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-UvVmnvtb.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-CrRUPVLi.js"])))=>i.map(i=>d[i]);
 function _mergeNamespaces(n, m2) {
   for (var i = 0; i < m2.length; i++) {
     const e = m2[i];
@@ -16039,22 +16039,32 @@ const DEFAULT_INSPECTOR_CONFIG = {
   MCP_SERVER_REQUEST_TIMEOUT: {
     label: "Request Timeout",
     description: "Timeout for requests to the MCP server (ms)",
-    value: 1e4
+    value: 1e4,
+    is_session_item: false
   },
   MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS: {
     label: "Reset Timeout on Progress",
     description: "Reset timeout on progress notifications",
-    value: true
+    value: true,
+    is_session_item: false
   },
   MCP_REQUEST_MAX_TOTAL_TIMEOUT: {
     label: "Maximum Total Timeout",
     description: "Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)",
-    value: 6e4
+    value: 6e4,
+    is_session_item: false
   },
   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: ""
+    value: "",
+    is_session_item: false
+  },
+  MCP_PROXY_AUTH_TOKEN: {
+    label: "Proxy Session Token",
+    description: "Session token for authenticating with the MCP Proxy Server (displayed in proxy console on startup)",
+    value: "",
+    is_session_item: true
   }
 };
 const EMPTY_DEBUGGER_STATE = {
@@ -24146,7 +24156,7 @@ const StdErrNotificationSchema = NotificationSchema.extend({
 ClientNotificationSchema.or(
   StdErrNotificationSchema
 ).or(ServerNotificationSchema).or(NotificationSchema);
-const version$1 = "0.14.0";
+const version$1 = "0.14.2";
 const packageJson = {
   version: version$1
 };
@@ -24166,6 +24176,12 @@ const resetRequestTimeoutOnProgress = (config) => {
 const getMCPServerRequestMaxTotalTimeout = (config) => {
   return config.MCP_REQUEST_MAX_TOTAL_TIMEOUT.value;
 };
+const getMCPProxyAuthToken = (config) => {
+  return {
+    token: config.MCP_PROXY_AUTH_TOKEN.value,
+    header: "X-MCP-Proxy-Auth"
+  };
+};
 const getSearchParam = (key) => {
   try {
     const url = new URL(window.location.href);
@@ -24218,26 +24234,46 @@ const getConfigOverridesFromQueryParams = (defaultConfig) => {
   return overrides;
 };
 const initializeInspectorConfig = (localStorageKey) => {
-  const savedConfig = localStorage.getItem(localStorageKey);
-  let baseConfig;
-  if (savedConfig) {
-    const mergedConfig = {
-      ...DEFAULT_INSPECTOR_CONFIG,
-      ...JSON.parse(savedConfig)
+  const savedPersistentConfig = localStorage.getItem(localStorageKey);
+  const savedEphemeralConfig = sessionStorage.getItem(
+    `${localStorageKey}_ephemeral`
+  );
+  let baseConfig = { ...DEFAULT_INSPECTOR_CONFIG };
+  if (savedPersistentConfig) {
+    const parsedPersistentConfig = JSON.parse(savedPersistentConfig);
+    baseConfig = { ...baseConfig, ...parsedPersistentConfig };
+  }
+  if (savedEphemeralConfig) {
+    const parsedEphemeralConfig = JSON.parse(savedEphemeralConfig);
+    baseConfig = { ...baseConfig, ...parsedEphemeralConfig };
+  }
+  for (const [key, value] of Object.entries(baseConfig)) {
+    baseConfig[key] = {
+      ...value,
+      label: DEFAULT_INSPECTOR_CONFIG[key].label,
+      description: DEFAULT_INSPECTOR_CONFIG[key].description,
+      is_session_item: DEFAULT_INSPECTOR_CONFIG[key].is_session_item
     };
-    for (const [key, value] of Object.entries(mergedConfig)) {
-      mergedConfig[key] = {
-        ...value,
-        label: DEFAULT_INSPECTOR_CONFIG[key].label
-      };
-    }
-    baseConfig = mergedConfig;
-  } else {
-    baseConfig = DEFAULT_INSPECTOR_CONFIG;
   }
   const overrides = getConfigOverridesFromQueryParams(DEFAULT_INSPECTOR_CONFIG);
   return { ...baseConfig, ...overrides };
 };
+const saveInspectorConfig = (localStorageKey, config) => {
+  const persistentConfig = {};
+  const ephemeralConfig = {};
+  for (const [key, value] of Object.entries(config)) {
+    if (value.is_session_item) {
+      ephemeralConfig[key] = value;
+    } else {
+      persistentConfig[key] = value;
+    }
+  }
+  localStorage.setItem(localStorageKey, JSON.stringify(persistentConfig));
+  sessionStorage.setItem(
+    `${localStorageKey}_ephemeral`,
+    JSON.stringify(ephemeralConfig)
+  );
+};
 function useConnection({
   transportType,
   command,
@@ -24375,7 +24411,12 @@ function useConnection({
   const checkProxyHealth = async () => {
     try {
       const proxyHealthUrl = new URL(`${getMCPProxyAddress(config)}/health`);
-      const proxyHealthResponse = await fetch(proxyHealthUrl);
+      const { token: proxyAuthToken, header: proxyAuthTokenHeader } = getMCPProxyAuthToken(config);
+      const headers = {};
+      if (proxyAuthToken) {
+        headers[proxyAuthTokenHeader] = `Bearer ${proxyAuthToken}`;
+      }
+      const proxyHealthResponse = await fetch(proxyHealthUrl, { headers });
       const proxyHealth = await proxyHealthResponse.json();
       if ((proxyHealth == null ? void 0 : proxyHealth.status) !== "ok") {
         throw new Error("MCP Proxy Server is not healthy");
@@ -24388,6 +24429,9 @@ function useConnection({
   const is401Error = (error) => {
     return error instanceof SseError && error.code === 401 || error instanceof Error && error.message.includes("401") || error instanceof Error && error.message.includes("Unauthorized");
   };
+  const isProxyAuthError = (error) => {
+    return error instanceof Error && error.message.includes("Authentication required. Use the session token");
+  };
   const handleAuthError = async (error) => {
     if (is401Error(error)) {
       const serverAuthProvider = new InspectorOAuthClientProvider(sseUrl);
@@ -24431,6 +24475,11 @@ function useConnection({
           headers[authHeaderName] = `Bearer ${token}`;
         }
       }
+      const { token: proxyAuthToken, header: proxyAuthTokenHeader } = getMCPProxyAuthToken(config);
+      const proxyHeaders = {};
+      if (proxyAuthToken) {
+        proxyHeaders[proxyAuthTokenHeader] = `Bearer ${proxyAuthToken}`;
+      }
       let transportOptions;
       let mcpProxyServerUrl;
       switch (transportType) {
@@ -24442,10 +24491,13 @@ function useConnection({
           transportOptions = {
             authProvider: serverAuthProvider,
             eventSourceInit: {
-              fetch: (url, init) => fetch(url, { ...init, headers })
+              fetch: (url, init) => fetch(url, {
+                ...init,
+                headers: { ...headers, ...proxyHeaders }
+              })
             },
             requestInit: {
-              headers
+              headers: { ...headers, ...proxyHeaders }
             }
           };
           break;
@@ -24454,10 +24506,13 @@ function useConnection({
           mcpProxyServerUrl.searchParams.append("url", sseUrl);
           transportOptions = {
             eventSourceInit: {
-              fetch: (url, init) => fetch(url, { ...init, headers })
+              fetch: (url, init) => fetch(url, {
+                ...init,
+                headers: { ...headers, ...proxyHeaders }
+              })
             },
             requestInit: {
-              headers
+              headers: { ...headers, ...proxyHeaders }
             }
           };
           break;
@@ -24466,10 +24521,13 @@ function useConnection({
           mcpProxyServerUrl.searchParams.append("url", sseUrl);
           transportOptions = {
             eventSourceInit: {
-              fetch: (url, init) => fetch(url, { ...init, headers })
+              fetch: (url, init) => fetch(url, {
+                ...init,
+                headers: { ...headers, ...proxyHeaders }
+              })
             },
             requestInit: {
-              headers
+              headers: { ...headers, ...proxyHeaders }
             },
             // TODO these should be configurable...
             reconnectionOptions: {
@@ -24532,6 +24590,15 @@ function useConnection({
           `Failed to connect to MCP Server via the MCP Inspector Proxy: ${mcpProxyServerUrl}:`,
           error
         );
+        if (isProxyAuthError(error)) {
+          toast2({
+            title: "Proxy Authentication Required",
+            description: "Please enter the session token from the proxy server console in the Configuration settings.",
+            variant: "destructive"
+          });
+          setConnectionStatus("error");
+          return;
+        }
         const shouldRetry = await handleAuthError(error);
         if (shouldRetry) {
           return connect(void 0, retryCount + 1);
@@ -24633,6 +24700,52 @@ function useDraggablePane(initialHeight) {
     handleDragStart
   };
 }
+function useDraggableSidebar(initialWidth) {
+  const [width, setWidth] = reactExports.useState(initialWidth);
+  const [isDragging, setIsDragging] = reactExports.useState(false);
+  const dragStartX = reactExports.useRef(0);
+  const dragStartWidth = reactExports.useRef(0);
+  const handleDragStart = reactExports.useCallback(
+    (e) => {
+      setIsDragging(true);
+      dragStartX.current = e.clientX;
+      dragStartWidth.current = width;
+      document.body.style.userSelect = "none";
+    },
+    [width]
+  );
+  const handleDragMove = reactExports.useCallback(
+    (e) => {
+      if (!isDragging) return;
+      const deltaX = e.clientX - dragStartX.current;
+      const newWidth = Math.max(
+        200,
+        Math.min(600, dragStartWidth.current + deltaX)
+      );
+      setWidth(newWidth);
+    },
+    [isDragging]
+  );
+  const handleDragEnd = reactExports.useCallback(() => {
+    setIsDragging(false);
+    document.body.style.userSelect = "";
+  }, []);
+  reactExports.useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", handleDragMove);
+      window.addEventListener("mouseup", handleDragEnd);
+      return () => {
+        window.removeEventListener("mousemove", handleDragMove);
+        window.removeEventListener("mouseup", handleDragEnd);
+      };
+    }
+  }, [isDragging, handleDragMove, handleDragEnd]);
+  return {
+    width,
+    isDragging,
+    handleDragStart
+  };
+}
 var useReactId = React$1[" useId ".trim().toString()] || (() => void 0);
 var count$1 = 0;
 function useId(deterministicId) {
@@ -35185,7 +35298,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version = "0.14.0";
+const version = "0.14.2";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -35788,7 +35901,7 @@ const Sidebar = ({
       reportError2(error);
     }
   }, [generateMCPServerFile, toast2, reportError2]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-80 bg-card border-r border-border flex flex-col h-full", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card border-r border-border flex flex-col h-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "ml-2 text-lg font-semibold", children: [
       "MCP Inspector v",
       version
@@ -35856,7 +35969,19 @@ const Sidebar = ({
       ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", htmlFor: "sse-url-input", children: "URL" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
+          sseUrl ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Input,
+              {
+                id: "sse-url-input",
+                placeholder: "URL",
+                value: sseUrl,
+                onChange: (e) => setSseUrl(e.target.value),
+                className: "font-mono"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: sseUrl })
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
             Input,
             {
               id: "sse-url-input",
@@ -36207,11 +36332,17 @@ const Sidebar = ({
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: (() => {
+            var _a;
             switch (connectionStatus) {
               case "connected":
                 return "Connected";
-              case "error":
-                return "Connection Error, is your MCP server running?";
+              case "error": {
+                const hasProxyToken = (_a = config.MCP_PROXY_AUTH_TOKEN) == null ? void 0 : _a.value;
+                if (!hasProxyToken) {
+                  return "Connection Error - Did you add the proxy session token in Configuration?";
+                }
+                return "Connection Error - Check if your MCP server is running and proxy token is correct";
+              }
               case "error-connecting-to-proxy":
                 return "Error Connecting to MCP Inspector Proxy - Check Console logs";
               default:
@@ -37015,6 +37146,11 @@ const App = () => {
   const [nextToolCursor, setNextToolCursor] = reactExports.useState();
   const progressTokenRef = reactExports.useRef(0);
   const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300);
+  const {
+    width: sidebarWidth,
+    isDragging: isSidebarDragging,
+    handleDragStart: handleSidebarDragStart
+  } = useDraggableSidebar(320);
   const {
     connectionStatus,
     serverCapabilities,
@@ -37071,7 +37207,7 @@ const App = () => {
     localStorage.setItem("lastHeaderName", headerName);
   }, [headerName]);
   reactExports.useEffect(() => {
-    localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
+    saveInspectorConfig(CONFIG_LOCAL_STORAGE_KEY, config);
   }, [config]);
   const onOAuthConnect = reactExports.useCallback(
     (serverUrl) => {
@@ -37163,7 +37299,12 @@ const App = () => {
     loadOAuthTokens();
   }, [sseUrl]);
   reactExports.useEffect(() => {
-    fetch(`${getMCPProxyAddress(config)}/config`).then((response) => response.json()).then((data2) => {
+    const headers = {};
+    const { token: proxyAuthToken, header: proxyAuthTokenHeader } = getMCPProxyAuthToken(config);
+    if (proxyAuthToken) {
+      headers[proxyAuthTokenHeader] = `Bearer ${proxyAuthToken}`;
+    }
+    fetch(`${getMCPProxyAddress(config)}/config`, { headers }).then((response) => response.json()).then((data2) => {
       setEnv(data2.defaultEnvironment);
       if (data2.defaultCommand) {
         setCommand(data2.defaultCommand);
@@ -37174,7 +37315,7 @@ const App = () => {
     }).catch(
       (error) => console.error("Error fetching default environment:", error)
     );
-  }, []);
+  }, [config]);
   reactExports.useEffect(() => {
     rootsRef.current = roots;
   }, [roots]);
@@ -37378,44 +37519,76 @@ const App = () => {
   ) });
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-CJlw2xLt.js"), true ? __vite__mapDeps([0,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthCallback-UvVmnvtb.js"), true ? __vite__mapDeps([0,1]) : void 0)
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthCallback, { onConnect: onOAuthConnect }) });
   }
   if (window.location.pathname === "/oauth/callback/debug") {
     const OAuthDebugCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthDebugCallback-0U3Rpr19.js"), true ? __vite__mapDeps([2,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthDebugCallback-CrRUPVLi.js"), true ? __vite__mapDeps([2,1]) : void 0)
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthDebugCallback, { onConnect: onOAuthDebugConnect }) });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-screen bg-background", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Sidebar,
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
       {
-        connectionStatus,
-        transportType,
-        setTransportType,
-        command,
-        setCommand,
-        args,
-        setArgs,
-        sseUrl,
-        setSseUrl,
-        env,
-        setEnv,
-        config,
-        setConfig,
-        bearerToken,
-        setBearerToken,
-        headerName,
-        setHeaderName,
-        onConnect: connectMcpServer,
-        onDisconnect: disconnectMcpServer,
-        stdErrNotifications,
-        logLevel,
-        sendLogLevelRequest,
-        loggingSupported: !!(serverCapabilities == null ? void 0 : serverCapabilities.logging) || false,
-        clearStdErrNotifications
+        style: {
+          width: sidebarWidth,
+          minWidth: 200,
+          maxWidth: 600,
+          transition: isSidebarDragging ? "none" : "width 0.15s"
+        },
+        className: "bg-card border-r border-border flex flex-col h-full relative",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Sidebar,
+            {
+              connectionStatus,
+              transportType,
+              setTransportType,
+              command,
+              setCommand,
+              args,
+              setArgs,
+              sseUrl,
+              setSseUrl,
+              env,
+              setEnv,
+              config,
+              setConfig,
+              bearerToken,
+              setBearerToken,
+              headerName,
+              setHeaderName,
+              onConnect: connectMcpServer,
+              onDisconnect: disconnectMcpServer,
+              stdErrNotifications,
+              logLevel,
+              sendLogLevelRequest,
+              loggingSupported: !!(serverCapabilities == null ? void 0 : serverCapabilities.logging) || false,
+              clearStdErrNotifications
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              onMouseDown: handleSidebarDragStart,
+              style: {
+                cursor: "col-resize",
+                position: "absolute",
+                top: 0,
+                right: 0,
+                width: 6,
+                height: "100%",
+                zIndex: 10,
+                background: isSidebarDragging ? "rgba(0,0,0,0.08)" : "transparent"
+              },
+              "aria-label": "Resize sidebar",
+              "data-testid": "sidebar-drag-handle"
+            }
+          )
+        ]
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [

package/dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/mcp.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MCP Inspector</title>
-    <script type="module" crossorigin src="/assets/index-CfNcvwpX.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-1IEtev7A.css">
+    <script type="module" crossorigin src="/assets/index-Daz_CV25.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C1MLjTGf.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",