style: Format test files with Prettier

Co-Authored-By: ashwin@anthropic.com <ashwin@anthropic.com>

.github/workflows/main.yml

@@ -14,6 +14,9 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Check formatting
+        run: npx prettier --check .
+
       - uses: actions/setup-node@v4
         with:
           node-version: 18

.prettierignore

@@ -1,2 +1,4 @@
 packages
 server/build
+CODE_OF_CONDUCT.md
+SECURITY.md

README.md

@@ -2,16 +2,57 @@
 
 The MCP inspector is a developer tool for testing and debugging MCP servers.
 
-It can be run easily from `npx`. For example, in a folder where there's a built JavaScript server at `build/index.js`:
+![MCP Inspector Screenshot](mcp-inspector.png)
 
-```
+## Running the Inspector
+
+### 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`:
+
+```bash
 npx @modelcontextprotocol/inspector build/index.js
 ```
 
-You can also pass arguments along to the server:
+You can pass both arguments and environment variables to your MCP server. Arguments are passed directly to your server, while environment variables can be set using the `-e` flag:
 
+```bash
+# Pass arguments only
+npx @modelcontextprotocol/inspector build/index.js arg1 arg2
+
+# Pass environment variables only
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js
+
+# Pass both environment variables and arguments
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js arg1 arg2
+
+# Use -- to separate inspector flags from server arguments
+npx @modelcontextprotocol/inspector -e KEY=$VALUE -- build/index.js -e server-flag
 ```
-npx @modelcontextprotocol/inspector build/index.js arg1 arg2 ...
+
+The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed:
+
+```bash
+CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector build/index.js
+```
+
+For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).
+
+### From this repository
+
+If you're working on the inspector itself:
+
+Development mode:
+
+```bash
+npm run dev
+```
+
+Production mode:
+
+```bash
+npm run build
+npm start
 ```
 
 ## License

bin/cli.js

@@ -1,65 +1,116 @@
 #!/usr/bin/env node
 
-import { join, dirname } from "path";
+import { resolve, dirname } from "path";
+import { spawnPromise } from "spawn-rx";
 import { fileURLToPath } from "url";
-import concurrently from "concurrently";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-// Get command line arguments
-const [, , command, ...mcpServerArgs] = process.argv;
-
-const inspectorServerPath = join(__dirname, "../server/build/index.js");
-
-// Path to the client entry point
-const inspectorClientPath = join(__dirname, "../client/bin/cli.js");
-
-console.log("Starting MCP inspector...");
-
-function escapeArg(arg) {
-  if (arg.includes(" ") || arg.includes("'") || arg.includes('"')) {
-    return `\\"${arg.replace(/"/g, '\\\\\\"')}\\"`;
-  }
-  return arg;
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-const serverCommand = [
-  `node`,
-  inspectorServerPath,
-  command ? `--env ${escapeArg(command)}` : "",
-  mcpServerArgs.length
-    ? `--args="${mcpServerArgs.map(escapeArg).join(" ")}"`
-    : "",
-]
-  .filter(Boolean)
-  .join(" ");
+async function main() {
+  // Parse command line arguments
+  const args = process.argv.slice(2);
+  const envVars = {};
+  const mcpServerArgs = [];
+  let command = null;
+  let parsingFlags = true;
 
-const CLIENT_PORT = process.env.CLIENT_PORT ?? "";
-const SERVER_PORT = process.env.SERVER_PORT ?? "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
 
-const { result } = concurrently(
-  [
+    if (parsingFlags && arg === "--") {
+      parsingFlags = false;
+      continue;
+    }
+
+    if (parsingFlags && arg === "-e" && i + 1 < args.length) {
+      const [key, value] = args[++i].split("=");
+      if (key && value) {
+        envVars[key] = value;
+      }
+    } else if (!command) {
+      command = arg;
+    } else {
+      mcpServerArgs.push(arg);
+    }
+  }
+
+  const inspectorServerPath = resolve(
+    __dirname,
+    "..",
+    "server",
+    "build",
+    "index.js",
+  );
+
+  // Path to the client entry point
+  const inspectorClientPath = resolve(
+    __dirname,
+    "..",
+    "client",
+    "bin",
+    "cli.js",
+  );
+
+  const CLIENT_PORT = process.env.CLIENT_PORT ?? "5173";
+  const SERVER_PORT = process.env.SERVER_PORT ?? "3000";
+
+  console.log("Starting MCP inspector...");
+
+  const abort = new AbortController();
+
+  let cancelled = false;
+  process.on("SIGINT", () => {
+    cancelled = true;
+    abort.abort();
+  });
+
+  const server = spawnPromise(
+    "node",
+    [
+      inspectorServerPath,
+      ...(command ? [`--env`, command] : []),
+      ...(mcpServerArgs ? [`--args=${mcpServerArgs.join(" ")}`] : []),
+    ],
     {
-      command: `PORT=${SERVER_PORT} ${serverCommand}`,
-      name: "server",
+      env: {
+        ...process.env,
+        PORT: SERVER_PORT,
+        MCP_ENV_VARS: JSON.stringify(envVars),
+      },
+      signal: abort.signal,
+      echoOutput: true,
     },
-    {
-      command: `PORT=${CLIENT_PORT} node ${inspectorClientPath}`,
-      name: "client",
-    },
-  ],
-  {
-    prefix: "name",
-    killOthers: ["failure", "success"],
-    restartTries: 3,
-  },
-);
+  );
 
-console.log(
-  `\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT || 5173} 🚀`,
-);
+  const client = spawnPromise("node", [inspectorClientPath], {
+    env: { ...process.env, PORT: CLIENT_PORT },
+    signal: abort.signal,
+    echoOutput: true,
+  });
 
-result.catch((err) => {
-  console.error("An error occurred:", err);
-  process.exit(1);
-});
+  // 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}${portParam} 🚀`,
+  );
+
+  try {
+    await Promise.any([server, client]);
+  } catch (e) {
+    if (!cancelled || process.env.DEBUG) throw e;
+  }
+
+  return 0;
+}
+
+main()
+  .then((_) => process.exit(0))
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -18,10 +18,11 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "0.7.0",
+    "@modelcontextprotocol/sdk": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.2",
@@ -40,6 +41,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/node": "^22.7.5",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
@@ -50,10 +53,12 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
+    "jsdom": "^26.0.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.8"
+    "vite": "^5.4.8",
+    "vitest": "^3.0.0"
   }
 }

client/src/App.tsx

