Merge branch 'main' into dockerfile

Author: aaronpowell

README.md

@@ -2,7 +2,7 @@
 
 The MCP inspector is a developer tool for testing and debugging MCP servers.
 
-![MCP Inspector Screenshot](mcp-inspector.png)
+![MCP Inspector Screenshot](https://raw.githubusercontent.com/modelcontextprotocol/inspector/main/mcp-inspector.png)
 
 ## Running the Inspector
 
@@ -53,6 +53,7 @@ The MCP Inspector supports the following configuration settings. To change them
 | Name                       | Purpose                                                                                   | Default Value |
 | -------------------------- | ----------------------------------------------------------------------------------------- | ------------- |
 | MCP_SERVER_REQUEST_TIMEOUT | Maximum time in milliseconds to wait for a response from the MCP server before timing out | 10000         |
+| MCP_PROXY_FULL_ADDRESS     | The full URL of the MCP Inspector proxy server (e.g. `http://10.2.1.14:2277`)             | `null`        |
 
 ### From this repository
 

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.7.0",
+  "version": "0.8.2",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -23,7 +23,7 @@
     "test:watch": "jest --config jest.config.cjs --watch"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.6.1",
+    "@modelcontextprotocol/sdk": "^1.9.0",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-icons": "^1.3.0",
@@ -32,7 +32,8 @@
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
-    "@types/prismjs": "^1.26.5",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
@@ -42,7 +43,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-simple-code-editor": "^0.14.1",
-    "react-toastify": "^10.0.6",
     "serve-handler": "^6.1.6",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
@@ -54,6 +54,7 @@
     "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.7.5",
+    "@types/prismjs": "^1.26.5",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@types/serve-handler": "^6.1.4",

client/src/App.tsx

@@ -20,7 +20,6 @@ import {
 import React, { Suspense, useEffect, useRef, useState } from "react";
 import { useConnection } from "./lib/hooks/useConnection";
 import { useDraggablePane } from "./lib/hooks/useDraggablePane";
-
 import { StdErrNotification } from "./lib/notificationTypes";
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -33,7 +32,6 @@ import {
   MessageSquare,
 } from "lucide-react";
 
-import { toast } from "react-toastify";
 import { z } from "zod";
 import "./App.css";
 import ConsoleTab from "./components/ConsoleTab";
@@ -47,13 +45,17 @@ import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 import { DEFAULT_INSPECTOR_CONFIG } from "./lib/constants";
 import { InspectorConfig } from "./lib/configurationTypes";
+import {
+  getMCPProxyAddress,
+  getMCPServerRequestTimeout,
+} from "./utils/configUtils";
+import { useToast } from "@/hooks/use-toast";
 
 const params = new URLSearchParams(window.location.search);
-const PROXY_PORT = params.get("proxyPort") ?? "6277";
-const PROXY_SERVER_URL = `http://${window.location.hostname}:${PROXY_PORT}`;
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 
 const App = () => {
+  const { toast } = useToast();
   // Handle OAuth callback route
   const [resources, setResources] = useState<Resource[]>([]);
   const [resourceTemplates, setResourceTemplates] = useState<
@@ -95,7 +97,13 @@ const App = () => {
 
   const [config, setConfig] = useState<InspectorConfig>(() => {
     const savedConfig = localStorage.getItem(CONFIG_LOCAL_STORAGE_KEY);
-    return savedConfig ? JSON.parse(savedConfig) : DEFAULT_INSPECTOR_CONFIG;
+    if (savedConfig) {
+      return {
+        ...DEFAULT_INSPECTOR_CONFIG,
+        ...JSON.parse(savedConfig),
+      } as InspectorConfig;
+    }
+    return DEFAULT_INSPECTOR_CONFIG;
   });
   const [bearerToken, setBearerToken] = useState<string>(() => {
     return localStorage.getItem("lastBearerToken") || "";
@@ -145,15 +153,16 @@ const App = () => {
     handleCompletion,
     completionsSupported,
     connect: connectMcpServer,
+    disconnect: disconnectMcpServer,
   } = useConnection({
     transportType,
     command,
     args,
     sseUrl,
     env,
     bearerToken,
-    proxyServerUrl: PROXY_SERVER_URL,
-    requestTimeout: config.MCP_SERVER_REQUEST_TIMEOUT.value as number,
+    proxyServerUrl: getMCPProxyAddress(config),
+    requestTimeout: getMCPServerRequestTimeout(config),
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification as ServerNotification]);
     },
@@ -196,8 +205,13 @@ const App = () => {
     localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
   }, [config]);
 
+  const hasProcessedRef = useRef(false);
   // Auto-connect if serverUrl is provided in URL params (e.g. after OAuth callback)
   useEffect(() => {
+    if (hasProcessedRef.current) {
+      // Only try to connect once
+      return;
+    }
     const serverUrl = params.get("serverUrl");
     if (serverUrl) {
       setSseUrl(serverUrl);
@@ -207,14 +221,18 @@ const App = () => {
       newUrl.searchParams.delete("serverUrl");
       window.history.replaceState({}, "", newUrl.toString());
       // Show success toast for OAuth
-      toast.success("Successfully authenticated with OAuth");
+      toast({
+        title: "Success",
+        description: "Successfully authenticated with OAuth",
+      });
+      hasProcessedRef.current = true;
       // Connect to the server
       connectMcpServer();
     }
-  }, [connectMcpServer]);
+  }, [connectMcpServer, toast]);
 
   useEffect(() => {
-    fetch(`${PROXY_SERVER_URL}/config`)
+    fetch(`${getMCPProxyAddress(config)}/config`)
       .then((response) => response.json())
       .then((data) => {
         setEnv(data.defaultEnvironment);
@@ -228,6 +246,7 @@ const App = () => {
       .catch((error) =>
         console.error("Error fetching default environment:", error),
       );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -458,6 +477,7 @@ const App = () => {
         bearerToken={bearerToken}
         setBearerToken={setBearerToken}
         onConnect={connectMcpServer}
+        onDisconnect={disconnectMcpServer}
         stdErrNotifications={stdErrNotifications}
         logLevel={logLevel}
         sendLogLevelRequest={sendLogLevelRequest}

client/src/components/History.tsx

@@ -1,5 +1,4 @@
 import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
-import { Copy } from "lucide-react";
 import { useState } from "react";
 import JsonView from "./JsonView";
 
@@ -25,10 +24,6 @@ const HistoryAndNotifications = ({
     setExpandedNotifications((prev) => ({ ...prev, [index]: !prev[index] }));
   };
 
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
-  };
-
   return (
     <div className="bg-card overflow-hidden flex h-full">
       <div className="flex-1 overflow-y-auto p-4 border-r">
@@ -68,33 +63,24 @@ const HistoryAndNotifications = ({
                           <span className="font-semibold text-blue-600">
                             Request:
                           </span>
-                          <button
-                            onClick={() => copyToClipboard(request.request)}
-                            className="text-blue-500 hover:text-blue-700"
-                          >
-                            <Copy size={16} />
-                          </button>
-                        </div>
-                        <div className="bg-background p-2 rounded">
-                          <JsonView data={request.request} />
                         </div>
+
+                        <JsonView
+                          data={request.request}
+                          className="bg-background"
+                        />
                       </div>
                       {request.response && (
                         <div className="mt-2">
                           <div className="flex justify-between items-center mb-1">
                             <span className="font-semibold text-green-600">
                               Response:
                             </span>
-                            <button
-                              onClick={() => copyToClipboard(request.response!)}
-                              className="text-blue-500 hover:text-blue-700"
-                            >
-                              <Copy size={16} />
-                            </button>
-                          </div>
-                          <div className="bg-background p-2 rounded">
-                            <JsonView data={request.response} />
                           </div>
+                          <JsonView
+                            data={request.response}
+                            className="bg-background"
+                          />
                         </div>
                       )}
                     </>
@@ -134,20 +120,11 @@ const HistoryAndNotifications = ({
                         <span className="font-semibold text-purple-600">
                           Details:
                         </span>
-                        <button
-                          onClick={() =>
-                            copyToClipboard(JSON.stringify(notification))
-                          }
-                          className="text-blue-500 hover:text-blue-700"
-                        >
-                          <Copy size={16} />
-                        </button>
-                      </div>
-                      <div className="bg-background p-2 rounded">
-                        <JsonView
-                          data={JSON.stringify(notification, null, 2)}
-                        />
                       </div>
+                      <JsonView
+                        data={JSON.stringify(notification, null, 2)}
+                        className="bg-background"
+                      />
                     </div>
                   )}
                 </li>

client/src/components/JsonView.tsx

@@ -1,11 +1,16 @@
-import { useState, memo } from "react";
+import { useState, memo, useMemo, useCallback, useEffect } from "react";
 import { JsonValue } from "./DynamicJsonForm";
 import clsx from "clsx";
+import { Copy, CheckCheck } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
 
 interface JsonViewProps {
   data: unknown;
   name?: string;
   initialExpandDepth?: number;
+  className?: string;
+  withCopyButton?: boolean;
 }
 
 function tryParseJson(str: string): { success: boolean; data: JsonValue } {
@@ -24,22 +29,79 @@ function tryParseJson(str: string): { success: boolean; data: JsonValue } {
 }
 
 const JsonView = memo(
-  ({ data, name, initialExpandDepth = 3 }: JsonViewProps) => {
-    const normalizedData =
-      typeof data === "string"
+  ({
+    data,
+    name,
+    initialExpandDepth = 3,
+    className,
+    withCopyButton = true,
+  }: JsonViewProps) => {
+    const { toast } = useToast();
+    const [copied, setCopied] = useState(false);
+
+    useEffect(() => {
+      let timeoutId: NodeJS.Timeout;
+      if (copied) {
+        timeoutId = setTimeout(() => {
+          setCopied(false);
+        }, 500);
+      }
+      return () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }, [copied]);
+
+    const normalizedData = useMemo(() => {
+      return typeof data === "string"
         ? tryParseJson(data).success
           ? tryParseJson(data).data
           : data
         : data;
+    }, [data]);
+
+    const handleCopy = useCallback(() => {
+      try {
+        navigator.clipboard.writeText(
+          typeof normalizedData === "string"
+            ? normalizedData
+            : JSON.stringify(normalizedData, null, 2),
+        );
+        setCopied(true);
+      } catch (error) {
+        toast({
+          title: "Error",
+          description: `There was an error coping result into the clipboard: ${error instanceof Error ? error.message : String(error)}`,
+          variant: "destructive",
+        });
+      }
+    }, [toast, normalizedData]);
 
     return (
-      <div className="font-mono text-sm transition-all duration-300 ">
-        <JsonNode
-          data={normalizedData as JsonValue}
-          name={name}
-          depth={0}
-          initialExpandDepth={initialExpandDepth}
-        />
+      <div className={clsx("p-4 border rounded relative", className)}>
+        {withCopyButton && (
+          <Button
+            size="icon"
+            variant="ghost"
+            className="absolute top-2 right-2"
+            onClick={handleCopy}
+          >
+            {copied ? (
+              <CheckCheck className="size-4 dark:text-green-700 text-green-600" />
+            ) : (
+              <Copy className="size-4 text-foreground" />
+            )}
+          </Button>
+        )}
+        <div className="font-mono text-sm transition-all duration-300">
+          <JsonNode
+            data={normalizedData as JsonValue}
+            name={name}
+            depth={0}
+            initialExpandDepth={initialExpandDepth}
+          />
+        </div>
       </div>
     );
   },

client/src/components/PromptsTab.tsx

@@ -152,9 +152,7 @@ const PromptsTab = ({
                 Get Prompt
               </Button>
               {promptContent && (
-                <div className="p-4 border rounded">
-                  <JsonView data={promptContent} />
-                </div>
+                <JsonView data={promptContent} withCopyButton={false} />
               )}
             </div>
           ) : (

client/src/components/ResourcesTab.tsx

@@ -215,9 +215,10 @@ const ResourcesTab = ({
               <AlertDescription>{error}</AlertDescription>
             </Alert>
           ) : selectedResource ? (
-            <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 text-gray-900 dark:text-gray-100">
-              <JsonView data={resourceContent} />
-            </div>
+            <JsonView
+              data={resourceContent}
+              className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 text-gray-900 dark:text-gray-100"
+            />
           ) : selectedTemplate ? (
             <div className="space-y-4">
               <p className="text-sm text-gray-600">