Upgrade NPM packages

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)",
@@ -21,7 +21,7 @@
     "preview": "vite preview"
   },
   "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 +30,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",

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 { useConnection } from "./lib/hooks/useConnection";
-import { useDraggablePane } from "./lib/hooks/useDraggablePane";
+import { useEffect, useRef, useState } from "react";
 
 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>(() => {
-    return localStorage.getItem("lastSseUrl") || "http://localhost:3001/sse";
-  });
-  const [transportType, setTransportType] = useState<"stdio" | "sse">(() => {
-    return (
-      (localStorage.getItem("lastTransportType") as "stdio" | "sse") || "stdio"
-    );
-  });
+  const [sseUrl, setSseUrl] = useState<string>("http://localhost:3001/sse");
+  const [transportType, setTransportType] = useState<"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/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.resource?.mimeType?.startsWith("audio/") ? (
-                  <audio
-                    controls
-                    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>
-                ))}
+              {item.type === "resource" && (
+                <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/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 {
-  SSEClientTransport,
-  SseError,
-} from "@modelcontextprotocol/sdk/client/sse.js";
+import { SSEClientTransport } 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 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,
-        },
-      });
+      const clientTransport = new SSEClientTransport(backendUrl);
 
       if (onNotification) {
         client.setNotificationHandler(
@@ -178,20 +160,7 @@ export function useConnection({
         );
       }
 
-      try {
-        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;
-      }
+      await client.connect(clientTransport);
 
       const capabilities = client.getServerCapabilities();
       setServerCapabilities(capabilities ?? null);

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"),

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 {
-  SSEClientTransport,
-  SseError,
-} from "@modelcontextprotocol/sdk/client/sse.js";
+import { SSEClientTransport } 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";
-
-const SSE_HEADERS_PASSTHROUGH = ["authorization"];
+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
+(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 query = req.query;
+const createTransport = async (query: express.Request["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 = {};
-    for (const key of SSE_HEADERS_PASSTHROUGH) {
-      if (req.headers[key] === undefined) {
-        continue;
-      }
+    console.log(`SSE transport: url=${url}`);
 
-      const value = req.headers[key];
-      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,
-      },
-    });
+    const transport = new SSEClientTransport(new URL(url));
     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;
-    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;
-    }
+    const backingServerTransport = await createTransport(req.query);
 
     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;
-  transportToServer.onerror = onServerError;
+  transportToClient.onerror = onerror;
+  transportToServer.onerror = onerror;
 }