@modelcontextprotocol/inspector 0.6.0 → 0.8.0

package/README.md

@@ -30,7 +30,7 @@ npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 node build/inde
 npx @modelcontextprotocol/inspector -e KEY=$VALUE -- node build/index.js -e server-flag
 ```
 
-The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed:
+The inspector runs both an MCP Inspector (MCPI) client UI (default port 6274) and an MCP Proxy (MCPP) server (default port 6277). Open the MCPI client UI in your browser to use the inspector. (These ports are derived from the T9 dialpad mapping of MCPI and MCPP respectively, as a mnemonic). You can customize the ports if needed:
 
 ```bash
 CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build/index.js
@@ -42,6 +42,18 @@ For more details on ways to use the inspector, see the [Inspector section of the
 
 The inspector supports bearer token authentication for SSE connections. Enter your token in the UI when connecting to an MCP server, and it will be sent in the Authorization header.
 
+### Security Considerations
+
+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.
+
+### Configuration
+
+The MCP Inspector supports the following configuration settings. To change them click on the `Configuration` button in the MCP Inspector UI :
+
+| Name                       | Purpose                                                                                   | Default Value |
+| -------------------------- | ----------------------------------------------------------------------------------------- | ------------- |
+| MCP_SERVER_REQUEST_TIMEOUT | Maximum time in milliseconds to wait for a response from the MCP server before timing out | 10000         |
+
 ### From this repository
 
 If you're working on the inspector itself:

package/bin/cli.js

@@ -7,7 +7,7 @@ import { fileURLToPath } from "url";
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 function delay(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+  return new Promise((resolve) => setTimeout(resolve, ms, true));
 }
 
 async function main() {
@@ -27,9 +27,15 @@ async function main() {
     }
 
     if (parsingFlags && arg === "-e" && i + 1 < args.length) {
-      const [key, value] = args[++i].split("=");
-      if (key && value) {
+      const envVar = args[++i];
+      const equalsIndex = envVar.indexOf("=");
+
+      if (equalsIndex !== -1) {
+        const key = envVar.substring(0, equalsIndex);
+        const value = envVar.substring(equalsIndex + 1);
         envVars[key] = value;
+      } else {
+        envVars[envVar] = "";
       }
     } else if (!command) {
       command = arg;
@@ -55,8 +61,8 @@ async function main() {
     "cli.js",
   );
 
-  const CLIENT_PORT = process.env.CLIENT_PORT ?? "5173";
-  const SERVER_PORT = process.env.SERVER_PORT ?? "3000";
+  const CLIENT_PORT = process.env.CLIENT_PORT ?? "6274";
+  const SERVER_PORT = process.env.SERVER_PORT ?? "6277";
 
   console.log("Starting MCP inspector...");
 
@@ -67,42 +73,40 @@ async function main() {
     cancelled = true;
     abort.abort();
   });
-
-  const server = spawnPromise(
-    "node",
-    [
-      inspectorServerPath,
-      ...(command ? [`--env`, command] : []),
-      ...(mcpServerArgs ? [`--args=${mcpServerArgs.join(" ")}`] : []),
-    ],
-    {
-      env: {
-        ...process.env,
-        PORT: SERVER_PORT,
-        MCP_ENV_VARS: JSON.stringify(envVars),
-      },
-      signal: abort.signal,
-      echoOutput: true,
-    },
-  );
-
-  const client = spawnPromise("node", [inspectorClientPath], {
-    env: { ...process.env, PORT: CLIENT_PORT },
-    signal: abort.signal,
-    echoOutput: true,
-  });
-
-  // Make sure our server/client didn't immediately fail
-  await Promise.any([server, client, delay(2 * 1000)]);
-  const portParam = SERVER_PORT === "3000" ? "" : `?proxyPort=${SERVER_PORT}`;
-  console.log(
-    `\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT}${portParam} 🚀`,
-  );
-
+  let server, serverOk;
   try {
-    await Promise.any([server, client]);
-  } catch (e) {
-    if (!cancelled || process.env.DEBUG) throw e;
+    server = spawnPromise(
+      "node",
+      [
+        inspectorServerPath,
+        ...(command ? [`--env`, command] : []),
+        ...(mcpServerArgs ? [`--args=${mcpServerArgs.join(" ")}`] : []),
+      ],
+      {
+        env: {
+          ...process.env,
+          PORT: SERVER_PORT,
+          MCP_ENV_VARS: JSON.stringify(envVars),
+        },
+        signal: abort.signal,
+        echoOutput: true,
+      },
+    );
+
+    // Make sure server started before starting client
+    serverOk = await Promise.race([server, delay(2 * 1000)]);
+  } catch (error) {}
+
+  if (serverOk) {
+    try {
+      await spawnPromise("node", [inspectorClientPath], {
+        env: { ...process.env, PORT: CLIENT_PORT },
+        signal: abort.signal,
+        echoOutput: true,
+      });
+    } catch (e) {
+      if (!cancelled || process.env.DEBUG) throw e;
+    }
   }
 
   return 0;

package/client/bin/cli.js

@@ -15,5 +15,19 @@ const server = http.createServer((request, response) => {
   });
 });
 
-const port = process.env.PORT || 5173;
-server.listen(port, () => {});
+const port = process.env.PORT || 6274;
+server.on("listening", () => {
+  console.log(
+    `🔍 MCP Inspector is up and running at http://127.0.0.1:${port} 🚀`,
+  );
+});
+server.on("error", (err) => {
+  if (err.message.includes(`EADDRINUSE`)) {
+    console.error(
+      `❌  MCP Inspector PORT IS IN USE at http://127.0.0.1:${port} ❌ `,
+    );
+  } else {
+    throw err;
+  }
+});
+server.listen(port);

package/client/dist/assets/{OAuthCallback-KG5AbO62.js → OAuthCallback-DrQsfqzq.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, a as auth, b as authProvider } from "./index-BK1TrpAN.js";
+import { r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, a as auth, b as authProvider } from "./index-DrNN0pLZ.js";
 const OAuthCallback = () => {
   const hasProcessedRef = reactExports.useRef(false);
   reactExports.useEffect(() => {

package/client/dist/assets/{index-Dt6l7sEy.css → index-BxIjx6su.css}

@@ -1443,6 +1443,12 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
+.visible {
+  visibility: visible;
+}
+.collapse {
+  visibility: collapse;
+}
 .fixed {
   position: fixed;
 }
@@ -1511,9 +1517,15 @@ video {
 .ml-2 {
   margin-left: 0.5rem;
 }
+.ml-4 {
+  margin-left: 1rem;
+}
 .ml-auto {
   margin-left: auto;
 }
+.mr-1 {
+  margin-right: 0.25rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1559,9 +1571,6 @@ video {
 .h-4 {
   height: 1rem;
 }
-.h-64 {
-  height: 16rem;
-}
 .h-8 {
   height: 2rem;
 }
@@ -1586,9 +1595,6 @@ video {
 .h-screen {
   height: 100vh;
 }
-.max-h-64 {
-  max-height: 16rem;
-}
 .max-h-80 {
   max-height: 20rem;
 }
@@ -1755,8 +1761,8 @@ video {
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
-.break-words {
-  overflow-wrap: break-word;
+.break-all {
+  word-break: break-all;
 }
 .rounded {
   border-radius: 0.25rem;
@@ -1779,6 +1785,9 @@ video {
 .border-b {
   border-bottom-width: 1px;
 }
+.border-l {
+  border-left-width: 1px;
+}
 .border-r {
   border-right-width: 1px;
 }
@@ -1964,6 +1973,10 @@ video {
 .tracking-widest {
   letter-spacing: 0.1em;
 }
+.text-amber-600 {
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
+}
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
@@ -2004,10 +2017,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
-}
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
@@ -2109,6 +2118,9 @@ video {
 .duration-200 {
   transition-duration: 200ms;
 }
+.duration-300 {
+  transition-duration: 300ms;
+}
 @keyframes enter {
 
   from {
@@ -2126,6 +2138,9 @@ video {
 .duration-200 {
   animation-duration: 200ms;
 }
+.duration-300 {
+  animation-duration: 300ms;
+}
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
@@ -2249,6 +2264,14 @@ button[role="checkbox"] {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-800\/10:hover {
+  background-color: rgb(31 41 55 / 0.1);
+}
+
+.hover\:bg-gray-800\/20:hover {
+  background-color: rgb(31 41 55 / 0.2);
+}
+
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
@@ -2344,6 +2367,16 @@ button[role="checkbox"] {
   opacity: 0.5;
 }
 
+.group:hover .group-hover\:text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
+.group:hover .group-hover\:text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
+}
+
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2523,6 +2556,11 @@ button[role="checkbox"] {
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-gray-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-white:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -2533,6 +2571,15 @@ button[role="checkbox"] {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:hover\:bg-gray-800\/20:hover:is(.dark *) {
+  background-color: rgb(31 41 55 / 0.2);
+}
+
+.group:hover .dark\:group-hover\:text-gray-100:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+}
+
 @media (min-width: 640px) {
 
   .sm\:flex-row {