set header name

client/src/App.tsx

@@ -108,8 +108,13 @@ const App = () => {
   const [bearerToken, setBearerToken] = useState<string>(() => {
     return localStorage.getItem("lastBearerToken") || "";
   });
+  
+  const [headerName, setHeaderName] = useState<string>(() => {
+    return localStorage.getItem("lastHeaderName") || "Authorization";
+  });
 
   const [pendingSampleRequests, setPendingSampleRequests] = useState<
+
     Array<
       PendingRequest & {
         resolve: (result: CreateMessageResult) => void;
@@ -161,6 +166,7 @@ const App = () => {
     sseUrl,
     env,
     bearerToken,
+    headerName,
     proxyServerUrl: getMCPProxyAddress(config),
     requestTimeout: getMCPServerRequestTimeout(config),
     onNotification: (notification) => {
@@ -201,6 +207,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]);
@@ -476,6 +486,8 @@ const App = () => {
         setConfig={setConfig}
         bearerToken={bearerToken}
         setBearerToken={setBearerToken}
+        headerName={headerName}
+        setHeaderName={setHeaderName}
         onConnect={connectMcpServer}
         onDisconnect={disconnectMcpServer}
         stdErrNotifications={stdErrNotifications}

client/src/components/Sidebar.tsx

@@ -51,6 +51,8 @@ interface SidebarProps {
   setEnv: (env: Record<string, string>) => void;
   bearerToken: string;
   setBearerToken: (token: string) => void;
+  headerName?: string;
+  setHeaderName?: (name: string) => void;
   onConnect: () => void;
   onDisconnect: () => void;
   stdErrNotifications: StdErrNotification[];
@@ -75,6 +77,8 @@ const Sidebar = ({
   setEnv,
   bearerToken,
   setBearerToken,
+  headerName,
+  setHeaderName,
   onConnect,
   onDisconnect,
   stdErrNotifications,
@@ -167,6 +171,14 @@ const Sidebar = ({
                 </Button>
                 {showBearerToken && (
                   <div className="space-y-2">
+                    <label className="text-sm font-medium">Header Name</label>
+                    <Input
+                      placeholder="Authorization"
+                      defaultValue="Authorization"
+                      onChange={(e) => setHeaderName && setHeaderName(e.target.value)}
+                      className="font-mono"
+                      value={headerName}
+                    />
                     <label className="text-sm font-medium">Bearer Token</label>
                     <Input
                       placeholder="Bearer Token"

client/src/lib/hooks/useConnection.ts

@@ -41,6 +41,7 @@ interface UseConnectionOptions {
   env: Record<string, string>;
   proxyServerUrl: string;
   bearerToken?: string;
+  headerName?: string;
   requestTimeout?: number;
   onNotification?: (notification: Notification) => void;
   onStdErrNotification?: (notification: Notification) => void;
@@ -64,6 +65,7 @@ export function useConnection({
   env,
   proxyServerUrl,
   bearerToken,
+  headerName,
   requestTimeout,
   onNotification,
   onStdErrNotification,
@@ -274,7 +276,8 @@ export function useConnection({
       // Use manually provided bearer token if available, otherwise use OAuth tokens
       const token = bearerToken || (await authProvider.tokens())?.access_token;
       if (token) {
-        headers["Authorization"] = `Bearer ${token}`;
+        const authHeaderName = headerName || "Authorization";
+        headers[authHeaderName] = `${token}`;
       }
 
       const clientTransport = new SSEClientTransport(mcpProxyServerUrl, {