diff --git a/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx b/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx index 493b34b122..a183a3188d 100644 --- a/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx +++ b/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx @@ -1,7 +1,7 @@ -import { useState, useRef } from 'react'; -import { Plus } from 'lucide-react'; +import { useState, useRef, useMemo } from 'react'; +import { Plus, Search } from 'lucide-react'; import { PermissionTypes, Permissions } from 'librechat-data-provider'; -import { Button, Spinner, OGDialogTrigger } from '@librechat/client'; +import { Button, Spinner, OGDialogTrigger, Input } from '@librechat/client'; import { useLocalize, useMCPServerManager, useHasAccess } from '~/hooks'; import MCPServerList from './MCPServerList'; import MCPServerDialog from './MCPServerDialog'; @@ -18,15 +18,41 @@ export default function MCPBuilderPanel() { permission: Permissions.CREATE, }); const [showDialog, setShowDialog] = useState(false); + const [searchQuery, setSearchQuery] = useState(''); const addButtonRef = useRef(null); const configDialogProps = getConfigDialogProps(); + const filteredServers = useMemo(() => { + if (!searchQuery.trim()) { + return availableMCPServers; + } + const query = searchQuery.toLowerCase(); + return availableMCPServers.filter((server) => { + const displayName = server.config?.title || server.serverName; + return ( + displayName.toLowerCase().includes(query) || server.serverName.toLowerCase().includes(query) + ); + }); + }, [availableMCPServers, searchQuery]); + return (
{/* Admin Settings Button */} + {/* Search Input */} +
+ + setSearchQuery(e.target.value)} + placeholder={localize('com_ui_filter_mcp_servers')} + className="pl-9" + aria-label={localize('com_ui_filter_mcp_servers')} + /> +
+ {hasCreateAccess && ( @@ -52,8 +78,9 @@ export default function MCPBuilderPanel() {
) : ( 0} /> )} {configDialogProps && } diff --git a/client/src/components/SidePanel/MCPBuilder/MCPServerList.tsx b/client/src/components/SidePanel/MCPBuilder/MCPServerList.tsx index 5b36c8e4d2..3112c78dba 100644 --- a/client/src/components/SidePanel/MCPBuilder/MCPServerList.tsx +++ b/client/src/components/SidePanel/MCPBuilder/MCPServerList.tsx @@ -15,6 +15,7 @@ interface MCPServerListProps { getServerStatusIconProps: ( serverName: string, ) => React.ComponentProps; + isFiltered?: boolean; } // Self-contained edit button component (follows MemoryViewer pattern) @@ -39,7 +40,11 @@ const EditMCPServerButton = ({ server }: { server: MCPServerDefinition }) => { ); }; -export default function MCPServerList({ servers, getServerStatusIconProps }: MCPServerListProps) { +export default function MCPServerList({ + servers, + getServerStatusIconProps, + isFiltered = false, +}: MCPServerListProps) { const canCreateEditMCPs = useHasAccess({ permissionType: PermissionTypes.MCP_SERVERS, permission: Permissions.CREATE, @@ -49,8 +54,16 @@ export default function MCPServerList({ servers, getServerStatusIconProps }: MCP if (servers.length === 0) { return (
-

{localize('com_ui_no_mcp_servers')}

-

{localize('com_ui_add_first_mcp_server')}

+ {isFiltered ? ( +

{localize('com_ui_no_mcp_servers_match')}

+ ) : ( + <> +

{localize('com_ui_no_mcp_servers')}

+

+ {localize('com_ui_add_first_mcp_server')} +

+ + )}
); } diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json index 8ee4c76d9f..87d6e0aafa 100644 --- a/client/src/locales/en/translation.json +++ b/client/src/locales/en/translation.json @@ -634,6 +634,8 @@ "com_ui_mcp_server_created": "MCP server created successfully", "com_ui_mcp_server_updated": "MCP server updated successfully", "com_ui_mcp_server_connection_failed": "Connection attempt to the provided MCP server failed. Please make sure the URL, the server type, and any authentication configuration are correct, then try again. Also ensure the URL is reachable.", + "com_ui_filter_mcp_servers": "Filter MCP servers by name", + "com_ui_no_mcp_servers_match": "No MCP servers match your filter", "com_ui_add_model_preset": "Add a model or preset for an additional response", "com_ui_add_multi_conversation": "Add multi-conversation", "com_ui_add_special_variables": "Add Special Variables",