diff --git a/README.md b/README.md index 31c7535a..ca29ca21 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ For more details on ways to use the inspector, see the [Inspector section of the ### Authentication -The inspector supports bearer token authentication for SSE connections. Enter your token in the UI when connecting to an MCP server, and it will be sent in the Authorization header. +The inspector supports bearer token authentication for SSE connections. Enter your token in the UI when connecting to an MCP server, and it will be sent in the Authorization header. You can override the header name using the input field in the sidebar. ### Security Considerations diff --git a/client/package.json b/client/package.json index 0734ea94..3b50ab1d 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "@modelcontextprotocol/inspector-client", - "version": "0.8.2", + "version": "0.9.0", "description": "Client-side application for the Model Context Protocol inspector", "license": "MIT", "author": "Anthropic, PBC (https://anthropic.com)", diff --git a/client/src/App.tsx b/client/src/App.tsx index 4f99ffd4..5964bd84 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -117,6 +117,10 @@ const App = () => { return localStorage.getItem("lastBearerToken") || ""; }); + const [headerName, setHeaderName] = useState(() => { + return localStorage.getItem("lastHeaderName") || ""; + }); + const [pendingSampleRequests, setPendingSampleRequests] = useState< Array< PendingRequest & { @@ -169,6 +173,7 @@ const App = () => { sseUrl, env, bearerToken, + headerName, config, onNotification: (notification) => { setNotifications((prev) => [...prev, notification as ServerNotification]); @@ -208,6 +213,10 @@ const App = () => { localStorage.setItem("lastBearerToken", bearerToken); }, [bearerToken]); + useEffect(() => { + localStorage.setItem("lastHeaderName", headerName); + }, [headerName]); + useEffect(() => { localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config)); }, [config]); @@ -467,6 +476,10 @@ const App = () => { setLogLevel(level); }; + const clearStdErrNotifications = () => { + setStdErrNotifications([]); + }; + if (window.location.pathname === "/oauth/callback") { const OAuthCallback = React.lazy( () => import("./components/OAuthCallback"), @@ -496,12 +509,15 @@ const App = () => { setConfig={setConfig} bearerToken={bearerToken} setBearerToken={setBearerToken} + headerName={headerName} + setHeaderName={setHeaderName} onConnect={connectMcpServer} onDisconnect={disconnectMcpServer} stdErrNotifications={stdErrNotifications} logLevel={logLevel} sendLogLevelRequest={sendLogLevelRequest} loggingSupported={!!serverCapabilities?.logging || false} + clearStdErrNotifications={clearStdErrNotifications} />
diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx index 3fcbf8e2..bd7ef647 100644 --- a/client/src/components/JsonView.tsx +++ b/client/src/components/JsonView.tsx @@ -227,7 +227,7 @@ const JsonNode = memo( )}
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 2ddb18d7..c736558c 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -51,9 +51,12 @@ interface SidebarProps {
   setEnv: (env: Record) => void;
   bearerToken: string;
   setBearerToken: (token: string) => void;
+  headerName?: string;
+  setHeaderName?: (name: string) => void;
   onConnect: () => void;
   onDisconnect: () => void;
   stdErrNotifications: StdErrNotification[];
+  clearStdErrNotifications: () => void;
   logLevel: LoggingLevel;
   sendLogLevelRequest: (level: LoggingLevel) => void;
   loggingSupported: boolean;
@@ -75,9 +78,12 @@ const Sidebar = ({
   setEnv,
   bearerToken,
   setBearerToken,
+  headerName,
+  setHeaderName,
   onConnect,
   onDisconnect,
   stdErrNotifications,
+  clearStdErrNotifications,
   logLevel,
   sendLogLevelRequest,
   loggingSupported,
@@ -174,6 +180,7 @@ const Sidebar = ({
                   variant="outline"
                   onClick={() => setShowBearerToken(!showBearerToken)}
                   className="flex items-center w-full"
+                  data-testid="auth-button"
                   aria-expanded={showBearerToken}
                 >
                   {showBearerToken ? (
@@ -185,6 +192,16 @@ const Sidebar = ({
                 
                 {showBearerToken && (
                   
+ + + setHeaderName && setHeaderName(e.target.value) + } + data-testid="header-input" + className="font-mono" + value={headerName} + />