@modelcontextprotocol/inspector 0.3.0 → 0.4.0

package/client/dist/assets/{index-DxcZhiGz.css → index-eOhPEcGC.css}

@@ -835,7 +835,7 @@
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.17 | 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)
@@ -1435,8 +1435,8 @@ video {
 .w-9 {
   width: 2.25rem;
 }
-.w-\[120px\] {
-  width: 120px;
+.w-\[100px\] {
+  width: 100px;
 }
 .w-full {
   width: 100%;
@@ -1456,6 +1456,9 @@ video {
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+.shrink-0 {
+  flex-shrink: 0;
+}
 .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));
 }
@@ -1488,9 +1491,6 @@ video {
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-.grid-cols-\[1fr\2c auto\] {
-  grid-template-columns: 1fr auto;
-}
 .flex-col {
   flex-direction: column;
 }
@@ -1514,11 +1514,6 @@ video {
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-y-1 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
-}
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1707,6 +1702,9 @@ video {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+.pb-4 {
+  padding-bottom: 1rem;
+}
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -1793,6 +1791,10 @@ 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));

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-BKN3G2r3.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DxcZhiGz.css">
+    <script type="module" crossorigin src="/assets/index-DjoEM10P.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-eOhPEcGC.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -36,11 +36,13 @@
     "@modelcontextprotocol/inspector-client": "0.3.0",
     "@modelcontextprotocol/inspector-server": "0.3.0",
     "concurrently": "^9.0.1",
+    "shell-quote": "^1.8.2",
     "spawn-rx": "^5.1.0",
     "ts-node": "^10.9.2"
   },
   "devDependencies": {
     "@types/node": "^22.7.5",
+    "@types/shell-quote": "^1.7.5",
     "prettier": "3.3.3"
   }
 }

package/server/build/index.js

@@ -1,16 +1,18 @@
 #!/usr/bin/env node
 import cors from "cors";
-import EventSource from "eventsource";
 import { parseArgs } from "node:util";
-import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import { parse as shellParseArgs } from "shell-quote";
+import { SSEClientTransport, SseError, } from "@modelcontextprotocol/sdk/client/sse.js";
 import { StdioClientTransport, getDefaultEnvironment, } from "@modelcontextprotocol/sdk/client/stdio.js";
 import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import express from "express";
-import mcpProxy from "./mcpProxy.js";
 import { findActualExecutable } from "spawn-rx";
-// Polyfill EventSource for an SSE client in Node.js
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-global.EventSource = EventSource;
+import mcpProxy from "./mcpProxy.js";
+const SSE_HEADERS_PASSTHROUGH = ["authorization"];
+const defaultEnvironment = {
+    ...getDefaultEnvironment(),
+    ...(process.env.MCP_ENV_VARS ? JSON.parse(process.env.MCP_ENV_VARS) : {}),
+};
 const { values } = parseArgs({
     args: process.argv.slice(2),
     options: {
@@ -21,15 +23,17 @@ const { values } = parseArgs({
 const app = express();
 app.use(cors());
 let webAppTransports = [];
-const createTransport = async (query) => {
+const createTransport = async (req) => {
+    const query = req.query;
     console.log("Query parameters:", query);
     const transportType = query.transportType;
     if (transportType === "stdio") {
         const command = query.command;
-        const origArgs = query.args.split(/\s+/);
-        const env = query.env ? JSON.parse(query.env) : undefined;
+        const origArgs = shellParseArgs(query.args);
+        const queryEnv = query.env ? JSON.parse(query.env) : {};
+        const env = { ...process.env, ...defaultEnvironment, ...queryEnv };
         const { cmd, args } = findActualExecutable(command, origArgs);
-        console.log(`Stdio transport: command=${cmd}, args=${args}, env=${JSON.stringify(env)}`);
+        console.log(`Stdio transport: command=${cmd}, args=${args}`);
         const transport = new StdioClientTransport({
             command: cmd,
             args,
@@ -42,8 +46,23 @@ const createTransport = async (query) => {
     }
     else if (transportType === "sse") {
         const url = query.url;
-        console.log(`SSE transport: url=${url}`);
-        const transport = new SSEClientTransport(new URL(url));
+        const headers = {};
+        for (const key of SSE_HEADERS_PASSTHROUGH) {
+            if (req.headers[key] === undefined) {
+                continue;
+            }
+            const value = req.headers[key];
+            headers[key] = Array.isArray(value) ? value[value.length - 1] : value;
+        }
+        console.log(`SSE transport: url=${url}, headers=${Object.keys(headers)}`);
+        const transport = new SSEClientTransport(new URL(url), {
+            eventSourceInit: {
+                fetch: (url, init) => fetch(url, { ...init, headers }),
+            },
+            requestInit: {
+                headers,
+            },
+        });
         await transport.start();
         console.log("Connected to SSE transport");
         return transport;
@@ -56,7 +75,18 @@ const createTransport = async (query) => {
 app.get("/sse", async (req, res) => {
     try {
         console.log("New SSE connection");
-        const backingServerTransport = await createTransport(req.query);
+        let backingServerTransport;
+        try {
+            backingServerTransport = await createTransport(req);
+        }
+        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;
+        }
         console.log("Connected MCP client to backing server transport");
         const webAppTransport = new SSEServerTransport("/message", res);
         console.log("Created web app transport");
@@ -77,9 +107,6 @@ app.get("/sse", async (req, res) => {
         mcpProxy({
             transportToClient: webAppTransport,
             transportToServer: backingServerTransport,
-            onerror: (error) => {
-                console.error(error);
-            },
         });
         console.log("Set up MCP proxy");
     }
@@ -106,7 +133,6 @@ app.post("/message", async (req, res) => {
 });
 app.get("/config", (req, res) => {
     try {
-        const defaultEnvironment = getDefaultEnvironment();
         res.json({
             defaultEnvironment,
             defaultCommand: values.env,

package/server/build/mcpProxy.js

@@ -1,26 +1,32 @@
-export default function mcpProxy({ transportToClient, transportToServer, onerror, }) {
+function onClientError(error) {
+    console.error("Error from inspector client:", error);
+}
+function onServerError(error) {
+    console.error("Error from MCP server:", error);
+}
+export default function mcpProxy({ transportToClient, transportToServer, }) {
     let transportToClientClosed = false;
     let transportToServerClosed = false;
     transportToClient.onmessage = (message) => {
-        transportToServer.send(message).catch(onerror);
+        transportToServer.send(message).catch(onServerError);
     };
     transportToServer.onmessage = (message) => {
-        transportToClient.send(message).catch(onerror);
+        transportToClient.send(message).catch(onClientError);
     };
     transportToClient.onclose = () => {
         if (transportToServerClosed) {
             return;
         }
         transportToClientClosed = true;
-        transportToServer.close().catch(onerror);
+        transportToServer.close().catch(onServerError);
     };
     transportToServer.onclose = () => {
         if (transportToClientClosed) {
             return;
         }
         transportToServerClosed = true;
-        transportToClient.close().catch(onerror);
+        transportToClient.close().catch(onClientError);
     };
-    transportToClient.onerror = onerror;
-    transportToServer.onerror = onerror;
+    transportToClient.onerror = onClientError;
+    transportToServer.onerror = onServerError;
 }