diff --git a/README.md b/README.md index 31c7535..ca29ca2 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 0734ea9..3b50ab1 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 4f99ffd..5964bd8 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 3fcbf8e..bd7ef64 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 2ddb18d..c736558 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} + />