@modelcontextprotocol/inspector 0.14.0 → 0.14.1

package/README.md

@@ -137,6 +137,53 @@ The inspector supports bearer token authentication for SSE connections. Enter yo
 
 The MCP Inspector includes a proxy server that can run and communicate with local MCP processes. The proxy server should not be exposed to untrusted networks as it has permissions to spawn local processes and can connect to any specified MCP server.
 
+#### Authentication
+
+The MCP Inspector proxy server requires authentication by default. When starting the server, a random session token is generated and printed to the console:
+
+```
+🔑 Session token: 3a1c267fad21f7150b7d624c160b7f09b0b8c4f623c7107bbf13378f051538d4
+
+🔗 Open inspector with token pre-filled:
+   http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=3a1c267fad21f7150b7d624c160b7f09b0b8c4f623c7107bbf13378f051538d4
+```
+
+This token must be included as a Bearer token in the Authorization header for all requests to the server. When authentication is enabled, auto-open is disabled by default to ensure you use the secure URL.
+
+**Recommended: Use the pre-filled URL** - Click or copy the link shown in the console to open the inspector with the token already configured.
+
+**Alternative: Manual configuration** - If you already have the inspector open:
+
+1. Click the "Configuration" button in the sidebar
+2. Find "Proxy Session Token" and enter the token displayed in the proxy console
+3. Click "Save" to apply the configuration
+
+The token will be saved in your browser's local storage for future use.
+
+If you need to disable authentication (NOT RECOMMENDED), you can set the `DANGEROUSLY_OMIT_AUTH` environment variable:
+
+```bash
+DANGEROUSLY_OMIT_AUTH=true npm start
+```
+
+#### Local-only Binding
+
+By default, the MCP Inspector proxy server binds only to `127.0.0.1` (localhost) to prevent network access. This ensures the server is not accessible from other devices on the network. If you need to bind to all interfaces for development purposes, you can override this with the `HOST` environment variable:
+
+```bash
+HOST=0.0.0.0 npm start
+```
+
+**Warning:** Only bind to all interfaces in trusted network environments, as this exposes the proxy server's ability to execute local processes.
+
+#### DNS Rebinding Protection
+
+To prevent DNS rebinding attacks, the MCP Inspector validates the `Origin` header on incoming requests. By default, only requests from the client origin are allowed (respects `CLIENT_PORT` if set, defaulting to port 6274). You can configure additional allowed origins by setting the `ALLOWED_ORIGINS` environment variable (comma-separated list):
+
+```bash
+ALLOWED_ORIGINS=http://localhost:6274,http://127.0.0.1:6274,http://localhost:8000 npm start
+```
+
 ### Configuration
 
 The MCP Inspector supports the following configuration settings. To change them, click on the `Configuration` button in the MCP Inspector UI:

