Merge pull request #88 from modelcontextprotocol/ani/fix-npx

Enable using 'npx' as your command on Windows

bin/cli.js

@@ -51,12 +51,17 @@ async function main() {
       ...(command ? [`--env`, command] : []),
       ...(mcpServerArgs ? ["--args", mcpServerArgs.join(" ")] : []),
     ],
-    { env: { ...process.env, PORT: SERVER_PORT }, signal: abort.signal },
+    {
+      env: { ...process.env, PORT: SERVER_PORT },
+      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

client/src/components/Sidebar.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-
 import { Play, ChevronDown, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -13,6 +12,7 @@ import {
 import { StdErrNotification } from "@/lib/notificationTypes";
 
 import useTheme from "../lib/useTheme";
+import { version } from "../../../package.json";
 
 interface SidebarProps {
   connectionStatus: "disconnected" | "connected" | "error";
@@ -52,7 +52,9 @@ const Sidebar = ({
     <div className="w-80 bg-card border-r border-border flex flex-col h-full">
       <div className="flex items-center justify-between p-4 border-b border-gray-200">
         <div className="flex items-center">
-          <h1 className="ml-2 text-lg font-semibold">MCP Inspector</h1>
+          <h1 className="ml-2 text-lg font-semibold">
+            MCP Inspector v{version}
+          </h1>
         </div>
       </div>
 

client/src/components/ToolsTab.tsx

@@ -83,7 +83,7 @@ const ToolsTab = ({
                 />
               )}
               {item.type === "resource" && (
-                <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-64">
+                <pre className="bg-gray-50  dark:bg-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words p-4 rounded text-sm overflow-auto max-h-64">
                   {JSON.stringify(item.resource, null, 2)}
                 </pre>
               )}

client/tsconfig.app.json

@@ -23,7 +23,8 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true
   },
   "include": ["src"]
 }

client/vite.config.ts

@@ -10,4 +10,12 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  build: {
+    minify: false,
+    rollupOptions: {
+      output: {
+        manualChunks: undefined
+      }
+    }
+  }
 });

package-lock.json

@@ -16,7 +16,7 @@
         "@modelcontextprotocol/inspector-client": "0.2.4",
         "@modelcontextprotocol/inspector-server": "0.2.4",
         "concurrently": "^9.0.1",
-        "spawn-rx": "^5.0.4",
+        "spawn-rx": "^5.1.0",
         "ts-node": "^10.9.2"
       },
       "bin": {
@@ -5737,9 +5737,9 @@
       }
     },
     "node_modules/spawn-rx": {
-      "version": "5.0.4",
+      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/spawn-rx/-/spawn-rx-5.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/spawn-rx/-/spawn-rx-5.1.0.tgz",
-      "integrity": "sha512-Do11ahkHLlqN9G/J6fs10gdx25BU33NrpkyN3/DFXIIUVojBiJysl12nC0iGUkE+msJAPflzyfpLWWHGHw/6Xg==",
+      "integrity": "sha512-b4HX44hI0usMiHu6LNaZUVg0BGqHuBcl+81iEhZwhvKHz1efTqD/CHBcUbm/uIe5TARy9pJolxU2NMfh6GuQBA==",
       "license": "MIT",
       "dependencies": {
         "debug": "^4.3.7",

package.json

@@ -36,7 +36,7 @@
     "@modelcontextprotocol/inspector-client": "0.2.4",
     "@modelcontextprotocol/inspector-server": "0.2.4",
     "concurrently": "^9.0.1",
-    "spawn-rx": "^5.0.4",
+    "spawn-rx": "^5.1.0",
     "ts-node": "^10.9.2"
   },
   "devDependencies": {

server/src/index.ts

@@ -12,6 +12,7 @@ import {
 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
@@ -37,14 +38,17 @@ const createTransport = async (query: express.Request["query"]) => {
 
   if (transportType === "stdio") {
     const command = query.command as string;
-    const args = (query.args as string).split(/\s+/);
+    const origArgs = (query.args as string).split(/\s+/);
     const env = query.env ? JSON.parse(query.env as string) : undefined;
 
+    const { cmd, args } = findActualExecutable(command, origArgs);
+
     console.log(
-      `Stdio transport: command=${command}, args=${args}, env=${JSON.stringify(env)}`,
+      `Stdio transport: command=${cmd}, args=${args}, env=${JSON.stringify(env)}`,
     );
+
     const transport = new StdioClientTransport({
-      command,
+      command: cmd,
       args,
       env,
       stderr: "pipe",