From 3a122bc48ee44da36dcd6e09455355bc70611bd9 Mon Sep 17 00:00:00 2001 From: "Jugal D. Bhatt" <55304795+jugaldb@users.noreply.github.com> Date: Sat, 12 Jul 2025 23:12:43 +0530 Subject: [PATCH] [MCP Gateway] UI headers groups example on connect tab (#12550) * added mcp tools on internal user and divide it by teams * add support for server api call * Added frontend for test key * added tools used output * fix ui for servers * All servers to personal * change columns format * revert ui logic * Added vertical align * fix mapped tests * fix lint * fix lint * remove extra file * fix ui test * comments fixes * change query type * change query type * mcp acces group init * add ability to change server display on ui through access groups * Mcp access group names UI (#12486) * Added ui changes to reflect mcp_access_groups * fix edit mcp page * change to string array (#12491) * change to string array * Remove print * add ability to change server display on ui through access groups * Litellm mcp access groups accesses (#12498) * added mcp access groups for keys and teams * added access groups above servers * fixed ruff * fixed mypy * revert couple changes * fix test * fixed double asterisks * Litellm mcp groups UI (#12522) * add ui for teams * fix object permissions * fix mcp servers test object permission * remove print * add helper method * add tests + remove logs * add mcp access group servers to test key * add mcp access group support for headers * lint fix * add tests and helper function * fixed test * change list -> List * tests * added ui for selecting servers --- .../src/components/mcp_tools/mcp_connect.tsx | 51 ++++++++++++------- 1 file changed, 33 insertions(+), 18 deletions(-) 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"]} >