@@ -1,36 +1,26 @@
-import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import { useDraggablePane } from "./lib/hooks/useDraggablePane";
+import { useConnection } from "./lib/hooks/useConnection";
 import {
-  ClientNotification,
   ClientRequest,
   CompatibilityCallToolResult,
   CompatibilityCallToolResultSchema,
-  CreateMessageRequestSchema,
   CreateMessageResult,
   EmptyResultSchema,
   GetPromptResultSchema,
   ListPromptsResultSchema,
   ListResourcesResultSchema,
   ListResourceTemplatesResultSchema,
-  ListRootsRequestSchema,
-  ListToolsResultSchema,
-  ProgressNotificationSchema,
   ReadResourceResultSchema,
-  Request,
+  ListToolsResultSchema,
   Resource,
   ResourceTemplate,
-  Result,
   Root,
   ServerNotification,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
-import {
-  Notification,
-  StdErrNotification,
-  StdErrNotificationSchema
-} from "./lib/notificationTypes";
+import { StdErrNotification } from "./lib/notificationTypes";
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
@@ -42,8 +32,7 @@ import {
   MessageSquare,
 } from "lucide-react";
 
-import { toast } from "react-toastify";
-import { ZodType } from "zod";
+import { z } from "zod";
 import "./App.css";
 import ConsoleTab from "./components/ConsoleTab";
 import HistoryAndNotifications from "./components/History";
@@ -54,14 +43,12 @@ import RootsTab from "./components/RootsTab";
 import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
-import useDarkModeSync from "./lib/useDarkModeSync";
 
-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"
-  >("disconnected");
   const [resources, setResources] = useState<Resource[]>([]);
   const [resourceTemplates, setResourceTemplates] = useState<
     ResourceTemplate[]
@@ -83,12 +70,9 @@ 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 }[]
-  >([]);
-  const [mcpClient, setMcpClient] = useState<Client | null>(null);
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
   const [stdErrNotifications, setStdErrNotifications] = useState<
     StdErrNotification[]
@@ -139,51 +123,64 @@ const App = () => {
   >();
   const [nextToolCursor, setNextToolCursor] = useState<string | undefined>();
   const progressTokenRef = useRef(0);
-  const [historyPaneHeight, setHistoryPaneHeight] = useState<number>(300);
-  const [isDragging, setIsDragging] = useState(false);
-  const dragStartY = useRef<number>(0);
-  const dragStartHeight = useRef<number>(0);
 
-  useDarkModeSync();
+  const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300);
 
