[Feat] UI - Allow setting MCP servers when creating keys, teams (#11711)

* Add PremiumMCPSelector

* add PremiumMCPSelector

* Fix CTA enterprise

ui/litellm-dashboard/src/components/common_components/PremiumMCPSelector.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Text } from "@tremor/react";
+import MCPServerSelector from "../mcp_server_management/MCPServerSelector";
+
+interface PremiumMCPSelectorProps {
+  onChange: (values: string[]) => void;
+  value: string[];
+  accessToken: string;
+  placeholder?: string;
+  premiumUser?: boolean;
+}
+
+export function PremiumMCPSelector({
+  onChange,
+  value,
+  accessToken,
+  placeholder = "Select MCP servers",
+  premiumUser = false
+}: PremiumMCPSelectorProps) {
+  if (!premiumUser) {
+    return (
+      <div>
+        <div className="flex flex-wrap gap-2 mb-3">
+          <div className="inline-flex items-center px-3 py-1.5 rounded-lg bg-purple-50 border border-purple-200 text-purple-800 text-sm font-medium opacity-50">
+            ✨ premium-mcp-server-1
+          </div>
+          <div className="inline-flex items-center px-3 py-1.5 rounded-lg bg-purple-50 border border-purple-200 text-purple-800 text-sm font-medium opacity-50">
+            ✨ premium-mcp-server-2
+          </div>
+        </div>
+        <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+          <Text className="text-sm text-yellow-800">
+            MCP server access control is a LiteLLM Enterprise feature. Get a trial key <a href="https://www.litellm.ai/#pricing" target="_blank" rel="noopener noreferrer" className="underline">here</a>.
+          </Text>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <MCPServerSelector
+      onChange={onChange}
+      value={value}
+      accessToken={accessToken}
+      placeholder={placeholder}
+    />
+  );
+}
+
+export default PremiumMCPSelector; 

ui/litellm-dashboard/src/components/common_components/PremiumVectorStoreSelector.tsx

@@ -30,7 +30,7 @@ export function PremiumVectorStoreSelector({
         </div>
         <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
           <Text className="text-sm text-yellow-800">
-            Vector store access control is a LiteLLM Enterprise feature. Get a trial key <a href="https://litellm.ai/pricing" target="_blank" rel="noopener noreferrer" className="underline">here</a>.
+            Vector store access control is a LiteLLM Enterprise feature. Get a trial key <a href="https://www.litellm.ai/#pricing" target="_blank" rel="noopener noreferrer" className="underline">here</a>.
           </Text>
         </div>
       </div>

ui/litellm-dashboard/src/components/create_key_button.tsx

@@ -35,6 +35,7 @@ import {
 } from "./networking";
 import VectorStoreSelector from "./vector_store_management/VectorStoreSelector";
 import PremiumVectorStoreSelector from "./common_components/PremiumVectorStoreSelector";
+import PremiumMCPSelector from "./common_components/PremiumMCPSelector";
 import { Team } from "./key_team_helpers/key_list";
 import TeamDropdown from "./common_components/team_dropdown";
 import { InfoCircleOutlined } from '@ant-design/icons';
@@ -268,7 +269,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
         formValues.metadata = JSON.stringify(metadata);
       }
 
-      // Transform allowed_vector_store_ids into object_permission format
+      // Transform allowed_vector_store_ids and allowed_mcp_server_ids into object_permission format
       if (formValues.allowed_vector_store_ids && formValues.allowed_vector_store_ids.length > 0) {
         formValues.object_permission = {
           vector_stores: formValues.allowed_vector_store_ids
@@ -277,6 +278,16 @@ const CreateKey: React.FC<CreateKeyProps> = ({
         delete formValues.allowed_vector_store_ids;
       }
 
+      // Transform allowed_mcp_server_ids into object_permission format
+      if (formValues.allowed_mcp_server_ids && formValues.allowed_mcp_server_ids.length > 0) {
+        if (!formValues.object_permission) {
+          formValues.object_permission = {};
+        }
+        formValues.object_permission.mcp_servers = formValues.allowed_mcp_server_ids;
+        // Remove the original field as it's now part of object_permission
+        delete formValues.allowed_mcp_server_ids;
+      }
+
       const response = await keyCreateCall(accessToken, userID, formValues);
 
       console.log("key create Response:", response);
@@ -711,6 +722,28 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                       />
                     </Form.Item>
 
+                <Form.Item 
+                      label={
+                        <span>
+                          Allowed MCP Servers{' '}
+                          <Tooltip title="Select which MCP servers this key can access. If none selected, the key will have access to all available MCP servers">
+                            <InfoCircleOutlined style={{ marginLeft: '4px' }} />
+                          </Tooltip>
+                        </span>
+                      } 
+                      name="allowed_mcp_server_ids" 
+                      className="mt-4"
+                      help="Select MCP servers this key can access. Leave empty for access to all MCP servers"
+                    >
+                      <PremiumMCPSelector
+                        onChange={(values) => form.setFieldValue('allowed_mcp_server_ids', values)}
+                        value={form.getFieldValue('allowed_mcp_server_ids')}
+                        accessToken={accessToken}
+                        placeholder="Select MCP servers (optional)"
+                        premiumUser={premiumUser}
+                      />
+                    </Form.Item>
+
                 <Form.Item 
                   label={
                     <span>

ui/litellm-dashboard/src/components/organizations.tsx

@@ -135,7 +135,7 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
   if (!premiumUser) {
     return (
       <div>
-        <Text>This is a LiteLLM Enterprise feature, and requires a valid key to use. Get a trial key <a href="https://litellm.ai/pricing" target="_blank" rel="noopener noreferrer">here</a>.</Text>
+        <Text>This is a LiteLLM Enterprise feature, and requires a valid key to use. Get a trial key <a href="https://www.litellm.ai/#pricing" target="_blank" rel="noopener noreferrer">here</a>.</Text>
       </div>
     );
   }

ui/litellm-dashboard/src/components/teams.tsx

@@ -59,6 +59,7 @@ import { CogIcon } from "@heroicons/react/outline";
 import AvailableTeamsPanel from "@/components/team/available_teams";
 import VectorStoreSelector from "./vector_store_management/VectorStoreSelector";
 import PremiumVectorStoreSelector from "./common_components/PremiumVectorStoreSelector";
+import PremiumMCPSelector from "./common_components/PremiumMCPSelector";
 import type { KeyResponse, Team } from "./key_team_helpers/key_list";
 
 interface TeamProps {
@@ -324,13 +325,22 @@ const Teams: React.FC<TeamProps> = ({
         }
 
         message.info("Creating Team");
-        // Transform allowed_vector_store_ids into object_permission
+        // Transform allowed_vector_store_ids and allowed_mcp_server_ids into object_permission
         if (formValues.allowed_vector_store_ids && formValues.allowed_vector_store_ids.length > 0) {
           formValues.object_permission = {
             vector_stores: formValues.allowed_vector_store_ids
           };
           delete formValues.allowed_vector_store_ids;
         }
+
+        // Transform allowed_mcp_server_ids into object_permission
+        if (formValues.allowed_mcp_server_ids && formValues.allowed_mcp_server_ids.length > 0) {
+          if (!formValues.object_permission) {
+            formValues.object_permission = {};
+          }
+          formValues.object_permission.mcp_servers = formValues.allowed_mcp_server_ids;
+          delete formValues.allowed_mcp_server_ids;
+        }
         const response: any = await teamCreateCall(accessToken, formValues);
         if (teams !== null) {
           setTeams([...teams, response]);
@@ -1093,6 +1103,27 @@ const Teams: React.FC<TeamProps> = ({
                               premiumUser={premiumUser}
                             />
                           </Form.Item>
+                          <Form.Item 
+                            label={
+                              <span>
+                                Allowed MCP Servers{' '}
+                                <Tooltip title="Select which MCP servers this team can access by default. Leave empty for access to all MCP servers">
+                                  <InfoCircleOutlined style={{ marginLeft: '4px' }} />
+                                </Tooltip>
+                              </span>
+                            }
+                            name="allowed_mcp_server_ids"
+                            className="mt-8"
+                            help="Select MCP servers this team can access. Leave empty for access to all MCP servers"
+                          >
+                            <PremiumMCPSelector
+                              onChange={(values) => form.setFieldValue('allowed_mcp_server_ids', values)}
+                              value={form.getFieldValue('allowed_mcp_server_ids')}
+                              accessToken={accessToken || ''}
+                              placeholder="Select MCP servers (optional)"
+                              premiumUser={premiumUser}
+                            />
+                          </Form.Item>
                         </AccordionBody>
                       </Accordion>
                     </>

ui/litellm-dashboard/src/components/view_logs/audit_logs.tsx

@@ -390,7 +390,7 @@ export default function AuditLogs({
   if (!premiumUser) {
     return (
       <div>
-        <Text>This is a LiteLLM Enterprise feature, and requires a valid key to use. Get a trial key <a href="https://litellm.ai/pricing" target="_blank" rel="noopener noreferrer">here</a>.</Text>
+        <Text>This is a LiteLLM Enterprise feature, and requires a valid key to use. Get a trial key <a href="https://www.litellm.ai/#pricing" target="_blank" rel="noopener noreferrer">here</a>.</Text>
       </div>
     );
   }