From 403ed8cbf4da0e97e3f31876863ff8373a5a9953 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Fri, 28 Mar 2025 11:15:49 +0800
Subject: [PATCH] fix: mcp install ui

---
 src/main/ipc.ts                               |   1 +
 src/main/services/MCPService.ts               |  14 +-
 src/main/utils/process.ts                     |  12 +-
 src/preload/index.d.ts                        |   1 +
 src/preload/index.ts                          |   3 +-
 src/renderer/src/i18n/locales/en-us.json      |   4 +-
 src/renderer/src/i18n/locales/ja-jp.json      |   4 +-
 src/renderer/src/i18n/locales/ru-ru.json      |   4 +-
 src/renderer/src/i18n/locales/zh-cn.json      |   4 +-
 src/renderer/src/i18n/locales/zh-tw.json      |   4 +-
 .../src/pages/home/Messages/MessageTools.tsx  |  17 +-
 .../settings/MCPSettings/EditMcpJsonPopup.tsx | 152 ++++++++++++++++++
 .../settings/MCPSettings/InstallNpxUv.tsx     | 139 +++++++++++-----
 .../settings/MCPSettings/McpSettings.tsx      |   2 -
 .../MCPSettings/McpSettingsNavbar.tsx         |  49 ++++++
 .../src/pages/settings/MCPSettings/index.tsx  |  82 +++++-----
 .../src/pages/settings/SettingsPage.tsx       |   3 +-
 17 files changed, 388 insertions(+), 107 deletions(-)
 create mode 100644 src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx
 create mode 100644 src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx

diff --git a/src/main/ipc.ts b/src/main/ipc.ts
index 26630c20..85817efc 100644
--- a/src/main/ipc.ts
+++ b/src/main/ipc.ts
@@ -266,6 +266,7 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
   ipcMain.handle('mcp:remove-server', mcpService.removeServer)
   ipcMain.handle('mcp:list-tools', mcpService.listTools)
   ipcMain.handle('mcp:call-tool', mcpService.callTool)
+  ipcMain.handle('mcp:get-install-info', mcpService.getInstallInfo)
 
   ipcMain.handle('app:is-binary-exist', (_, name: string) => isBinaryExists(name))
   ipcMain.handle('app:get-binary-path', (_, name: string) => getBinaryPath(name))
diff --git a/src/main/services/MCPService.ts b/src/main/services/MCPService.ts
index 0b33269d..e37a9b4f 100644
--- a/src/main/services/MCPService.ts
+++ b/src/main/services/MCPService.ts
@@ -1,4 +1,7 @@
-import { getBinaryPath } from '@main/utils/process'
+import os from 'node:os'
+import path from 'node:path'
+
+import { getBinaryName, getBinaryPath } from '@main/utils/process'
 import { Client } from '@modelcontextprotocol/sdk/client/index.js'
 import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js'
 import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js'
@@ -152,6 +155,15 @@ class McpService {
       throw error
     }
   }
+
+  public async getInstallInfo() {
+    const dir = path.join(os.homedir(), '.cherrystudio', 'bin')
+    const uvName = await getBinaryName('uv')
+    const bunName = await getBinaryName('bun')
+    const uvPath = path.join(dir, uvName)
+    const bunPath = path.join(dir, bunName)
+    return { dir, uvPath, bunPath }
+  }
 }
 
 export default new McpService()
diff --git a/src/main/utils/process.ts b/src/main/utils/process.ts
index e4151c01..e10cdc4b 100644
--- a/src/main/utils/process.ts
+++ b/src/main/utils/process.ts
@@ -35,12 +35,18 @@ export function runInstallScript(scriptPath: string): Promise<void> {
   })
 }
 