-  const handleDragStart = useCallback(
-    (e: React.MouseEvent) => {
-      setIsDragging(true);
-      dragStartY.current = e.clientY;
-      dragStartHeight.current = historyPaneHeight;
-      document.body.style.userSelect = "none";
+  const {
+    connectionStatus,
+    serverCapabilities,
+    mcpClient,
+    requestHistory,
+    makeRequest: makeConnectionRequest,
+    sendNotification,
+    connect: connectMcpServer,
+  } = useConnection({
+    transportType,
+    command,
+    args,
+    sseUrl,
+    env,
+    proxyServerUrl: PROXY_SERVER_URL,
+    onNotification: (notification) => {
+      setNotifications((prev) => [...prev, notification as ServerNotification]);
     },
-    [historyPaneHeight],
-  );
-
-  const handleDragMove = useCallback(
-    (e: MouseEvent) => {
-      if (!isDragging) return;
-      const deltaY = dragStartY.current - e.clientY;
-      const newHeight = Math.max(
-        100,
-        Math.min(800, dragStartHeight.current + deltaY),
-      );
-      setHistoryPaneHeight(newHeight);
+    onStdErrNotification: (notification) => {
+      setStdErrNotifications((prev) => [
+        ...prev,
+        notification as StdErrNotification,
+      ]);
     },
-    [isDragging],
-  );
+    onPendingRequest: (request, resolve, reject) => {
+      setPendingSampleRequests((prev) => [
+        ...prev,
+        { id: nextRequestId.current++, request, resolve, reject },
+      ]);
+    },
+    getRoots: () => rootsRef.current,
+  });
 
-  const handleDragEnd = useCallback(() => {
-    setIsDragging(false);
-    document.body.style.userSelect = "";
-  }, []);
-
-  useEffect(() => {
-    if (isDragging) {
-      window.addEventListener("mousemove", handleDragMove);
-      window.addEventListener("mouseup", handleDragEnd);
-      return () => {
-        window.removeEventListener("mousemove", handleDragMove);
-        window.removeEventListener("mouseup", handleDragEnd);
-      };
+  const makeRequest = async <T extends z.ZodType>(
+    request: ClientRequest,
+    schema: T,
+    tabKey?: keyof typeof errors,
+  ) => {
+    try {
+      const response = await makeConnectionRequest(request, schema);
+      if (tabKey !== undefined) {
+        clearError(tabKey);
+      }
+      return response;
+    } catch (e) {
+      const errorString = (e as Error).message ?? String(e);
+      if (tabKey !== undefined) {
+        setErrors((prev) => ({
+          ...prev,
+          [tabKey]: errorString,
+        }));
+      }
+      throw e;
     }
-  }, [isDragging, handleDragMove, handleDragEnd]);
+  };
 
   useEffect(() => {
     localStorage.setItem("lastCommand", command);
@@ -194,7 +191,7 @@ const App = () => {
   }, [args]);
 
   useEffect(() => {
-    fetch("http://localhost:3000/config")
+    fetch(`${PROXY_SERVER_URL}/config`)
       .then((response) => response.json())
       .then((data) => {
         setEnv(data.defaultEnvironment);
@@ -214,79 +211,16 @@ const App = () => {
     rootsRef.current = roots;
   }, [roots]);
 
-  const pushHistory = (request: object, response?: object) => {
-    setRequestHistory((prev) => [
-      ...prev,
-      {
-        request: JSON.stringify(request),
-        response: response !== undefined ? JSON.stringify(response) : undefined,
-      },
-    ]);
-  };
+  useEffect(() => {
+    if (!window.location.hash) {
+      window.location.hash = "resources";
+    }
+  }, []);
 
   const clearError = (tabKey: keyof typeof errors) => {
     setErrors((prev) => ({ ...prev, [tabKey]: null }));
   };
 
-  const makeRequest = async <T extends ZodType<object>>(
-    request: ClientRequest,
-    schema: T,
-    tabKey?: keyof typeof errors,
-  ) => {
-    if (!mcpClient) {
-      throw new Error("MCP client not connected");
-    }
-
-    try {
-      const abortController = new AbortController();
-      const timeoutId = setTimeout(() => {
-        abortController.abort("Request timed out");
-      }, DEFAULT_REQUEST_TIMEOUT_MSEC);
-
-      let response;
-      try {
-        response = await mcpClient.request(request, schema, {
-          signal: abortController.signal,
-        });
-      } finally {
-        clearTimeout(timeoutId);
-      }
-      pushHistory(request, response);
-
-      if (tabKey !== undefined) {
-        clearError(tabKey);
-      }
-
-      return response;
-    } catch (e: unknown) {
-      const errorString = (e as Error).message ?? String(e);
-      if (tabKey === undefined) {
-        toast.error(errorString);
-      } else {
-        setErrors((prev) => ({
-          ...prev,
-          [tabKey]: errorString,
-        }));
-      }
-
-      throw e;
-    }
-  };
-
-  const sendNotification = async (notification: ClientNotification) => {
-    if (!mcpClient) {
-      throw new Error("MCP client not connected");
-    }
-
-    try {
-      await mcpClient.notification(notification);
-      pushHistory(notification);
-    } catch (e: unknown) {
-      toast.error((e as Error).message ?? String(e));
-      throw e;
-    }
-  };
-
   const listResources = async () => {
     const response = await makeRequest(
       {
@@ -389,79 +323,6 @@ const App = () => {
     await sendNotification({ method: "notifications/roots/list_changed" });
   };
 
-  const connectMcpServer = async () => {
-    try {
-      const client = new Client<Request, Notification, Result>(
-        {
-          name: "mcp-inspector",
-          version: "0.0.1",
-        },
-        {
-          capabilities: {
-            // Support all client capabilities since we're an inspector tool
-            sampling: {},
-            roots: {
-              listChanged: true,
-            },
-          },
-        },
-      );
-
-      const backendUrl = new URL("http://localhost:3000/sse");
-
-      backendUrl.searchParams.append("transportType", transportType);
-      if (transportType === "stdio") {
-        backendUrl.searchParams.append("command", command);
-        backendUrl.searchParams.append("args", args);
-        backendUrl.searchParams.append("env", JSON.stringify(env));
-      } else {
-        backendUrl.searchParams.append("url", url);
-      }
-
-      const clientTransport = new SSEClientTransport(backendUrl);
-      client.setNotificationHandler(
-        ProgressNotificationSchema,
-        (notification) => {
-          setNotifications((prevNotifications) => [
-            ...prevNotifications,
-            notification,
-          ]);
-        },
-      );
-
-      client.setNotificationHandler(
-        StdErrNotificationSchema,
-        (notification) => {
-          setStdErrNotifications((prevErrorNotifications) => [
-            ...prevErrorNotifications,
-            notification,
-          ]);
-        },
-      );
-
-      await client.connect(clientTransport);
-
-      client.setRequestHandler(CreateMessageRequestSchema, (request) => {
-        return new Promise<CreateMessageResult>((resolve, reject) => {
-          setPendingSampleRequests((prev) => [
-            ...prev,
-            { id: nextRequestId.current++, request, resolve, reject },
-          ]);
-        });
-      });
-
-      client.setRequestHandler(ListRootsRequestSchema, async () => {
-        return { roots: rootsRef.current };
-      });
-
-      setMcpClient(client);
-      setConnectionStatus("connected");
-    } catch (e) {
-      console.error(e);
-      setConnectionStatus("error");
-    }
-  };
-
   return (
     <div className="flex h-screen bg-background">
       <Sidebar
@@ -472,8 +333,8 @@ const App = () => {
         setCommand={setCommand}
         args={args}
         setArgs={setArgs}
-        url={url}
-        setUrl={setUrl}
+        sseUrl={sseUrl}
+        setSseUrl={setSseUrl}
         env={env}
         setEnv={setEnv}
         onConnect={connectMcpServer}
@@ -482,17 +343,42 @@ const App = () => {
       <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex-1 overflow-auto">
           {mcpClient ? (
-            <Tabs defaultValue="resources" className="w-full p-4">
+            <Tabs
+              defaultValue={
+                Object.keys(serverCapabilities ?? {}).includes(
+                  window.location.hash.slice(1),
+                )
+                  ? window.location.hash.slice(1)
+                  : serverCapabilities?.resources
+                    ? "resources"
+                    : serverCapabilities?.prompts
+                      ? "prompts"
+                      : serverCapabilities?.tools
+                        ? "tools"
+                        : "ping"
+              }
+              className="w-full p-4"
+              onValueChange={(value) => (window.location.hash = value)}
+            >
               <TabsList className="mb-4 p-0">
-                <TabsTrigger value="resources">
+                <TabsTrigger
+                  value="resources"
+                  disabled={!serverCapabilities?.resources}
+                >
                   <Files className="w-4 h-4 mr-2" />
                   Resources
                 </TabsTrigger>
-                <TabsTrigger value="prompts">
+                <TabsTrigger
+                  value="prompts"
+                  disabled={!serverCapabilities?.prompts}
+                >
                   <MessageSquare className="w-4 h-4 mr-2" />
                   Prompts
                 </TabsTrigger>
-                <TabsTrigger value="tools">
+                <TabsTrigger
+                  value="tools"
+                  disabled={!serverCapabilities?.tools}
+                >
                   <Hammer className="w-4 h-4 mr-2" />
                   Tools
                 </TabsTrigger>
@@ -516,91 +402,119 @@ const App = () => {
               </TabsList>
 
               <div className="w-full">
-                <ResourcesTab
-                  resources={resources}
-                  resourceTemplates={resourceTemplates}
-                  listResources={() => {
-                    clearError("resources");
-                    listResources();
-                  }}
-                  listResourceTemplates={() => {
-                    clearError("resources");
-                    listResourceTemplates();
-                  }}
-                  readResource={(uri) => {
-                    clearError("resources");
-                    readResource(uri);
-                  }}
-                  selectedResource={selectedResource}
-                  setSelectedResource={(resource) => {
-                    clearError("resources");
-                    setSelectedResource(resource);
-                  }}
-                  resourceContent={resourceContent}
-                  nextCursor={nextResourceCursor}
-                  nextTemplateCursor={nextResourceTemplateCursor}
-                  error={errors.resources}
-                />
-                <PromptsTab
-                  prompts={prompts}
-                  listPrompts={() => {
-                    clearError("prompts");
-                    listPrompts();
-                  }}
-                  getPrompt={(name, args) => {
-                    clearError("prompts");
-                    getPrompt(name, args);
-                  }}
-                  selectedPrompt={selectedPrompt}
-                  setSelectedPrompt={(prompt) => {
-                    clearError("prompts");
-                    setSelectedPrompt(prompt);
-                  }}
-                  promptContent={promptContent}
-                  nextCursor={nextPromptCursor}
-                  error={errors.prompts}
-                />
-                <ToolsTab
-                  tools={tools}
-                  listTools={() => {
-                    clearError("tools");
-                    listTools();
-                  }}
-                  callTool={(name, params) => {
-                    clearError("tools");
-                    callTool(name, params);
-                  }}
-                  selectedTool={selectedTool}
-                  setSelectedTool={(tool) => {
-                    clearError("tools");
-                    setSelectedTool(tool);
-                    setToolResult(null);
-                  }}
-                  toolResult={toolResult}
-                  nextCursor={nextToolCursor}
-                  error={errors.tools}
-                />
-                <ConsoleTab />
-                <PingTab
-                  onPingClick={() => {
-                    void makeRequest(
-                      {
-                        method: "ping" as const,
-                      },
-                      EmptyResultSchema,
-                    );
-                  }}
-                />
-                <SamplingTab
-                  pendingRequests={pendingSampleRequests}
-                  onApprove={handleApproveSampling}
-                  onReject={handleRejectSampling}
-                />
-                <RootsTab
-                  roots={roots}
-                  setRoots={setRoots}
-                  onRootsChange={handleRootsChange}
-                />
+                {!serverCapabilities?.resources &&
+                !serverCapabilities?.prompts &&
+                !serverCapabilities?.tools ? (
+                  <div className="flex items-center justify-center p-4">
+                    <p className="text-lg text-gray-500">
+                      The connected server does not support any MCP capabilities
+                    </p>
+                  </div>
+                ) : (
+                  <>
+                    <ResourcesTab
+                      resources={resources}
+                      resourceTemplates={resourceTemplates}
+                      listResources={() => {
+                        clearError("resources");
+                        listResources();
+                      }}
+                      clearResources={() => {
+                        setResources([]);
+                        setNextResourceCursor(undefined);
+                      }}
+                      listResourceTemplates={() => {
+                        clearError("resources");
+                        listResourceTemplates();
+                      }}
+                      clearResourceTemplates={() => {
+                        setResourceTemplates([]);
+                        setNextResourceTemplateCursor(undefined);
+                      }}
+                      readResource={(uri) => {
+                        clearError("resources");
+                        readResource(uri);
+                      }}
+                      selectedResource={selectedResource}
+                      setSelectedResource={(resource) => {
+                        clearError("resources");
+                        setSelectedResource(resource);
+                      }}
+                      resourceContent={resourceContent}
+                      nextCursor={nextResourceCursor}
+                      nextTemplateCursor={nextResourceTemplateCursor}
+                      error={errors.resources}
+                    />
+                    <PromptsTab
+                      prompts={prompts}
+                      listPrompts={() => {
+                        clearError("prompts");
+                        listPrompts();
+                      }}
+                      clearPrompts={() => {
+                        setPrompts([]);
+                        setNextPromptCursor(undefined);
+                      }}
+                      getPrompt={(name, args) => {
+                        clearError("prompts");
+                        getPrompt(name, args);
+                      }}
+                      selectedPrompt={selectedPrompt}
+                      setSelectedPrompt={(prompt) => {
+                        clearError("prompts");
+                        setSelectedPrompt(prompt);
+                      }}
+                      promptContent={promptContent}
+                      nextCursor={nextPromptCursor}
+                      error={errors.prompts}
+                    />
+                    <ToolsTab
+                      tools={tools}
+                      listTools={() => {
+                        clearError("tools");
+                        listTools();
+                      }}
+                      clearTools={() => {
+                        setTools([]);
+                        setNextToolCursor(undefined);
+                      }}
+                      callTool={(name, params) => {
+                        clearError("tools");
+                        callTool(name, params);
+                      }}
+                      selectedTool={selectedTool}
+                      setSelectedTool={(tool) => {
+                        clearError("tools");
+                        setSelectedTool(tool);
+                        setToolResult(null);
+                      }}
+                      toolResult={toolResult}
+                      nextCursor={nextToolCursor}
+                      error={errors.tools}
+                    />
+                    <ConsoleTab />
+                    <PingTab
+                      onPingClick={() => {
+                        void makeRequest(
+                          {
+                            method: "ping" as const,
+                          },
+                          EmptyResultSchema,
+                        );
+                      }}
+                    />
+                    <SamplingTab
+                      pendingRequests={pendingSampleRequests}
+                      onApprove={handleApproveSampling}
+                      onReject={handleRejectSampling}
+                    />
+                    <RootsTab
+                      roots={roots}
+                      setRoots={setRoots}
+                      onRootsChange={handleRootsChange}
+                    />
+                  </>
+                )}
               </div>
             </Tabs>
           ) : (

client/src/components/ListPane.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import ListPane from "./ListPane";
+import { describe, it, expect, vi } from "vitest";
+
+describe("ListPane", () => {
+  const defaultProps = {
+    items: [
+      { id: 1, name: "Item 1" },
+      { id: 2, name: "Item 2" },
+    ],
+    listItems: vi.fn(),
+    clearItems: vi.fn(),
+    setSelectedItem: vi.fn(),
+    renderItem: (item: { name: string }) => <span>{item.name}</span>,
+    title: "Test List",
+    buttonText: "List Items",
+  };
+
+  it("renders title correctly", () => {
+    render(<ListPane {...defaultProps} />);
+    expect(screen.getByText("Test List")).toBeInTheDocument();
+  });
+
+  it("renders list items using renderItem prop", () => {
+    render(<ListPane {...defaultProps} />);
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+  });
+
+  it("calls listItems when List Items button is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("List Items"));
+    expect(defaultProps.listItems).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls clearItems when Clear button is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("Clear"));
+    expect(defaultProps.clearItems).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls setSelectedItem when an item is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("Item 1"));
+    expect(defaultProps.setSelectedItem).toHaveBeenCalledWith(
+      defaultProps.items[0],
+    );
+  });
+
+  it("disables Clear button when items array is empty", () => {
+    render(<ListPane {...defaultProps} items={[]} />);
+    expect(screen.getByText("Clear")).toBeDisabled();
+  });
+
+  it("respects isButtonDisabled prop for List Items button", () => {
+    render(<ListPane {...defaultProps} isButtonDisabled={true} />);
+    expect(screen.getByText("List Items")).toBeDisabled();
+  });
+});

client/src/components/ListPane.tsx

@@ -3,6 +3,7 @@ import { Button } from "./ui/button";
 type ListPaneProps<T> = {
   items: T[];
   listItems: () => void;
+  clearItems: () => void;
   setSelectedItem: (item: T) => void;
   renderItem: (item: T) => React.ReactNode;
   title: string;
@@ -13,6 +14,7 @@ type ListPaneProps<T> = {
 const ListPane = <T extends object>({
   items,
   listItems,
+  clearItems,
   setSelectedItem,
   renderItem,
   title,
@@ -32,6 +34,14 @@ const ListPane = <T extends object>({
       >
         {buttonText}
       </Button>
+      <Button
+        variant="outline"
+        className="w-full mb-4"
+        onClick={clearItems}
+        disabled={items.length === 0}
+      >
+        Clear
+      </Button>
       <div className="space-y-2 overflow-y-auto max-h-96">
         {items.map((item, index) => (
           <div

client/src/components/PromptsTab.tsx

@@ -22,6 +22,7 @@ export type Prompt = {
 const PromptsTab = ({
   prompts,
   listPrompts,
+  clearPrompts,
   getPrompt,
   selectedPrompt,
   setSelectedPrompt,
@@ -31,6 +32,7 @@ const PromptsTab = ({
 }: {
   prompts: Prompt[];
   listPrompts: () => void;
+  clearPrompts: () => void;
   getPrompt: (name: string, args: Record<string, string>) => void;
   selectedPrompt: Prompt | null;
   setSelectedPrompt: (prompt: Prompt) => void;
@@ -55,6 +57,7 @@ const PromptsTab = ({
       <ListPane
         items={prompts}
         listItems={listPrompts}
+        clearItems={clearPrompts}
         setSelectedItem={(prompt) => {
           setSelectedPrompt(prompt);
           setPromptArgs({});

client/src/components/ResourcesTab.tsx

@@ -16,7 +16,9 @@ const ResourcesTab = ({
   resources,
   resourceTemplates,
   listResources,
+  clearResources,
   listResourceTemplates,
+  clearResourceTemplates,
   readResource,
   selectedResource,
   setSelectedResource,
@@ -28,7 +30,9 @@ const ResourcesTab = ({
   resources: Resource[];
   resourceTemplates: ResourceTemplate[];
   listResources: () => void;
+  clearResources: () => void;
   listResourceTemplates: () => void;
+  clearResourceTemplates: () => void;
   readResource: (uri: string) => void;
   selectedResource: Resource | null;
   setSelectedResource: (resource: Resource | null) => void;
@@ -68,6 +72,7 @@ const ResourcesTab = ({
       <ListPane
         items={resources}
         listItems={listResources}
+        clearItems={clearResources}
         setSelectedItem={(resource) => {
           setSelectedResource(resource);
           readResource(resource.uri);
@@ -90,6 +95,7 @@ const ResourcesTab = ({
       <ListPane
         items={resourceTemplates}
         listItems={listResourceTemplates}
+        clearItems={clearResourceTemplates}
         setSelectedItem={(template) => {
           setSelectedTemplate(template);
           setSelectedResource(null);

client/src/components/Sidebar.tsx

@@ -1,6 +1,14 @@
 import { useState } from "react";
-
-import { Play, ChevronDown, ChevronRight, Settings } from "lucide-react";
+import {
+  Play,
+  ChevronDown,
+  ChevronRight,
+  CircleHelp,
+  Bug,
+  Github,
+  Eye,
+  EyeOff,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -12,6 +20,9 @@ import {
 } from "@/components/ui/select";
 import { StdErrNotification } from "@/lib/notificationTypes";
 
+import useTheme from "../lib/useTheme";
+import { version } from "../../../package.json";
+
 interface SidebarProps {
   connectionStatus: "disconnected" | "connected" | "error";
   transportType: "stdio" | "sse";
@@ -20,8 +31,8 @@ interface SidebarProps {
   setCommand: (command: string) => void;
   args: string;
   setArgs: (args: string) => void;
-  url: string;
-  setUrl: (url: string) => void;
+  sseUrl: string;
+  setSseUrl: (url: string) => void;
   env: Record<string, string>;
   setEnv: (env: Record<string, string>) => void;
   onConnect: () => void;
@@ -36,20 +47,25 @@ const Sidebar = ({
   setCommand,
   args,
   setArgs,
-  url,
-  setUrl,
+  sseUrl,
+  setSseUrl,
   env,
   setEnv,
   onConnect,
   stdErrNotifications,
 }: SidebarProps) => {
+  const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = useState(false);
+  const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
 
   return (
     <div className="w-80 bg-card border-r border-border flex flex-col h-full">
-      <div className="flex items-center p-4 border-b border-gray-200">
-        <Settings className="w-6 h-6 text-gray-500" />
-        <h1 className="ml-2 text-lg font-semibold">MCP Inspector</h1>
+      <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 v{version}
+          </h1>
+        </div>
       </div>
 
       <div className="p-4 flex-1 overflow-auto">
@@ -71,6 +87,7 @@ const Sidebar = ({
               </SelectContent>
             </Select>
           </div>
+
           {transportType === "stdio" ? (
             <>
               <div className="space-y-2">
@@ -79,6 +96,7 @@ const Sidebar = ({
                   placeholder="Command"
                   value={command}
                   onChange={(e) => setCommand(e.target.value)}
+                  className="font-mono"
                 />
               </div>
               <div className="space-y-2">
@@ -87,6 +105,7 @@ const Sidebar = ({
                   placeholder="Arguments (space-separated)"
                   value={args}
                   onChange={(e) => setArgs(e.target.value)}
+                  className="font-mono"
                 />
               </div>
             </>
@@ -95,8 +114,9 @@ const Sidebar = ({
               <label className="text-sm font-medium">URL</label>
               <Input
                 placeholder="URL"
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
+                value={sseUrl}
+                onChange={(e) => setSseUrl(e.target.value)}
+                className="font-mono"
               />
             </div>
           )}
@@ -117,19 +137,44 @@ const Sidebar = ({
               {showEnvVars && (
                 <div className="space-y-2">
                   {Object.entries(env).map(([key, value], idx) => (
-                    <div key={idx} className="grid grid-cols-[1fr,auto] gap-2">
-                      <div className="space-y-1">
+                    <div key={idx} className="space-y-2 pb-4">
+                      <div className="flex gap-2">
                         <Input
                           placeholder="Key"
                           value={key}
                           onChange={(e) => {
+                            const newKey = e.target.value;
                             const newEnv = { ...env };
                             delete newEnv[key];
-                            newEnv[e.target.value] = value;
+                            newEnv[newKey] = value;
                             setEnv(newEnv);
+                            setShownEnvVars((prev) => {
+                              const next = new Set(prev);
+                              if (next.has(key)) {
+                                next.delete(key);
+                                next.add(newKey);
+                              }
+                              return next;
+                            });
                           }}
+                          className="font-mono"
                         />
+                        <Button
+                          variant="destructive"
+                          size="icon"
+                          className="h-9 w-9 p-0 shrink-0"
+                          onClick={() => {
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            const { [key]: _removed, ...rest } = env;
+                            setEnv(rest);
+                          }}
+                        >
+                          ×
+                        </Button>
+                      </div>
+                      <div className="flex gap-2">
                         <Input
+                          type={shownEnvVars.has(key) ? "text" : "password"}
                           placeholder="Value"
                           value={value}
                           onChange={(e) => {
@@ -137,25 +182,47 @@ const Sidebar = ({
                             newEnv[key] = e.target.value;
                             setEnv(newEnv);
                           }}
+                          className="font-mono"
                         />
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="h-9 w-9 p-0 shrink-0"
+                          onClick={() => {
+                            setShownEnvVars((prev) => {
+                              const next = new Set(prev);
+                              if (next.has(key)) {
+                                next.delete(key);
+                              } else {
+                                next.add(key);
+                              }
+                              return next;
+                            });
+                          }}
+                          aria-label={
+                            shownEnvVars.has(key) ? "Hide value" : "Show value"
+                          }
+                          aria-pressed={shownEnvVars.has(key)}
+                          title={
+                            shownEnvVars.has(key) ? "Hide value" : "Show value"
+                          }
+                        >
+                          {shownEnvVars.has(key) ? (
+                            <Eye className="h-4 w-4" aria-hidden="true" />
+                          ) : (
+                            <EyeOff className="h-4 w-4" aria-hidden="true" />
+                          )}
+                        </Button>
                       </div>
-                      <Button
-                        variant="destructive"
-                        onClick={() => {
-                          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                          const { [key]: removed, ...rest } = env;
-                          setEnv(rest);
-                        }}
-                      >
-                        Remove
-                      </Button>
                     </div>
                   ))}
                   <Button
                     variant="outline"
+                    className="w-full mt-2"
                     onClick={() => {
+                      const key = "";
                       const newEnv = { ...env };
-                      newEnv[""] = "";
+                      newEnv[key] = "";
                       setEnv(newEnv);
                     }}
                   >
@@ -212,6 +279,58 @@ const Sidebar = ({
           </div>
         </div>
       </div>
+      <div className="p-4 border-t">
+        <div className="flex items-center justify-between">
+          <Select
+            value={theme}
+            onValueChange={(value: string) =>
+              setTheme(value as "system" | "light" | "dark")
+            }
+          >
+            <SelectTrigger className="w-[100px]" id="theme-select">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="system">System</SelectItem>
+              <SelectItem value="light">Light</SelectItem>
+              <SelectItem value="dark">Dark</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <div className="flex items-center space-x-2">
+            <a
+              href="https://modelcontextprotocol.io/docs/tools/inspector"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button variant="ghost" title="Inspector Documentation">
+                <CircleHelp className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+            <a
+              href="https://modelcontextprotocol.io/docs/tools/debugging"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button variant="ghost" title="Debugging Guide">
+                <Bug className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+            <a
+              href="https://github.com/modelcontextprotocol/inspector"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button
+                variant="ghost"
+                title="Report bugs or contribute on GitHub"
+              >
+                <Github className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

client/src/components/ToolsTab.tsx

@@ -5,12 +5,12 @@ 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";
+import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 
 import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
@@ -18,6 +18,7 @@ import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js"
 const ToolsTab = ({
   tools,
   listTools,
+  clearTools,
   callTool,
   selectedTool,
   setSelectedTool,
@@ -27,20 +28,44 @@ const ToolsTab = ({
 }: {
   tools: Tool[];
   listTools: () => void;
+  clearTools: () => void;
   callTool: (name: string, params: Record<string, unknown>) => void;
   selectedTool: Tool | null;
-  setSelectedTool: (tool: Tool) => void;
+  setSelectedTool: (tool: Tool | null) => void;
   toolResult: CompatibilityCallToolResult | null;
   nextCursor: ListToolsResult["nextCursor"];
   error: string | null;
 }) => {
   const [params, setParams] = useState<Record<string, unknown>>({});
+  useEffect(() => {
+    setParams({});
+  }, [selectedTool]);
 
   const renderToolResult = () => {
     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 (
@@ -63,7 +88,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>
               )}
@@ -75,7 +100,7 @@ const ToolsTab = ({
       return (
         <>
           <h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
-          <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 p-4 rounded text-sm overflow-auto max-h-64">
             {JSON.stringify(toolResult.toolResult, null, 2)}
           </pre>
         </>
@@ -88,6 +113,10 @@ const ToolsTab = ({
       <ListPane
         items={tools}
         listItems={listTools}
+        clearItems={() => {
+          clearTools();
+          setSelectedTool(null);
+        }}
         setSelectedItem={setSelectedTool}
         renderItem={(tool) => (
           <>
@@ -145,6 +174,30 @@ const ToolsTab = ({
                           }
                           className="mt-1"
                         />
+                      ) : /* @ts-expect-error value type is currently unknown */
+                      value.type === "object" ? (
+                        <Textarea
+                          id={key}
+                          name={key}
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
+                          onChange={(e) => {
+                            try {
+                              const parsed = JSON.parse(e.target.value);
+                              setParams({
+                                ...params,
+                                [key]: parsed,
+                              });
+                            } catch (err) {
+                              // If invalid JSON, store as string - will be validated on submit
+                              setParams({
+                                ...params,
+                                [key]: e.target.value,
+                              });
+                            }
+                          }}
+                          className="mt-1"
+                        />
                       ) : (
                         <Input
                           // @ts-expect-error value type is currently unknown

client/src/components/ui/Button.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Button } from "./button";
+import { describe, it, expect, vi } from "vitest";
+import { createRef } from "react";
+
+describe("Button", () => {
+  it("renders children correctly", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText("Click me")).toBeInTheDocument();
+  });
+
+  it("handles click events", () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    fireEvent.click(screen.getByText("Click me"));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies different variants correctly", () => {
+    const { rerender } = render(<Button variant="default">Default</Button>);
+    expect(screen.getByText("Default")).toHaveClass("bg-primary");
+
+    rerender(<Button variant="outline">Outline</Button>);
+    expect(screen.getByText("Outline")).toHaveClass("border-input");
+
+    rerender(<Button variant="secondary">Secondary</Button>);
+    expect(screen.getByText("Secondary")).toHaveClass("bg-secondary");
+  });
+
+  it("applies different sizes correctly", () => {
+    const { rerender } = render(<Button size="default">Default</Button>);
+    expect(screen.getByText("Default")).toHaveClass("h-9");
+
+    rerender(<Button size="sm">Small</Button>);
+    expect(screen.getByText("Small")).toHaveClass("h-8");
+
+    rerender(<Button size="lg">Large</Button>);
+    expect(screen.getByText("Large")).toHaveClass("h-10");
+  });
+
+  it("forwards ref correctly", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Button with ref</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("renders as a different element when asChild is true", () => {
+    render(
+      <Button asChild>
+        <a href="#">Link Button</a>
+      </Button>,
+    );
+    expect(screen.getByText("Link Button").tagName).toBe("A");
+  });
+});

client/src/lib/hooks/useConnection.ts

@@ -0,0 +1,199 @@
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import {
+  ClientNotification,
+  ClientRequest,
+  CreateMessageRequestSchema,
+  ListRootsRequestSchema,
+  ProgressNotificationSchema,
+  Request,
+  Result,
+  ServerCapabilities,
+} from "@modelcontextprotocol/sdk/types.js";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { Notification, StdErrNotificationSchema } from "../notificationTypes";
+import { z } from "zod";
+
+const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
+
+interface UseConnectionOptions {
+  transportType: "stdio" | "sse";
+  command: string;
+  args: string;
+  sseUrl: string;
+  env: Record<string, string>;
+  proxyServerUrl: string;
+  requestTimeout?: number;
+  onNotification?: (notification: Notification) => void;
+  onStdErrNotification?: (notification: Notification) => void;
+  onPendingRequest?: (request: any, resolve: any, reject: any) => void;
+  getRoots?: () => any[];
+}
+
+export function useConnection({
+  transportType,
+  command,
+  args,
+  sseUrl,
+  env,
+  proxyServerUrl,
+  requestTimeout = DEFAULT_REQUEST_TIMEOUT_MSEC,
+  onNotification,
+  onStdErrNotification,
+  onPendingRequest,
+  getRoots,
+}: UseConnectionOptions) {
+  const [connectionStatus, setConnectionStatus] = useState<
+    "disconnected" | "connected" | "error"
+  >("disconnected");
+  const [serverCapabilities, setServerCapabilities] =
+    useState<ServerCapabilities | null>(null);
+  const [mcpClient, setMcpClient] = useState<Client | null>(null);
+  const [requestHistory, setRequestHistory] = useState<
+    { request: string; response?: string }[]
+  >([]);
+
+  const pushHistory = (request: object, response?: object) => {
+    setRequestHistory((prev) => [
+      ...prev,
+      {
+        request: JSON.stringify(request),
+        response: response !== undefined ? JSON.stringify(response) : undefined,
+      },
+    ]);
+  };
+
+  const makeRequest = async <T extends z.ZodType>(
+    request: ClientRequest,
+    schema: T,
+  ) => {
+    if (!mcpClient) {
+      throw new Error("MCP client not connected");
+    }
+
+    try {
+      const abortController = new AbortController();
+      const timeoutId = setTimeout(() => {
+        abortController.abort("Request timed out");
+      }, requestTimeout);
+
+      let response;
+      try {
+        response = await mcpClient.request(request, schema, {
+          signal: abortController.signal,
+        });
+        pushHistory(request, response);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        pushHistory(request, { error: errorMessage });
+        throw error;
+      } finally {
+        clearTimeout(timeoutId);
+      }
+
+      return response;
+    } catch (e: unknown) {
+      const errorString = (e as Error).message ?? String(e);
+      toast.error(errorString);
+
+      throw e;
+    }
+  };
+
+  const sendNotification = async (notification: ClientNotification) => {
+    if (!mcpClient) {
+      throw new Error("MCP client not connected");
+    }
+
+    try {
+      await mcpClient.notification(notification);
+      pushHistory(notification);
+    } catch (e: unknown) {
+      toast.error((e as Error).message ?? String(e));
+      throw e;
+    }
+  };
+
+  const connect = async () => {
+    try {
+      const client = new Client<Request, Notification, Result>(
+        {
+          name: "mcp-inspector",
+          version: "0.0.1",
+        },
+        {
+          capabilities: {
+            sampling: {},
+            roots: {
+              listChanged: true,
+            },
+          },
+        },
+      );
+
+      const backendUrl = new URL(`${proxyServerUrl}/sse`);
+
+      backendUrl.searchParams.append("transportType", transportType);
+      if (transportType === "stdio") {
+        backendUrl.searchParams.append("command", command);
+        backendUrl.searchParams.append("args", args);
+        backendUrl.searchParams.append("env", JSON.stringify(env));
+      } else {
+        backendUrl.searchParams.append("url", sseUrl);
+      }
+
+      const clientTransport = new SSEClientTransport(backendUrl);
+
+      if (onNotification) {
+        client.setNotificationHandler(
+          ProgressNotificationSchema,
+          onNotification,
+        );
+      }
+
+      if (onStdErrNotification) {
+        client.setNotificationHandler(
+          StdErrNotificationSchema,
+          onStdErrNotification,
+        );
+      }
+
+      await client.connect(clientTransport);
+
+      const capabilities = client.getServerCapabilities();
+      setServerCapabilities(capabilities ?? null);
+
+      if (onPendingRequest) {
+        client.setRequestHandler(CreateMessageRequestSchema, (request) => {
+          return new Promise((resolve, reject) => {
+            onPendingRequest(request, resolve, reject);
+          });
+        });
+      }
+
+      if (getRoots) {
+        client.setRequestHandler(ListRootsRequestSchema, async () => {
+          return { roots: getRoots() };
+        });
+      }
+
+      setMcpClient(client);
+      setConnectionStatus("connected");
+    } catch (e) {
+      console.error(e);
+      setConnectionStatus("error");
+    }
+  };
+
+  return {
+    connectionStatus,
+    serverCapabilities,
+    mcpClient,
+    requestHistory,
+    makeRequest,
+    sendNotification,
+    connect,
+  };
+}

client/src/lib/hooks/useDraggablePane.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useDraggablePane(initialHeight: number) {
+  const [height, setHeight] = useState(initialHeight);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartY = useRef<number>(0);
+  const dragStartHeight = useRef<number>(0);
+
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent) => {
+      setIsDragging(true);
+      dragStartY.current = e.clientY;
+      dragStartHeight.current = height;
+      document.body.style.userSelect = "none";
+    },
+    [height],
+  );
+
+  const handleDragMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+      const deltaY = dragStartY.current - e.clientY;
+      const newHeight = Math.max(
+        100,
+        Math.min(800, dragStartHeight.current + deltaY),
+      );
+      setHeight(newHeight);
+    },
+    [isDragging],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false);
+    document.body.style.userSelect = "";
+  }, []);
+
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", handleDragMove);
+      window.addEventListener("mouseup", handleDragEnd);
+      return () => {
+        window.removeEventListener("mousemove", handleDragMove);
+        window.removeEventListener("mouseup", handleDragEnd);
+      };
+    }
+  }, [isDragging, handleDragMove, handleDragEnd]);
+
+  return {
+    height,
+    isDragging,
+    handleDragStart,
+  };
+}

client/src/lib/useDarkModeSync.ts

@@ -1,29 +0,0 @@
-import { useEffect } from "react";
-
-// Listen for changes to the user's preferred color scheme
-const useDarkModeSync = () => {
-  useEffect(() => {
-    const darkModeMediaQuery = window.matchMedia(
-      "(prefers-color-scheme: dark)",
-    );
-    const handleDarkModeChange = (e: MediaQueryListEvent) => {
-      if (e.matches) {
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-      }
-    };
-
-    if (darkModeMediaQuery.matches) {
-      document.documentElement.classList.add("dark");
-    }
-
-    darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
-
-    return () => {
-      darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
-    };
-  }, []);
-};
-
-export default useDarkModeSync;

client/src/lib/useTheme.ts

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+const useTheme = (): [Theme, (mode: Theme) => void] => {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const savedTheme = localStorage.getItem("theme") as Theme;
+    return savedTheme || "system";
+  });
+
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    );
+    const handleDarkModeChange = (e: MediaQueryListEvent) => {
+      if (theme === "system") {
+        updateDocumentTheme(e.matches ? "dark" : "light");
+      }
+    };
+
+    const updateDocumentTheme = (newTheme: "light" | "dark") => {
+      document.documentElement.classList.toggle("dark", newTheme === "dark");
+    };
+
+    // Set initial theme based on current mode
+    if (theme === "system") {
+      updateDocumentTheme(darkModeMediaQuery.matches ? "dark" : "light");
+    } else {
+      updateDocumentTheme(theme);
+    }
+
+    darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
+    };
+  }, [theme]);
+
+  return [
+    theme,
+    useCallback((newTheme: Theme) => {
+      setTheme(newTheme);
+      localStorage.setItem("theme", newTheme);
+      if (newTheme !== "system") {
+        document.documentElement.classList.toggle("dark", newTheme === "dark");
+      }
+    }, []),
+  ];
+};
+
+export default useTheme;

client/src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import App from "./App.tsx";
 import "./index.css";
 

client/src/test.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest/globals" />
+/// <reference types="@testing-library/jest-dom" />
+
+import "@testing-library/jest-dom";
+
+declare global {
+  namespace Vi {
+    interface JestAssertion<T = any> extends jest.Matchers<void, T> {}
+  }
+}
+
+export {};

client/tailwind.config.js

@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+import animate from "tailwindcss-animate";
 export default {
   darkMode: ["class"],
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
@@ -53,5 +54,5 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [animate],
 };

client/test/setupTests.ts

@@ -0,0 +1,6 @@
+/// <reference types="vitest/globals" />
+/// <reference types="@testing-library/jest-dom" />
+import "@testing-library/jest-dom/vitest";
+
+// Add any additional test setup, custom matchers, or global mocks here
+// This file runs before each test file

client/tsconfig.app.json

@@ -4,6 +4,7 @@
     "paths": {
       "@/*": ["./src/*"]
     },
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
 
     "target": "ES2020",
     "useDefineForClassFields": true,
@@ -23,7 +24,8 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true
   },
-  "include": ["src"]
+  "include": ["src", "test"]
 }

client/tsconfig.json

@@ -2,7 +2,8 @@
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.test.json" }
   ],
   "compilerOptions": {
     "baseUrl": ".",

client/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src/**/*.test.tsx", "src/**/*.test.ts", "test/**/*.ts"]
+}

client/vite.config.ts

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

client/vitest.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./test/setupTests.ts"],
+    typecheck: {
+      tsconfig: "./tsconfig.test.json",
+    },
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -27,18 +27,22 @@
     "build": "npm run build-server && npm run build-client",
     "start-server": "cd server && npm run start",
     "start-client": "cd client && npm run preview",
-    "start": "./bin/cli.js",
+    "start": "node ./bin/cli.js",
     "prepare": "npm run build",
     "prettier-fix": "prettier --write .",
     "publish-all": "npm publish --workspaces --access public && npm publish --access public"
   },
   "dependencies": {
-    "@modelcontextprotocol/inspector-client": "0.2.1",
-    "@modelcontextprotocol/inspector-server": "0.2.1",
-    "concurrently": "^9.0.1"
+    "@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": {
-    "prettier": "3.3.3",
-    "@types/node": "^22.7.5"
+    "@types/node": "^22.7.5",
+    "@types/shell-quote": "^1.7.5",
+    "prettier": "3.3.3"
   }
 }

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-server",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Server-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -27,7 +27,7 @@
     "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "0.7.0",
+    "@modelcontextprotocol/sdk": "^1.0.3",
     "cors": "^2.8.5",
     "eventsource": "^2.0.2",
     "express": "^4.21.0",

server/src/index.ts

@@ -3,6 +3,7 @@
 import cors from "cors";
 import EventSource from "eventsource";
 import { parseArgs } from "node:util";
+import { parse as shellParseArgs } from "shell-quote";
 
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import {
@@ -12,6 +13,12 @@ import {
 import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import express from "express";
 import mcpProxy from "./mcpProxy.js";
+import { findActualExecutable } from "spawn-rx";
+
+const defaultEnvironment = {
+  ...getDefaultEnvironment(),
+  ...(process.env.MCP_ENV_VARS ? JSON.parse(process.env.MCP_ENV_VARS) : {}),
+};
 
 // Polyfill EventSource for an SSE client in Node.js
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -37,25 +44,32 @@ 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 env = query.env ? JSON.parse(query.env as string) : undefined;
-    console.log(
-      `Stdio transport: command=${command}, args=${args}, env=${JSON.stringify(env)}`,
-    );
+    const origArgs = shellParseArgs(query.args as string) as string[];
+    const queryEnv = query.env ? JSON.parse(query.env as string) : {};
+    const env = { ...process.env, ...defaultEnvironment, ...queryEnv };
+
+    const { cmd, args } = findActualExecutable(command, origArgs);
+
+    console.log(`Stdio transport: command=${cmd}, args=${args}`);
+
     const transport = new StdioClientTransport({
-      command,
+      command: cmd,
       args,
       env,
       stderr: "pipe",
     });
+
     await transport.start();
+
     console.log("Spawned stdio transport");
     return transport;
   } else if (transportType === "sse") {
     const url = query.url as string;
     console.log(`SSE transport: url=${url}`);
+
     const transport = new SSEClientTransport(new URL(url));
     await transport.start();
+
     console.log("Connected to SSE transport");
     return transport;
   } else {
@@ -99,6 +113,7 @@ app.get("/sse", async (req, res) => {
         console.error(error);
       },
     });
+
     console.log("Set up MCP proxy");
   } catch (error) {
     console.error("Error in /sse route:", error);
@@ -125,7 +140,6 @@ app.post("/message", async (req, res) => {
 
 app.get("/config", (req, res) => {
   try {
-    const defaultEnvironment = getDefaultEnvironment();
     res.json({
       defaultEnvironment,
       defaultCommand: values.env,
@@ -138,4 +152,4 @@ app.get("/config", (req, res) => {
 });
 
 const PORT = process.env.PORT || 3000;
-app.listen(PORT, () => { });
+app.listen(PORT, () => {});