[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

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<FeatureCardProps> = ({
@@ -61,6 +62,7 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
   description,
   children,
   serverName,
+  accessGroups = ["dev"],
 }) => {
   const [useServerHeader, setUseServerHeader] = useState(false);
 
@@ -68,14 +70,11 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
     const headers: Record<string, any> = {
       "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<FeatureCardProps> = ({
         </div>
       </div>
       {serverName && (title === "Implementation Example" || title === "Configuration") && (
-        <Form.Item
-          className="mb-4"
-        >
+        <Form.Item className="mb-4">
           <div className="flex items-center gap-2 mb-2">
             <Switch
               size="small"
@@ -110,12 +107,16 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
               message="MCP Server Header Format"
               description={
                 <div>
-                  <p>Specify one or more MCP servers using a comma-separated list:</p>
+                  <p>Specify one or more MCP servers using a comma-separated list inside an array:</p>
                   <ul>
-                    <li><strong>Single server:</strong> "Server1"</li>
-                    <li><strong>Multiple servers:</strong> "Server1,Server2,Server3"</li>
+                    <li><strong>Single server:</strong> ["Server1"]</li>
+                    <li><strong>Multiple servers:</strong> ["Server1,Server2,Server3"]</li>
                   </ul>
                   <p>Note: Server names with spaces will be automatically converted to use underscores.</p>
+                    <div className="mt-2">
+                      <b>New:</b> You can also restrict by access group(s) using the <code>x-mcp-access-groups</code> header:<br />
+                      <code>"x-mcp-access-groups": ["{accessGroups.join(",")}"]</code>
+                    </div>
                 </div>
               }
             />
@@ -142,7 +143,11 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
   );
 };
 
-const MCPConnect: React.FC = () => {
+interface MCPConnectProps {
+  currentServerAccessGroups?: string[];
+}
+
+const MCPConnect: React.FC<MCPConnectProps> = ({ currentServerAccessGroups = [] }) => {
   const proxyBaseUrl = getProxyBaseUrl();
   const [copiedStates, setCopiedStates] = useState<Record<string, boolean>>({});
   const [serverHeaders, setServerHeaders] = useState<Record<string, string[]>>({
@@ -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"]}
         >
           <CodeBlock
             code={`curl --location '${proxyBaseUrl}/v1/responses' \\
@@ -293,7 +299,9 @@ const MCPConnect: React.FC = () => {
             "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"]}
         >
           <CodeBlock
             code={`curl --location 'https://api.openai.com/v1/responses' \\
@@ -379,7 +388,9 @@ const MCPConnect: React.FC = () => {
             "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"]}
             >
               <CodeBlock
                 code={`{
   "mcpServers": {
-    "LiteLLM": {
-      "url": "${proxyBaseUrl}/mcp",
+    "Zapier_MCP": {
+      "server_url": "${proxyBaseUrl}/mcp",
       "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"]
       }
     }
   }
 }`}
                 copyKey="cursor-config"
+                className="text-xs"
               />
             </FeatureCard>
           </StepCard>