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 89057a6c66..ca02cad96f 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_connect.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_connect.tsx @@ -53,6 +53,7 @@ interface FeatureCardProps { description: string; children: React.ReactNode; serverName?: string; + accessGroups?: string[]; } const FeatureCard: React.FC = ({ @@ -61,6 +62,7 @@ const FeatureCard: React.FC = ({ description, children, serverName, + accessGroups = ["dev"], }) => { const [useServerHeader, setUseServerHeader] = useState(false); @@ -68,14 +70,11 @@ const FeatureCard: React.FC = ({ const headers: Record = { "x-litellm-api-key": "Bearer YOUR_LITELLM_API_KEY" }; - if (useServerHeader && serverName) { - // Replace spaces with underscores in server name const formattedServerName = serverName.replace(/\s+/g, '_'); - // Use simple comma-separated format - headers["x-mcp-servers"] = formattedServerName; + headers["x-mcp-servers"] = [formattedServerName]; + headers["x-mcp-access-groups"] = [accessGroups.join(",")]; } - return headers; }; @@ -91,9 +90,7 @@ const FeatureCard: React.FC = ({ {serverName && (title === "Implementation Example" || title === "Configuration") && ( - +
= ({ message="MCP Server Header Format" description={
-

Specify one or more MCP servers using a comma-separated list:

+

Specify one or more MCP servers using a comma-separated list inside an array:

    -
  • Single server: "Server1"
  • -
  • Multiple servers: "Server1,Server2,Server3"
  • +
  • Single server: ["Server1"]
  • +
  • Multiple servers: ["Server1,Server2,Server3"]

Note: Server names with spaces will be automatically converted to use underscores.

+
+ New: You can also restrict by access group(s) using the x-mcp-access-groups header:
+ "x-mcp-access-groups": ["{accessGroups.join(",")}"] +
} /> @@ -142,7 +143,11 @@ const FeatureCard: React.FC = ({ ); }; -const MCPConnect: React.FC = () => { +interface MCPConnectProps { + currentServerAccessGroups?: string[]; +} + +const MCPConnect: React.FC = ({ currentServerAccessGroups = [] }) => { const proxyBaseUrl = getProxyBaseUrl(); const [copiedStates, setCopiedStates] = useState>({}); const [serverHeaders, setServerHeaders] = useState>({ @@ -176,7 +181,7 @@ const MCPConnect: React.FC = () => { const formattedServers = serverHeaders[type].map(s => s.replace(/\s+/g, '_')); // Use comma-separated format - headers["x-mcp-servers"] = formattedServers.join(','); + headers["x-mcp-servers"] = [formattedServers.join(',')]; } return headers; @@ -279,6 +284,7 @@ const MCPConnect: React.FC = () => { title="Implementation Example" description="Complete cURL example for using the LiteLLM Proxy Responses API" serverName={currentServer} + accessGroups={["dev"]} > { "server_url": "${proxyBaseUrl}/mcp", "require_approval": "never", "headers": { - "x-litellm-api-key": "Bearer YOUR_LITELLM_API_KEY" + "x-litellm-api-key": "Bearer YOUR_LITELLM_API_KEY", + "x-mcp-servers": ["Zapier_MCP"], + "x-mcp-access-groups": ["dev"] } } ], @@ -365,6 +373,7 @@ const MCPConnect: React.FC = () => { title="Implementation Example" description="Complete cURL example for using the Responses API" serverName="Zapier Gmail" + accessGroups={["dev"]} > { "server_url": "${proxyBaseUrl}/mcp", "require_approval": "never", "headers": { - "x-litellm-api-key": "Bearer YOUR_LITELLM_API_KEY" + "x-litellm-api-key": "Bearer YOUR_LITELLM_API_KEY", + "x-mcp-servers": ["Zapier_MCP"], + "x-mcp-access-groups": ["dev"] } } ], @@ -433,19 +444,23 @@ const MCPConnect: React.FC = () => { title="Configuration" description="Cursor MCP configuration" serverName="Zapier Gmail" + accessGroups={["dev"]} >