@modelcontextprotocol/inspector 0.16.7 → 0.17.0

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

@@ -281,7 +281,7 @@ pre[class*="language-"] {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -779,6 +779,9 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
+.pointer-events-none {
+  pointer-events: none;
+}
 .pointer-events-auto {
   pointer-events: auto;
 }
@@ -812,6 +815,9 @@ video {
 .-top-2 {
   top: -0.5rem;
 }
+.left-3 {
+  left: 0.75rem;
+}
 .left-\[50\%\] {
   left: 50%;
 }
@@ -830,6 +836,9 @@ video {
 .top-1 {
   top: 0.25rem;
 }
+.top-1\/2 {
+  top: 50%;
+}
 .top-2 {
   top: 0.5rem;
 }
@@ -839,6 +848,9 @@ video {
 .top-\[50\%\] {
   top: 50%;
 }
+.z-10 {
+  z-index: 10;
+}
 .z-50 {
   z-index: 50;
 }
@@ -989,6 +1001,9 @@ video {
 .max-h-screen {
   max-height: 100vh;
 }
+.min-h-\[100px\] {
+  min-height: 100px;
+}
 .min-h-\[60px\] {
   min-height: 60px;
 }
@@ -1010,6 +1025,9 @@ video {
 .w-5 {
   width: 1.25rem;
 }
+.w-6 {
+  width: 1.5rem;
+}
 .w-72 {
   width: 18rem;
 }
@@ -1043,6 +1061,9 @@ video {
 .max-w-md {
   max-width: 28rem;
 }
+.max-w-xs {
+  max-width: 20rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1055,6 +1076,10 @@ video {
 .origin-\[--radix-tooltip-content-transform-origin\] {
   transform-origin: var(--radix-tooltip-content-transform-origin);
 }
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1063,6 +1088,9 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 @keyframes spin {
 
   to {
@@ -1086,6 +1114,9 @@ video {
      -moz-user-select: none;
           user-select: none;
 }
+.resize-none {
+  resize: none;
+}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1271,6 +1302,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
 }
+.border-transparent {
+  border-color: transparent;
+}
 .border-t-transparent {
   border-top-color: transparent;
 }
@@ -1421,6 +1455,10 @@ video {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -1428,6 +1466,9 @@ video {
 .pb-4 {
   padding-bottom: 1rem;
 }
+.pl-10 {
+  padding-left: 2.5rem;
+}
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -1649,6 +1690,11 @@ video {
 .outline {
   outline-style: solid;
 }
+.ring-0 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
@@ -1679,12 +1725,20 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .duration-200 {
   transition-duration: 200ms;
 }
 .duration-300 {
   transition-duration: 300ms;
 }
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
 @keyframes enter {
 
   from {
@@ -1720,6 +1774,9 @@ video {
 .duration-300 {
   animation-duration: 300ms;
 }
+.ease-in-out {
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
 .running {
   animation-play-state: running;
 }
@@ -1816,6 +1873,11 @@ h1 {
   background-color: hsl(var(--destructive) / 0.9);
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
@@ -1833,6 +1895,11 @@ h1 {
   background-color: hsl(var(--primary) / 0.9);
 }
 
+.hover\:bg-red-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-secondary:hover {
   background-color: hsl(var(--secondary));
 }
@@ -1859,6 +1926,11 @@ h1 {
   color: hsl(var(--foreground));
 }
 
+.hover\:text-red-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
+}
+
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
@@ -1943,6 +2015,10 @@ h1 {
   --tw-ring-offset-width: 2px;
 }
 
+.focus-visible\:ring-offset-background:focus-visible {
+  --tw-ring-offset-color: hsl(var(--background));
+}
+
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
@@ -2049,6 +2125,16 @@ h1 {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
+  --tw-translate-x: 1rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2080,6 +2166,10 @@ h1 {
   background-color: hsl(var(--accent));
 }
 
+.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
+  background-color: hsl(var(--input));
+}
+
 .data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
   color: hsl(var(--accent-foreground));
 }

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

package/package.json

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

package/server/build/index.js

@@ -2,6 +2,10 @@
 import cors from "cors";
 import { parseArgs } from "node:util";
 import { parse as shellParseArgs } from "shell-quote";
+import nodeFetch, { Headers as NodeHeaders } from "node-fetch";
+// Type-compatible wrappers for node-fetch to work with browser-style types
+const fetch = nodeFetch;
+const Headers = NodeHeaders;
 import { SSEClientTransport, SseError, } from "@modelcontextprotocol/sdk/client/sse.js";
 import { StdioClientTransport, getDefaultEnvironment, } from "@modelcontextprotocol/sdk/client/stdio.js";
 import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
@@ -36,8 +40,8 @@ const getHttpHeaders = (req) => {
         if (lowerKey.startsWith("mcp-") ||
             lowerKey === "authorization" ||
             lowerKey === "last-event-id") {
-            // Exclude the proxy's own authentication header
-            if (lowerKey !== "x-mcp-proxy-auth") {
+            // Exclude the proxy's own authentication header and the Client <-> Proxy session ID header
+            if (lowerKey !== "x-mcp-proxy-auth" && lowerKey !== "mcp-session-id") {
                 const value = req.headers[key];
                 if (typeof value === "string") {
                     // If the value is a string, use it directly
@@ -71,6 +75,26 @@ const getHttpHeaders = (req) => {
             }
         }
     }
+    // Handle multiple custom headers (new approach)
+    if (req.headers["x-custom-auth-headers"] !== undefined) {
+        try {
+            const customHeaderNames = JSON.parse(req.headers["x-custom-auth-headers"]);
+            if (Array.isArray(customHeaderNames)) {
+                customHeaderNames.forEach((headerName) => {
+                    const lowerCaseHeaderName = headerName.toLowerCase();
+                    if (req.headers[lowerCaseHeaderName] !== undefined) {
+                        const value = req.headers[lowerCaseHeaderName];
+                        headers[headerName] = Array.isArray(value)
+                            ? value[value.length - 1]
+                            : value;
+                    }
+                });
+            }
+        }
+        catch (error) {
+            console.warn("Failed to parse x-custom-auth-headers:", error);
+        }
+    }
     return headers;
 };
 /**
@@ -158,13 +182,33 @@ const authMiddleware = (req, res, next) => {
     }
     next();
 };
+/**
+ * Converts a Node.js ReadableStream to a web-compatible ReadableStream
+ * This is necessary for the EventSource polyfill which expects web streams
+ */
+const createWebReadableStream = (nodeStream) => {
+    return new ReadableStream({
+        start(controller) {
+            nodeStream.on("data", (chunk) => {
+                controller.enqueue(chunk);
+            });
+            nodeStream.on("end", () => {
+                controller.close();
+            });
+            nodeStream.on("error", (err) => {
+                controller.error(err);
+            });
+        },
+    });
+};
 /**
  * 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.
+ * `Content-Type` are preserved. For SSE requests, it also converts Node.js
+ * streams to web-compatible streams.
  */
 const createCustomFetch = (headerHolder) => {
-    return (input, init) => {
+    return async (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;
@@ -175,8 +219,34 @@ const createCustomFetch = (headerHolder) => {
         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 });
+        // Convert Headers to a plain object for node-fetch compatibility
+        const headersObject = {};
+        finalHeaders.forEach((value, key) => {
+            headersObject[key] = value;
+        });
+        // Get the response from node-fetch (cast input and init to handle type differences)
+        const response = await fetch(input, { ...init, headers: headersObject });
+        // Check if this is an SSE request by looking at the Accept header
+        const acceptHeader = finalHeaders.get("Accept");
+        const isSSE = acceptHeader?.includes("text/event-stream");
+        if (isSSE && response.body) {
+            // For SSE requests, we need to convert the Node.js stream to a web ReadableStream
+            // because the EventSource polyfill expects web-compatible streams
+            const webStream = createWebReadableStream(response.body);
+            // Create a new response with the web-compatible stream
+            // Convert node-fetch headers to plain object for web Response compatibility
+            const responseHeaders = {};
+            response.headers.forEach((value, key) => {
+                responseHeaders[key] = value;
+            });
+            return new Response(webStream, {
+                status: response.status,
+                statusText: response.statusText,
+                headers: responseHeaders,
+            });
+        }
+        // For non-SSE requests, return the response as-is (cast to handle type differences)
+        return response;
     };
 };
 const createTransport = async (req) => {