diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx index d04fdefb1a9..36db674fd1a 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx @@ -37,6 +37,7 @@ const MCPServerEdit: React.FC = ({ const [costConfig, setCostConfig] = useState({}); const [tools, setTools] = useState([]); const [isLoadingTools, setIsLoadingTools] = useState(false); + const [toolsError, setToolsError] = useState(null); const [searchValue, setSearchValue] = useState(""); const [aliasManuallyEdited, setAliasManuallyEdited] = useState(false); const [allowedTools, setAllowedTools] = useState([]); @@ -283,6 +284,7 @@ const MCPServerEdit: React.FC = ({ if (!accessToken || !mcpServer.server_id) return; setIsLoadingTools(true); + setToolsError(null); try { // Use the GET endpoint which looks up stored credentials by server_id, @@ -294,10 +296,12 @@ const MCPServerEdit: React.FC = ({ } else { console.error("Failed to fetch tools:", toolsResponse.message); setTools([]); + setToolsError(toolsResponse.message || "Failed to load tools"); } } catch (error) { console.error("Tools fetch error:", error); setTools([]); + setToolsError(error instanceof Error ? error.message : "Failed to load tools"); } finally { setIsLoadingTools(false); } @@ -1097,6 +1101,10 @@ const MCPServerEdit: React.FC = ({ toolNameToDescription={toolNameToDescription} onToolNameToDisplayNameChange={setToolNameToDisplayName} onToolNameToDescriptionChange={setToolNameToDescription} + externalTools={tools} + externalIsLoading={isLoadingTools} + externalError={toolsError} + externalCanFetch={!!mcpServer.server_id} />