diff --git a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx b/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx index 445d857871e..8076a154738 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx +++ b/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 = ({ 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) }, ]} > = ({ name="url" rules={[ { required: true, message: "Please enter a server URL" }, - { type: "url", message: "Please enter a valid URL" }, + { validator: (_, value) => validateMCPServerUrl(value) }, ]} > = ({ mcpServer, accessToken, o
- value && value.includes('-') - ? Promise.reject("Server name cannot contain '-' (hyphen). Please use '_' (underscore) instead.") - : Promise.resolve(), + validator: (_, value) => validateMCPServerName(value), }]}> - value && value.includes('-') - ? Promise.reject("Alias cannot contain '-' (hyphen). Please use '_' (underscore) instead.") - : Promise.resolve(), + validator: (_, value) => validateMCPServerName(value), }]} > setAliasManuallyEdited(true)} /> @@ -163,7 +158,10 @@ const MCPServerEdit: React.FC = ({ mcpServer, accessToken, o - + validateMCPServerUrl(value) }, + ]}> diff --git a/ui/litellm-dashboard/src/components/mcp_tools/utils.tsx b/ui/litellm-dashboard/src/components/mcp_tools/utils.tsx index 0ff52296f1d..38d1bf6cafd 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/utils.tsx +++ b/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(); }; \ No newline at end of file