@modelcontextprotocol/inspector 0.16.5 → 0.16.7

package/README.md

@@ -29,6 +29,14 @@ npx @modelcontextprotocol/inspector
 
 The server will start up and the UI will be accessible at `http://localhost:6274`.
 
+### Docker Container
+
+You can also start it in a Docker container with the following command:
+
+```bash
+docker run --rm --network host -p 6274:6274 -p 6277:6277 ghcr.io/modelcontextprotocol/inspector:latest
+```
+
 ### From an MCP server repository
 
 To inspect an MCP server implementation, there's no need to clone this repo. Instead, use `npx`. For example, if your server is built at `build/index.js`:
@@ -90,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:**
@@ -123,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.
 
@@ -387,6 +419,9 @@ npx @modelcontextprotocol/inspector --cli node build/index.js --method tools/lis
 # Call a specific tool
 npx @modelcontextprotocol/inspector --cli node build/index.js --method tools/call --tool-name mytool --tool-arg key=value --tool-arg another=value2
 
+# Call a tool with JSON arguments
+npx @modelcontextprotocol/inspector --cli node build/index.js --method tools/call --tool-name mytool --tool-arg 'options={"format": "json", "max_tokens": 100}'
+
 # List available resources
 npx @modelcontextprotocol/inspector --cli node build/index.js --method resources/list
 
@@ -399,6 +434,9 @@ npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com
 # Connect to a remote MCP server (with Streamable HTTP transport)
 npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --transport http --method tools/list
 
+# Connect to a remote MCP server (with custom headers)
+npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --transport http --method tools/list --header "X-API-Key: your-api-key"
+
 # Call a tool on a remote server
 npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --method tools/call --tool-name remotetool --tool-arg param=value
 

package/cli/build/cli.js

