Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-25 11:54:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🔍 feat: Add Filter to MCP Builder Panel (#10885)

Browse source 
Co-authored-by: Atef Bellaaj <slalom.bellaaj@external.daimlertruck.com>
This commit is contained in:
Atef Bellaaj 2025-12-10 16:36:41 +01:00 • committed by Danny Avila
parent 6fc6471010
commit da9b5196aa
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
3 changed files with 49 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

35
client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx
View file

@ -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<HTMLButtonElement | null>(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 (
<div className="flex h-full w-full flex-col overflow-visible">
<div role="region" aria-label="MCP Builder" className="mt-2 space-y-2">
{/* Admin Settings Button */}
<MCPAdminSettings />
{/* Search Input */}
<div className="relative">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" />
<Input
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder={localize('com_ui_filter_mcp_servers')}
className="pl-9"
aria-label={localize('com_ui_filter_mcp_servers')}
/>
</div>
{hasCreateAccess && (
<MCPServerDialog open={showDialog} onOpenChange={setShowDialog} triggerRef={addButtonRef}>
<OGDialogTrigger asChild>
@ -52,8 +78,9 @@ export default function MCPBuilderPanel() {
</div>
) : (
<MCPServerList
servers={availableMCPServers}
servers={filteredServers}
getServerStatusIconProps={getServerStatusIconProps}
isFiltered={searchQuery.trim().length > 0}
/>
)}
{configDialogProps && <MCPConfigDialog {...configDialogProps} />}