@modelcontextprotocol/inspector-client 0.15.0 → 0.16.0

package/bin/client.js

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 
+import open from "open";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";
 import handler from "serve-handler";
@@ -39,19 +40,23 @@ const server = http.createServer((request, response) => {
   return handler(request, response, handlerOptions);
 });
 
-const port = process.env.PORT || 6274;
+const port = parseInt(process.env.CLIENT_PORT || "6274", 10);
+const host = process.env.HOST || "localhost";
 server.on("listening", () => {
-  console.log(
-    `🔍 MCP Inspector is up and running at http://127.0.0.1:${port} 🚀`,
-  );
+  const url = process.env.INSPECTOR_URL || `http://${host}:${port}`;
+  console.log(`\n🚀 MCP Inspector is up and running at:\n   ${url}\n`);
+  if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
+    console.log(`🌐 Opening browser...`);
+    open(url);
+  }
 });
 server.on("error", (err) => {
   if (err.message.includes(`EADDRINUSE`)) {
     console.error(
-      `❌  MCP Inspector PORT IS IN USE at http://127.0.0.1:${port} ❌ `,
+      `❌  MCP Inspector PORT IS IN USE at http://${host}:${port} ❌ `,
     );
   } else {
     throw err;
   }
 });
-server.listen(port);
+server.listen(port, host);

package/bin/start.js

@@ -7,11 +7,26 @@ import { fileURLToPath } from "url";
 import { randomBytes } from "crypto";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
+const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
 
 function delay(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms, true));
 }
 