+export async function getBinaryName(name: string): Promise<string> {
+  if (process.platform === 'win32') {
+    return `${name}.exe`
+  }
+  return name
+}
+
 export async function getBinaryPath(name: string): Promise<string> {
-  let cmd = process.platform === 'win32' ? `${name}.exe` : name
+  const binaryName = await getBinaryName(name)
   const binariesDir = path.join(os.homedir(), '.cherrystudio', 'bin')
   const binariesDirExists = await fs.existsSync(binariesDir)
-  cmd = binariesDirExists ? path.join(binariesDir, cmd) : name
-  return cmd
+  return binariesDirExists ? path.join(binariesDir, binaryName) : binaryName
 }
 
 export async function isBinaryExists(name: string): Promise<boolean> {
diff --git a/src/preload/index.d.ts b/src/preload/index.d.ts
index e109e1e1..bb2b3efa 100644
--- a/src/preload/index.d.ts
+++ b/src/preload/index.d.ts
@@ -149,6 +149,7 @@ declare global {
         removeServer: (server: MCPServer) => Promise<void>
         listTools: (server: MCPServer) => Promise<MCPTool[]>
         callTool: ({ server, name, args }: { server: MCPServer; name: string; args: any }) => Promise<any>
+        getInstallInfo: () => Promise<{ dir: string; uvPath: string; bunPath: string }>
       }
       copilot: {
         getAuthMessage: (
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 4d3ebbc1..53a6dd7a 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -123,7 +123,8 @@ const api = {
     removeServer: (server: MCPServer) => ipcRenderer.invoke('mcp:remove-server', server),
     listTools: (server: MCPServer) => ipcRenderer.invoke('mcp:list-tools', server),
     callTool: ({ server, name, args }: { server: MCPServer; name: string; args: any }) =>
-      ipcRenderer.invoke('mcp:call-tool', { server, name, args })
+      ipcRenderer.invoke('mcp:call-tool', { server, name, args }),
+    getInstallInfo: () => ipcRenderer.invoke('mcp:get-install-info')
   },
   shell: {
     openExternal: shell.openExternal
diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json
index 0f762b82..eb89df31 100644
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@@ -1010,7 +1010,9 @@
         "type": "Type",
         "updateError": "Failed to update server",
         "updateSuccess": "Server updated successfully",
-        "url": "URL"
+        "url": "URL",
+        "editMcpJson": "Edit MCP Configuration",
+        "installHelp": "Get Installation Help"
       },
       "messages.divider": "Show divider between messages",
       "messages.grid_columns": "Message grid display columns",
diff --git a/src/renderer/src/i18n/locales/ja-jp.json b/src/renderer/src/i18n/locales/ja-jp.json
index 99ae427d..fa643781 100644
--- a/src/renderer/src/i18n/locales/ja-jp.json
+++ b/src/renderer/src/i18n/locales/ja-jp.json
@@ -1009,7 +1009,9 @@
         "url": "URL",
         "errors": {
           "32000": "MCP サーバーが起動しませんでした。パラメーターを確認してください"
-        }
+        },
+        "editMcpJson": "MCP 設定を編集",
+        "installHelp": "インストールヘルプを取得"
       },
       "messages.divider": "メッセージ間に区切り線を表示",
       "messages.grid_columns": "メッセージグリッドの表示列数",
diff --git a/src/renderer/src/i18n/locales/ru-ru.json b/src/renderer/src/i18n/locales/ru-ru.json
index fbe8c6f2..118f1b5b 100644
--- a/src/renderer/src/i18n/locales/ru-ru.json
+++ b/src/renderer/src/i18n/locales/ru-ru.json
@@ -1009,7 +1009,9 @@
         "type": "Тип",
         "updateError": "Ошибка обновления сервера",
         "updateSuccess": "Сервер успешно обновлен",
-        "url": "URL"
+        "url": "URL",
+        "editMcpJson": "Редактировать MCP 配置",
+        "installHelp": "Получить помощь по установке"
       },
       "messages.divider": "Показывать разделитель между сообщениями",
       "messages.grid_columns": "Количество столбцов сетки сообщений",
diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json
index 57e6598d..0bcc8fce 100644
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@@ -1010,7 +1010,9 @@
         "type": "类型",
         "updateError": "更新服务器失败",
         "updateSuccess": "服务器更新成功",
-        "url": "URL"
+        "url": "URL",
+        "editMcpJson": "编辑 MCP 配置",
+        "installHelp": "获取安装帮助"
       },
       "messages.divider": "消息分割线",
       "messages.grid_columns": "消息网格展示列数",
diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json
index 6f678952..d7133db2 100644
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@@ -1009,7 +1009,9 @@
         "type": "類型",
         "updateError": "更新伺服器失敗",
         "updateSuccess": "伺服器更新成功",
