display inspector version in UI

Make debugging Inspector easier for users

bin/cli.js

@@ -51,18 +51,24 @@ 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
   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} 🚀`,
+    `\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT}${portParam} 🚀`,
   );
 
   try {

client/package.json

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

client/src/App.tsx

@@ -57,6 +57,10 @@ import ToolsTab from "./components/ToolsTab";
 
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
+const params = new URLSearchParams(window.location.search);
+const PROXY_PORT = params.get("proxyPort") ?? "3000";
+const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
+
 const App = () => {
   const [connectionStatus, setConnectionStatus] = useState<
     "disconnected" | "connected" | "error"
@@ -82,7 +86,8 @@ const App = () => {
   const [args, setArgs] = useState<string>(() => {
     return localStorage.getItem("lastArgs") || "";
   });
-  const [url, setUrl] = useState<string>("http://localhost:3001/sse");
+
+  const [sseUrl, setSseUrl] = useState<string>("http://localhost:3001/sse");
   const [transportType, setTransportType] = useState<"stdio" | "sse">("stdio");
   const [requestHistory, setRequestHistory] = useState<
     { request: string; response?: string }[]
@@ -191,7 +196,7 @@ const App = () => {
   }, [args]);
 
   useEffect(() => {
-    fetch("http://localhost:3000/config")
+    fetch(`${PROXY_SERVER_URL}/config`)
       .then((response) => response.json())
       .then((data) => {
         setEnv(data.defaultEnvironment);
@@ -404,7 +409,7 @@ const App = () => {
         },
       );
 
-      const backendUrl = new URL("http://localhost:3000/sse");
+      const backendUrl = new URL(`${PROXY_SERVER_URL}/sse`);
 
       backendUrl.searchParams.append("transportType", transportType);
       if (transportType === "stdio") {
@@ -412,7 +417,7 @@ const App = () => {
         backendUrl.searchParams.append("args", args);
         backendUrl.searchParams.append("env", JSON.stringify(env));
       } else {
-        backendUrl.searchParams.append("url", url);
+        backendUrl.searchParams.append("url", sseUrl);
       }
 
       const clientTransport = new SSEClientTransport(backendUrl);
@@ -469,8 +474,8 @@ const App = () => {
         setCommand={setCommand}
         args={args}
         setArgs={setArgs}
-        url={url}
+        sseUrl={sseUrl}
-        setUrl={setUrl}
+        setSseUrl={setSseUrl}
         env={env}
         setEnv={setEnv}
         onConnect={connectMcpServer}

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";
@@ -22,8 +22,8 @@ interface SidebarProps {
   setCommand: (command: string) => void;
   args: string;
   setArgs: (args: string) => void;
-  url: string;
+  sseUrl: string;
-  setUrl: (url: string) => void;
+  setSseUrl: (url: string) => void;
   env: Record<string, string>;
   setEnv: (env: Record<string, string>) => void;
   onConnect: () => void;
@@ -38,8 +38,8 @@ const Sidebar = ({
   setCommand,
   args,
   setArgs,
-  url,
+  sseUrl,
-  setUrl,
+  setSseUrl,
   env,
   setEnv,
   onConnect,
@@ -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>
 
@@ -75,6 +77,7 @@ const Sidebar = ({
               </SelectContent>
             </Select>
           </div>
+
           {transportType === "stdio" ? (
             <>
               <div className="space-y-2">
@@ -99,8 +102,8 @@ const Sidebar = ({
               <label className="text-sm font-medium">URL</label>
               <Input
                 placeholder="URL"
-                value={url}
+                value={sseUrl}
-                onChange={(e) => setUrl(e.target.value)}
+                onChange={(e) => setSseUrl(e.target.value)}
               />
             </div>
           )}

client/src/components/ToolsTab.tsx

@@ -5,9 +5,9 @@ import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import {
-  CallToolResult,
   ListToolsResult,
   Tool,
+  CallToolResultSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, Send } from "lucide-react";
 import { useState } from "react";
@@ -40,7 +40,27 @@ const ToolsTab = ({
     if (!toolResult) return null;
 
     if ("content" in toolResult) {
-      const structuredResult = toolResult as CallToolResult;
+      const parsedResult = CallToolResultSchema.safeParse(toolResult);
+      if (!parsedResult.success) {
+        return (
+          <>
+            <h4 className="font-semibold mb-2">Invalid Tool Result:</h4>
+            <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+              {JSON.stringify(toolResult, null, 2)}
+            </pre>
+            <h4 className="font-semibold mb-2">Errors:</h4>
+            {parsedResult.error.errors.map((error, idx) => (
+              <pre 
+                key={idx}
+                className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64"
+              >
+                {JSON.stringify(error, null, 2)}
+              </pre>
+            ))}
+          </>
+        );
+      }
+      const structuredResult = parsedResult.data;
       const isError = structuredResult.isError ?? false;
 
       return (

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

@@ -1,22 +1,22 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@modelcontextprotocol/inspector",
-      "version": "0.2.3",
+      "version": "0.2.4",
       "license": "MIT",
       "workspaces": [
         "client",
         "server"
       ],
       "dependencies": {
-        "@modelcontextprotocol/inspector-client": "0.2.3",
+        "@modelcontextprotocol/inspector-client": "0.2.4",
-        "@modelcontextprotocol/inspector-server": "0.2.3",
+        "@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": {
@@ -29,7 +29,7 @@
     },
     "client": {
       "name": "@modelcontextprotocol/inspector-client",
-      "version": "0.2.3",
+      "version": "0.2.4",
       "license": "MIT",
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.0.1",
@@ -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",
@@ -6926,7 +6926,7 @@
     },
     "server": {
       "name": "@modelcontextprotocol/inspector-server",
-      "version": "0.2.3",
+      "version": "0.2.4",
       "license": "MIT",
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.0.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -33,10 +33,10 @@
     "publish-all": "npm publish --workspaces --access public && npm publish --access public"
   },
   "dependencies": {
-    "@modelcontextprotocol/inspector-client": "0.2.3",
+    "@modelcontextprotocol/inspector-client": "0.2.4",
-    "@modelcontextprotocol/inspector-server": "0.2.3",
+    "@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/package.json

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