+function getClientUrl(port, authDisabled, sessionToken, serverPort) {
+  const host = process.env.HOST || "localhost";
+  const baseUrl = `http://${host}:${port}`;
+
+  const params = new URLSearchParams();
+  if (serverPort && serverPort !== DEFAULT_MCP_PROXY_LISTEN_PORT) {
+    params.set("MCP_PROXY_PORT", serverPort);
+  }
+  if (!authDisabled) {
+    params.set("MCP_PROXY_AUTH_TOKEN", sessionToken);
+  }
+  return params.size > 0 ? `${baseUrl}/?${params.toString()}` : baseUrl;
+}
+
 async function startDevServer(serverOptions) {
   const { SERVER_PORT, CLIENT_PORT, sessionToken, envVars, abort } =
     serverOptions;
@@ -23,8 +38,8 @@ async function startDevServer(serverOptions) {
     cwd: resolve(__dirname, "../..", "server"),
     env: {
       ...process.env,
-      PORT: SERVER_PORT,
-      CLIENT_PORT: CLIENT_PORT,
+      SERVER_PORT,
+      CLIENT_PORT,
       MCP_PROXY_TOKEN: sessionToken,
       MCP_ENV_VARS: JSON.stringify(envVars),
     },
@@ -82,8 +97,8 @@ async function startProdServer(serverOptions) {
     {
       env: {
         ...process.env,
-        PORT: SERVER_PORT,
-        CLIENT_PORT: CLIENT_PORT,
+        SERVER_PORT,
+        CLIENT_PORT,
         MCP_PROXY_TOKEN: sessionToken,
         MCP_ENV_VARS: JSON.stringify(envVars),
       },
@@ -99,30 +114,40 @@ async function startProdServer(serverOptions) {
 }
 
 async function startDevClient(clientOptions) {
-  const { CLIENT_PORT, authDisabled, sessionToken, abort, cancelled } =
-    clientOptions;
+  const {
+    CLIENT_PORT,
+    SERVER_PORT,
+    authDisabled,
+    sessionToken,
+    abort,
+    cancelled,
+  } = clientOptions;
   const clientCommand = "npx";
-  const clientArgs = ["vite", "--port", CLIENT_PORT];
+  const host = process.env.HOST || "localhost";
+  const clientArgs = ["vite", "--port", CLIENT_PORT, "--host", host];
 
   const client = spawn(clientCommand, clientArgs, {
     cwd: resolve(__dirname, ".."),
-    env: { ...process.env, PORT: CLIENT_PORT },
+    env: { ...process.env, CLIENT_PORT },
     signal: abort.signal,
     echoOutput: true,
   });
 
-  // Auto-open browser after vite starts
-  if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
-    const url = authDisabled
-      ? `http://127.0.0.1:${CLIENT_PORT}`
-      : `http://127.0.0.1:${CLIENT_PORT}/?MCP_PROXY_AUTH_TOKEN=${sessionToken}`;
+  const url = getClientUrl(
+    CLIENT_PORT,
+    authDisabled,
+    sessionToken,
+    SERVER_PORT,
+  );
 
-    // Give vite time to start before opening browser
-    setTimeout(() => {
+  // Give vite time to start before opening or logging the URL
+  setTimeout(() => {
+    console.log(`\n🚀 MCP Inspector is up and running at:\n   ${url}\n`);
+    if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
+      console.log("🌐 Opening browser...");
       open(url);
-      console.log(`\n🔗 Opening browser at: ${url}\n`);
-    }, 3000);
-  }
+    }
+  }, 3000);
 
   await new Promise((resolve) => {
     client.subscribe({
@@ -139,7 +164,14 @@ async function startDevClient(clientOptions) {
 }
 
 async function startProdClient(clientOptions) {
-  const { CLIENT_PORT, authDisabled, sessionToken, abort } = clientOptions;
+  const {
+    CLIENT_PORT,
+    SERVER_PORT,
+    authDisabled,
+    sessionToken,
+    abort,
+    cancelled,
+  } = clientOptions;
   const inspectorClientPath = resolve(
     __dirname,
     "../..",
@@ -148,16 +180,19 @@ async function startProdClient(clientOptions) {
     "client.js",
   );
 
-  // Auto-open browser with token
-  if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
-    const url = authDisabled
-      ? `http://127.0.0.1:${CLIENT_PORT}`
-      : `http://127.0.0.1:${CLIENT_PORT}/?MCP_PROXY_AUTH_TOKEN=${sessionToken}`;
-    open(url);
-  }
+  const url = getClientUrl(
+    CLIENT_PORT,
+    authDisabled,
+    sessionToken,
+    SERVER_PORT,
+  );
 
   await spawnPromise("node", [inspectorClientPath], {
-    env: { ...process.env, PORT: CLIENT_PORT },
+    env: {
+      ...process.env,
+      CLIENT_PORT,
+      INSPECTOR_URL: url,
+    },
     signal: abort.signal,
     echoOutput: true,
   });
@@ -204,7 +239,7 @@ async function main() {
   }
 
   const CLIENT_PORT = process.env.CLIENT_PORT ?? "6274";
-  const SERVER_PORT = process.env.SERVER_PORT ?? "6277";
+  const SERVER_PORT = process.env.SERVER_PORT ?? DEFAULT_MCP_PROXY_LISTEN_PORT;
 
   console.log(
     isDev
@@ -249,6 +284,7 @@ async function main() {
     try {
       const clientOptions = {
         CLIENT_PORT,
+        SERVER_PORT,
         authDisabled,
         sessionToken,
         abort,

package/dist/assets/{OAuthCallback-CaW3Hcqw.js → OAuthCallback-DMQy4ibj.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-BNqYF5Na.js";
+import { u as useToast, r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, I as InspectorOAuthClientProvider, a as auth } from "./index-DI7JCTeu.js";
 import { p as parseOAuthCallbackParams, g as generateOAuthErrorDescription } from "./oauthUtils-DTcoXpSP.js";
 const OAuthCallback = ({ onConnect }) => {
   const { toast } = useToast();

package/dist/assets/{OAuthDebugCallback-DiBt_oxh.js → OAuthDebugCallback-9JxBAysc.js}

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

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

@@ -1,7 +1,3 @@
-#root {
-  margin: 0 auto;
-}
-
 .logo {
   height: 6em;
   padding: 1.5em;

package/dist/assets/{index-BNqYF5Na.js → index-DI7JCTeu.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-CaW3Hcqw.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-DiBt_oxh.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-DMQy4ibj.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-9JxBAysc.js"])))=>i.map(i=>d[i]);
 function _mergeNamespaces(n, m2) {
   for (var i = 0; i < m2.length; i++) {
     const e = m2[i];
@@ -11612,8 +11612,9 @@ class ZodError extends Error {
     const formErrors = [];
     for (const sub of this.issues) {
       if (sub.path.length > 0) {
-        fieldErrors[sub.path[0]] = fieldErrors[sub.path[0]] || [];
-        fieldErrors[sub.path[0]].push(mapper(sub));
+        const firstEl = sub.path[0];
+        fieldErrors[firstEl] = fieldErrors[firstEl] || [];
+        fieldErrors[firstEl].push(mapper(sub));
       } else {
         formErrors.push(mapper(sub));
       }
@@ -11689,6 +11690,8 @@ const errorMap = (issue, _ctx) => {
         message = `String must contain ${issue.exact ? "exactly" : issue.inclusive ? `at least` : `over`} ${issue.minimum} character(s)`;
       else if (issue.type === "number")
         message = `Number must be ${issue.exact ? `exactly equal to ` : issue.inclusive ? `greater than or equal to ` : `greater than `}${issue.minimum}`;
+      else if (issue.type === "bigint")
+        message = `Number must be ${issue.exact ? `exactly equal to ` : issue.inclusive ? `greater than or equal to ` : `greater than `}${issue.minimum}`;
       else if (issue.type === "date")
         message = `Date must be ${issue.exact ? `exactly equal to ` : issue.inclusive ? `greater than or equal to ` : `greater than `}${new Date(Number(issue.minimum))}`;
       else
@@ -12241,6 +12244,8 @@ function isValidJWT(jwt, alg) {
     return false;
   try {
     const [header] = jwt.split(".");
+    if (!header)
+      return false;
     const base64 = header.replace(/-/g, "+").replace(/_/g, "/").padEnd(header.length + (4 - header.length % 4) % 4, "=");
     const decoded = JSON.parse(atob(base64));
     if (typeof decoded !== "object" || decoded === null)
@@ -15913,7 +15918,7 @@ const ElicitResultSchema = ResultSchema.extend({
   /**
    * The user's response action.
    */
-  action: enumType(["accept", "reject", "cancel"]),
+  action: enumType(["accept", "decline", "cancel"]),
   /**
    * The collected user input content (only present if action is "accept").
    */
@@ -16505,7 +16510,11 @@ async function fetchWithCorsRetry(url, headers) {
     return await fetch(url, { headers });
   } catch (error) {
     if (error instanceof TypeError) {
-      return await fetch(url);
+      if (headers) {
+        return fetchWithCorsRetry(url);
+      } else {
+        return void 0;
+      }
     }
     throw error;
   }
@@ -16524,7 +16533,7 @@ async function tryMetadataDiscovery(url, protocolVersion) {
   return await fetchWithCorsRetry(url, headers);
 }
 function shouldAttemptFallback(response, pathname) {
-  return response.status === 404 && pathname !== "/";
+  return !response || response.status === 404 && pathname !== "/";
 }
 async function discoverOAuthMetadata(authorizationServerUrl, opts) {
   var _a;
@@ -16534,16 +16543,10 @@ async function discoverOAuthMetadata(authorizationServerUrl, opts) {
   const pathAwareUrl = new URL(wellKnownPath, issuer);
   let response = await tryMetadataDiscovery(pathAwareUrl, protocolVersion);
   if (shouldAttemptFallback(response, issuer.pathname)) {
-    try {
-      const rootUrl = new URL("/.well-known/oauth-authorization-server", issuer);
-      response = await tryMetadataDiscovery(rootUrl, protocolVersion);
-      if (response.status === 404) {
-        return void 0;
-      }
-    } catch (_b) {
-      return void 0;
-    }
-  } else if (response.status === 404) {
+    const rootUrl = new URL("/.well-known/oauth-authorization-server", issuer);
+    response = await tryMetadataDiscovery(rootUrl, protocolVersion);
+  }
+  if (!response || response.status === 404) {
     return void 0;
   }
   if (!response.ok) {
@@ -22908,38 +22911,44 @@ function validateToolOutput(toolName, structuredContent) {
 function hasOutputSchema(toolName) {
   return toolOutputValidators.has(toolName);
 }
-function generateDefaultValue(schema) {
-  if ("default" in schema) {
+function generateDefaultValue(schema, propertyName, parentSchema) {
+  if ("default" in schema && schema.default !== void 0) {
     return schema.default;
   }
-  if (!schema.required) {
-    if (schema.type === "array") return [];
-    if (schema.type === "object") return {};
-    return void 0;
-  }
+  const isRequired = propertyName && parentSchema ? isPropertyRequired(propertyName, parentSchema) : false;
   switch (schema.type) {
     case "string":
-      return "";
+      return isRequired ? "" : void 0;
     case "number":
     case "integer":
-      return 0;
+      return isRequired ? 0 : void 0;
     case "boolean":
-      return false;
+      return isRequired ? false : void 0;
     case "array":
       return [];
     case "object": {
       if (!schema.properties) return {};
       const obj = {};
-      Object.entries(schema.properties).filter(([, prop]) => prop.required).forEach(([key, prop]) => {
-        const value = generateDefaultValue(prop);
-        obj[key] = value;
+      Object.entries(schema.properties).forEach(([key, prop]) => {
+        if (isPropertyRequired(key, schema)) {
+          const value = generateDefaultValue(prop, key, schema);
+          if (value !== void 0) {
+            obj[key] = value;
+          }
+        }
       });
       return obj;
     }
-    default:
+    case "null":
       return null;
+    default:
+      return void 0;
   }
 }
+function isPropertyRequired(propertyName, schema) {
+  var _a;
+  return ((_a = schema.required) == null ? void 0 : _a.includes(propertyName)) ?? false;
+}
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 6e4;
 class Protocol {
   constructor(_options) {
@@ -23900,6 +23909,7 @@ class SSEClientTransport {
     this._eventSourceInit = opts === null || opts === void 0 ? void 0 : opts.eventSourceInit;
     this._requestInit = opts === null || opts === void 0 ? void 0 : opts.requestInit;
     this._authProvider = opts === null || opts === void 0 ? void 0 : opts.authProvider;
+    this._fetch = opts === null || opts === void 0 ? void 0 : opts.fetch;
   }
   async _authThenStart() {
     var _a;
@@ -23935,8 +23945,8 @@ class SSEClientTransport {
     return headers;
   }
   _startOrAuth() {
-    var _a;
-    const fetchImpl = ((_a = this === null || this === void 0 ? void 0 : this._eventSourceInit) === null || _a === void 0 ? void 0 : _a.fetch) || fetch;
+    var _a, _b, _c;
+    const fetchImpl = (_c = (_b = (_a = this === null || this === void 0 ? void 0 : this._eventSourceInit) === null || _a === void 0 ? void 0 : _a.fetch) !== null && _b !== void 0 ? _b : this._fetch) !== null && _c !== void 0 ? _c : fetch;
     return new Promise((resolve, reject) => {
       this._eventSource = new EventSource(this._url.href, {
         ...this._eventSourceInit,
@@ -23985,7 +23995,7 @@ class SSEClientTransport {
         resolve();
       });
       this._eventSource.onmessage = (event) => {
-        var _a2, _b;
+        var _a2, _b2;
         const messageEvent = event;
         let message;
         try {
@@ -23994,7 +24004,7 @@ class SSEClientTransport {
           (_a2 = this.onerror) === null || _a2 === void 0 ? void 0 : _a2.call(this, error);
           return;
         }
-        (_b = this.onmessage) === null || _b === void 0 ? void 0 : _b.call(this, message);
+        (_b2 = this.onmessage) === null || _b2 === void 0 ? void 0 : _b2.call(this, message);
       };
     });
   }
@@ -24023,7 +24033,7 @@ class SSEClientTransport {
     (_c = this.onclose) === null || _c === void 0 ? void 0 : _c.call(this);
   }
   async send(message) {
-    var _a, _b;
+    var _a, _b, _c;
     if (!this._endpoint) {
       throw new Error("Not connected");
     }
@@ -24038,7 +24048,7 @@ class SSEClientTransport {
         body: JSON.stringify(message),
         signal: (_a = this._abortController) === null || _a === void 0 ? void 0 : _a.signal
       };
-      const response = await fetch(this._endpoint, init);
+      const response = await ((_b = this._fetch) !== null && _b !== void 0 ? _b : fetch)(this._endpoint, init);
       if (!response.ok) {
         if (response.status === 401 && this._authProvider) {
           this._resourceMetadataUrl = extractResourceMetadataUrl(response);
@@ -24052,7 +24062,7 @@ class SSEClientTransport {
         throw new Error(`Error POSTing to endpoint (HTTP ${response.status}): ${text}`);
       }
     } catch (error) {
-      (_b = this.onerror) === null || _b === void 0 ? void 0 : _b.call(this, error);
+      (_c = this.onerror) === null || _c === void 0 ? void 0 : _c.call(this, error);
       throw error;
     }
   }
@@ -24101,6 +24111,7 @@ class StreamableHTTPClientTransport {
     this._resourceMetadataUrl = void 0;
     this._requestInit = opts === null || opts === void 0 ? void 0 : opts.requestInit;
     this._authProvider = opts === null || opts === void 0 ? void 0 : opts.authProvider;
+    this._fetch = opts === null || opts === void 0 ? void 0 : opts.fetch;
     this._sessionId = opts === null || opts === void 0 ? void 0 : opts.sessionId;
     this._reconnectionOptions = (_a = opts === null || opts === void 0 ? void 0 : opts.reconnectionOptions) !== null && _a !== void 0 ? _a : DEFAULT_STREAMABLE_HTTP_RECONNECTION_OPTIONS;
   }
@@ -24136,10 +24147,14 @@ class StreamableHTTPClientTransport {
     if (this._protocolVersion) {
       headers["mcp-protocol-version"] = this._protocolVersion;
     }
-    return new Headers({ ...headers, ...(_a = this._requestInit) === null || _a === void 0 ? void 0 : _a.headers });
+    const extraHeaders = this._normalizeHeaders((_a = this._requestInit) === null || _a === void 0 ? void 0 : _a.headers);
+    return new Headers({
+      ...headers,
+      ...extraHeaders
+    });
   }
   async _startOrAuthSse(options) {
-    var _a, _b;
+    var _a, _b, _c;
     const { resumptionToken } = options;
     try {
       const headers = await this._commonHeaders();
@@ -24147,10 +24162,10 @@ class StreamableHTTPClientTransport {
       if (resumptionToken) {
         headers.set("last-event-id", resumptionToken);
       }
-      const response = await fetch(this._url, {
+      const response = await ((_a = this._fetch) !== null && _a !== void 0 ? _a : fetch)(this._url, {
         method: "GET",
         headers,
-        signal: (_a = this._abortController) === null || _a === void 0 ? void 0 : _a.signal
+        signal: (_b = this._abortController) === null || _b === void 0 ? void 0 : _b.signal
       });
       if (!response.ok) {
         if (response.status === 401 && this._authProvider) {
@@ -24163,7 +24178,7 @@ class StreamableHTTPClientTransport {
       }
       this._handleSseStream(response.body, options);
     } catch (error) {
-      (_b = this.onerror) === null || _b === void 0 ? void 0 : _b.call(this, error);
+      (_c = this.onerror) === null || _c === void 0 ? void 0 : _c.call(this, error);
       throw error;
     }
   }
@@ -24179,6 +24194,17 @@ class StreamableHTTPClientTransport {
     const maxDelay = this._reconnectionOptions.maxReconnectionDelay;
     return Math.min(initialDelay * Math.pow(growFactor, attempt), maxDelay);
   }
+  _normalizeHeaders(headers) {
+    if (!headers)
+      return {};
+    if (headers instanceof Headers) {
+      return Object.fromEntries(headers.entries());
+    }
+    if (Array.isArray(headers)) {
+      return Object.fromEntries(headers);
+    }
+    return { ...headers };
+  }
   /**
    * Schedule a reconnection attempt with exponential backoff
    *
@@ -24275,7 +24301,7 @@ class StreamableHTTPClientTransport {
     (_b = this.onclose) === null || _b === void 0 ? void 0 : _b.call(this);
   }
   async send(message, options) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     try {
       const { resumptionToken, onresumptiontoken } = options || {};
       if (resumptionToken) {
@@ -24295,7 +24321,7 @@ class StreamableHTTPClientTransport {
         body: JSON.stringify(message),
         signal: (_a = this._abortController) === null || _a === void 0 ? void 0 : _a.signal
       };
-      const response = await fetch(this._url, init);
+      const response = await ((_b = this._fetch) !== null && _b !== void 0 ? _b : fetch)(this._url, init);
       const sessionId = response.headers.get("mcp-session-id");
       if (sessionId) {
         this._sessionId = sessionId;
@@ -24331,14 +24357,14 @@ class StreamableHTTPClientTransport {
           const data2 = await response.json();
           const responseMessages = Array.isArray(data2) ? data2.map((msg) => JSONRPCMessageSchema.parse(msg)) : [JSONRPCMessageSchema.parse(data2)];
           for (const msg of responseMessages) {
-            (_b = this.onmessage) === null || _b === void 0 ? void 0 : _b.call(this, msg);
+            (_c = this.onmessage) === null || _c === void 0 ? void 0 : _c.call(this, msg);
           }
         } else {
           throw new StreamableHTTPError(-1, `Unexpected content type: ${contentType}`);
         }
       }
     } catch (error) {
-      (_c = this.onerror) === null || _c === void 0 ? void 0 : _c.call(this, error);
+      (_d = this.onerror) === null || _d === void 0 ? void 0 : _d.call(this, error);
       throw error;
     }
   }
@@ -24357,7 +24383,7 @@ class StreamableHTTPClientTransport {
    * the server does not allow clients to terminate sessions.
    */
   async terminateSession() {
-    var _a, _b;
+    var _a, _b, _c;
     if (!this._sessionId) {
       return;
     }
@@ -24369,13 +24395,13 @@ class StreamableHTTPClientTransport {
         headers,
         signal: (_a = this._abortController) === null || _a === void 0 ? void 0 : _a.signal
       };
-      const response = await fetch(this._url, init);
+      const response = await ((_b = this._fetch) !== null && _b !== void 0 ? _b : fetch)(this._url, init);
       if (!response.ok && response.status !== 405) {
         throw new StreamableHTTPError(response.status, `Failed to terminate session: ${response.statusText}`);
       }
       this._sessionId = void 0;
     } catch (error) {
-      (_b = this.onerror) === null || _b === void 0 ? void 0 : _b.call(this, error);
+      (_c = this.onerror) === null || _c === void 0 ? void 0 : _c.call(this, error);
       throw error;
     }
   }
@@ -24395,16 +24421,26 @@ const StdErrNotificationSchema = NotificationSchema.extend({
 ClientNotificationSchema.or(
   StdErrNotificationSchema
 ).or(ServerNotificationSchema).or(NotificationSchema);
-const version$1 = "0.15.0";
+const version$1 = "0.16.0";
 const packageJson = {
   version: version$1
 };
+const getSearchParam = (key) => {
+  try {
+    const url = new URL(window.location.href);
+    return url.searchParams.get(key);
+  } catch {
+    return null;
+  }
+};
 const getMCPProxyAddress = (config) => {
-  const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value;
+  let proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value;
   if (proxyFullAddress) {
+    proxyFullAddress = proxyFullAddress.replace(/\/+$/, "");
     return proxyFullAddress;
   }
-  return `${window.location.protocol}//${window.location.hostname}:${DEFAULT_MCP_PROXY_LISTEN_PORT}`;
+  const proxyPort = getSearchParam("MCP_PROXY_PORT") || DEFAULT_MCP_PROXY_LISTEN_PORT;
+  return `${window.location.protocol}//${window.location.hostname}:${proxyPort}`;
 };
 const getMCPServerRequestTimeout = (config) => {
   return config.MCP_SERVER_REQUEST_TIMEOUT.value;
@@ -24421,14 +24457,6 @@ const getMCPProxyAuthToken = (config) => {
     header: "X-MCP-Proxy-Auth"
   };
 };
-const getSearchParam = (key) => {
-  try {
-    const url = new URL(window.location.href);
-    return url.searchParams.get(key);
-  } catch {
-    return null;
-  }
-};
 const getInitialTransportType = () => {
   const param = getSearchParam("transport");
   if (param === "stdio" || param === "sse" || param === "streamable-http") {
@@ -26864,7 +26892,9 @@ const HistoryAndNotifications = ({
               "div",
               {
                 className: "flex justify-between items-center cursor-pointer",
-                onClick: () => toggleNotificationExpansion(index2),
+                onClick: () => toggleNotificationExpansion(
+                  serverNotifications.length - 1 - index2
+                ),
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
                     serverNotifications.length - index2,
@@ -26872,11 +26902,11 @@ const HistoryAndNotifications = ({
                     " ",
                     notification.method
                   ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: expandedNotifications[index2] ? "▼" : "▶" })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: expandedNotifications[serverNotifications.length - 1 - index2] ? "▼" : "▶" })
                 ]
               }
             ),
-            expandedNotifications[index2] && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
+            expandedNotifications[serverNotifications.length - 1 - index2] && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between items-center mb-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-purple-600", children: "Details:" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 JsonView,
@@ -31455,9 +31485,9 @@ const PromptsTab = ({
           setSelectedPrompt(prompt);
           setPromptArgs({});
         },
-        renderItem: (prompt) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        renderItem: (prompt) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-start", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1", children: prompt.name }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500", children: prompt.description })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500 text-left", children: prompt.description })
         ] }),
         title: "Prompts",
         buttonText: nextCursor ? "List More Prompts" : "List Prompts",
@@ -33916,10 +33946,37 @@ const JsonEditor = ({
 const isSimpleObject = (schema) => {
   const supportedTypes = ["string", "number", "integer", "boolean", "null"];
   if (supportedTypes.includes(schema.type)) return true;
-  if (schema.type !== "object") return false;
-  return Object.values(schema.properties ?? {}).every(
-    (prop) => supportedTypes.includes(prop.type)
-  );
+  if (schema.type === "object") {
+    return Object.values(schema.properties ?? {}).every(
+      (prop) => supportedTypes.includes(prop.type)
+    );
+  }
+  if (schema.type === "array") {
+    return !!schema.items && isSimpleObject(schema.items);
+  }
+  return false;
+};
+const getArrayItemDefault = (schema) => {
+  if ("default" in schema && schema.default !== void 0) {
+    return schema.default;
+  }
+  switch (schema.type) {
+    case "string":
+      return "";
+    case "number":
+    case "integer":
+      return 0;
+    case "boolean":
+      return false;
+    case "array":
+      return [];
+    case "object":
+      return {};
+    case "null":
+      return null;
+    default:
+      return null;
+  }
 };
 const DynamicJsonForm = ({
   schema,
@@ -33930,6 +33987,8 @@ const DynamicJsonForm = ({
   const isOnlyJSON = !isSimpleObject(schema);
   const [isJsonMode, setIsJsonMode] = reactExports.useState(isOnlyJSON);
   const [jsonError, setJsonError] = reactExports.useState();
+  const [copiedJson, setCopiedJson] = reactExports.useState(false);
+  const { toast: toast2 } = useToast();
   const [rawJsonValue, setRawJsonValue] = reactExports.useState(
     JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
   );
@@ -33987,13 +34046,14 @@ const DynamicJsonForm = ({
       setJsonError(err instanceof Error ? err.message : "Invalid JSON");
     }
   };
-  const renderFormFields = (propSchema, currentValue, path = [], depth = 0) => {
+  const renderFormFields = (propSchema, currentValue, path = [], depth = 0, parentSchema, propertyName) => {
+    var _a, _b, _c;
     if (depth >= maxDepth && (propSchema.type === "object" || propSchema.type === "array")) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         JsonEditor,
         {
           value: JSON.stringify(
-            currentValue ?? generateDefaultValue(propSchema),
+            currentValue ?? generateDefaultValue(propSchema, propertyName, parentSchema),
             null,
             2
           ),
@@ -34010,6 +34070,7 @@ const DynamicJsonForm = ({
         }
       );
     }
+    const isRequired = ((_a = parentSchema == null ? void 0 : parentSchema.required) == null ? void 0 : _a.includes(propertyName || "")) ?? false;
     switch (propSchema.type) {
       case "string":
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -34019,14 +34080,10 @@ const DynamicJsonForm = ({
             value: currentValue ?? "",
             onChange: (e) => {
               const val = e.target.value;
-              if (!val && !propSchema.required) {
-                handleFieldChange(path, void 0);
-              } else {
-                handleFieldChange(path, val);
-              }
+              handleFieldChange(path, val);
             },
             placeholder: propSchema.description,
-            required: propSchema.required
+            required: isRequired
           }
         );
       case "number":
@@ -34037,7 +34094,7 @@ const DynamicJsonForm = ({
             value: (currentValue == null ? void 0 : currentValue.toString()) ?? "",
             onChange: (e) => {
               const val = e.target.value;
-              if (!val && !propSchema.required) {
+              if (!val && !isRequired) {
                 handleFieldChange(path, void 0);
               } else {
                 const num = Number(val);
@@ -34047,7 +34104,7 @@ const DynamicJsonForm = ({
               }
             },
             placeholder: propSchema.description,
-            required: propSchema.required
+            required: isRequired
           }
         );
       case "integer":
@@ -34059,7 +34116,7 @@ const DynamicJsonForm = ({
             value: (currentValue == null ? void 0 : currentValue.toString()) ?? "",
             onChange: (e) => {
               const val = e.target.value;
-              if (!val && !propSchema.required) {
+              if (!val && !isRequired) {
                 handleFieldChange(path, void 0);
               } else {
                 const num = Number(val);
@@ -34069,7 +34126,7 @@ const DynamicJsonForm = ({
               }
             },
             placeholder: propSchema.description,
-            required: propSchema.required
+            required: isRequired
           }
         );
       case "boolean":
@@ -34080,9 +34137,116 @@ const DynamicJsonForm = ({
             checked: currentValue ?? false,
             onChange: (e) => handleFieldChange(path, e.target.checked),
             className: "w-4 h-4",
-            required: propSchema.required
+            required: isRequired
+          }
+        );
+      case "object":
+        if (!propSchema.properties) {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            JsonEditor,
+            {
+              value: JSON.stringify(currentValue ?? {}, null, 2),
+              onChange: (newValue) => {
+                try {
+                  const parsed = JSON.parse(newValue);
+                  handleFieldChange(path, parsed);
+                  setJsonError(void 0);
+                } catch (err) {
+                  setJsonError(
+                    err instanceof Error ? err.message : "Invalid JSON"
+                  );
+                }
+              },
+              error: jsonError
+            }
+          );
+        }
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 border rounded p-3", children: Object.entries(propSchema.properties).map(([key, subSchema]) => {
+          var _a2;
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium mb-1", children: [
+              key,
+              ((_a2 = propSchema.required) == null ? void 0 : _a2.includes(key)) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+            ] }),
+            renderFormFields(
+              subSchema,
+              currentValue == null ? void 0 : currentValue[key],
+              [...path, key],
+              depth + 1,
+              propSchema,
+              key
+            )
+          ] }, key);
+        }) });
+      case "array": {
+        const arrayValue = Array.isArray(currentValue) ? currentValue : [];
+        if (!propSchema.items) return null;
+        if (isSimpleObject(propSchema.items)) {
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+            propSchema.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: propSchema.description }),
+            ((_b = propSchema.items) == null ? void 0 : _b.description) && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-500", children: [
+              "Items: ",
+              propSchema.items.description
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              arrayValue.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                renderFormFields(
+                  propSchema.items,
+                  item,
+                  [...path, index2.toString()],
+                  depth + 1
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: () => {
+                      const newArray = [...arrayValue];
+                      newArray.splice(index2, 1);
+                      handleFieldChange(path, newArray);
+                    },
+                    children: "Remove"
+                  }
+                )
+              ] }, index2)),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => {
+                    const defaultValue = getArrayItemDefault(
+                      propSchema.items
+                    );
+                    handleFieldChange(path, [...arrayValue, defaultValue]);
+                  },
+                  title: ((_c = propSchema.items) == null ? void 0 : _c.description) ? `Add new ${propSchema.items.description}` : "Add new item",
+                  children: "Add Item"
+                }
+              )
+            ] })
+          ] });
+        }
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          JsonEditor,
+          {
+            value: JSON.stringify(currentValue ?? [], null, 2),
+            onChange: (newValue) => {
+              try {
+                const parsed = JSON.parse(newValue);
+                handleFieldChange(path, parsed);
+                setJsonError(void 0);
+              } catch (err) {
+                setJsonError(
+                  err instanceof Error ? err.message : "Invalid JSON"
+                );
+              }
+            },
+            error: jsonError
           }
         );
+      }
       default:
         return null;
     }
@@ -34106,18 +34270,57 @@ const DynamicJsonForm = ({
       setIsJsonMode(true);
     }
   }, [shouldUseJsonMode, isJsonMode]);
+  const handleCopyJson = reactExports.useCallback(() => {
+    const copyToClipboard = async () => {
+      try {
+        await navigator.clipboard.writeText(
+          JSON.stringify(value, null, 2) ?? "[]"
+        );
+        setCopiedJson(true);
+        toast2({
+          title: "JSON copied",
+          description: "The JSON data has been successfully copied to your clipboard."
+        });
+        setTimeout(() => {
+          setCopiedJson(false);
+        }, 2e3);
+      } catch (error) {
+        toast2({
+          title: "Error",
+          description: `Failed to copy JSON: ${error instanceof Error ? error.message : String(error)}`,
+          variant: "destructive"
+        });
+      }
+    };
+    copyToClipboard();
+  }, [toast2, value]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end space-x-2", children: [
-      isJsonMode && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          onClick: formatJson,
-          children: "Format JSON"
-        }
-      ),
+      isJsonMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: handleCopyJson,
+            children: [
+              copiedJson ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4 mr-2" }),
+              "Copy JSON"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: formatJson,
+            children: "Format JSON"
+          }
+        )
+      ] }),
       !isOnlyJSON && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: handleSwitchToFormMode, children: isJsonMode ? "Switch to Form" : "Switch to JSON" })
     ] }),
     isJsonMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -35595,7 +35798,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version = "0.15.0";
+const version = "0.16.0";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -37204,7 +37407,11 @@ const ToolsTab = ({
       (selectedTool == null ? void 0 : selectedTool.inputSchema.properties) ?? []
     ).map(([key, value]) => [
       key,
-      generateDefaultValue(value)
+      generateDefaultValue(
+        value,
+        key,
+        selectedTool == null ? void 0 : selectedTool.inputSchema
+      )
     ]);
     setParams(Object.fromEntries(params2));
   }, [selectedTool]);
@@ -37235,13 +37442,18 @@ const ToolsTab = ({
         Object.entries(selectedTool.inputSchema.properties ?? []).map(
           ([key, value]) => {
             const prop = value;
+            const inputSchema = selectedTool.inputSchema;
+            const required2 = isPropertyRequired(key, inputSchema);
             return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 Label$1,
                 {
                   htmlFor: key,
                   className: "block text-sm font-medium text-gray-700 dark:text-gray-300",
-                  children: key
+                  children: [
+                    key,
+                    required2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+                  ]
                 }
               ),
               prop.type === "boolean" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2 mt-2", children: [
@@ -37303,10 +37515,13 @@ const ToolsTab = ({
                   name: key,
                   placeholder: prop.description,
                   value: params[key] ?? "",
-                  onChange: (e) => setParams({
-                    ...params,
-                    [key]: Number(e.target.value)
-                  }),
+                  onChange: (e) => {
+                    const value2 = e.target.value;
+                    setParams({
+                      ...params,
+                      [key]: value2 === "" ? "" : Number(value2)
+                    });
+                  },
                   className: "mt-1"
                 }
               ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -37816,13 +38031,13 @@ const App = () => {
   ) });
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-CaW3Hcqw.js"), true ? __vite__mapDeps([0,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthCallback-DMQy4ibj.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-DiBt_oxh.js"), true ? __vite__mapDeps([2,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthDebugCallback-9JxBAysc.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 }) });
   }

package/dist/index.html

@@ -5,10 +5,10 @@
     <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-BNqYF5Na.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-C1MLjTGf.css">
+    <script type="module" crossorigin src="/assets/index-DI7JCTeu.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BwWj6LL9.css">
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" class="w-full"></div>
   </body>
 </html>

package/package.json

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