-        "url": "URL"
+        "url": "URL",
+        "editMcpJson": "編輯 MCP 配置",
+        "installHelp": "獲取安裝幫助"
       },
       "messages.divider": "訊息間顯示分隔線",
       "messages.grid_columns": "訊息網格展示列數",
diff --git a/src/renderer/src/pages/home/Messages/MessageTools.tsx b/src/renderer/src/pages/home/Messages/MessageTools.tsx
index cd3d334b..59fc0269 100644
--- a/src/renderer/src/pages/home/Messages/MessageTools.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageTools.tsx
@@ -101,7 +101,7 @@ const MessageTools: FC<Props> = ({ message }) => {
         ),
         children: isDone && result && (
           <ToolResponseContainer style={{ fontFamily, fontSize: '12px' }}>
-            <pre>{JSON.stringify(result, null, 2)}</pre>
+            <CodeBlock>{JSON.stringify(result, null, 2)}</CodeBlock>
           </ToolResponseContainer>
         )
       })
@@ -144,7 +144,7 @@ const MessageTools: FC<Props> = ({ message }) => {
               aria-label={t('common.copy')}>
               <i className="iconfont icon-copy"></i>
             </ActionButton>
-            <pre>{expandedResponse.content}</pre>
+            <CodeBlock>{expandedResponse.content}</CodeBlock>
           </ExpandedResponseContainer>
         )}
       </Modal>
@@ -255,13 +255,14 @@ const ToolResponseContainer = styled.div`
   max-height: 300px;
   border-top: 1px solid var(--color-border);
   position: relative;
+`
 
