From 0fe34a12a394161fb47671e8f3a0c80178a36d90 Mon Sep 17 00:00:00 2001
From: LiuVaayne <10231735+vaayne@users.noreply.github.com>
Date: Sun, 27 Apr 2025 14:32:27 +0800
Subject: [PATCH] feat(MCP): Add MCP resources dropdown in settings navbar
 (#5394)

* Add MCP resources dropdown in settings navbar

* Refactor MCP settings navbar with inline styles

- Replace styled-components with inline styles
- Update resource URLs and capitalize "Servers" in title
- Add noopener,noreferrer to external links
- Simplify component structure with direct Menu.Item usage
---
 .../MCPSettings/McpSettingsNavbar.tsx         | 88 ++++++++++++++++---
 1 file changed, 76 insertions(+), 12 deletions(-)

diff --git a/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx b/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx
index a40700c3ac..afe9d62a4a 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx
@@ -1,17 +1,77 @@
 import { NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
 import { isWindows } from '@renderer/config/constant'
-import { Button } from 'antd'
-import { Search, SquareArrowOutUpRight } from 'lucide-react'
+import { Button, Dropdown, Menu, type MenuProps } from 'antd'
+import { ChevronDown, Search } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router'
 
 import InstallNpxUv from './InstallNpxUv'
 
+const mcpResources = [
+  {
+    name: 'Model Context Protocol Servers',
+    url: 'https://github.com/modelcontextprotocol/servers',
+    logo: 'https://avatars.githubusercontent.com/u/182288589'
+  },
+  {
+    name: 'Awesome MCP Servers',
+    url: 'https://github.com/punkpeye/awesome-mcp-servers',
+    logo: 'https://github.githubassets.com/assets/github-logo-55c5b9a1fe52.png'
+  },
+  {
+    name: 'mcp.so',
+    url: 'https://mcp.so/',
+    logo: 'https://mcp.so/favicon.ico'
+  },
+  {
+    name: 'modelscope.cn',
+    url: 'https://www.modelscope.cn/mcp',
+    logo: 'https://g.alicdn.com/sail-web/maas/2.7.35/favicon/128.ico'
+  },
+  {
+    name: 'mcp.higress.ai',
+    url: 'https://mcp.higress.ai/',
+    logo: 'https://framerusercontent.com/images/FD5yBobiBj4Evn0qf11X7iQ9csk.png'
+  },
+  {
+    name: 'smithery.ai',
+    url: 'https://smithery.ai/',
+    logo: 'https://smithery.ai/logo.svg'
+  },
+  {
+    name: 'glama.ai',
+    url: 'https://glama.ai/mcp/servers',
+    logo: 'https://glama.ai/favicon.ico'
+  },
+  {
+    name: 'pulsemcp.com',
+    url: 'https://www.pulsemcp.com',
+    logo: 'https://www.pulsemcp.com/favicon.svg'
+  },
+  {
+    name: 'mcp.composio.dev',
+    url: 'https://mcp.composio.dev/',
+    logo: 'https://composio.dev/wp-content/uploads/2025/02/Fevicon-composio.png'
+  }
+]
+
 export const McpSettingsNavbar = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const onClick = () => window.open('https://mcp.so/', '_blank')
+
+  const resourceMenuItems: MenuProps['items'] = mcpResources.map(({ name, url, logo }) => ({
+    key: name,
+    label: (
+      <Menu.Item
+        key={name}
+        onClick={() => window.open(url, '_blank', 'noopener,noreferrer')}
+        style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+        <img src={logo} alt={name} style={{ width: 16, height: 16, borderRadius: 3, marginRight: 8 }} />
+        {name}
+      </Menu.Item>
+    )
+  }))
 
   return (
     <NavbarRight style={{ paddingRight: isWindows ? 150 : 12 }}>
@@ -25,15 +85,19 @@ export const McpSettingsNavbar = () => {
           style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
           {t('settings.mcp.searchNpx')}
         </Button>
-        <Button
-          size="small"
-          type="text"
-          onClick={onClick}
-          icon={<SquareArrowOutUpRight size={14} />}
-          className="nodrag"
-          style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
-          {t('settings.mcp.findMore')}
-        </Button>
+        <Dropdown
+          menu={{ items: resourceMenuItems }}
+          trigger={['click']}
+          overlayStyle={{ maxHeight: '400px', overflow: 'auto' }}>
+          <Button
+            size="small"
+            type="text"
+            className="nodrag"
+            style={{ fontSize: 13, height: 28, borderRadius: 20, display: 'flex', alignItems: 'center' }}>
+            {t('settings.mcp.findMore')}
+            <ChevronDown size={14} style={{ marginLeft: 5 }} />
+          </Button>
+        </Dropdown>
         <InstallNpxUv mini />
       </HStack>
     </NavbarRight>