feat(ui/): allow user to forward additional headers to the MCP server from the UI

litellm/proxy/schema.prisma

@@ -179,7 +179,6 @@ model LiteLLM_MCPServerTable {
   mcp_info     Json?          @default("{}")
   mcp_access_groups String[]
   allowed_tools String[]      @default([])
-  disallowed_tools String[]    @default([])
   extra_headers String[]    @default([])
   // Health check status
   status       String?        @default("unknown")

ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx

@@ -72,7 +72,7 @@ const MCPPermissionManagement: React.FC<MCPPermissionManagementProps> = ({
             label={
               <span className="text-sm font-medium text-gray-700 flex items-center">
                 Extra Headers
-                <Tooltip title="Specify header names that should be forwarded from incoming requests to this MCP server (e.g., Authorization, X-Custom-Header, User-Agent)">
+                <Tooltip title="Forward custom headers from incoming requests to this MCP server (e.g., Authorization, X-Custom-Header, User-Agent)">
                   <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
                 </Tooltip>
               </span>
@@ -88,48 +88,6 @@ const MCPPermissionManagement: React.FC<MCPPermissionManagementProps> = ({
               allowClear
             />
           </Form.Item>
-
-          <Form.Item
-            label={
-              <span className="text-sm font-medium text-gray-700 flex items-center">
-                Allowed Tools
-                <Tooltip title="Specify which tools are allowed to be called on this MCP server. Leave empty to allow all tools.">
-                  <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                </Tooltip>
-              </span>
-            }
-            name="allowed_tools"
-          >
-            <Select
-              mode="tags"
-              placeholder="Enter tool names (e.g., read_file, write_file)"
-              className="rounded-lg"
-              size="large"
-              tokenSeparators={[","]}
-              allowClear
-            />
-          </Form.Item>
-
-          <Form.Item
-            label={
-              <span className="text-sm font-medium text-gray-700 flex items-center">
-                Disallowed Tools
-                <Tooltip title="Specify which tools are explicitly disallowed on this MCP server. These take precedence over allowed tools.">
-                  <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                </Tooltip>
-              </span>
-            }
-            name="disallowed_tools"
-          >
-            <Select
-              mode="tags"
-              placeholder="Enter tool names to disallow (e.g., delete_file, system_command)"
-              className="rounded-lg"
-              size="large"
-              tokenSeparators={[","]}
-              allowClear
-            />
-          </Form.Item>
         </div>
       </Panel>
     </Collapse>

ui/litellm-dashboard/src/components/mcp_tools/mcp_tool_configuration.tsx

@@ -78,6 +78,14 @@ const MCPToolConfiguration: React.FC<MCPToolConfigurationProps> = ({
             )}
           </div>
         </div>
+        
+        {/* Description */}
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+          <Text className="text-blue-800 text-sm">
+            <strong>Select which tools users can call:</strong> Only checked tools will be available for users to invoke. 
+            Unchecked tools will be blocked from execution.
+          </Text>
+        </div>
 
         {/* Loading state */}
         {isLoadingTools && (
@@ -124,7 +132,7 @@ const MCPToolConfiguration: React.FC<MCPToolConfigurationProps> = ({
               <div className="flex items-center gap-2 p-3 bg-green-50 rounded-lg border border-green-200 flex-1">
                 <CheckCircleOutlined className="text-green-600" />
                 <Text className="text-green-700 font-medium">
-                  {allowedTools.length} of {tools.length} {tools.length === 1 ? "tool" : "tools"} selected
+                  {allowedTools.length} of {tools.length} {tools.length === 1 ? "tool" : "tools"} enabled for user access
                 </Text>
               </div>
               <div className="flex gap-2 ml-3">
@@ -133,14 +141,14 @@ const MCPToolConfiguration: React.FC<MCPToolConfigurationProps> = ({
                   onClick={handleSelectAll}
                   className="px-3 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-md transition-colors"
                 >
-                  Select All
+                  Enable All
                 </button>
                 <button
                   type="button"
                   onClick={handleDeselectAll}
                   className="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
                 >
-                  Deselect All
+                  Disable All
                 </button>
               </div>
             </div>
@@ -160,8 +168,23 @@ const MCPToolConfiguration: React.FC<MCPToolConfigurationProps> = ({
                   <div className="flex items-start gap-3">
                     <Checkbox checked={allowedTools.includes(tool.name)} onChange={() => handleToolToggle(tool.name)} />
                     <div className="flex-1">
-                      <Text className="font-medium text-gray-900">{tool.name}</Text>
+                      <div className="flex items-center gap-2">
+                        <Text className="font-medium text-gray-900">{tool.name}</Text>
+                        <span className={`px-2 py-0.5 text-xs rounded-full font-medium ${
+                          allowedTools.includes(tool.name)
+                            ? "bg-green-100 text-green-800"
+                            : "bg-red-100 text-red-800"
+                        }`}>
+                          {allowedTools.includes(tool.name) ? "Enabled" : "Disabled"}
+                        </span>
+                      </div>
                       {tool.description && <Text className="text-gray-500 text-sm block mt-1">{tool.description}</Text>}
+                      <Text className="text-gray-400 text-xs block mt-1">
+                        {allowedTools.includes(tool.name) 
+                          ? "✓ Users can call this tool" 
+                          : "✗ Users cannot call this tool"
+                        }
+                      </Text>
                     </div>
                   </div>
                 </div>