style: Format test files with Prettier

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

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.4.0",
+  "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": "^1.4.1",
+    "@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",
@@ -30,7 +31,6 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.447.0",
-    "pkce-challenge": "^4.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-toastify": "^10.0.6",
@@ -41,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",
@@ -51,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,3 +1,5 @@
+import { useDraggablePane } from "./lib/hooks/useDraggablePane";
+import { useConnection } from "./lib/hooks/useConnection";
 import {
   ClientRequest,
   CompatibilityCallToolResult,
@@ -8,17 +10,15 @@ import {
   ListPromptsResultSchema,
   ListResourcesResultSchema,
   ListResourceTemplatesResultSchema,
-  ListToolsResultSchema,
   ReadResourceResultSchema,
+  ListToolsResultSchema,
   Resource,
   ResourceTemplate,
   Root,
   ServerNotification,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-import React, { Suspense, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
-import { useConnection } from "./lib/hooks/useConnection";
-import { useDraggablePane } from "./lib/hooks/useDraggablePane";
 
 import { StdErrNotification } from "./lib/notificationTypes";
 
@@ -32,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";
@@ -50,17 +49,6 @@ const PROXY_PORT = params.get("proxyPort") ?? "3000";
 const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
 
 const App = () => {
-  // Handle OAuth callback route
-  if (window.location.pathname === "/oauth/callback") {
-    const OAuthCallback = React.lazy(
-      () => import("./components/OAuthCallback"),
-    );
-    return (
-      <Suspense fallback={<div>Loading...</div>}>
-        <OAuthCallback />
-      </Suspense>
-    );
-  }
   const [resources, setResources] = useState<Resource[]>([]);
   const [resourceTemplates, setResourceTemplates] = useState<
     ResourceTemplate[]
@@ -83,14 +71,8 @@ const App = () => {
     return localStorage.getItem("lastArgs") || "";
   });
 
-  const [sseUrl, setSseUrl] = useState<string>(() => {
+  const [sseUrl, setSseUrl] = useState<string>("http://localhost:3001/sse");
-    return localStorage.getItem("lastSseUrl") || "http://localhost:3001/sse";
+  const [transportType, setTransportType] = useState<"stdio" | "sse">("stdio");
-  });
-  const [transportType, setTransportType] = useState<"stdio" | "sse">(() => {
-    return (
-      (localStorage.getItem("lastTransportType") as "stdio" | "sse") || "stdio"
-    );
-  });
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
   const [stdErrNotifications, setStdErrNotifications] = useState<
     StdErrNotification[]
@@ -208,31 +190,6 @@ const App = () => {
     localStorage.setItem("lastArgs", args);
   }, [args]);
 
-  useEffect(() => {
-    localStorage.setItem("lastSseUrl", sseUrl);
-  }, [sseUrl]);
-
-  useEffect(() => {
-    localStorage.setItem("lastTransportType", transportType);
-  }, [transportType]);
-
-  // Auto-connect if serverUrl is provided in URL params (e.g. after OAuth callback)
-  useEffect(() => {
-    const serverUrl = params.get("serverUrl");
-    if (serverUrl) {
-      setSseUrl(serverUrl);
-      setTransportType("sse");
-      // Remove serverUrl from URL without reloading the page
-      const newUrl = new URL(window.location.href);
-      newUrl.searchParams.delete("serverUrl");
-      window.history.replaceState({}, "", newUrl.toString());
-      // Show success toast for OAuth
-      toast.success("Successfully authenticated with OAuth");
-      // Connect to the server
-      connectMcpServer();
-    }
-  }, []);
-
   useEffect(() => {
     fetch(`${PROXY_SERVER_URL}/config`)
       .then((response) => response.json())

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/OAuthCallback.tsx

@@ -1,48 +0,0 @@
-import { useEffect, useRef } from "react";
-import { handleOAuthCallback } from "../lib/auth";
-import { SESSION_KEYS } from "../lib/constants";
-
-const OAuthCallback = () => {
-  const hasProcessedRef = useRef(false);
-
-  useEffect(() => {
-    const handleCallback = async () => {
-      // Skip if we've already processed this callback
-      if (hasProcessedRef.current) {
-        return;
-      }
-      hasProcessedRef.current = true;
-
-      const params = new URLSearchParams(window.location.search);
-      const code = params.get("code");
-      const serverUrl = sessionStorage.getItem(SESSION_KEYS.SERVER_URL);
-
-      if (!code || !serverUrl) {
-        console.error("Missing code or server URL");
-        window.location.href = "/";
-        return;
-      }
-
-      try {
-        const accessToken = await handleOAuthCallback(serverUrl, code);
-        // Store the access token for future use
-        sessionStorage.setItem(SESSION_KEYS.ACCESS_TOKEN, accessToken);
-        // Redirect back to the main app with server URL to trigger auto-connect
-        window.location.href = `/?serverUrl=${encodeURIComponent(serverUrl)}`;
-      } catch (error) {
-        console.error("OAuth callback error:", error);
-        window.location.href = "/";
-      }
-    };
-
-    void handleCallback();
-  }, []);
-
-  return (
-    <div className="flex items-center justify-center h-screen">
-      <p className="text-lg text-gray-500">Processing OAuth callback...</p>
-    </div>
-  );
-};
-
-export default OAuthCallback;

client/src/components/ToolsTab.tsx

@@ -87,20 +87,11 @@ const ToolsTab = ({
                   className="max-w-full h-auto"
                 />
               )}
-              {item.type === "resource" &&
+              {item.type === "resource" && (
-                (item.resource?.mimeType?.startsWith("audio/") ? (
+                <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">
-                  <audio
+                  {JSON.stringify(item.resource, null, 2)}
-                    controls
+                </pre>
-                    src={`data:${item.resource.mimeType};base64,${item.resource.blob}`}
+              )}
-                    className="w-full"
-                  >
-                    <p>Your browser does not support audio playback</p>
-                  </audio>
-                ) : (
-                  <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>
-                ))}
             </div>
           ))}
         </>

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/auth.ts

@@ -1,93 +0,0 @@
-import pkceChallenge from "pkce-challenge";
-import { SESSION_KEYS } from "./constants";
-
-export interface OAuthMetadata {
-  authorization_endpoint: string;
-  token_endpoint: string;
-}
-
-export async function discoverOAuthMetadata(
-  serverUrl: string,
-): Promise<OAuthMetadata> {
-  try {
-    const url = new URL("/.well-known/oauth-authorization-server", serverUrl);
-    const response = await fetch(url.toString());
-
-    if (response.ok) {
-      const metadata = await response.json();
-      return {
-        authorization_endpoint: metadata.authorization_endpoint,
-        token_endpoint: metadata.token_endpoint,
-      };
-    }
-  } catch (error) {
-    console.warn("OAuth metadata discovery failed:", error);
-  }
-
-  // Fall back to default endpoints
-  const baseUrl = new URL(serverUrl);
-  return {
-    authorization_endpoint: new URL("/authorize", baseUrl).toString(),
-    token_endpoint: new URL("/token", baseUrl).toString(),
-  };
-}
-
-export async function startOAuthFlow(serverUrl: string): Promise<string> {
-  // Generate PKCE challenge
-  const challenge = await pkceChallenge();
-  const codeVerifier = challenge.code_verifier;
-  const codeChallenge = challenge.code_challenge;
-
-  // Store code verifier for later use
-  sessionStorage.setItem(SESSION_KEYS.CODE_VERIFIER, codeVerifier);
-
-  // Discover OAuth endpoints
-  const metadata = await discoverOAuthMetadata(serverUrl);
-
-  // Build authorization URL
-  const authUrl = new URL(metadata.authorization_endpoint);
-  authUrl.searchParams.set("response_type", "code");
-  authUrl.searchParams.set("code_challenge", codeChallenge);
-  authUrl.searchParams.set("code_challenge_method", "S256");
-  authUrl.searchParams.set(
-    "redirect_uri",
-    window.location.origin + "/oauth/callback",
-  );
-
-  return authUrl.toString();
-}
-
-export async function handleOAuthCallback(
-  serverUrl: string,
-  code: string,
-): Promise<string> {
-  // Get stored code verifier
-  const codeVerifier = sessionStorage.getItem(SESSION_KEYS.CODE_VERIFIER);
-  if (!codeVerifier) {
-    throw new Error("No code verifier found");
-  }
-
-  // Discover OAuth endpoints
-  const metadata = await discoverOAuthMetadata(serverUrl);
-
-  // Exchange code for tokens
-  const response = await fetch(metadata.token_endpoint, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      grant_type: "authorization_code",
-      code,
-      code_verifier: codeVerifier,
-      redirect_uri: window.location.origin + "/oauth/callback",
-    }),
-  });
-
-  if (!response.ok) {
-    throw new Error("Token exchange failed");
-  }
-
-  const data = await response.json();
-  return data.access_token;
-}

