@modelcontextprotocol/inspector 0.16.6 → 0.16.7

package/README.md

@@ -98,6 +98,16 @@ The MCP Inspector provides convenient buttons to export server launch configurat
   }
   ```
 
+  **Streamable HTTP transport example:**
+
+  ```json
+  {
+    "type": "streamable-http",
+    "url": "http://localhost:3000/mcp",
+    "note": "For Streamable HTTP connections, add this URL directly in your MCP Client"
+  }
+  ```
+
 - **Servers File** - Copies a complete MCP configuration file structure to your clipboard, with your current server configuration added as `default-server`. This can be saved directly as `mcp.json`.
 
   **STDIO transport example:**
@@ -131,9 +141,23 @@ The MCP Inspector provides convenient buttons to export server launch configurat
   }
   ```
 
+  **Streamable HTTP transport example:**
+
+  ```json
+  {
+    "mcpServers": {
+      "default-server": {
+        "type": "streamable-http",
+        "url": "http://localhost:3000/mcp",
+        "note": "For Streamable HTTP connections, add this URL directly in your MCP Client"
+      }
+    }
+  }
+  ```
+
 These buttons appear in the Inspector UI after you've configured your server settings, making it easy to save and reuse your configurations.
 
-For SSE transport connections, the Inspector provides similar functionality for both buttons. The "Server Entry" button copies the SSE URL configuration that can be added to your existing configuration file, while the "Servers File" button creates a complete configuration file containing the SSE URL for direct use in clients.
+For SSE and Streamable HTTP transport connections, the Inspector provides similar functionality for both buttons. The "Server Entry" button copies the configuration that can be added to your existing configuration file, while the "Servers File" button creates a complete configuration file containing the URL for direct use in clients.
 
 You can paste the Server Entry into your existing `mcp.json` file under your chosen server name, or use the complete Servers File payload to create a new configuration file.
 

package/client/dist/assets/{OAuthCallback-Cmffn8om.js → OAuthCallback-aXDAN43J.js}

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