package/client/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/client/dist/assets/{OAuthCallback-CJlw2xLt.js → OAuthCallback-D7GXYYW8.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-TghXC4TH.js";
 import { p as parseOAuthCallbackParams, g as generateOAuthErrorDescription } from "./oauthUtils-DTcoXpSP.js";
 const OAuthCallback = ({ onConnect }) => {
   const { toast } = useToast();

package/client/dist/assets/{OAuthDebugCallback-0U3Rpr19.js → OAuthDebugCallback-25cy6Vcm.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-TghXC4TH.js";
 import { p as parseOAuthCallbackParams, g as generateOAuthErrorDescription } from "./oauthUtils-DTcoXpSP.js";
 const OAuthDebugCallback = ({ onConnect }) => {
   reactExports.useEffect(() => {

package/client/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/client/dist/assets/{index-CfNcvwpX.js → index-TghXC4TH.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-D7GXYYW8.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-25cy6Vcm.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.1";
 const packageJson = {
   version: version$1
 };
@@ -24166,6 +24176,9 @@ const resetRequestTimeoutOnProgress = (config) => {
 const getMCPServerRequestMaxTotalTimeout = (config) => {
   return config.MCP_REQUEST_MAX_TOTAL_TIMEOUT.value;
 };
+const getMCPProxyAuthToken = (config) => {
+  return config.MCP_PROXY_AUTH_TOKEN.value;
+};
 const getSearchParam = (key) => {
   try {
     const url = new URL(window.location.href);
@@ -24218,26 +24231,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 +24408,12 @@ function useConnection({
   const checkProxyHealth = async () => {
     try {
       const proxyHealthUrl = new URL(`${getMCPProxyAddress(config)}/health`);
-      const proxyHealthResponse = await fetch(proxyHealthUrl);
+      const proxyAuthToken = getMCPProxyAuthToken(config);
+      const headers = {};
+      if (proxyAuthToken) {
+        headers["Authorization"] = `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 +24426,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 +24472,11 @@ function useConnection({
           headers[authHeaderName] = `Bearer ${token}`;
         }
       }
+      const proxyAuthToken = getMCPProxyAuthToken(config);
+      const proxyHeaders = {};
+      if (proxyAuthToken) {
+        proxyHeaders["Authorization"] = `Bearer ${proxyAuthToken}`;
+      }
       let transportOptions;
       let mcpProxyServerUrl;
       switch (transportType) {
@@ -24442,10 +24488,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 +24503,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 +24518,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 +24587,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 +24697,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 +35295,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version = "0.14.0";
+const version = "0.14.1";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -35788,7 +35898,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 +35966,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 +36329,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 +37143,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 +37204,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 +37296,12 @@ const App = () => {
     loadOAuthTokens();
   }, [sseUrl]);
   reactExports.useEffect(() => {
-    fetch(`${getMCPProxyAddress(config)}/config`).then((response) => response.json()).then((data2) => {
+    const headers = {};
+    const proxyAuthToken = getMCPProxyAuthToken(config);
+    if (proxyAuthToken) {
+      headers["Authorization"] = `Bearer ${proxyAuthToken}`;
+    }
+    fetch(`${getMCPProxyAddress(config)}/config`, { headers }).then((response) => response.json()).then((data2) => {
       setEnv(data2.defaultEnvironment);
       if (data2.defaultCommand) {
         setCommand(data2.defaultCommand);
@@ -37174,7 +37312,7 @@ const App = () => {
     }).catch(
       (error) => console.error("Error fetching default environment:", error)
     );
-  }, []);
+  }, [config]);
   reactExports.useEffect(() => {
     rootsRef.current = roots;
   }, [roots]);
@@ -37378,44 +37516,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-D7GXYYW8.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-25cy6Vcm.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/client/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-TghXC4TH.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",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -41,9 +41,9 @@
     "publish-all": "npm publish --workspaces --access public && npm publish --access public"
   },
   "dependencies": {
-    "@modelcontextprotocol/inspector-cli": "^0.14.0",
-    "@modelcontextprotocol/inspector-client": "^0.14.0",
-    "@modelcontextprotocol/inspector-server": "^0.14.0",
+    "@modelcontextprotocol/inspector-cli": "^0.14.1",
+    "@modelcontextprotocol/inspector-client": "^0.14.1",
+    "@modelcontextprotocol/inspector-server": "^0.14.1",
     "@modelcontextprotocol/sdk": "^1.12.1",
     "concurrently": "^9.0.1",
     "open": "^10.1.0",

package/server/build/index.js

@@ -10,7 +10,7 @@ import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import express from "express";
 import { findActualExecutable } from "spawn-rx";
 import mcpProxy from "./mcpProxy.js";
-import { randomUUID } from "node:crypto";
+import { randomUUID, randomBytes, timingSafeEqual } from "node:crypto";
 const SSE_HEADERS_PASSTHROUGH = ["authorization"];
 const STREAMABLE_HTTP_HEADERS_PASSTHROUGH = [
     "authorization",
@@ -65,9 +65,63 @@ app.use((req, res, next) => {
 });
 const webAppTransports = new Map(); // Web app transports by web app sessionId
 const serverTransports = new Map(); // Server Transports by web app sessionId
+const sessionToken = randomBytes(32).toString("hex");
+const authDisabled = !!process.env.DANGEROUSLY_OMIT_AUTH;
+// Origin validation middleware to prevent DNS rebinding attacks
+const originValidationMiddleware = (req, res, next) => {
+    const origin = req.headers.origin;
+    // Default origins based on CLIENT_PORT or use environment variable
+    const clientPort = process.env.CLIENT_PORT || "6274";
+    const defaultOrigins = [
+        `http://localhost:${clientPort}`,
+        `http://127.0.0.1:${clientPort}`,
+    ];
+    const allowedOrigins = process.env.ALLOWED_ORIGINS?.split(",") || defaultOrigins;
+    if (origin && !allowedOrigins.includes(origin)) {
+        console.error(`Invalid origin: ${origin}`);
+        res.status(403).json({
+            error: "Forbidden - invalid origin",
+            message: "Request blocked to prevent DNS rebinding attacks. Configure allowed origins via environment variable.",
+        });
+        return;
+    }
+    next();
+};
+const authMiddleware = (req, res, next) => {
+    if (authDisabled) {
+        return next();
+    }
+    const sendUnauthorized = () => {
+        res.status(401).json({
+            error: "Unauthorized",
+            message: "Authentication required. Use the session token shown in the console when starting the server.",
+        });
+    };
+    const authHeader = req.headers.authorization;
+    if (!authHeader || !authHeader.startsWith("Bearer ")) {
+        sendUnauthorized();
+        return;
+    }
+    const providedToken = authHeader.substring(7); // Remove 'Bearer ' prefix
+    const expectedToken = sessionToken;
+    // Convert to buffers for timing-safe comparison
+    const providedBuffer = Buffer.from(providedToken);
+    const expectedBuffer = Buffer.from(expectedToken);
+    // Check length first to prevent timing attacks
+    if (providedBuffer.length !== expectedBuffer.length) {
+        sendUnauthorized();
+        return;
+    }
+    // Perform timing-safe comparison
+    if (!timingSafeEqual(providedBuffer, expectedBuffer)) {
+        sendUnauthorized();
+        return;
+    }
+    next();
+};
 const createTransport = async (req) => {
     const query = req.query;
-    console.log("Query parameters:", query);
+    console.log("Query parameters:", JSON.stringify(query));
     const transportType = query.transportType;
     if (transportType === "stdio") {
         const command = query.command;
@@ -75,7 +129,7 @@ const createTransport = async (req) => {
         const queryEnv = query.env ? JSON.parse(query.env) : {};
         const env = { ...process.env, ...defaultEnvironment, ...queryEnv };
         const { cmd, args } = findActualExecutable(command, origArgs);
-        console.log(`Stdio transport: command=${cmd}, args=${args}`);
+        console.log(`STDIO transport: command=${cmd}, args=${args}`);
         const transport = new StdioClientTransport({
             command: cmd,
             args,
@@ -83,7 +137,6 @@ const createTransport = async (req) => {
             stderr: "pipe",
         });
         await transport.start();
-        console.log("Spawned stdio transport");
         return transport;
     }
     else if (transportType === "sse") {
@@ -99,7 +152,6 @@ const createTransport = async (req) => {
             },
         });
         await transport.start();
-        console.log("Connected to SSE transport");
         return transport;
     }
     else if (transportType === "streamable-http") {
@@ -110,7 +162,6 @@ const createTransport = async (req) => {
             },
         });
         await transport.start();
-        console.log("Connected to Streamable HTTP transport");
         return transport;
     }
     else {
@@ -118,7 +169,7 @@ const createTransport = async (req) => {
         throw new Error("Invalid transport type specified");
     }
 };
-app.get("/mcp", async (req, res) => {
+app.get("/mcp", originValidationMiddleware, authMiddleware, async (req, res) => {
     const sessionId = req.headers["mcp-session-id"];
     console.log(`Received GET message for sessionId ${sessionId}`);
     try {
@@ -136,13 +187,12 @@ app.get("/mcp", async (req, res) => {
         res.status(500).json(error);
     }
 });
-app.post("/mcp", async (req, res) => {
+app.post("/mcp", originValidationMiddleware, authMiddleware, async (req, res) => {
     const sessionId = req.headers["mcp-session-id"];
-    console.log(`Received POST message for sessionId ${sessionId}`);
     let serverTransport;
     if (!sessionId) {
         try {
-            console.log("New streamable-http connection");
+            console.log("New StreamableHttp connection request");
             try {
                 serverTransport = await createTransport(req);
             }
@@ -154,15 +204,16 @@ app.post("/mcp", async (req, res) => {
                 }
                 throw error;
             }
-            console.log("Connected MCP client to server transport");
+            console.log("Created StreamableHttp server transport");
             const webAppTransport = new StreamableHTTPServerTransport({
                 sessionIdGenerator: randomUUID,
                 onsessioninitialized: (sessionId) => {
                     webAppTransports.set(sessionId, webAppTransport);
                     serverTransports.set(sessionId, serverTransport);
-                    console.log("Created streamable web app transport " + sessionId);
+                    console.log("Client <-> Proxy  sessionId: " + sessionId);
                 },
             });
+            console.log("Created StreamableHttp client transport");
             await webAppTransport.start();
             mcpProxy({
                 transportToClient: webAppTransport,
@@ -176,6 +227,7 @@ app.post("/mcp", async (req, res) => {
         }
     }
     else {
+        console.log(`Received POST message for sessionId ${sessionId}`);
         try {
             const transport = webAppTransports.get(sessionId);
             if (!transport) {
@@ -191,7 +243,7 @@ app.post("/mcp", async (req, res) => {
         }
     }
 });
-app.delete("/mcp", async (req, res) => {
+app.delete("/mcp", originValidationMiddleware, authMiddleware, async (req, res) => {
     const sessionId = req.headers["mcp-session-id"];
     console.log(`Received DELETE message for sessionId ${sessionId}`);
     let serverTransport;
@@ -215,84 +267,110 @@ app.delete("/mcp", async (req, res) => {
         }
     }
 });
-app.get("/stdio", async (req, res) => {
+app.get("/stdio", originValidationMiddleware, authMiddleware, async (req, res) => {
     try {
-        console.log("New connection");
+        console.log("New STDIO connection request");
         let serverTransport;
         try {
             serverTransport = await createTransport(req);
+            console.log("Created server transport");
         }
         catch (error) {
             if (error instanceof SseError && error.code === 401) {
-                console.error("Received 401 Unauthorized from MCP server:", error.message);
+                console.error("Received 401 Unauthorized from MCP server. Authentication failure.");
                 res.status(401).json(error);
                 return;
             }
             throw error;
         }
-        console.log("Connected MCP client to backing server transport");
         const webAppTransport = new SSEServerTransport("/message", res);
+        console.log("Created client transport");
         webAppTransports.set(webAppTransport.sessionId, webAppTransport);
         serverTransports.set(webAppTransport.sessionId, serverTransport);
-        console.log("Created client/server transports");
         await webAppTransport.start();
         serverTransport.stderr.on("data", (chunk) => {
-            webAppTransport.send({
-                jsonrpc: "2.0",
-                method: "notifications/stderr",
-                params: {
-                    content: chunk.toString(),
-                },
-            });
+            if (chunk.toString().includes("MODULE_NOT_FOUND")) {
+                webAppTransport.send({
+                    jsonrpc: "2.0",
+                    method: "notifications/stderr",
+                    params: {
+                        content: "Command not found, transports removed",
+                    },
+                });
+                webAppTransport.close();
+                serverTransport.close();
+                webAppTransports.delete(webAppTransport.sessionId);
+                serverTransports.delete(webAppTransport.sessionId);
+                console.error("Command not found, transports removed");
+            }
+            else {
+                webAppTransport.send({
+                    jsonrpc: "2.0",
+                    method: "notifications/stderr",
+                    params: {
+                        content: chunk.toString(),
+                    },
+                });
+            }
         });
         mcpProxy({
             transportToClient: webAppTransport,
             transportToServer: serverTransport,
         });
-        console.log("Set up MCP proxy");
     }
     catch (error) {
         console.error("Error in /stdio route:", error);
         res.status(500).json(error);
     }
 });
-app.get("/sse", async (req, res) => {
+app.get("/sse", originValidationMiddleware, authMiddleware, async (req, res) => {
     try {
-        console.log("New SSE connection. NOTE: The sse transport is deprecated and has been replaced by streamable-http");
+        console.log("New SSE connection request. NOTE: The sse transport is deprecated and has been replaced by StreamableHttp");
         let serverTransport;
         try {
             serverTransport = await createTransport(req);
         }
         catch (error) {
             if (error instanceof SseError && error.code === 401) {
-                console.error("Received 401 Unauthorized from MCP server:", error.message);
+                console.error("Received 401 Unauthorized from MCP server. Authentication failure.");
                 res.status(401).json(error);
                 return;
             }
-            throw error;
+            else if (error instanceof SseError && error.code === 404) {
+                console.error("Received 404 not found from MCP server. Does the MCP server support SSE?");
+                res.status(404).json(error);
+                return;
+            }
+            else if (JSON.stringify(error).includes("ECONNREFUSED")) {
+                console.error("Connection refused. Is the MCP server running?");
+                res.status(500).json(error);
+            }
+            else {
+                throw error;
+            }
+        }
+        if (serverTransport) {
+            const webAppTransport = new SSEServerTransport("/message", res);
+            webAppTransports.set(webAppTransport.sessionId, webAppTransport);
+            console.log("Created client transport");
+            serverTransports.set(webAppTransport.sessionId, serverTransport);
+            console.log("Created server transport");
+            await webAppTransport.start();
+            mcpProxy({
+                transportToClient: webAppTransport,
+                transportToServer: serverTransport,
+            });
         }
-        console.log("Connected MCP client to backing server transport");
-        const webAppTransport = new SSEServerTransport("/message", res);
-        webAppTransports.set(webAppTransport.sessionId, webAppTransport);
-        console.log("Created client transport");
-        serverTransports.set(webAppTransport.sessionId, serverTransport);
-        console.log("Created server transport");
-        await webAppTransport.start();
-        mcpProxy({
-            transportToClient: webAppTransport,
-            transportToServer: serverTransport,
-        });
-        console.log("Set up MCP proxy");
     }
     catch (error) {
         console.error("Error in /sse route:", error);
         res.status(500).json(error);
     }
 });
-app.post("/message", async (req, res) => {
+app.post("/message", originValidationMiddleware, authMiddleware, async (req, res) => {
     try {
         const sessionId = req.query.sessionId;
-        console.log(`Received message for sessionId ${sessionId}`);
+        console.log(`Received POST message for sessionId ${sessionId}`);
         const transport = webAppTransports.get(sessionId);
         if (!transport) {
             res.status(404).end("Session not found");
@@ -310,7 +388,7 @@ app.get("/health", (req, res) => {
         status: "ok",
     });
 });
-app.get("/config", (req, res) => {
+app.get("/config", originValidationMiddleware, authMiddleware, (req, res) => {
     try {
         res.json({
             defaultEnvironment,
@@ -323,10 +401,22 @@ app.get("/config", (req, res) => {
         res.status(500).json(error);
     }
 });
-const PORT = process.env.PORT || 6277;
-const server = app.listen(PORT);
+const PORT = parseInt(process.env.PORT || "6277", 10);
+const HOST = process.env.HOST || "127.0.0.1";
+const server = app.listen(PORT, HOST);
 server.on("listening", () => {
-    console.log(`⚙️ Proxy server listening on port ${PORT}`);
+    console.log(`⚙️ Proxy server listening on ${HOST}:${PORT}`);
+    if (!authDisabled) {
+        console.log(`🔑 Session token: ${sessionToken}`);
+        console.log(`Use this token to authenticate requests or set DANGEROUSLY_OMIT_AUTH=true to disable auth`);
+        // Display clickable URL with pre-filled token
+        const clientPort = process.env.CLIENT_PORT || "6274";
+        const clientUrl = `http://localhost:${clientPort}/?MCP_PROXY_AUTH_TOKEN=${sessionToken}`;
+        console.log(`\n🔗 Open inspector with token pre-filled:\n   ${clientUrl}\n   (Auto-open is disabled when authentication is enabled)\n`);
+    }
+    else {
+        console.log(`⚠️  WARNING: Authentication is disabled. This is not recommended.`);
+    }
 });
 server.on("error", (err) => {
     if (err.message.includes(`EADDRINUSE`)) {

package/server/build/mcpProxy.js

@@ -3,11 +3,19 @@ function onClientError(error) {
     console.error("Error from inspector client:", error);
 }
 function onServerError(error) {
-    console.error("Error from MCP server:", error);
+    if ((error?.message &&
+        error.message.includes("Error POSTing to endpoint (HTTP 404)")) ||
+        (error?.cause && JSON.stringify(error.cause).includes("ECONNREFUSED"))) {
+        console.error("Connection refused. Is the MCP server running?");
+    }
+    else {
+        console.error("Error from MCP server:", error);
+    }
 }
 export default function mcpProxy({ transportToClient, transportToServer, }) {
     let transportToClientClosed = false;
     let transportToServerClosed = false;
+    let reportedServerSession = false;
     transportToClient.onmessage = (message) => {
         transportToServer.send(message).catch((error) => {
             // Send error response back to client if it was a request (has id) and connection is still open
@@ -26,6 +34,13 @@ export default function mcpProxy({ transportToClient, transportToServer, }) {
         });
     };
     transportToServer.onmessage = (message) => {
+        if (!reportedServerSession) {
+            if (transportToServer.sessionId) {
+                // Can only report for StreamableHttp
+                console.error("Proxy  <-> Server sessionId: " + transportToServer.sessionId);
+            }
+            reportedServerSession = true;
+        }
         transportToClient.send(message).catch(onClientError);
     };
     transportToClient.onclose = () => {