-  pre {
-    margin: 0;
-    white-space: pre-wrap;
-    word-break: break-word;
-    color: var(--color-text);
-  }
+const CodeBlock = styled.pre`
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--color-text);
+  font-family: ubuntu;
 `
 
 const ExpandedResponseContainer = styled.div`
diff --git a/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx b/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx
new file mode 100644
index 00000000..bc9a9463
--- /dev/null
+++ b/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx
@@ -0,0 +1,152 @@
+import { TopView } from '@renderer/components/TopView'
+import { useAppDispatch, useAppSelector } from '@renderer/store'
+import { setMCPServers } from '@renderer/store/mcp'
+import { MCPServer } from '@renderer/types'
+import { Modal, Typography } from 'antd'
+import TextArea from 'antd/es/input/TextArea'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  resolve: (data: any) => void
+}
+
+const PopupContainer: React.FC<Props> = ({ resolve }) => {
+  const [open, setOpen] = useState(true)
+  const [jsonConfig, setJsonConfig] = useState('')
+  const [jsonSaving, setJsonSaving] = useState(false)
+  const [jsonError, setJsonError] = useState('')
+  const mcpServers = useAppSelector((state) => state.mcp.servers)
+
+  const dispatch = useAppDispatch()
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    try {
+      const mcpServersObj: Record<string, any> = {}
+
+      mcpServers.forEach((server) => {
+        const { id, ...serverData } = server
+        mcpServersObj[id] = serverData
+      })
+
+      const standardFormat = {
+        mcpServers: mcpServersObj
+      }
+
+      const formattedJson = JSON.stringify(standardFormat, null, 2)
+      setJsonConfig(formattedJson)
+      setJsonError('')
+    } catch (error) {
+      console.error('Failed to format JSON:', error)
+      setJsonError(t('settings.mcp.jsonFormatError'))
+    }
+  }, [mcpServers, t])
+
+  const onOk = async () => {
+    setJsonSaving(true)
+
+    try {
+      if (!jsonConfig.trim()) {
+        dispatch(setMCPServers([]))
+        window.message.success(t('settings.mcp.jsonSaveSuccess'))
+        setJsonError('')
+        setJsonSaving(false)
+        return
+      }
+
+      const parsedConfig = JSON.parse(jsonConfig)
+
+      if (!parsedConfig.mcpServers || typeof parsedConfig.mcpServers !== 'object') {
+        throw new Error(t('settings.mcp.invalidMcpFormat'))
+      }
+
+      const serversArray: MCPServer[] = []
+
+      for (const [id, serverConfig] of Object.entries(parsedConfig.mcpServers)) {
+        const server: MCPServer = {
+          id,
+          isActive: false,
+          ...(serverConfig as any)
+        }
+        serversArray.push(server)
+      }
+
+      dispatch(setMCPServers(serversArray))
+
+      window.message.success(t('settings.mcp.jsonSaveSuccess'))
+      setJsonError('')
+      setOpen(false)
+    } catch (error: any) {
+      console.error('Failed to save JSON config:', error)
+      setJsonError(error.message || t('settings.mcp.jsonSaveError'))
+      window.message.error(t('settings.mcp.jsonSaveError'))
+    } finally {
+      setJsonSaving(false)
+    }
+  }
+
+  const onCancel = () => {
+    setOpen(false)
+  }
+
+  const onClose = () => {
+    resolve({})
+  }
+
+  EditMcpJsonPopup.hide = onCancel
+
+  return (
+    <Modal
+      title={t('settings.mcp.editJson')}
+      open={open}
+      onOk={onOk}
+      onCancel={onCancel}
+      afterClose={onClose}
+      width={800}
+      height="80vh"
+      loading={jsonSaving}
+      transitionName="ant-move-down"
+      centered>
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
+        <Typography.Text type="secondary">
+          {jsonError ? <span style={{ color: 'red' }}>{jsonError}</span> : ''}
+        </Typography.Text>
+      </div>
+      <TextArea
+        value={jsonConfig}
+        onChange={(e) => setJsonConfig(e.target.value)}
+        style={{
+          width: '100%',
+          fontFamily: 'monospace',
+          minHeight: '60vh',
+          marginBottom: '16px'
+        }}
+        onFocus={() => setJsonError('')}
+      />
+      <Typography.Text type="secondary">{t('settings.mcp.jsonModeHint')}</Typography.Text>
+    </Modal>
+  )
+}
+
+const TopViewKey = 'EditMcpJsonPopup'
+
+export default class EditMcpJsonPopup {
+  static topviewId = 0
+  static hide() {
+    TopView.hide(TopViewKey)
+  }
+  static show() {
+    return new Promise<any>((resolve) => {
+      TopView.show(
+        <PopupContainer
+          resolve={(v) => {
+            resolve(v)
+            TopView.hide(TopViewKey)
+          }}
+        />,
+        TopViewKey
+      )
+    })
+  }
+}
diff --git a/src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx b/src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx
index b7a4dc5c..d1043af9 100644
--- a/src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx
@@ -1,23 +1,37 @@
+import { CheckCircleOutlined, QuestionCircleOutlined, WarningOutlined } from '@ant-design/icons'
+import { Center, VStack } from '@renderer/components/Layout'
+import { EventEmitter } from '@renderer/services/EventService'
 import { Alert, Button } from 'antd'
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import { SettingRow, SettingSubtitle } from '..'
+import { SettingDescription, SettingRow, SettingSubtitle } from '..'
 
-const InstallNpxUv: FC = () => {
+interface Props {
+  mini?: boolean
+}
+
+const InstallNpxUv: FC<Props> = ({ mini = false }) => {
   const [isUvInstalled, setIsUvInstalled] = useState(true)
   const [isBunInstalled, setIsBunInstalled] = useState(true)
   const [isInstallingUv, setIsInstallingUv] = useState(false)
   const [isInstallingBun, setIsInstallingBun] = useState(false)
+  const [uvPath, setUvPath] = useState<string | null>(null)
+  const [bunPath, setBunPath] = useState<string | null>(null)
+  const [binariesDir, setBinariesDir] = useState<string | null>(null)
   const { t } = useTranslation()
 
   const checkBinaries = async () => {
     const uvExists = await window.api.isBinaryExist('uv')
     const bunExists = await window.api.isBinaryExist('bun')
+    const { uvPath, bunPath, dir } = await window.api.mcp.getInstallInfo()
 
     setIsUvInstalled(uvExists)
     setIsBunInstalled(bunExists)
+    setUvPath(uvPath)
+    setBunPath(bunPath)
+    setBinariesDir(dir)
   }
 
   const installUV = async () => {
@@ -53,56 +67,99 @@ const InstallNpxUv: FC = () => {
     checkBinaries()
   }, [])
 
-  if (isUvInstalled && isBunInstalled) {
-    return null
+  if (mini) {
+    const installed = isUvInstalled && isBunInstalled
+    return (
+      <Button
+        type="primary"
+        size="small"
+        variant="filled"
+        shape="circle"
+        icon={installed ? <CheckCircleOutlined /> : <WarningOutlined />}
+        className="nodrag"
+        color={installed ? 'green' : 'danger'}
+        onClick={() => EventEmitter.emit('mcp:mcp-install')}
+      />
+    )
+  }
+
+  const openBinariesDir = () => {
+    if (binariesDir) {
+      window.api.openPath(binariesDir)
+    }
+  }
+
+  const onHelp = () => {
+    window.open('https://docs.cherry-ai.com/advanced-basic/mcp', '_blank')
   }
 
   return (
     <Container>
-      {!isUvInstalled && (
-        <Alert
-          type="warning"
-          banner
-          style={{ padding: 8 }}
-          description={
-            <SettingRow>
+      <Alert
+        type={isUvInstalled ? 'success' : 'warning'}
+        banner
+        description={
+          <VStack>
+            <SettingRow style={{ width: '100%' }}>
               <SettingSubtitle style={{ margin: 0, fontWeight: 'normal' }}>
                 {isUvInstalled ? 'UV Installed' : `UV ${t('settings.mcp.missingDependencies')}`}
               </SettingSubtitle>
-              <Button
-                type="primary"
-                onClick={installUV}
-                loading={isInstallingUv}
-                disabled={isInstallingUv}
-                size="small">
-                {isInstallingUv ? t('settings.mcp.dependenciesInstalling') : t('settings.mcp.install')}
-              </Button>
+              {!isUvInstalled && (
+                <Button
+                  type="primary"
+                  onClick={installUV}
+                  loading={isInstallingUv}
+                  disabled={isInstallingUv}
+                  size="small">
+                  {isInstallingUv ? t('settings.mcp.dependenciesInstalling') : t('settings.mcp.install')}
+                </Button>
+              )}
             </SettingRow>
-          }
-        />
-      )}
-      {!isBunInstalled && (
-        <Alert
-          type="warning"
-          banner
-          style={{ padding: 8 }}
-          description={
-            <SettingRow>
+            <SettingRow style={{ width: '100%' }}>
+              <SettingDescription
+                onClick={openBinariesDir}
+                style={{ margin: 0, fontWeight: 'normal', cursor: 'pointer' }}>
+                {uvPath}
+              </SettingDescription>
+            </SettingRow>
+          </VStack>
+        }
+      />
+      <Alert
+        type={isBunInstalled ? 'success' : 'warning'}
+        banner
+        description={
+          <VStack>
+            <SettingRow style={{ width: '100%' }}>
               <SettingSubtitle style={{ margin: 0, fontWeight: 'normal' }}>
                 {isBunInstalled ? 'Bun Installed' : `Bun ${t('settings.mcp.missingDependencies')}`}
               </SettingSubtitle>
-              <Button
-                type="primary"
-                onClick={installBun}
-                loading={isInstallingBun}
-                disabled={isInstallingBun}
-                size="small">
-                {isInstallingBun ? t('settings.mcp.dependenciesInstalling') : t('settings.mcp.install')}
-              </Button>
+              {!isBunInstalled && (
+                <Button
+                  type="primary"
+                  onClick={installBun}
+                  loading={isInstallingBun}
+                  disabled={isInstallingBun}
+                  size="small">
+                  {isInstallingBun ? t('settings.mcp.dependenciesInstalling') : t('settings.mcp.install')}
+                </Button>
+              )}
             </SettingRow>
-          }
-        />
-      )}
+            <SettingRow style={{ width: '100%' }}>
+              <SettingDescription
+                onClick={openBinariesDir}
+                style={{ margin: 0, fontWeight: 'normal', cursor: 'pointer' }}>
+                {bunPath}
+              </SettingDescription>
+            </SettingRow>
+          </VStack>
+        }
+      />
+      <Center>
+        <Button type="link" onClick={onHelp} icon={<QuestionCircleOutlined />}>
+          {t('settings.mcp.installHelp')}
+        </Button>
+      </Center>
     </Container>
   )
 }
@@ -111,7 +168,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
-  gap: 10px;
+  gap: 12px;
 `
 
 export default InstallNpxUv
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx b/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
index a23ab9a1..ff141d12 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import { SettingContainer, SettingDivider, SettingTitle } from '..'
-import InstallNpxUv from './InstallNpxUv'
 
 interface Props {
   server: MCPServer
@@ -165,7 +164,6 @@ const McpSettings: React.FC<Props> = ({ server }) => {
 
   return (
     <SettingContainer style={{ background: 'transparent' }}>
-      <InstallNpxUv />
       <SettingTitle>
         <Flex align="center" gap={8}>
           <ServerName>{server?.name}</ServerName>
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx b/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx
new file mode 100644
index 00000000..bcc0346c
--- /dev/null
+++ b/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx
@@ -0,0 +1,49 @@
+import { EditOutlined, ExportOutlined, SearchOutlined } from '@ant-design/icons'
+import { NavbarRight } from '@renderer/components/app/Navbar'
+import { HStack } from '@renderer/components/Layout'
+import { EventEmitter } from '@renderer/services/EventService'
+import { Button } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import EditMcpJsonPopup from './EditMcpJsonPopup'
+import InstallNpxUv from './InstallNpxUv'
+
+export const McpSettingsNavbar = () => {
+  const { t } = useTranslation()
+  const onClick = () => window.open('https://mcp.so/', '_blank')
+
+  return (
+    <NavbarRight>
+      <HStack alignItems="center" gap={5}>
+        <Button
+          size="small"
+          type="text"
+          onClick={() => EventEmitter.emit('mcp:npx-search')}
+          icon={<SearchOutlined />}
+          className="nodrag"
+          style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
+          {t('settings.mcp.searchNpx')}
+        </Button>
+        <Button
+          size="small"
+          type="text"
+          onClick={() => EditMcpJsonPopup.show()}
+          icon={<EditOutlined />}
+          className="nodrag"
+          style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
+          {t('settings.mcp.editMcpJson')}
+        </Button>
+        <Button
+          size="small"
+          type="text"
+          onClick={onClick}
+          icon={<ExportOutlined />}
+          className="nodrag"
+          style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
+          {t('settings.mcp.findMore')}
+        </Button>
+        <InstallNpxUv mini />
+      </HStack>
+    </NavbarRight>
+  )
+}
diff --git a/src/renderer/src/pages/settings/MCPSettings/index.tsx b/src/renderer/src/pages/settings/MCPSettings/index.tsx
index ebaa6c18..8b2bc243 100644
--- a/src/renderer/src/pages/settings/MCPSettings/index.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/index.tsx
@@ -1,21 +1,22 @@
-import { CodeOutlined, DeleteOutlined, ExportOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons'
+import { CodeOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons'
 import { nanoid } from '@reduxjs/toolkit'
-import { NavbarRight } from '@renderer/components/app/Navbar'
 import DragableList from '@renderer/components/DragableList'
 import IndicatorLight from '@renderer/components/IndicatorLight'
 import { HStack } from '@renderer/components/Layout'
 import ListItem from '@renderer/components/ListItem'
 import Scrollbar from '@renderer/components/Scrollbar'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import { EventEmitter } from '@renderer/services/EventService'
 import { MCPServer } from '@renderer/types'
-import { Button, Dropdown, MenuProps } from 'antd'
+import { Dropdown, MenuProps } from 'antd'
 import { isEmpty } from 'lodash'
 import { FC, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import { SettingContainer } from '..'
+import InstallNpxUv from './InstallNpxUv'
 import McpSettings from './McpSettings'
 import NpxSearch from './NpxSearch'
 
@@ -23,11 +24,15 @@ const MCPSettings: FC = () => {
   const { t } = useTranslation()
   const { mcpServers, addMCPServer, updateMcpServers, deleteMCPServer } = useMCPServers()
   const [selectedMcpServer, setSelectedMcpServer] = useState<MCPServer | null>(mcpServers[0])
-  const [isNpxSearch, setIsNpxSearch] = useState(false)
+  const [route, setRoute] = useState<'npx-search' | 'mcp-install' | null>(null)
+  const { theme } = useTheme()
 
   useEffect(() => {
-    const unsub = EventEmitter.on('open-npx-search', () => setIsNpxSearch(true))
-    return () => unsub()
+    const unsubs = [
+      EventEmitter.on('mcp:npx-search', () => setRoute('npx-search')),
+      EventEmitter.on('mcp:mcp-install', () => setRoute('mcp-install'))
+    ]
+    return () => unsubs.forEach((unsub) => unsub())
   }, [])
 
   const onAddMcpServer = async () => {
@@ -83,6 +88,30 @@ const MCPSettings: FC = () => {
     setSelectedMcpServer(_selectedMcpServer || mcpServers[0])
   }, [mcpServers, selectedMcpServer])
 
+  const MainContent = () => {
+    if (route === 'npx-search' || isEmpty(mcpServers)) {
+      return (
+        <SettingContainer theme={theme}>
+          <NpxSearch />
+        </SettingContainer>
+      )
+    }
+
+    if (route === 'mcp-install') {
+      return (
+        <SettingContainer theme={theme}>
+          <InstallNpxUv />
+        </SettingContainer>
+      )
+    }
+
+    if (selectedMcpServer) {
+      return <McpSettings server={selectedMcpServer} />
+    }
+
+    return <NpxSearch />
+  }
+
   return (
     <Container>
       <McpList>
@@ -105,7 +134,7 @@ const MCPSettings: FC = () => {
                   active={selectedMcpServer?.id === server.id}
                   onClick={() => {
                     setSelectedMcpServer(server)
-                    setIsNpxSearch(false)
+                    setRoute(null)
                   }}
                   titleStyle={{ fontWeight: 500 }}
                   icon={<CodeOutlined />}
@@ -124,48 +153,11 @@ const MCPSettings: FC = () => {
           )}
         </DragableList>
       </McpList>
-
-      {isNpxSearch || isEmpty(mcpServers) ? (
-        <SettingContainer>
-          <NpxSearch />
-        </SettingContainer>
-      ) : (
-        selectedMcpServer && <McpSettings server={selectedMcpServer} />
-      )}
+      <MainContent />
     </Container>
   )
 }
 
-export const McpSettingsNavbar = () => {
-  const { t } = useTranslation()
-  const onClick = () => window.open('https://mcp.so/', '_blank')
-
-  return (
-    <NavbarRight>
-      <HStack alignItems="center" gap={5}>
-        <Button
-          size="small"
-          type="text"
-          onClick={() => EventEmitter.emit('open-npx-search')}
-          icon={<SearchOutlined />}
-          className="nodrag"
-          style={{ fontSize: 14 }}>
-          {t('settings.mcp.searchNpx')}
-        </Button>
-        <Button
-          size="small"
-          type="text"
-          onClick={onClick}
-          icon={<ExportOutlined />}
-          className="nodrag"
-          style={{ fontSize: 14 }}>
-          {t('settings.mcp.findMore')}
-        </Button>
-      </HStack>
-    </NavbarRight>
-  )
-}
-
 const Container = styled(HStack)`
   flex: 1;
 `
diff --git a/src/renderer/src/pages/settings/SettingsPage.tsx b/src/renderer/src/pages/settings/SettingsPage.tsx
index 551eadda..e661cf14 100644
--- a/src/renderer/src/pages/settings/SettingsPage.tsx
+++ b/src/renderer/src/pages/settings/SettingsPage.tsx
@@ -21,7 +21,8 @@ import AboutSettings from './AboutSettings'
 import DataSettings from './DataSettings/DataSettings'
 import DisplaySettings from './DisplaySettings/DisplaySettings'
 import GeneralSettings from './GeneralSettings'
-import MCPSettings, { McpSettingsNavbar } from './MCPSettings'
+import MCPSettings from './MCPSettings'
+import { McpSettingsNavbar } from './MCPSettings/McpSettingsNavbar'
 import ProvidersList from './ProviderSettings'
 import QuickAssistantSettings from './QuickAssistantSettings'
 import ShortcutSettings from './ShortcutSettings'