diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx b/ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx index 89aa756cb27..660ca67e6b0 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx @@ -139,7 +139,7 @@ const MCPPermissionManagement: React.FC = ({ label={ Extra Headers - + {mcpServer?.extra_headers && mcpServer.extra_headers.length > 0 && ( @@ -169,7 +169,7 @@ const MCPPermissionManagement: React.FC = ({ label={ Static Headers - + diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_connect.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_connect.tsx index 1c82859e062..57e7cfa53dd 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_connect.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_connect.tsx @@ -35,6 +35,7 @@ const FeatureCard: React.FC = ({ accessGroups = ["dev-group"], }) => { const [useServerHeader, setUseServerHeader] = useState(false); + const [useServerAuth, setUseServerAuth] = useState(false); const getHeadersConfig = () => { const headers: Record = { @@ -42,10 +43,13 @@ const FeatureCard: React.FC = ({ }; if (useServerHeader && serverName) { const formattedServerName = serverName.replace(/\s+/g, "_"); - // Include both server name and access groups in the same header (comma-separated string) const serverAndGroups = [formattedServerName, ...accessGroups].join(","); headers["x-mcp-servers"] = serverAndGroups; } + if (useServerAuth && serverName) { + const alias = serverName.replace(/\s+/g, "_").toLowerCase(); + headers[`x-mcp-${alias}-authorization`] = "Bearer YOUR_SERVER_AUTH_TOKEN"; + } return headers; }; @@ -61,35 +65,70 @@ const FeatureCard: React.FC = ({ {serverName && (title === "Implementation Example" || title === "Configuration") && ( - -
- - - Limit tools to specific MCP servers or MCP groups by passing the x-mcp-servers header - -
- {useServerHeader && ( - -

- Option 1: Get a specific server: "{serverName.replace(/\s+/g, "_")}" -

-

- Option 2: Get a group of MCPs: "dev-group" -

-

- You can also mix both: "Server1,dev-group" -

- - } - /> - )} -
+ <> + +
+ + + Limit tools to specific MCP servers or MCP groups by passing the x-mcp-servers header + +
+ {useServerHeader && ( + +

+ Option 1: Get a specific server: "{serverName.replace(/\s+/g, "_")}" +

+

+ Option 2: Get a group of MCPs: "dev-group" +

+

+ You can also mix both: "Server1,dev-group" +

+ + } + /> + )} +
+ +
+ + + Pass per-server authentication using x-mcp-{alias}-{header} headers + +
+ {useServerAuth && ( + +

+ Format: x-mcp-{server_alias}-{header_name}: value +

+

+ Examples: +

+
    +
  • x-mcp-github-authorization: Bearer ghp_xxx
  • +
  • x-mcp-zapier-x-api-key: sk-xxx
  • +
+

+ Each MCP server can use different auth. The alias is the server's alias in lowercase. +

+ + } + /> + )} +
+ )} {React.Children.map(children, (child) => { if (