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 1c82859e062..74dc8c02108 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_connect.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_connect.tsx @@ -4,6 +4,7 @@ import React, { useState } from "react"; import { Card, Typography, Space, Alert, Button, Switch, Form, Collapse } from "antd"; import { TabPanel, TabPanels, TabGroup, TabList, Tab, Title as TremorTitle, Text as TremorText } from "@tremor/react"; import { CopyIcon, Code, Terminal, Globe, CheckIcon, ExternalLinkIcon, KeyIcon, ServerIcon, Zap } from "lucide-react"; +import { useTranslation } from "react-i18next"; import { getProxyBaseUrl } from "../networking"; import { copyToClipboard as utilCopyToClipboard } from "../../utils/dataUtils"; @@ -34,6 +35,7 @@ const FeatureCard: React.FC = ({ serverName, accessGroups = ["dev-group"], }) => { + const { t } = useTranslation(); const [useServerHeader, setUseServerHeader] = useState(false); const getHeadersConfig = () => { @@ -60,37 +62,42 @@ const FeatureCard: React.FC = ({ {description} - {serverName && (title === "Implementation Example" || title === "Configuration") && ( - -
- - - Limit tools to specific MCP servers or MCP groups by passing the x-mcp-servers header - -
- {useServerHeader && ( - -

- Option 1: Get a specific server: "{serverName.replace(/\s+/g, "_")}" -

-

- Option 2: Get a group of MCPs: "dev-group" -

-

- You can also mix both: "Server1,dev-group" -

- - } - /> - )} - - )} + {serverName && + (title === t("mcpTools.mcpConnect.implementationExample") || + title === t("mcpTools.mcpConnect.configuration")) && ( + +
+ + + {t("mcpTools.mcpConnect.limitToolsText")} x-mcp-servers{" "} + {t("mcpTools.mcpConnect.headerSuffix")} + +
+ {useServerHeader && ( + +

+ {t("mcpTools.mcpConnect.option1Label")} {t("mcpTools.mcpConnect.option1Desc")}{" "} + "{serverName.replace(/\s+/g, "_")}" +

+

+ {t("mcpTools.mcpConnect.option2Label")} {t("mcpTools.mcpConnect.option2Desc")}{" "} + "dev-group" +

+

+ {t("mcpTools.mcpConnect.mixBothText")} "Server1,dev-group" +

+ + } + /> + )} + + )} {React.Children.map(children, (child) => { if ( React.isValidElement(child) && @@ -115,6 +122,7 @@ interface MCPConnectProps { } const MCPConnect: React.FC = ({ currentServerAccessGroups = [] }) => { + const { t } = useTranslation(); const proxyBaseUrl = getProxyBaseUrl(); const [copiedStates, setCopiedStates] = useState>({}); const [serverHeaders, setServerHeaders] = useState>({ @@ -209,40 +217,46 @@ const MCPConnect: React.FC = ({ currentServerAccessGroups = []
- LiteLLM Proxy API Integration + {t("mcpTools.mcpConnect.litellmProxyApiIntegration")}
- - Connect to LiteLLM Proxy Responses API for seamless tool integration with multiple model providers - + {t("mcpTools.mcpConnect.litellmProxyDesc")} } - title="Virtual Key Setup" - description="Configure your LiteLLM Proxy Virtual Key for authentication" + title={t("mcpTools.mcpConnect.virtualKeySetup")} + description={t("mcpTools.mcpConnect.virtualKeySetupDesc")} >
- Get your Virtual Key from your LiteLLM Proxy dashboard or contact your administrator + {t("mcpTools.mcpConnect.getVirtualKeyText")}
- + } - title="MCP Server Information" - description="Connection details for your LiteLLM MCP server" + title={t("mcpTools.mcpConnect.mcpServerInformation")} + description={t("mcpTools.mcpConnect.mcpServerInformationDesc")} > - + } - title="Implementation Example" - description="Complete cURL example for using the LiteLLM Proxy Responses API" + title={t("mcpTools.mcpConnect.implementationExample")} + description={t("mcpTools.mcpConnect.litellmImplementationDesc")} serverName={currentServer} accessGroups={["dev-group"]} > @@ -281,25 +295,23 @@ const MCPConnect: React.FC = ({ currentServerAccessGroups = []
- OpenAI Responses API Integration + {t("mcpTools.mcpConnect.openaiResponsesApiIntegration")}
- - Connect OpenAI Responses API to your LiteLLM MCP server for seamless tool integration - + {t("mcpTools.mcpConnect.openaiDesc")} } - title="API Key Setup" - description="Configure your OpenAI API key for authentication" + title={t("mcpTools.mcpConnect.apiKeySetup")} + description={t("mcpTools.mcpConnect.apiKeySetupDesc")} >
{/* eslint-disable-next-line react/no-unescaped-entities */} - Get your API key from the{" "} + {t("mcpTools.mcpConnect.getApiKeyText")}{" "} = ({ currentServerAccessGroups = []
- + } - title="MCP Server Information" - description="Connection details for your LiteLLM MCP server" + title={t("mcpTools.mcpConnect.mcpServerInformation")} + description={t("mcpTools.mcpConnect.mcpServerInformationDesc")} > - + } - title="Implementation Example" - description="Complete cURL example for using the Responses API" + title={t("mcpTools.mcpConnect.implementationExample")} + description={t("mcpTools.mcpConnect.openaiImplementationDesc")} serverName="Zapier Gmail" accessGroups={["dev-group"]} > @@ -364,41 +384,38 @@ const MCPConnect: React.FC = ({ currentServerAccessGroups = []
- Cursor IDE Integration + {t("mcpTools.mcpConnect.cursorIdeIntegration")}
- - Use tools directly from Cursor IDE with LiteLLM MCP. Enable your AI assistant to perform real-world tasks - without leaving your coding environment. - + {t("mcpTools.mcpConnect.cursorDesc")} - Setup Instructions + {t("mcpTools.mcpConnect.setupInstructions")} - + - Use the keyboard shortcut ⇧+⌘+J (Mac) or{" "} - Ctrl+Shift+J (Windows/Linux) + {t("mcpTools.mcpConnect.step1Desc")} ⇧+⌘+J (Mac){" "} + {t("mcpTools.mcpConnect.orText")} Ctrl+Shift+J{" "} + (Windows/Linux) - - Go to the "MCP Tools" tab and click "New MCP Server" + + {t("mcpTools.mcpConnect.step2Desc")} - + - Copy the JSON configuration below and paste it into Cursor, then save with{" "} - Cmd+S or{" "} - Ctrl+S + {t("mcpTools.mcpConnect.step3Desc")} Cmd+S{" "} + {t("mcpTools.mcpConnect.orText")} Ctrl+S } - title="Configuration" - description="Cursor MCP configuration" + title={t("mcpTools.mcpConnect.configuration")} + description={t("mcpTools.mcpConnect.cursorConfigDesc")} serverName="Zapier Gmail" accessGroups={["dev-group"]} > @@ -430,29 +447,28 @@ const MCPConnect: React.FC = ({ currentServerAccessGroups = []
- Streamable HTTP Transport + {t("mcpTools.mcpConnect.streamableHttpTransport")}
- - Connect to LiteLLM MCP using HTTP transport. Compatible with any MCP client that supports HTTP streaming. - + {t("mcpTools.mcpConnect.streamableHttpDesc")} } - title="Universal MCP Connection" - description="Use this URL with any MCP client that supports HTTP transport" + title={t("mcpTools.mcpConnect.universalMcpConnection")} + description={t("mcpTools.mcpConnect.universalMcpConnectionDesc")} >
- - Each MCP client supports different transports. Refer to your client documentation to determine the - appropriate transport method. - + {t("mcpTools.mcpConnect.transportMethodText")}
- + = ({ currentServerAccessGroups = [] href="https://modelcontextprotocol.io/docs/concepts/transports" icon={} > - Learn more about MCP transports + {t("mcpTools.mcpConnect.learnMoreTransports")} @@ -481,11 +497,10 @@ const MCPConnect: React.FC = ({ currentServerAccessGroups = []
- Connect to your MCP client - - Use tools directly from any MCP client with LiteLLM MCP. Enable your AI assistant to perform real-world - tasks through a simple, secure connection. - + + {t("mcpTools.mcpConnect.pageTitle")} + + {t("mcpTools.mcpConnect.pageDesc")}
@@ -494,25 +509,25 @@ const MCPConnect: React.FC = ({ currentServerAccessGroups = [] - OpenAI API + {t("mcpTools.mcpConnect.tabOpenAI")} - LiteLLM Proxy + {t("mcpTools.mcpConnect.tabLiteLLMProxy")} - Cursor + {t("mcpTools.mcpConnect.tabCursor")} - Streamable HTTP + {t("mcpTools.mcpConnect.tabStreamableHttp")}
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_connection_status.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_connection_status.tsx index 422cb7273ef..359db8a9b7e 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_connection_status.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_connection_status.tsx @@ -1,6 +1,7 @@ import React from "react"; import { Button, Spin, Alert, Collapse } from "antd"; import { CheckCircleOutlined, ExclamationCircleOutlined, ReloadOutlined, ToolOutlined } from "@ant-design/icons"; +import { useTranslation } from "react-i18next"; import { Card, Title, Text } from "@tremor/react"; interface MCPConnectionStatusProps { @@ -22,7 +23,7 @@ const MCPConnectionStatus: React.FC = ({ canFetchTools, fetchTools, }) => { - // Don't show anything if required fields aren't filled + const { t } = useTranslation(); if (!canFetchTools && !formValues.url && !formValues.spec_path) { return null; } @@ -32,15 +33,15 @@ const MCPConnectionStatus: React.FC = ({
- Connection Status + {t("mcpTools.mcpConnectionStatus.title")}
{!canFetchTools && (formValues.url || formValues.spec_path) && (
- Complete required fields to test connection + {t("mcpTools.mcpConnectionStatus.completeRequiredFields")}
- Fill in URL, Transport, and Authentication to test MCP server connection + {t("mcpTools.mcpConnectionStatus.fillInRequiredFields")}
)} @@ -50,35 +51,37 @@ const MCPConnectionStatus: React.FC = ({
{isLoadingTools - ? "Testing connection to MCP server..." + ? t("mcpTools.mcpConnectionStatus.testingConnection") : tools.length > 0 - ? "Connection successful" + ? t("mcpTools.mcpConnectionStatus.connectionSuccessful") : toolsError - ? "Connection failed" - : "Ready to test connection"} + ? t("mcpTools.mcpConnectionStatus.connectionFailed") + : t("mcpTools.mcpConnectionStatus.readyToTest")}
- Server: {formValues.url || formValues.spec_path} + + {t("mcpTools.mcpConnectionStatus.serverLabel", { server: formValues.url || formValues.spec_path })} +
{isLoadingTools && (
- Connecting... + {t("mcpTools.mcpConnectionStatus.connecting")}
)} {!isLoadingTools && !toolsError && tools.length > 0 && (
- Connected + {t("mcpTools.mcpConnectionStatus.connected")}
)} {toolsError && (
- Failed + {t("mcpTools.mcpConnectionStatus.failed")}
)}
@@ -86,13 +89,13 @@ const MCPConnectionStatus: React.FC = ({ {isLoadingTools && (
- Testing connection and loading tools... + {t("mcpTools.mcpConnectionStatus.testingAndLoading")}
)} {toolsError && (
{toolsError}
@@ -101,7 +104,7 @@ const MCPConnectionStatus: React.FC = ({ items={[ { key: "stack-trace", - label: "Stack Trace", + label: t("mcpTools.mcpConnectionStatus.stackTrace"), children: ( 
 = ({
                 showIcon
                 action={
                   
                 }
               />
@@ -140,9 +143,11 @@ const MCPConnectionStatus: React.FC = ({
             {!isLoadingTools && tools.length === 0 && !toolsError && (
               

                 
-                Connection successful!
+                
+                  {t("mcpTools.mcpConnectionStatus.connectionSuccessfulBang")}
+                
                 

-                No tools found for this MCP server
+                {t("mcpTools.mcpConnectionStatus.noToolsFound")}
               

             )}
           
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_discovery.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_discovery.tsx
index c21187045cf..0cfeee330cb 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_discovery.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_discovery.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useMemo, useEffect } from "react";
 import { Modal, Input, Typography } from "antd";
+import { useTranslation } from "react-i18next";
 import { fetchDiscoverableMCPServers } from "../networking";
 import { DiscoverableMCPServer, DiscoverMCPServersResponse } from "./types";
 import { mcpLogoImg } from "./create_mcp_server";
@@ -30,6 +31,7 @@ const MCPDiscovery: React.FC = ({
   onCustomServer,
   accessToken,
 }) => {
+  const { t } = useTranslation();
   const [servers, setServers] = useState([]);
   const [categories, setCategories] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -47,7 +49,7 @@ const MCPDiscovery: React.FC = ({
           setCategories(data.categories || []);
         })
         .catch((err: Error) => {
-          setError(err.message || "Failed to load MCP servers");
+          setError(err.message || t("mcpTools.mcpDiscovery.failedToLoadServers"));
         })
         .finally(() => {
           setLoading(false);
@@ -105,13 +107,13 @@ const MCPDiscovery: React.FC = ({
                 objectFit: "contain",
               }}
             />
-            
Add MCP Server

+            
{t("mcpTools.mcpDiscovery.title")}

           
           
         
       }
@@ -153,7 +155,7 @@ const MCPDiscovery: React.FC = ({
 
       {/* Search */}
        setSearchQuery(e.target.value)}
         style={{ marginBottom: 16 }}
@@ -178,16 +180,16 @@ const MCPDiscovery: React.FC = ({
 
       {error && (
         

-          Failed to load servers: {error}
+          {t("mcpTools.mcpDiscovery.failedToLoadServersError", { error })}
         

       )}
 
       {!loading && !error && filteredServers.length === 0 && (
         

           
-            No servers found.{" "}
+            {t("mcpTools.mcpDiscovery.noServersFound")}{" "}
             
-              Add a custom server
+              {t("mcpTools.mcpDiscovery.addCustomServer")}
             
           
         

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_config.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_config.tsx
index 3f3986d5a2e..03ed615c060 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_config.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_config.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Tooltip, InputNumber, Collapse, Badge } from "antd";
 import { InfoCircleOutlined, DollarOutlined, ToolOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
 import { Card, Title, Text } from "@tremor/react";
 import { MCPServerCostInfo } from "./types";
 
@@ -17,6 +18,7 @@ const MCPServerCostConfig: React.FC = ({
   tools = [],
   disabled = false,
 }) => {
+  const { t } = useTranslation();
   const handleDefaultCostChange = (defaultCost: number | null) => {
     const updated = {
       ...value,
@@ -41,8 +43,8 @@ const MCPServerCostConfig: React.FC = ({
       

         

           
-          Cost Configuration
-          
+          {t("mcpTools.mcpServerCostConfig.title")}
+          
             
           
         

@@ -50,8 +52,8 @@ const MCPServerCostConfig: React.FC = ({
         

           

             
@@ -67,15 +69,15 @@ const MCPServerCostConfig: React.FC = ({
               addonBefore="$"
             />
             
-              Set a default cost for all tool calls to this server
+              {t("mcpTools.mcpServerCostConfig.defaultCostHelp")}
             
           

 
           {tools.length > 0 && (
             

               
@@ -86,7 +88,7 @@ const MCPServerCostConfig: React.FC = ({
                     label: (
                       

                         
-                        Available Tools
+                        {t("mcpTools.mcpServerCostConfig.availableTools")}
                          = ({
                                 min={0}
                                 step={0.0001}
                                 precision={4}
-                                placeholder="Use default"
+                                placeholder={t("mcpTools.mcpServerCostConfig.useDefaultPlaceholder")}
                                 value={value.tool_name_to_cost_per_query?.[tool.name]}
                                 onChange={(cost) => handleToolCostChange(tool.name, cost)}
                                 disabled={disabled}
@@ -133,11 +135,11 @@ const MCPServerCostConfig: React.FC = ({
         {(value.default_cost_per_query ||
           (value.tool_name_to_cost_per_query && Object.keys(value.tool_name_to_cost_per_query).length > 0)) && (
           

-            Cost Summary:
+            {t("mcpTools.mcpServerCostConfig.costSummary")}
             

               {value.default_cost_per_query && (
                 
-                  • Default cost: ${value.default_cost_per_query.toFixed(4)} per query
+                  {t("mcpTools.mcpServerCostConfig.defaultCostRow", { cost: value.default_cost_per_query.toFixed(4) })}
                 
               )}
               {value.tool_name_to_cost_per_query &&
@@ -146,7 +148,7 @@ const MCPServerCostConfig: React.FC = ({
                     cost !== null &&
                     cost !== undefined && (
                       
-                        • {toolName}: ${cost.toFixed(4)} per query
+                        {t("mcpTools.mcpServerCostConfig.toolCostRow", { toolName, cost: cost.toFixed(4) })}
                       
                     ),
                 )}
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 e41a06b879e..b5acb3c2d9c 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
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Text } from "@tremor/react";
 import { MCPServerCostInfo } from "./types";
 
@@ -7,6 +8,7 @@ interface MCPServerCostDisplayProps {
 }
 
 const MCPServerCostDisplay: React.FC = ({ costConfig }) => {
+  const { t } = useTranslation();
   const hasDefaultCost =
     costConfig?.default_cost_per_query !== undefined && costConfig?.default_cost_per_query !== null;
   const hasToolCosts =
@@ -18,9 +20,7 @@ const MCPServerCostDisplay: React.FC = ({ costConfig
       

         

           

-            
-              No cost configuration set for this server. Tool calls will be charged at $0.00 per tool call.
-            
+            {t("mcpTools.mcpServerCostDisplay.noCostConfig")}
           

         

       

@@ -34,14 +34,14 @@ const MCPServerCostDisplay: React.FC = ({ costConfig
           costConfig?.default_cost_per_query !== undefined &&
           costConfig?.default_cost_per_query !== null && (
             

-              Default Cost per Query
+              {t("mcpTools.mcpServerCostDisplay.defaultCostPerQuery")}
               
${costConfig.default_cost_per_query.toFixed(4)}

             

           )}
 
         {hasToolCosts && costConfig?.tool_name_to_cost_per_query && (
           

-            Tool-Specific Costs
+            {t("mcpTools.mcpServerCostDisplay.toolSpecificCosts")}
             

               {Object.entries(costConfig.tool_name_to_cost_per_query).map(
                 ([toolName, cost]) =>
@@ -49,7 +49,9 @@ const MCPServerCostDisplay: React.FC = ({ costConfig
                   cost !== undefined && (
                     

                       {toolName}
-                      ${cost.toFixed(4)} per query
+                      
+                        {t("mcpTools.mcpServerCostDisplay.costPerQuery", { cost: cost.toFixed(4) })}
+                      
                     

                   ),
               )}
@@ -58,18 +60,22 @@ const MCPServerCostDisplay: React.FC = ({ costConfig
         )}
 
         

-          Cost Summary:
+          {t("mcpTools.mcpServerCostDisplay.costSummary")}
           

             {hasDefaultCost &&
               costConfig?.default_cost_per_query !== undefined &&
               costConfig?.default_cost_per_query !== null && (
                 
-                  • Default cost: ${costConfig.default_cost_per_query.toFixed(4)} per query
+                  {t("mcpTools.mcpServerCostDisplay.defaultCostRow", {
+                    cost: costConfig.default_cost_per_query.toFixed(4),
+                  })}
                 
               )}
             {hasToolCosts && costConfig?.tool_name_to_cost_per_query && (
               
-                • {Object.keys(costConfig.tool_name_to_cost_per_query).length} tool(s) with custom pricing
+                {t("mcpTools.mcpServerCostDisplay.toolsWithCustomPricing", {
+                  count: Object.keys(costConfig.tool_name_to_cost_per_query).length,
+                })}
               
             )}
           

diff --git a/ui/litellm-dashboard/src/locales/en.json b/ui/litellm-dashboard/src/locales/en.json
index 23fbeade1bc..09ccc70b0d0 100644
--- a/ui/litellm-dashboard/src/locales/en.json
+++ b/ui/litellm-dashboard/src/locales/en.json
@@ -3420,6 +3420,109 @@
       "creating": "Creating...",
       "addButton": "Add MCP Server"
     },
+    "mcpConnect": {
+      "pageTitle": "Connect to your MCP client",
+      "pageDesc": "Use tools directly from any MCP client with LiteLLM MCP. Enable your AI assistant to perform real-world tasks through a simple, secure connection.",
+      "tabOpenAI": "OpenAI API",
+      "tabLiteLLMProxy": "LiteLLM Proxy",
+      "tabCursor": "Cursor",
+      "tabStreamableHttp": "Streamable HTTP",
+      "implementationExample": "Implementation Example",
+      "configuration": "Configuration",
+      "limitToolsText": "Limit tools to specific MCP servers or MCP groups by passing the",
+      "headerSuffix": "header",
+      "twoOptions": "Two Options",
+      "option1Label": "Option 1:",
+      "option1Desc": "Get a specific server:",
+      "option2Label": "Option 2:",
+      "option2Desc": "Get a group of MCPs:",
+      "mixBothText": "You can also mix both:",
+      "litellmProxyApiIntegration": "LiteLLM Proxy API Integration",
+      "litellmProxyDesc": "Connect to LiteLLM Proxy Responses API for seamless tool integration with multiple model providers",
+      "virtualKeySetup": "Virtual Key Setup",
+      "virtualKeySetupDesc": "Configure your LiteLLM Proxy Virtual Key for authentication",
+      "getVirtualKeyText": "Get your Virtual Key from your LiteLLM Proxy dashboard or contact your administrator",
+      "environmentVariable": "Environment Variable",
+      "mcpServerInformation": "MCP Server Information",
+      "mcpServerInformationDesc": "Connection details for your LiteLLM MCP server",
+      "serverUrl": "Server URL",
+      "litellmImplementationDesc": "Complete cURL example for using the LiteLLM Proxy Responses API",
+      "openaiResponsesApiIntegration": "OpenAI Responses API Integration",
+      "openaiDesc": "Connect OpenAI Responses API to your LiteLLM MCP server for seamless tool integration",
+      "apiKeySetup": "API Key Setup",
+      "apiKeySetupDesc": "Configure your OpenAI API key for authentication",
+      "getApiKeyText": "Get your API key from the",
+      "openaiImplementationDesc": "Complete cURL example for using the Responses API",
+      "cursorIdeIntegration": "Cursor IDE Integration",
+      "cursorDesc": "Use tools directly from Cursor IDE with LiteLLM MCP. Enable your AI assistant to perform real-world tasks without leaving your coding environment.",
+      "setupInstructions": "Setup Instructions",
+      "step1Title": "Open Cursor Settings",
+      "step1Desc": "Use the keyboard shortcut",
+      "orText": "or",
+      "step2Title": "Navigate to MCP Tools",
+      "step2Desc": "Go to the \"MCP Tools\" tab and click \"New MCP Server\"",
+      "step3Title": "Add Configuration",
+      "step3Desc": "Copy the JSON configuration below and paste it into Cursor, then save with",
+      "cursorConfigDesc": "Cursor MCP configuration",
+      "streamableHttpTransport": "Streamable HTTP Transport",
+      "streamableHttpDesc": "Connect to LiteLLM MCP using HTTP transport. Compatible with any MCP client that supports HTTP streaming.",
+      "universalMcpConnection": "Universal MCP Connection",
+      "universalMcpConnectionDesc": "Use this URL with any MCP client that supports HTTP transport",
+      "transportMethodText": "Each MCP client supports different transports. Refer to your client documentation to determine the appropriate transport method.",
+      "headersConfiguration": "Headers Configuration",
+      "learnMoreTransports": "Learn more about MCP transports"
+    },
+    "mcpConnectionStatus": {
+      "title": "Connection Status",
+      "completeRequiredFields": "Complete required fields to test connection",
+      "fillInRequiredFields": "Fill in URL, Transport, and Authentication to test MCP server connection",
+      "testingConnection": "Testing connection to MCP server...",
+      "connectionSuccessful": "Connection successful",
+      "connectionFailed": "Connection failed",
+      "readyToTest": "Ready to test connection",
+      "serverLabel": "Server: {{server}}",
+      "connecting": "Connecting...",
+      "connected": "Connected",
+      "failed": "Failed",
+      "testingAndLoading": "Testing connection and loading tools...",
+      "connectionFailedAlert": "Connection Failed",
+      "stackTrace": "Stack Trace",
+      "connectionSuccessfulBang": "Connection successful!",
+      "noToolsFound": "No tools found for this MCP server"
+    },
+    "mcpDiscovery": {
+      "title": "Add MCP Server",
+      "customServer": "+ Custom Server",
+      "searchPlaceholder": "Search servers...",
+      "failedToLoadServers": "Failed to load MCP servers",
+      "failedToLoadServersError": "Failed to load servers: {{error}}",
+      "noServersFound": "No servers found.",
+      "addCustomServer": "Add a custom server"
+    },
+    "mcpServerCostConfig": {
+      "title": "Cost Configuration",
+      "titleTooltip": "Configure costs for this MCP server's tool calls. Set a default rate and per-tool overrides.",
+      "defaultCostLabel": "Default Cost per Query ($)",
+      "defaultCostTooltip": "Default cost charged for each tool call to this server.",
+      "defaultCostHelp": "Set a default cost for all tool calls to this server",
+      "toolSpecificCostsLabel": "Tool-Specific Costs ($)",
+      "toolSpecificCostsTooltip": "Override the default cost for specific tools. Leave blank to use the default rate.",
+      "availableTools": "Available Tools",
+      "useDefaultPlaceholder": "Use default",
+      "costSummary": "Cost Summary:",
+      "defaultCostRow": "• Default cost: ${{cost}} per query",
+      "toolCostRow": "• {{toolName}}: ${{cost}} per query"
+    },
+    "mcpServerCostDisplay": {
+      "noCostConfig": "No cost configuration set for this server. Tool calls will be charged at $0.00 per tool call.",
+      "defaultCostPerQuery": "Default Cost per Query",
+      "toolSpecificCosts": "Tool-Specific Costs",
+      "costPerQuery": "${{cost}} per query",
+      "costSummary": "Cost Summary:",
+      "defaultCostRow": "• Default cost: ${{cost}} per query",
+      "toolsWithCustomPricing_one": "• {{count}} tool with custom pricing",
+      "toolsWithCustomPricing_other": "• {{count}} tools with custom pricing"
+    },
     "toolTestPanel": {
       "testToolTitle": "Test Tool:",
       "clickToCopyToolName": "Click to copy tool name",
diff --git a/ui/litellm-dashboard/src/locales/zh-CN.json b/ui/litellm-dashboard/src/locales/zh-CN.json
index fc6773f6c34..f33a4dd1ecd 100644
--- a/ui/litellm-dashboard/src/locales/zh-CN.json
+++ b/ui/litellm-dashboard/src/locales/zh-CN.json
@@ -3420,6 +3420,109 @@
       "creating": "创建中...",
       "addButton": "添加 MCP 服务器"
     },
+    "mcpConnect": {
+      "pageTitle": "连接到您的 MCP 客户端",
+      "pageDesc": "通过 LiteLLM MCP 直接在任意 MCP 客户端中使用工具，让您的 AI 助手通过简单、安全的连接执行现实任务。",
+      "tabOpenAI": "OpenAI API",
+      "tabLiteLLMProxy": "LiteLLM Proxy",
+      "tabCursor": "Cursor",
+      "tabStreamableHttp": "Streamable HTTP",
+      "implementationExample": "Implementation Example",
+      "configuration": "Configuration",
+      "limitToolsText": "通过传递",
+      "headerSuffix": "请求头，将工具限定到特定 MCP 服务器或 MCP 组",
+      "twoOptions": "两种方式",
+      "option1Label": "方式一：",
+      "option1Desc": "指定单个服务器：",
+      "option2Label": "方式二：",
+      "option2Desc": "指定一组 MCP：",
+      "mixBothText": "也可以混合使用：",
+      "litellmProxyApiIntegration": "LiteLLM Proxy API 集成",
+      "litellmProxyDesc": "连接 LiteLLM Proxy Responses API，与多个模型提供商无缝集成工具",
+      "virtualKeySetup": "虚拟密钥配置",
+      "virtualKeySetupDesc": "配置您的 LiteLLM Proxy 虚拟密钥以完成身份认证",
+      "getVirtualKeyText": "从您的 LiteLLM Proxy 仪表盘获取虚拟密钥，或联系您的管理员",
+      "environmentVariable": "环境变量",
+      "mcpServerInformation": "MCP 服务器信息",
+      "mcpServerInformationDesc": "您的 LiteLLM MCP 服务器连接详情",
+      "serverUrl": "服务器 URL",
+      "litellmImplementationDesc": "使用 LiteLLM Proxy Responses API 的完整 cURL 示例",
+      "openaiResponsesApiIntegration": "OpenAI Responses API 集成",
+      "openaiDesc": "将 OpenAI Responses API 连接到您的 LiteLLM MCP 服务器，实现无缝工具集成",
+      "apiKeySetup": "API 密钥配置",
+      "apiKeySetupDesc": "配置您的 OpenAI API 密钥以完成身份认证",
+      "getApiKeyText": "从以下位置获取您的 API 密钥：",
+      "openaiImplementationDesc": "使用 Responses API 的完整 cURL 示例",
+      "cursorIdeIntegration": "Cursor IDE 集成",
+      "cursorDesc": "通过 LiteLLM MCP 直接在 Cursor IDE 中使用工具。让您的 AI 助手无需离开编码环境即可执行现实任务。",
+      "setupInstructions": "配置说明",
+      "step1Title": "打开 Cursor 设置",
+      "step1Desc": "使用键盘快捷键",
+      "orText": "或",
+      "step2Title": "导航至 MCP 工具",
+      "step2Desc": "前往「MCP Tools」标签页，点击「New MCP Server」",
+      "step3Title": "添加配置",
+      "step3Desc": "复制下方 JSON 配置并粘贴到 Cursor，然后按",
+      "cursorConfigDesc": "Cursor MCP 配置",
+      "streamableHttpTransport": "Streamable HTTP 传输",
+      "streamableHttpDesc": "通过 HTTP 传输连接 LiteLLM MCP，兼容任何支持 HTTP 流式传输的 MCP 客户端。",
+      "universalMcpConnection": "通用 MCP 连接",
+      "universalMcpConnectionDesc": "使用此 URL 连接任何支持 HTTP 传输的 MCP 客户端",
+      "transportMethodText": "不同 MCP 客户端支持的传输方式各不相同，请参阅您的客户端文档以确定合适的传输方式。",
+      "headersConfiguration": "请求头配置",
+      "learnMoreTransports": "了解更多关于 MCP 传输的信息"
+    },
+    "mcpConnectionStatus": {
+      "title": "连接状态",
+      "completeRequiredFields": "请填写必填字段以测试连接",
+      "fillInRequiredFields": "请填写 URL、传输方式和认证信息以测试 MCP 服务器连接",
+      "testingConnection": "正在测试与 MCP 服务器的连接...",
+      "connectionSuccessful": "连接成功",
+      "connectionFailed": "连接失败",
+      "readyToTest": "准备测试连接",
+      "serverLabel": "服务器：{{server}}",
+      "connecting": "连接中...",
+      "connected": "已连接",
+      "failed": "失败",
+      "testingAndLoading": "正在测试连接并加载工具...",
+      "connectionFailedAlert": "连接失败",
+      "stackTrace": "堆栈跟踪",
+      "connectionSuccessfulBang": "连接成功！",
+      "noToolsFound": "此 MCP 服务器未发现任何工具"
+    },
+    "mcpDiscovery": {
+      "title": "添加 MCP 服务器",
+      "customServer": "+ 自定义服务器",
+      "searchPlaceholder": "搜索服务器...",
+      "failedToLoadServers": "加载 MCP 服务器失败",
+      "failedToLoadServersError": "加载服务器失败：{{error}}",
+      "noServersFound": "未找到服务器。",
+      "addCustomServer": "添加自定义服务器"
+    },
+    "mcpServerCostConfig": {
+      "title": "费用配置",
+      "titleTooltip": "配置此 MCP 服务器工具调用的费用。设置默认费率及每个工具的覆盖费率。",
+      "defaultCostLabel": "每次查询默认费用（$）",
+      "defaultCostTooltip": "此服务器每次工具调用收取的默认费用。",
+      "defaultCostHelp": "为此服务器的所有工具调用设置默认费用",
+      "toolSpecificCostsLabel": "工具专属费用（$）",
+      "toolSpecificCostsTooltip": "为特定工具覆盖默认费用。留空则使用默认费率。",
+      "availableTools": "可用工具",
+      "useDefaultPlaceholder": "使用默认值",
+      "costSummary": "费用汇总：",
+      "defaultCostRow": "• 默认费用：${{cost}} / 次查询",
+      "toolCostRow": "• {{toolName}}：${{cost}} / 次查询"
+    },
+    "mcpServerCostDisplay": {
+      "noCostConfig": "此服务器未配置费用。工具调用将按每次 $0.00 收费。",
+      "defaultCostPerQuery": "每次查询默认费用",
+      "toolSpecificCosts": "工具专属费用",
+      "costPerQuery": "${{cost}} / 次查询",
+      "costSummary": "费用汇总：",
+      "defaultCostRow": "• 默认费用：${{cost}} / 次查询",
+      "toolsWithCustomPricing_one": "• {{count}} 个工具使用自定义定价",
+      "toolsWithCustomPricing_other": "• {{count}} 个工具使用自定义定价"
+    },
     "toolTestPanel": {
       "testToolTitle": "测试工具：",
       "clickToCopyToolName": "点击复制工具名称",