@@ -54,6 +54,10 @@ async function runWebClient(args) {
         await spawnPromise("node", [inspectorClientPath, ...startArgs], {
             signal: abort.signal,
             echoOutput: true,
+            // pipe the stdout through here, prevents issues with buffering and
+            // dropping the end of console.out after 8192 chars due to node
+            // closing the stdout pipe before the output has finished flushing
+            stdio: "inherit",
         });
     }
     catch (e) {
@@ -73,18 +77,28 @@ async function runCli(args) {
     try {
         // Build CLI arguments
         const cliArgs = [cliPath];
+        // Add target URL/command first
+        cliArgs.push(args.command, ...args.args);
         // Add transport flag if specified
         if (args.transport && args.transport !== "stdio") {
             // Convert streamable-http back to http for CLI mode
             const cliTransport = args.transport === "streamable-http" ? "http" : args.transport;
             cliArgs.push("--transport", cliTransport);
         }
-        // Add command and remaining args
-        cliArgs.push(args.command, ...args.args);
+        // Add headers if specified
+        if (args.headers) {
+            for (const [key, value] of Object.entries(args.headers)) {
+                cliArgs.push("--header", `${key}: ${value}`);
+            }
+        }
         await spawnPromise("node", cliArgs, {
             env: { ...process.env, ...args.envArgs },
             signal: abort.signal,
             echoOutput: true,
+            // pipe the stdout through here, prevents issues with buffering and
+            // dropping the end of console.out after 8192 chars due to node
+            // closing the stdout pipe before the output has finished flushing
+            stdio: "inherit",
         });
     }
     catch (e) {
@@ -126,6 +140,18 @@ function parseKeyValuePair(value, previous = {}) {
     }
     return { ...previous, [key]: val };
 }
+function parseHeaderPair(value, previous = {}) {
+    const colonIndex = value.indexOf(":");
+    if (colonIndex === -1) {
+        throw new Error(`Invalid header format: ${value}. Use "HeaderName: Value" format.`);
+    }
+    const key = value.slice(0, colonIndex).trim();
+    const val = value.slice(colonIndex + 1).trim();
+    if (key === "" || val === "") {
+        throw new Error(`Invalid header format: ${value}. Use "HeaderName: Value" format.`);
+    }
+    return { ...previous, [key]: val };
+}
 function parseArgs() {
     const program = new Command();
     const argSeparatorIndex = process.argv.indexOf("--");
@@ -144,7 +170,8 @@ function parseArgs() {
         .option("--server <n>", "server name from config file")
         .option("--cli", "enable CLI mode")
         .option("--transport <type>", "transport type (stdio, sse, http)")
-        .option("--server-url <url>", "server URL for SSE/HTTP transport");
+        .option("--server-url <url>", "server URL for SSE/HTTP transport")
+        .option("--header <headers...>", 'HTTP headers as "HeaderName: Value" pairs (for HTTP/SSE transports)', parseHeaderPair, {});
     // Parse only the arguments before --
     program.parse(preArgs);
     const options = program.opts();
@@ -186,6 +213,7 @@ function parseArgs() {
                 envArgs: { ...(config.env || {}), ...(options.e || {}) },
                 cli: options.cli || false,
                 transport: "stdio",
+                headers: options.header,
             };
         }
         else if (config.type === "sse" || config.type === "streamable-http") {
@@ -196,6 +224,7 @@ function parseArgs() {
                 cli: options.cli || false,
                 transport: config.type,
                 serverUrl: config.url,
+                headers: options.header,
             };
         }
         else {
@@ -206,6 +235,7 @@ function parseArgs() {
                 envArgs: { ...(config.env || {}), ...(options.e || {}) },
                 cli: options.cli || false,
                 transport: "stdio",
+                headers: options.header,
             };
         }
     }
@@ -224,6 +254,7 @@ function parseArgs() {
         cli: options.cli || false,
         transport: transport,
         serverUrl: options.serverUrl,
+        headers: options.header,
     };
 }
 async function main() {

package/cli/build/client/prompts.js

@@ -11,9 +11,24 @@ export async function listPrompts(client) {
 // Get a prompt
 export async function getPrompt(client, name, args) {
     try {
+        // Convert all arguments to strings for prompt arguments
+        const stringArgs = {};
+        if (args) {
+            for (const [key, value] of Object.entries(args)) {
+                if (typeof value === "string") {
+                    stringArgs[key] = value;
+                }
+                else if (value === null || value === undefined) {
+                    stringArgs[key] = String(value);
+                }
+                else {
+                    stringArgs[key] = JSON.stringify(value);
+                }
+            }
+        }
         const response = await client.getPrompt({
             name,
-            arguments: args || {},
+            arguments: stringArgs,
         });
         return response;
     }

package/cli/build/client/tools.js

@@ -49,8 +49,18 @@ export async function callTool(client, name, args) {
         const tool = tools.find((t) => t.name === name);
         let convertedArgs = args;
         if (tool) {
-            // Convert parameters based on the tool's schema
-            convertedArgs = convertParameters(tool, args);
+            // Convert parameters based on the tool's schema, but only for string values
+            // since we now accept pre-parsed values from the CLI
+            const stringArgs = {};
+            for (const [key, value] of Object.entries(args)) {
+                if (typeof value === "string") {
+                    stringArgs[key] = value;
+                }
+            }
+            if (Object.keys(stringArgs).length > 0) {
+                const convertedStringArgs = convertParameters(tool, stringArgs);
+                convertedArgs = { ...args, ...convertedStringArgs };
+            }
         }
         const response = await client.callTool({
             name: name,

package/cli/build/index.js

@@ -4,7 +4,8 @@ import { Command } from "commander";
 import { callTool, connect, disconnect, getPrompt, listPrompts, listResources, listResourceTemplates, listTools, readResource, setLoggingLevel, validLogLevels, } from "./client/index.js";
 import { handleError } from "./error-handler.js";
 import { createTransport } from "./transport.js";
-function createTransportOptions(target, transport) {
+import { awaitableLog } from "./utils/awaitable-log.js";
+function createTransportOptions(target, transport, headers) {
     if (target.length === 0) {
         throw new Error("Target is required. Specify a URL or a command to execute.");
     }
@@ -46,10 +47,11 @@ function createTransportOptions(target, transport) {
         command: isUrl ? undefined : command,
         args: isUrl ? undefined : commandArgs,
         url: isUrl ? command : undefined,
+        headers,
     };
 }
 async function callMethod(args) {
-    const transportOptions = createTransportOptions(args.target, args.transport);
+    const transportOptions = createTransportOptions(args.target, args.transport, args.headers);
     const transport = createTransport(transportOptions);
     const client = new Client({
         name: "inspector-cli",
@@ -101,7 +103,7 @@ async function callMethod(args) {
         else {
             throw new Error(`Unsupported method: ${args.method}. Supported methods include: tools/list, tools/call, resources/list, resources/read, resources/templates/list, prompts/list, prompts/get, logging/setLevel`);
         }
-        console.log(JSON.stringify(result, null, 2));
+        await awaitableLog(JSON.stringify(result, null, 2));
     }
     finally {
         try {
@@ -119,6 +121,27 @@ function parseKeyValuePair(value, previous = {}) {
     if (val === undefined || val === "") {
         throw new Error(`Invalid parameter format: ${value}. Use key=value format.`);
     }
+    // Try to parse as JSON first
+    let parsedValue;
+    try {
+        parsedValue = JSON.parse(val);
+    }
+    catch {
+        // If JSON parsing fails, keep as string
+        parsedValue = val;
+    }
+    return { ...previous, [key]: parsedValue };
+}
+function parseHeaderPair(value, previous = {}) {
+    const colonIndex = value.indexOf(":");
+    if (colonIndex === -1) {
+        throw new Error(`Invalid header format: ${value}. Use "HeaderName: Value" format.`);
+    }
+    const key = value.slice(0, colonIndex).trim();
+    const val = value.slice(colonIndex + 1).trim();
+    if (key === "" || val === "") {
+        throw new Error(`Invalid header format: ${value}. Use "HeaderName: Value" format.`);
+    }
     return { ...previous, [key]: val };
 }
 function parseArgs() {
@@ -171,7 +194,11 @@ function parseArgs() {
             throw new Error(`Invalid transport type: ${value}. Valid types are: ${validTransports.join(", ")}`);
         }
         return value;
-    });
+    })
+        //
+        // HTTP headers
+        //
+        .option("--header <headers...>", 'HTTP headers as "HeaderName: Value" pairs (for HTTP/SSE transports)', parseHeaderPair, {});
     // Parse only the arguments before --
     program.parse(preArgs);
     const options = program.opts();
@@ -184,6 +211,7 @@ function parseArgs() {
     return {
         target: finalArgs,
         ...options,
+        headers: options.header, // commander.js uses 'header' field, map to 'headers'
     };
 }
 async function main() {

package/cli/build/transport.js

@@ -38,10 +38,24 @@ export function createTransport(options) {
         }
         const url = new URL(options.url);
         if (transportType === "sse") {
-            return new SSEClientTransport(url);
+            const transportOptions = options.headers
+                ? {
+                    requestInit: {
+                        headers: options.headers,
+                    },
+                }
+                : undefined;
+            return new SSEClientTransport(url, transportOptions);
         }
         if (transportType === "http") {
-            return new StreamableHTTPClientTransport(url);
+            const transportOptions = options.headers
+                ? {
+                    requestInit: {
+                        headers: options.headers,
+                    },
+                }
+                : undefined;
+            return new StreamableHTTPClientTransport(url, transportOptions);
         }
         throw new Error(`Unsupported transport type: ${transportType}`);
     }

package/cli/build/utils/awaitable-log.js

@@ -0,0 +1,7 @@
+export function awaitableLog(logValue) {
+    return new Promise((resolve) => {
+        process.stdout.write(logValue, () => {
+            resolve();
+        });
+    });
+}

package/client/dist/assets/{OAuthCallback-BxZPCak0.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-BIvDs4Sc.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-CwfxQhTF.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-BIvDs4Sc.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;
@@ -21,6 +21,14 @@ const OAuthDebugCallback = ({ onConnect }) => {
       if (storedState) {
         try {
           restoredState = JSON.parse(storedState);
+          if (restoredState && typeof restoredState.resource === "string") {
+            restoredState.resource = new URL(restoredState.resource);
+          }
+          if (restoredState && typeof restoredState.authorizationUrl === "string") {
+            restoredState.authorizationUrl = new URL(
+              restoredState.authorizationUrl
+            );
+          }
           sessionStorage.removeItem(SESSION_KEYS.AUTH_DEBUGGER_STATE);
         } catch (e) {
           console.error("Failed to parse stored auth state:", e);

package/client/dist/assets/{index-BWZfLo5E.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;
@@ -944,9 +977,6 @@ video {
 .h-screen {
   height: 100vh;
 }
-.max-h-80 {
-  max-height: 20rem;
-}
 .max-h-96 {
   max-height: 24rem;
 }
@@ -1407,9 +1437,6 @@ video {
 .pr-8 {
   padding-right: 2rem;
 }
-.pt-4 {
-  padding-top: 1rem;
-}
 .text-left {
   text-align: left;
 }
@@ -1625,6 +1652,10 @@ video {
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1768,10 +1799,6 @@ h1 {
   color: hsl(var(--muted-foreground));
 }
 
-.last\:border-b-0:last-child {
-  border-bottom-width: 0px;
-}
-
 .hover\:border-\[\#646cff\]:hover {
   --tw-border-opacity: 1;
   border-color: rgb(100 108 255 / var(--tw-border-opacity, 1));