From 4f9793951d13b4bb7b002a8f3bc888217cd5f6a0 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Fri, 11 Jul 2025 17:34:34 -0700
Subject: [PATCH] [Bug Fix] - QA for MCP Gateway - show the cost config on the
 root of MCP Settings (#12526)

* show cost display

* fixes MCP cost display
---
 .../src/components/mcp_tools/mcp_server_cost_display.tsx    | 6 ------
 .../src/components/mcp_tools/mcp_server_view.tsx            | 4 ++++
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_display.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_display.tsx
index c4e4d47203d..9670e81e35b 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_display.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_display.tsx
@@ -15,9 +15,6 @@ const MCPServerCostDisplay: React.FC<MCPServerCostDisplayProps> = ({ costConfig
     return (
       <div className="mt-6 pt-6 border-t border-gray-200">
         <div className="space-y-4">
-          <div>
-            <Text className="font-medium text-lg">Cost Configuration</Text>
-          </div>
           <div className="p-4 bg-gray-50 border border-gray-200 rounded-lg">
             <Text className="text-gray-600">
               No cost configuration set for this server. Tool calls will be charged at $0.00 per tool call.
@@ -31,9 +28,6 @@ const MCPServerCostDisplay: React.FC<MCPServerCostDisplayProps> = ({ costConfig
   return (
     <div className="mt-6 pt-6 border-t border-gray-200">
       <div className="space-y-4">
-        <div>
-          <Text className="font-medium text-lg">Cost Configuration</Text>
-        </div>
         
         {hasDefaultCost && costConfig?.default_cost_per_query !== undefined && costConfig?.default_cost_per_query !== null && (
           <div>
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx
index 8aca98a97fd..d35c22652fa 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx
@@ -211,6 +211,10 @@ export const MCPServerView: React.FC<MCPServerViewProps> = ({
                       )}
                     </div>
                   </div>
+                  <div>
+                    <Text className="font-medium">Cost Configuration</Text>
+                    <MCPServerCostDisplay costConfig={mcpServer.mcp_info?.mcp_server_cost_info} />
+                  </div>
                 </div>
               )}
             </Card>