fix: improve MCP server URL validation to support internal/Kubernetes URLs (#13099)

* fix: improve MCP server URL validation to support internal/Kubernetes URLs

- Replace strict Ant Design URL validator with flexible custom validator
- Allow URLs like http://service-name.domain.svc.cluster.:1234/mcp
- Update both create and edit MCP server forms for consistency

* refactor: extract MCP server validation into reusable utilities

- Move URL validation logic to utils.tsx to follow DRY principles
- Add validateMCPServerUrl function for flexible URL validation
- Add validateMCPServerName function for hyphen validation
- Update both create and edit components to use shared utilities
- Reduces code duplication and improves maintainability

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

@@ -8,6 +8,7 @@ import MCPServerCostConfig from "./mcp_server_cost_config"
 import MCPConnectionStatus from "./mcp_connection_status"
 import StdioConfiguration from "./StdioConfiguration"
 import { isAdminRole } from "@/utils/roles"
+import { validateMCPServerUrl, validateMCPServerName } from "./utils"
 
 const asset_logos_folder = "../ui/assets/logos/"
 export const mcpLogoImg = `${asset_logos_folder}mcp_logo.png`
@@ -228,12 +229,7 @@ const CreateMCPServer: React.FC<CreateMCPServerProps> = ({
               name="server_name"
               rules={[
                 { required: false, message: "Please enter a server name" },
-                {
-                  validator: (_, value) =>
-                    value && value.includes("-")
-                      ? Promise.reject("Server name cannot contain '-' (hyphen). Please use '_' (underscore) instead.")
-                      : Promise.resolve(),
-                },
+                { validator: (_, value) => validateMCPServerName(value) },
               ]}
             >
               <TextInput
@@ -310,7 +306,7 @@ const CreateMCPServer: React.FC<CreateMCPServerProps> = ({
                 name="url"
                 rules={[
                   { required: true, message: "Please enter a server URL" },
-                  { type: "url", message: "Please enter a valid URL" },
+                  { validator: (_, value) => validateMCPServerUrl(value) },
                 ]}
               >
                 <TextInput

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

@@ -5,6 +5,7 @@ import { MCPServer, MCPServerCostInfo } from "./types";
 import { updateMCPServer, testMCPToolsListRequest } from "../networking";
 import MCPServerCostConfig from "./mcp_server_cost_config";
 import { MinusCircleOutlined, PlusOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import { validateMCPServerUrl, validateMCPServerName } from "./utils";
 
 interface MCPServerEditProps {
   mcpServer: MCPServer;
@@ -144,18 +145,12 @@ const MCPServerEdit: React.FC<MCPServerEditProps> = ({ mcpServer, accessToken, o
         <TabPanel>
           <Form form={form} onFinish={handleSave} initialValues={mcpServer} layout="vertical">
             <Form.Item label="MCP Server Name" name="server_name" rules={[{
-              validator: (_, value) =>
-                value && value.includes('-')
-                  ? Promise.reject("Server name cannot contain '-' (hyphen). Please use '_' (underscore) instead.")
-                  : Promise.resolve(),
+              validator: (_, value) => validateMCPServerName(value),
             }]}>
               <TextInput />
             </Form.Item>
             <Form.Item label="Alias" name="alias" rules={[{
-                validator: (_, value) =>
-                  value && value.includes('-')
-                    ? Promise.reject("Alias cannot contain '-' (hyphen). Please use '_' (underscore) instead.")
-                    : Promise.resolve(),
+                validator: (_, value) => validateMCPServerName(value),
               }]}
             >
               <TextInput onChange={() => setAliasManuallyEdited(true)} />
@@ -163,7 +158,10 @@ const MCPServerEdit: React.FC<MCPServerEditProps> = ({ mcpServer, accessToken, o
             <Form.Item label="Description" name="description">
               <TextInput />
             </Form.Item>
-            <Form.Item label="MCP Server URL" name="url" rules={[{ required: true, message: "Please enter a server URL" }]}> 
+            <Form.Item label="MCP Server URL" name="url" rules={[
+              { required: true, message: "Please enter a server URL" },
+              { validator: (_, value) => validateMCPServerUrl(value) },
+            ]}> 
               <TextInput />
             </Form.Item>
             <Form.Item label="Transport Type" name="transport" rules={[{ required: true }]}> 

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

@@ -34,4 +34,20 @@ export const getMaskedAndFullUrl = (url: string): { maskedUrl: string, hasToken:
     maskedUrl: maskUrl(url),
     hasToken: !!token
   };
+};
+
+// Validation utilities for MCP server forms
+export const validateMCPServerUrl = (value: string) => {
+  if (!value) return Promise.resolve();
+  // More flexible URL validation that allows Kubernetes service names and various URL formats
+  const urlPattern = /^https?:\/\/[^\s/$.?#].[^\s]*$/i;
+  return urlPattern.test(value)
+    ? Promise.resolve()
+    : Promise.reject("Please enter a valid URL (e.g., http://service-name.domain:1234/path or https://example.com)");
+};
+
+export const validateMCPServerName = (value: string) => {
+  return value && value.includes("-")
+    ? Promise.reject("Server name cannot contain '-' (hyphen). Please use '_' (underscore) instead.")
+    : Promise.resolve();
 };