package/client/dist/assets/{OAuthDebugCallback-BhzcPtuF.js → OAuthDebugCallback-BanjyQ_V.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, S as SESSION_KEYS, p as parseOAuthCallbackParams, j as jsxRuntimeExports, g as generateOAuthErrorDescription } from "./index-B_qh-Btq.js";
+import { r as reactExports, S as SESSION_KEYS, p as parseOAuthCallbackParams, j as jsxRuntimeExports, g as generateOAuthErrorDescription } from "./index-Dg7mXHRE.js";
 const OAuthDebugCallback = ({ onConnect }) => {
   reactExports.useEffect(() => {
     let isProcessed = false;

package/client/dist/assets/{index-C217Ot8c.css → index-DZ1A0VH0.css}

@@ -735,6 +735,39 @@ video {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
 .sr-only {
   position: absolute;
   width: 1px;

package/client/dist/assets/{index-B_qh-Btq.js → index-Dg7mXHRE.js}

@@ -15230,6 +15230,20 @@ const CancelledNotificationSchema = NotificationSchema.extend({
     reason: stringType().optional()
   })
 });
+const IconSchema = objectType({
+  /**
+   * URL or data URI for the icon.
+   */
+  src: stringType(),
+  /**
+   * Optional MIME type for the icon.
+   */
+  mimeType: optionalType(stringType()),
+  /**
+   * Optional string specifying icon dimensions (e.g., "48x48 96x96").
+   */
+  sizes: optionalType(stringType())
+}).passthrough();
 const BaseMetadataSchema = objectType({
   /** Intended for programmatic or logical use, but used as a display name in past specs or fallback */
   name: stringType(),
@@ -15244,7 +15258,20 @@ const BaseMetadataSchema = objectType({
   title: optionalType(stringType())
 }).passthrough();
 const ImplementationSchema = BaseMetadataSchema.extend({
-  version: stringType()
+  version: stringType(),
+  /**
+   * An optional URL of the website for this implementation.
+   */
+  websiteUrl: optionalType(stringType()),
+  /**
+   * An optional list of icons for this implementation.
+   * This can be used by clients to display the implementation in a user interface.
+   * Each icon should have a `kind` property that specifies whether it is a data representation or a URL source, a `src` property that points to the icon file or data representation, and may also include a `mimeType` and `sizes` property.
+   * The `mimeType` property should be a valid MIME type for the icon file, such as "image/png" or "image/svg+xml".
+   * The `sizes` property should be a string that specifies one or more sizes at which the icon file can be used, such as "48x48" or "any" for scalable formats like SVG.
+   * The `sizes` property is optional, and if not provided, the client should assume that the icon can be used at any size.
+   */
+  icons: optionalType(arrayType(IconSchema))
 });
 const ClientCapabilitiesSchema = objectType({
   /**
@@ -15435,6 +15462,10 @@ const ResourceSchema = BaseMetadataSchema.extend({
    * The MIME type of this resource, if known.
    */
   mimeType: optionalType(stringType()),
+  /**
+   * An optional list of icons for this resource.
+   */
+  icons: optionalType(arrayType(IconSchema)),
   /**
    * See [MCP specification](https://github.com/modelcontextprotocol/modelcontextprotocol/blob/47339c03c143bb4ec01a26e721a1b8fe66634ebe/docs/specification/draft/basic/index.mdx#general-fields)
    * for notes on _meta usage.
@@ -15539,6 +15570,10 @@ const PromptSchema = BaseMetadataSchema.extend({
    * A list of arguments to use for templating the prompt.
    */
   arguments: optionalType(arrayType(PromptArgumentSchema)),
+  /**
+   * An optional list of icons for this prompt.
+   */
+  icons: optionalType(arrayType(IconSchema)),
   /**
    * See [MCP specification](https://github.com/modelcontextprotocol/modelcontextprotocol/blob/47339c03c143bb4ec01a26e721a1b8fe66634ebe/docs/specification/draft/basic/index.mdx#general-fields)
    * for notes on _meta usage.
@@ -15706,6 +15741,10 @@ const ToolSchema = BaseMetadataSchema.extend({
    * Optional additional tool information.
    */
   annotations: optionalType(ToolAnnotationsSchema),
+  /**
+   * An optional list of icons for this tool.
+   */
+  icons: optionalType(arrayType(IconSchema)),
   /**
    * See [MCP specification](https://github.com/modelcontextprotocol/modelcontextprotocol/blob/47339c03c143bb4ec01a26e721a1b8fe66634ebe/docs/specification/draft/basic/index.mdx#general-fields)
    * for notes on _meta usage.
@@ -17176,7 +17215,7 @@ const oauthTransitions = {
       );
       context.provider.saveCodeVerifier(codeVerifier);
       context.updateState({
-        authorizationUrl: authorizationUrl.toString(),
+        authorizationUrl,
         oauthStep: "authorization_code"
       });
     }
@@ -24866,7 +24905,7 @@ class StreamableHTTPClientTransport {
     return this._protocolVersion;
   }
 }
-const version$1 = "0.16.6";
+const version$1 = "0.16.7";
 const packageJson = {
   version: version$1
 };
@@ -25432,11 +25471,15 @@ function useConnection({
     setCompletionsSupported(false);
     setServerCapabilities(null);
   };
+  const clearRequestHistory = () => {
+    setRequestHistory([]);
+  };
   return {
     connectionStatus,
     serverCapabilities,
     mcpClient,
     requestHistory,
+    clearRequestHistory,
     makeRequest,
     sendNotification,
     handleCompletion,
@@ -26730,7 +26773,7 @@ const OAuthFlowProgress = ({
           children: authState.authorizationUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 p-3 border rounded-md bg-muted", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium mb-2 text-sm", children: "Authorization URL:" }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs break-all", children: authState.authorizationUrl }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs break-all", children: String(authState.authorizationUrl) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "button",
                 {
@@ -26992,7 +27035,7 @@ const AuthDebugger = ({
             SESSION_KEYS.AUTH_DEBUGGER_STATE,
             JSON.stringify(currentState)
           );
-          window.location.href = currentState.authorizationUrl;
+          window.location.href = currentState.authorizationUrl.toString();
           break;
         }
       }
@@ -27383,7 +27426,9 @@ const JsonNode = reactExports.memo(
 JsonNode.displayName = "JsonNode";
 const HistoryAndNotifications = ({
   requestHistory,
-  serverNotifications
+  serverNotifications,
+  onClearHistory,
+  onClearNotifications
 }) => {
   const [expandedRequests, setExpandedRequests] = reactExports.useState({});
   const [expandedNotifications, setExpandedNotifications] = reactExports.useState({});
@@ -27395,7 +27440,19 @@ const HistoryAndNotifications = ({
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card overflow-hidden flex h-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto p-4 border-r", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold mb-4", children: "History" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold", children: "History" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: onClearHistory,
+            disabled: requestHistory.length === 0,
+            children: "Clear"
+          }
+        )
+      ] }),
       requestHistory.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 italic", children: "No history yet" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-3", children: requestHistory.slice().reverse().map((request, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "li",
         {
@@ -27445,7 +27502,19 @@ const HistoryAndNotifications = ({
       )) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto p-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold mb-4", children: "Server Notifications" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold", children: "Server Notifications" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: onClearNotifications,
+            disabled: serverNotifications.length === 0,
+            children: "Clear"
+          }
+        )
+      ] }),
       serverNotifications.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 italic", children: "No notifications yet" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-3", children: serverNotifications.slice().reverse().map((notification, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "li",
         {
@@ -36472,7 +36541,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version = "0.16.6";
+const version = "0.16.7";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -37046,7 +37115,7 @@ const Sidebar = ({
         setCopiedServerEntry(true);
         toast2({
           title: "Config entry copied",
-          description: transportType === "stdio" ? "Server configuration has been copied to clipboard. Add this to your mcp.json inside the 'mcpServers' object with your preferred server name." : "SSE URL has been copied. Use this URL directly in your MCP Client."
+          description: transportType === "stdio" ? "Server configuration has been copied to clipboard. Add this to your mcp.json inside the 'mcpServers' object with your preferred server name." : transportType === "streamable-http" ? "Streamable HTTP URL has been copied. Use this URL directly in your MCP Client." : "SSE URL has been copied. Use this URL directly in your MCP Client."
         });
         setTimeout(() => {
           setCopiedServerEntry(false);
@@ -38636,6 +38705,7 @@ const App = () => {
     serverCapabilities,
     mcpClient,
     requestHistory,
+    clearRequestHistory,
     makeRequest,
     sendNotification,
     handleCompletion,
@@ -39083,6 +39153,9 @@ const App = () => {
   const handleRootsChange = async () => {
     await sendNotification({ method: "notifications/roots/list_changed" });
   };
+  const handleClearNotifications = () => {
+    setNotifications([]);
+  };
   const sendLogLevelRequest = async (level) => {
     await sendMCPRequest(
       {
@@ -39104,13 +39177,13 @@ const App = () => {
   ) });
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-Cmffn8om.js"), true ? [] : void 0)
+      () => __vitePreload(() => import("./OAuthCallback-aXDAN43J.js"), true ? [] : 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-BhzcPtuF.js"), true ? [] : void 0)
+      () => __vitePreload(() => import("./OAuthDebugCallback-BanjyQ_V.js"), true ? [] : void 0)
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthDebugCallback, { onConnect: onOAuthDebugConnect }) });
   }
@@ -39457,7 +39530,9 @@ const App = () => {
               HistoryAndNotifications,
               {
                 requestHistory,
-                serverNotifications: notifications
+                serverNotifications: notifications,
+                onClearHistory: clearRequestHistory,
+                onClearNotifications: handleClearNotifications
               }
             ) })
           ]

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-B_qh-Btq.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-C217Ot8c.css">
+    <script type="module" crossorigin src="/assets/index-Dg7mXHRE.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DZ1A0VH0.css">
   </head>
   <body>
     <div id="root" class="w-full"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.16.6",
+  "version": "0.16.7",
   "description": "Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -47,10 +47,10 @@
     "check-version": "node scripts/check-version-consistency.js"
   },
   "dependencies": {
-    "@modelcontextprotocol/inspector-cli": "^0.16.6",
-    "@modelcontextprotocol/inspector-client": "^0.16.6",
-    "@modelcontextprotocol/inspector-server": "^0.16.6",
-    "@modelcontextprotocol/sdk": "^1.17.5",
+    "@modelcontextprotocol/inspector-cli": "^0.16.7",
+    "@modelcontextprotocol/inspector-client": "^0.16.7",
+    "@modelcontextprotocol/inspector-server": "^0.16.7",
+    "@modelcontextprotocol/sdk": "^1.18.0",
     "concurrently": "^9.2.0",
     "open": "^10.2.0",
     "shell-quote": "^1.8.3",

package/server/build/index.js

@@ -12,12 +12,6 @@ import { findActualExecutable } from "spawn-rx";
 import mcpProxy from "./mcpProxy.js";
 import { randomUUID, randomBytes, timingSafeEqual } from "node:crypto";
 const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
-const SSE_HEADERS_PASSTHROUGH = ["authorization"];
-const STREAMABLE_HTTP_HEADERS_PASSTHROUGH = [
-    "authorization",
-    "mcp-session-id",
-    "last-event-id",
-];
 const defaultEnvironment = {
     ...getDefaultEnvironment(),
     ...(process.env.MCP_ENV_VARS ? JSON.parse(process.env.MCP_ENV_VARS) : {}),
@@ -33,34 +27,71 @@ const { values } = parseArgs({
     },
 });
 // Function to get HTTP headers.
-// Supports only "sse" and "streamable-http" transport types.
-const getHttpHeaders = (req, transportType) => {
-    const headers = {
-        Accept: transportType === "sse"
-            ? "text/event-stream"
-            : "text/event-stream, application/json",
-    };
-    const defaultHeaders = transportType === "sse"
-        ? SSE_HEADERS_PASSTHROUGH
-        : STREAMABLE_HTTP_HEADERS_PASSTHROUGH;
-    for (const key of defaultHeaders) {
-        if (req.headers[key] === undefined) {
-            continue;
+const getHttpHeaders = (req) => {
+    const headers = {};
+    // Iterate over all headers in the request
+    for (const key in req.headers) {
+        const lowerKey = key.toLowerCase();
+        // Check if the header is one we want to forward
+        if (lowerKey.startsWith("mcp-") ||
+            lowerKey === "authorization" ||
+            lowerKey === "last-event-id") {
+            // Exclude the proxy's own authentication header
+            if (lowerKey !== "x-mcp-proxy-auth") {
+                const value = req.headers[key];
+                if (typeof value === "string") {
+                    // If the value is a string, use it directly
+                    headers[key] = value;
+                }
+                else if (Array.isArray(value)) {
+                    // If the value is an array, use the last element
+                    const lastValue = value.at(-1);
+                    if (lastValue !== undefined) {
+                        headers[key] = lastValue;
+                    }
+                }
+                // If value is undefined, it's skipped, which is correct.
+            }
         }
-        const value = req.headers[key];
-        headers[key] = Array.isArray(value) ? value[value.length - 1] : value;
     }
-    // If the header "x-custom-auth-header" is present, use its value as the custom header name.
-    if (req.headers["x-custom-auth-header"] !== undefined) {
-        const customHeaderName = req.headers["x-custom-auth-header"];
-        const lowerCaseHeaderName = customHeaderName.toLowerCase();
-        if (req.headers[lowerCaseHeaderName] !== undefined) {
-            const value = req.headers[lowerCaseHeaderName];
-            headers[customHeaderName] = value;
+    // Handle the custom auth header separately. We expect `x-custom-auth-header`
+    // to be a string containing the name of the actual authentication header.
+    const customAuthHeaderName = req.headers["x-custom-auth-header"];
+    if (typeof customAuthHeaderName === "string") {
+        const lowerCaseHeaderName = customAuthHeaderName.toLowerCase();
+        const value = req.headers[lowerCaseHeaderName];
+        if (typeof value === "string") {
+            headers[customAuthHeaderName] = value;
+        }
+        else if (Array.isArray(value)) {
+            // If the actual auth header was sent multiple times, use the last value.
+            const lastValue = value.at(-1);
+            if (lastValue !== undefined) {
+                headers[customAuthHeaderName] = lastValue;
+            }
         }
     }
     return headers;
 };
+/**
+ * Updates a headers object in-place, preserving the original Accept header.
+ * This is necessary to ensure that transports holding a reference to the headers
+ * object see the updates.
+ * @param currentHeaders The headers object to update.
+ * @param newHeaders The new headers to apply.
+ */
+const updateHeadersInPlace = (currentHeaders, newHeaders) => {
+    // Preserve the Accept header, which is set at transport creation and
+    // is not present in subsequent client requests.
+    const accept = currentHeaders["Accept"];
+    // Clear the old headers and apply the new ones.
+    Object.keys(currentHeaders).forEach((key) => delete currentHeaders[key]);
+    Object.assign(currentHeaders, newHeaders);
+    // Restore the Accept header.
+    if (accept) {
+        currentHeaders["Accept"] = accept;
+    }
+};
 const app = express();
 app.use(cors());
 app.use((req, res, next) => {
@@ -69,6 +100,7 @@ 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 sessionHeaderHolders = new Map(); // For dynamic header updates
 // Use provided token from environment or generate a new one
 const sessionToken = process.env.MCP_PROXY_AUTH_TOKEN || randomBytes(32).toString("hex");
 const authDisabled = !!process.env.DANGEROUSLY_OMIT_AUTH;
@@ -126,6 +158,27 @@ const authMiddleware = (req, res, next) => {
     }
     next();
 };
+/**
+ * Creates a `fetch` function that merges dynamic session headers with the
+ * headers from the actual request, ensuring that request-specific headers like
+ * `Content-Type` are preserved.
+ */
+const createCustomFetch = (headerHolder) => {
+    return (input, init) => {
+        // Determine the headers from the original request/init.
+        // The SDK may pass a Request object or a URL and an init object.
+        const originalHeaders = input instanceof Request ? input.headers : init?.headers;
+        // Start with our dynamic session headers.
+        const finalHeaders = new Headers(headerHolder.headers);
+        // Merge the SDK's request-specific headers, letting them overwrite.
+        // This is crucial for preserving Content-Type on POST requests.
+        new Headers(originalHeaders).forEach((value, key) => {
+            finalHeaders.set(key, value);
+        });
+        // This works for both `fetch(url, init)` and `fetch(request)` style calls.
+        return fetch(input, { ...init, headers: finalHeaders });
+    };
+};
 const createTransport = async (req) => {
     const query = req.query;
     console.log("Query parameters:", JSON.stringify(query));
@@ -144,32 +197,35 @@ const createTransport = async (req) => {
             stderr: "pipe",
         });
         await transport.start();
-        return transport;
+        return { transport };
     }
     else if (transportType === "sse") {
         const url = query.url;
-        const headers = getHttpHeaders(req, transportType);
+        const headers = getHttpHeaders(req);
+        headers["Accept"] = "text/event-stream";
+        const headerHolder = { headers };
         console.log(`SSE transport: url=${url}, headers=${JSON.stringify(headers)}`);
         const transport = new SSEClientTransport(new URL(url), {
             eventSourceInit: {
-                fetch: (url, init) => fetch(url, { ...init, headers }),
+                fetch: createCustomFetch(headerHolder),
             },
             requestInit: {
-                headers,
+                headers: headerHolder.headers,
             },
         });
         await transport.start();
-        return transport;
+        return { transport, headerHolder };
     }
     else if (transportType === "streamable-http") {
-        const headers = getHttpHeaders(req, transportType);
+        const headers = getHttpHeaders(req);
+        headers["Accept"] = "text/event-stream, application/json";
+        const headerHolder = { headers };
         const transport = new StreamableHTTPClientTransport(new URL(query.url), {
-            requestInit: {
-                headers,
-            },
+            // Pass a custom fetch to inject the latest headers on each request
+            fetch: createCustomFetch(headerHolder),
         });
         await transport.start();
-        return transport;
+        return { transport, headerHolder };
     }
     else {
         console.error(`Invalid transport type: ${transportType}`);
@@ -179,6 +235,10 @@ const createTransport = async (req) => {
 app.get("/mcp", originValidationMiddleware, authMiddleware, async (req, res) => {
     const sessionId = req.headers["mcp-session-id"];
     console.log(`Received GET message for sessionId ${sessionId}`);
+    const headerHolder = sessionHeaderHolders.get(sessionId);
+    if (headerHolder) {
+        updateHeadersInPlace(headerHolder.headers, getHttpHeaders(req));
+    }
     try {
         const transport = webAppTransports.get(sessionId);
         if (!transport) {
@@ -196,29 +256,45 @@ app.get("/mcp", originValidationMiddleware, authMiddleware, async (req, res) =>
 });
 app.post("/mcp", originValidationMiddleware, authMiddleware, async (req, res) => {
     const sessionId = req.headers["mcp-session-id"];
-    let serverTransport;
-    if (!sessionId) {
+    if (sessionId) {
+        console.log(`Received POST message for sessionId ${sessionId}`);
+        const headerHolder = sessionHeaderHolders.get(sessionId);
+        if (headerHolder) {
+            updateHeadersInPlace(headerHolder.headers, getHttpHeaders(req));
+        }
         try {
-            console.log("New StreamableHttp connection request");
-            try {
-                serverTransport = await createTransport(req);
+            const transport = webAppTransports.get(sessionId);
+            if (!transport) {
+                res.status(404).end("Transport not found for sessionId " + sessionId);
             }
-            catch (error) {
-                if (error instanceof SseError && error.code === 401) {
-                    console.error("Received 401 Unauthorized from MCP server:", error.message);
-                    res.status(401).json(error);
-                    return;
-                }
-                throw error;
+            else {
+                await transport.handleRequest(req, res);
             }
-            console.log("Created StreamableHttp server transport");
+        }
+        catch (error) {
+            console.error("Error in /mcp route:", error);
+            res.status(500).json(error);
+        }
+    }
+    else {
+        console.log("New StreamableHttp connection request");
+        try {
+            const { transport: serverTransport, headerHolder } = await createTransport(req);
             const webAppTransport = new StreamableHTTPServerTransport({
                 sessionIdGenerator: randomUUID,
                 onsessioninitialized: (sessionId) => {
                     webAppTransports.set(sessionId, webAppTransport);
-                    serverTransports.set(sessionId, serverTransport);
+                    serverTransports.set(sessionId, serverTransport); // eslint-disable-line @typescript-eslint/no-non-null-assertion
+                    if (headerHolder) {
+                        sessionHeaderHolders.set(sessionId, headerHolder);
+                    }
                     console.log("Client <-> Proxy  sessionId: " + sessionId);
                 },
+                onsessionclosed: (sessionId) => {
+                    webAppTransports.delete(sessionId);
+                    serverTransports.delete(sessionId);
+                    sessionHeaderHolders.delete(sessionId);
+                },
             });
             console.log("Created StreamableHttp client transport");
             await webAppTransport.start();
@@ -229,23 +305,12 @@ app.post("/mcp", originValidationMiddleware, authMiddleware, async (req, res) =>
             await webAppTransport.handleRequest(req, res, req.body);
         }
         catch (error) {
-            console.error("Error in /mcp POST route:", error);
-            res.status(500).json(error);
-        }
-    }
-    else {
-        console.log(`Received POST message for sessionId ${sessionId}`);
-        try {
-            const transport = webAppTransports.get(sessionId);
-            if (!transport) {
-                res.status(404).end("Transport not found for sessionId " + sessionId);
-            }
-            else {
-                await transport.handleRequest(req, res);
+            if (error instanceof SseError && error.code === 401) {
+                console.error("Received 401 Unauthorized from MCP server:", error.message);
+                res.status(401).json(error);
+                return;
             }
-        }
-        catch (error) {
-            console.error("Error in /mcp route:", error);
+            console.error("Error in /mcp POST route:", error);
             res.status(500).json(error);
         }
     }
@@ -253,10 +318,9 @@ app.post("/mcp", originValidationMiddleware, authMiddleware, 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;
     if (sessionId) {
         try {
-            serverTransport = serverTransports.get(sessionId);
+            const serverTransport = serverTransports.get(sessionId);
             if (!serverTransport) {
                 res.status(404).end("Transport not found for sessionId " + sessionId);
             }
@@ -264,6 +328,7 @@ app.delete("/mcp", originValidationMiddleware, authMiddleware, async (req, res)
                 await serverTransport.terminateSession();
                 webAppTransports.delete(sessionId);
                 serverTransports.delete(sessionId);
+                sessionHeaderHolders.delete(sessionId);
                 console.log(`Transports removed for sessionId ${sessionId}`);
             }
             res.status(200).end();
@@ -277,18 +342,7 @@ app.delete("/mcp", originValidationMiddleware, authMiddleware, async (req, res)
 app.get("/stdio", originValidationMiddleware, authMiddleware, async (req, res) => {
     try {
         console.log("New STDIO connection request");
-        let serverTransport;
-        try {
-            serverTransport = await createTransport(req);
-        }
-        catch (error) {
-            if (error instanceof SseError && error.code === 401) {
-                console.error("Received 401 Unauthorized from MCP server. Authentication failure.");
-                res.status(401).json(error);
-                return;
-            }
-            throw error;
-        }
+        const { transport: serverTransport } = await createTransport(req);
         const proxyFullAddress = req.query.proxyFullAddress || "";
         const prefix = proxyFullAddress || "";
         const endpoint = `${prefix}/message`;
@@ -317,6 +371,7 @@ app.get("/stdio", originValidationMiddleware, authMiddleware, async (req, res) =
                 serverTransport.close();
                 webAppTransports.delete(webAppTransport.sessionId);
                 serverTransports.delete(webAppTransport.sessionId);
+                sessionHeaderHolders.delete(webAppTransport.sessionId);
                 console.error(message);
             }
             else {
@@ -382,6 +437,11 @@ app.get("/stdio", originValidationMiddleware, authMiddleware, async (req, res) =
         });
     }
     catch (error) {
+        if (error instanceof SseError && error.code === 401) {
+            console.error("Received 401 Unauthorized from MCP server. Authentication failure.");
+            res.status(401).json(error);
+            return;
+        }
         console.error("Error in /stdio route:", error);
         res.status(500).json(error);
     }
@@ -389,46 +449,39 @@ app.get("/stdio", originValidationMiddleware, authMiddleware, async (req, res) =
 app.get("/sse", originValidationMiddleware, authMiddleware, async (req, res) => {
     try {
         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. Authentication failure.");
-                res.status(401).json(error);
-                return;
-            }
-            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 proxyFullAddress = req.query.proxyFullAddress || "";
-            const prefix = proxyFullAddress || "";
-            const endpoint = `${prefix}/message`;
-            const webAppTransport = new SSEServerTransport(endpoint, 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,
-            });
+        const { transport: serverTransport, headerHolder } = await createTransport(req);
+        const proxyFullAddress = req.query.proxyFullAddress || "";
+        const prefix = proxyFullAddress || "";
+        const endpoint = `${prefix}/message`;
+        const webAppTransport = new SSEServerTransport(endpoint, res);
+        webAppTransports.set(webAppTransport.sessionId, webAppTransport);
+        console.log("Created client transport");
+        serverTransports.set(webAppTransport.sessionId, serverTransport); // eslint-disable-line @typescript-eslint/no-non-null-assertion
+        if (headerHolder) {
+            sessionHeaderHolders.set(webAppTransport.sessionId, headerHolder);
         }
+        console.log("Created server transport");
+        await webAppTransport.start();
+        mcpProxy({
+            transportToClient: webAppTransport,
+            transportToServer: serverTransport,
+        });
     }
     catch (error) {
+        if (error instanceof SseError && error.code === 401) {
+            console.error("Received 401 Unauthorized from MCP server. Authentication failure.");
+            res.status(401).json(error);
+            return;
+        }
+        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);
+        }
         console.error("Error in /sse route:", error);
         res.status(500).json(error);
     }
@@ -437,6 +490,10 @@ app.post("/message", originValidationMiddleware, authMiddleware, async (req, res
     try {
         const sessionId = req.query.sessionId;
         console.log(`Received POST message for sessionId ${sessionId}`);
+        const headerHolder = sessionHeaderHolders.get(sessionId);
+        if (headerHolder) {
+            updateHeadersInPlace(headerHolder.headers, getHttpHeaders(req));
+        }
         const transport = webAppTransports.get(sessionId);
         if (!transport) {
             res.status(404).end("Session not found");