diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx index e00f27c39f4..330ea4dee32 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx +++ b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx @@ -373,4 +373,43 @@ describe("ChatUI", () => { const customProxyInput = screen.getByPlaceholderText("Optional: Enter custom proxy URL (e.g., http://localhost:5000)"); expect(customProxyInput).toHaveValue(testProxyUrl); }); + + it("should enable search functionality for MCP server selector", async () => { + render( + + ); + + await waitFor(() => { + expect(screen.getByText("Test Key")).toBeInTheDocument(); + }); + + const mcpServersText = screen.queryByText("MCP Servers"); + expect(mcpServersText).toBeInTheDocument(); + + if (mcpServersText) { + const selectContainer = mcpServersText.parentElement?.nextElementSibling; + const selectElement = selectContainer?.querySelector(".ant-select-selector"); + expect(selectElement).toBeInTheDocument(); + + if (selectElement) { + fireEvent.mouseDown(selectElement); + + await waitFor(() => { + const allServersOption = screen.queryByText("All MCP Servers"); + if (allServersOption) { + expect(allServersOption).toBeInTheDocument(); + } + }); + + const searchInput = document.querySelector(".ant-select-selection-search-input"); + expect(searchInput).toBeInTheDocument(); + } + } + }); }); diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx index df04eece289..3272e9b589a 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx +++ b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx @@ -1636,9 +1636,27 @@ const ChatUI: React.FC = ({ loading={isLoadingMCPServers} className="mb-2" allowClear + showSearch optionLabelProp="label" disabled={!MCP_SUPPORTED_ENDPOINTS.has(endpointType as EndpointType)} maxTagCount={endpointType === EndpointType.MCP ? 1 : "responsive"} + filterOption={(input, option) => { + if (option?.value === "__all__") { + return "All MCP Servers".toLowerCase().includes(input.toLowerCase()); + } + const server = mcpServers.find((s) => s.server_id === option?.value); + if (!server) return false; + const searchText = [ + server.server_name, + server.alias, + server.server_id, + server.description, + ] + .filter(Boolean) + .join(" ") + .toLowerCase(); + return searchText.includes(input.toLowerCase()); + }} > {/* All MCP Servers option - hidden for MCP direct mode */} {endpointType !== EndpointType.MCP && ( diff --git a/ui/litellm-dashboard/tsconfig.json b/ui/litellm-dashboard/tsconfig.json index 5b0352feb98..d24bdd340f7 100644 --- a/ui/litellm-dashboard/tsconfig.json +++ b/ui/litellm-dashboard/tsconfig.json @@ -14,7 +14,7 @@ "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "preserve", + "jsx": "react-jsx", "incremental": true, "plugins": [ {