client/src/lib/constants.ts

@@ -1,6 +0,0 @@
-// OAuth-related session storage keys
-export const SESSION_KEYS = {
-  CODE_VERIFIER: "mcp_code_verifier",
-  SERVER_URL: "mcp_server_url",
-  ACCESS_TOKEN: "mcp_access_token",
-} as const;

client/src/lib/hooks/useConnection.ts

@@ -1,8 +1,5 @@
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import {
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
-  SSEClientTransport,
-  SseError,
-} from "@modelcontextprotocol/sdk/client/sse.js";
 import {
   ClientNotification,
   ClientRequest,
@@ -15,10 +12,8 @@ import {
 } from "@modelcontextprotocol/sdk/types.js";
 import { useState } from "react";
 import { toast } from "react-toastify";
-import { z } from "zod";
-import { startOAuthFlow } from "../auth";
-import { SESSION_KEYS } from "../constants";
 import { Notification, StdErrNotificationSchema } from "../notificationTypes";
+import { z } from "zod";
 
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
@@ -149,20 +144,7 @@ export function useConnection({
         backendUrl.searchParams.append("url", sseUrl);
       }
 
-      const headers: HeadersInit = {};
+      const clientTransport = new SSEClientTransport(backendUrl);
-      const accessToken = sessionStorage.getItem(SESSION_KEYS.ACCESS_TOKEN);
-      if (accessToken) {
-        headers["Authorization"] = `Bearer ${accessToken}`;
-      }
-
-      const clientTransport = new SSEClientTransport(backendUrl, {
-        eventSourceInit: {
-          fetch: (url, init) => fetch(url, { ...init, headers }),
-        },
-        requestInit: {
-          headers,
-        },
-      });
 
       if (onNotification) {
         client.setNotificationHandler(
@@ -178,20 +160,7 @@ export function useConnection({
         );
       }
 
-      try {
+      await client.connect(clientTransport);
-        await client.connect(clientTransport);
-      } catch (error) {
-        console.error("Failed to connect to MCP server:", error);
-        if (error instanceof SseError && error.code === 401) {
-          // Store the server URL for the callback handler
-          sessionStorage.setItem(SESSION_KEYS.SERVER_URL, sseUrl);
-          const redirectUrl = await startOAuthFlow(sseUrl);
-          window.location.href = redirectUrl;
-          return;
-        }
-
-        throw error;
-      }
 
       const capabilities = client.getServerCapabilities();
       setServerCapabilities(capabilities ?? null);

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/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,
@@ -26,5 +27,5 @@
     "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

@@ -1,11 +1,10 @@
-import react from "@vitejs/plugin-react";
 import path from "path";
 import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  server: {},
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),

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-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.4.0",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@modelcontextprotocol/inspector",
-      "version": "0.4.0",
+      "version": "0.3.0",
       "license": "MIT",
       "workspaces": [
         "client",
@@ -31,10 +31,10 @@
     },
     "client": {
       "name": "@modelcontextprotocol/inspector-client",
-      "version": "0.4.0",
+      "version": "0.3.0",
       "license": "MIT",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.4.1",
+        "@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",
@@ -43,7 +43,6 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "lucide-react": "^0.447.0",
-        "pkce-challenge": "^4.1.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-toastify": "^10.0.6",
@@ -1206,31 +1205,13 @@
       "link": true
     },
     "node_modules/@modelcontextprotocol/sdk": {
-      "version": "1.4.1",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.0.3.tgz",
-      "integrity": "sha512-wS6YC4lkUZ9QpP+/7NBTlVNiEvsnyl0xF7rRusLF+RsG0xDPc/zWR7fEEyhKnnNutGsDAZh59l/AeoWGwIb1+g==",
+      "integrity": "sha512-2as3cX/VJ0YBHGmdv3GFyTpoM8q2gqE98zh3Vf1NwnsSY0h3mvoO07MUzfygCKkWsFjcZm4otIiqD6Xh7kiSBQ==",
-      "license": "MIT",
       "dependencies": {
         "content-type": "^1.0.5",
-        "eventsource": "^3.0.2",
         "raw-body": "^3.0.0",
-        "zod": "^3.23.8",
+        "zod": "^3.23.8"
-        "zod-to-json-schema": "^3.24.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/eventsource": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.2.tgz",
-      "integrity": "sha512-YolzkJNxsTL3tCJMWFxpxtG2sCjbZ4LQUBUrkdaJK0ub0p6lmJt+2+1SwhKjLc652lpH9L/79Ptez972H9tphw==",
-      "license": "MIT",
-      "dependencies": {
-        "eventsource-parser": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
       }
     },
     "node_modules/@nodelib/fs.scandir": {
@@ -2276,6 +2257,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/eventsource": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@types/eventsource/-/eventsource-1.1.15.tgz",
+      "integrity": "sha512-XQmGcbnxUNa06HR3VBVkc9+A2Vpi9ZyLJcdS5dwaQQ/4ZMWFO+5c90FnMUpbtMZwB/FChoYHwuVg8TvkECacTA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/express": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
@@ -3700,13 +3688,13 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/eventsource-parser": {
+    "node_modules/eventsource": {
-      "version": "3.0.0",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
-      "integrity": "sha512-T1C0XCUimhxVQzW4zFipdx0SficT651NnkR0ZSH3yQwh+mFMdLfgjABVi4YtMTtaL4s168593DaoaRLMqryavA==",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
       "license": "MIT",
       "engines": {
-        "node": ">=18.0.0"
+        "node": ">=12.0.0"
       }
     },
     "node_modules/express": {
@@ -4947,15 +4935,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/pkce-challenge": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-4.1.0.tgz",
-      "integrity": "sha512-ZBmhE1C9LcPoH9XZSdwiPtbPHZROwAnMy+kIFQVrnMCxY4Cudlz3gBOpzilgc0jOgRaiT3sIWfpMomW2ar2orQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=16.20.0"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
@@ -6300,9 +6279,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.12",
+      "version": "5.4.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
-      "integrity": "sha512-KwUaKB27TvWwDJr1GjjWthLMATbGEbeWYZIbGZ5qFIsgPP3vWzLu4cVooqhm5/Z2SPDUMjyPVjTztm5tYKwQxA==",
+      "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6948,30 +6927,22 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.24.1",
+      "version": "3.23.8",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
-      "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
-    "node_modules/zod-to-json-schema": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.1.tgz",
-      "integrity": "sha512-3h08nf3Vw3Wl3PK+q3ow/lIil81IT2Oa7YpQyUUDsEWbXveMesdfK1xBd2RhCkynwZndAxixji/7SYJJowr62w==",
-      "license": "ISC",
-      "peerDependencies": {
-        "zod": "^3.24.1"
-      }
-    },
     "server": {
       "name": "@modelcontextprotocol/inspector-server",
-      "version": "0.4.0",
+      "version": "0.3.0",
       "license": "MIT",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.4.1",
+        "@modelcontextprotocol/sdk": "^1.0.3",
         "cors": "^2.8.5",
+        "eventsource": "^2.0.2",
         "express": "^4.21.0",
         "ws": "^8.18.0",
         "zod": "^3.23.8"
@@ -6981,6 +6952,7 @@
       },
       "devDependencies": {
         "@types/cors": "^2.8.17",
+        "@types/eventsource": "^1.1.15",
         "@types/express": "^4.17.21",
         "@types/ws": "^8.5.12",
         "tsx": "^4.19.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.4.0",
+  "version": "0.3.0",
   "description": "Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-server",
-  "version": "0.4.0",
+  "version": "0.3.0",
   "description": "Server-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -20,14 +20,16 @@
   },
   "devDependencies": {
     "@types/cors": "^2.8.17",
+    "@types/eventsource": "^1.1.15",
     "@types/express": "^4.17.21",
     "@types/ws": "^8.5.12",
     "tsx": "^4.19.0",
     "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.4.1",
+    "@modelcontextprotocol/sdk": "^1.0.3",
     "cors": "^2.8.5",
+    "eventsource": "^2.0.2",
     "express": "^4.21.0",
     "ws": "^8.18.0",
     "zod": "^3.23.8"

server/src/index.ts

@@ -1,29 +1,29 @@
 #!/usr/bin/env node
 
 import cors from "cors";
+import EventSource from "eventsource";
 import { parseArgs } from "node:util";
 import { parse as shellParseArgs } from "shell-quote";
 
-import {
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
-  SSEClientTransport,
-  SseError,
-} from "@modelcontextprotocol/sdk/client/sse.js";
 import {
   StdioClientTransport,
   getDefaultEnvironment,
 } from "@modelcontextprotocol/sdk/client/stdio.js";
 import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import express from "express";
-import { findActualExecutable } from "spawn-rx";
 import mcpProxy from "./mcpProxy.js";
-
+import { findActualExecutable } from "spawn-rx";
-const SSE_HEADERS_PASSTHROUGH = ["authorization"];
 
 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
+(global as any).EventSource = EventSource;
+
 const { values } = parseArgs({
   args: process.argv.slice(2),
   options: {
@@ -37,8 +37,7 @@ app.use(cors());
 
 let webAppTransports: SSEServerTransport[] = [];
 
-const createTransport = async (req: express.Request) => {
+const createTransport = async (query: express.Request["query"]) => {
-  const query = req.query;
   console.log("Query parameters:", query);
 
   const transportType = query.transportType as string;
@@ -66,26 +65,9 @@ const createTransport = async (req: express.Request) => {
     return transport;
   } else if (transportType === "sse") {
     const url = query.url as string;
-    const headers: HeadersInit = {};
+    console.log(`SSE transport: url=${url}`);
-    for (const key of SSE_HEADERS_PASSTHROUGH) {
-      if (req.headers[key] === undefined) {
-        continue;
-      }
 
-      const value = req.headers[key];
+    const transport = new SSEClientTransport(new URL(url));
-      headers[key] = Array.isArray(value) ? value[value.length - 1] : value;
-    }
-
-    console.log(`SSE transport: url=${url}, headers=${Object.keys(headers)}`);
-
-    const transport = new SSEClientTransport(new URL(url), {
-      eventSourceInit: {
-        fetch: (url, init) => fetch(url, { ...init, headers }),
-      },
-      requestInit: {
-        headers,
-      },
-    });
     await transport.start();
 
     console.log("Connected to SSE transport");
@@ -100,21 +82,7 @@ app.get("/sse", async (req, res) => {
   try {
     console.log("New SSE connection");
 
-    let backingServerTransport;
+    const backingServerTransport = await createTransport(req.query);
-    try {
-      backingServerTransport = await createTransport(req);
-    } catch (error) {
-      if (error instanceof SseError && error.code === 401) {
-        console.error(
-          "Received 401 Unauthorized from MCP server:",
-          error.message,
-        );
-        res.status(401).json(error);
-        return;
-      }
-
-      throw error;
-    }
 
     console.log("Connected MCP client to backing server transport");
 
@@ -141,6 +109,9 @@ app.get("/sse", async (req, res) => {
     mcpProxy({
       transportToClient: webAppTransport,
       transportToServer: backingServerTransport,
+      onerror: (error) => {
+        console.error(error);
+      },
     });
 
     console.log("Set up MCP proxy");

server/src/mcpProxy.ts

@@ -1,29 +1,23 @@
 import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
 
-function onClientError(error: Error) {
-  console.error("Error from inspector client:", error);
-}
-
-function onServerError(error: Error) {
-  console.error("Error from MCP server:", error);
-}
-
 export default function mcpProxy({
   transportToClient,
   transportToServer,
+  onerror,
 }: {
   transportToClient: Transport;
   transportToServer: Transport;
+  onerror: (error: Error) => void;
 }) {
   let transportToClientClosed = false;
   let transportToServerClosed = false;
 
   transportToClient.onmessage = (message) => {
-    transportToServer.send(message).catch(onServerError);
+    transportToServer.send(message).catch(onerror);
   };
 
   transportToServer.onmessage = (message) => {
-    transportToClient.send(message).catch(onClientError);
+    transportToClient.send(message).catch(onerror);
   };
 
   transportToClient.onclose = () => {
@@ -32,7 +26,7 @@ export default function mcpProxy({
     }
 
     transportToClientClosed = true;
-    transportToServer.close().catch(onServerError);
+    transportToServer.close().catch(onerror);
   };
 
   transportToServer.onclose = () => {
@@ -40,9 +34,10 @@ export default function mcpProxy({
       return;
     }
     transportToServerClosed = true;
-    transportToClient.close().catch(onClientError);
+
+    transportToClient.close().catch(onerror);
   };
 
-  transportToClient.onerror = onClientError;
+  transportToClient.onerror = onerror;
-  transportToServer.onerror = onServerError;
+  transportToServer.onerror = onerror;
 }