refactor: mcp service

2025-03-28 03:31:15 +08:00
parent 807ae349a3
commit e3d81b49df
49 changed files with 861 additions and 1583 deletions
@@ -19,7 +19,7 @@
  --color-gray-2: #414853;
  --color-gray-3: #32363f;

-  --color-text-1: rgba(255, 255, 245, 0.86);
+  --color-text-1: rgba(255, 255, 245, 0.9);
  --color-text-2: rgba(235, 235, 245, 0.6);
  --color-text-3: rgba(235, 235, 245, 0.38);

@@ -23,7 +23,7 @@ const Container = styled.div`
 `

 const Icon = styled(ToolOutlined)`
-  color: #d97757;
+  color: var(--color-primary);
  font-size: 15px;
  margin-right: 6px;
 `
@@ -4,15 +4,25 @@ import styled from 'styled-components'

 interface IndicatorLightProps {
  color: string
+  size?: number
+  shadow?: boolean
+  style?: React.CSSProperties
+  animation?: boolean
 }

-const Light = styled.div<{ color: string }>`
-  width: 8px;
-  height: 8px;
+const Light = styled.div<{
+  color: string
+  size: number
+  shadow?: boolean
+  style?: React.CSSProperties
+  animation?: boolean
+}>`
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
  border-radius: 50%;
  background-color: ${({ color }) => color};
-  box-shadow: 0 0 6px ${({ color }) => color};
-  animation: pulse 2s infinite;
+  box-shadow: ${({ shadow, color }) => (shadow ? `0 0 6px ${color}` : 'none')};
+  animation: ${({ animation }) => (animation ? 'pulse 2s infinite' : 'none')};

  @keyframes pulse {
    0% {
@@ -27,9 +37,9 @@ const Light = styled.div<{ color: string }>`
  }
 `

-const IndicatorLight: React.FC<IndicatorLightProps> = ({ color }) => {
+const IndicatorLight: React.FC<IndicatorLightProps> = ({ color, size = 8, shadow = true, style, animation = true }) => {
  const actualColor = color === 'green' ? '#22c55e' : color
-  return <Light color={actualColor} />
+  return <Light color={actualColor} size={size} shadow={shadow} style={style} animation={animation} />
 }

 export default IndicatorLight
@@ -8,17 +8,20 @@ interface ListItemProps {
  subtitle?: string
  titleStyle?: React.CSSProperties
  onClick?: () => void
+  rightContent?: ReactNode
+  style?: React.CSSProperties
 }

-const ListItem = ({ active, icon, title, subtitle, titleStyle, onClick }: ListItemProps) => {
+const ListItem = ({ active, icon, title, subtitle, titleStyle, onClick, rightContent, style }: ListItemProps) => {
  return (
-    <ListItemContainer className={active ? 'active' : ''} onClick={onClick}>
+    <ListItemContainer className={active ? 'active' : ''} onClick={onClick} style={style}>
      <ListItemContent>
        {icon && <IconWrapper>{icon}</IconWrapper>}
        <TextContainer>
          <TitleText style={titleStyle}>{title}</TitleText>
          {subtitle && <SubtitleText>{subtitle}</SubtitleText>}
        </TextContainer>
+        {rightContent && <RightContentWrapper>{rightContent}</RightContentWrapper>}
      </ListItemContent>
    </ListItemContainer>
  )
@@ -84,4 +87,8 @@ const SubtitleText = styled.div`
  color: var(--color-text-3);
 `

+const RightContentWrapper = styled.div`
+  margin-left: auto;
+`
+
 export default ListItem
@@ -1,4 +1,4 @@
-import { isMac } from '@renderer/config/constant'
+import { isMac, isWindows } from '@renderer/config/constant'
 import useNavBackgroundColor from '@renderer/hooks/useNavBackgroundColor'
 import type { FC, PropsWithChildren } from 'react'
 import type { HTMLAttributes } from 'react'
@@ -63,4 +63,6 @@ const NavbarRightContainer = styled.div`
  display: flex;
  align-items: center;
  padding: 0 12px;
+  padding-right: ${isWindows ? '140px' : 12};
+  justify-content: flex-end;
 `
@@ -11,7 +11,6 @@ import { useEffect } from 'react'

 import { useDefaultModel } from './useAssistant'
 import useFullScreenNotice from './useFullScreenNotice'
-import { useInitMCPServers } from './useMCPServers'
 import { useRuntime } from './useRuntime'
 import { useSettings } from './useSettings'
 import useUpdateHandler from './useUpdateHandler'
@@ -26,7 +25,6 @@ export function useAppInit() {

  useUpdateHandler()
  useFullScreenNotice()
-  useInitMCPServers()

  useEffect(() => {
    avatar?.value && dispatch(setAvatar(avatar.value))
@@ -1,7 +1,6 @@
-import store, { useAppSelector } from '@renderer/store'
-import { setMCPServers } from '@renderer/store/mcp'
+import store, { useAppDispatch, useAppSelector } from '@renderer/store'
+import { addMCPServer, deleteMCPServer, setMCPServers, updateMCPServer } from '@renderer/store/mcp'
 import { MCPServer } from '@renderer/types'
-import { useEffect } from 'react'

 const ipcRenderer = window.electron.ipcRenderer

@@ -13,82 +12,16 @@ ipcRenderer.on('mcp:servers-changed', (_event, servers) => {
 export const useMCPServers = () => {
  const mcpServers = useAppSelector((state) => state.mcp.servers)
  const activedMcpServers = useAppSelector((state) => state.mcp.servers?.filter((server) => server.isActive))
-
-  const addMCPServer = async (server: MCPServer) => {
-    try {
-      await window.api.mcp.addServer(server)
-      // Main process will send back updated servers via mcp:servers-changed
-    } catch (error) {
-      console.error('Failed to add MCP server:', error)
-      throw error
-    }
-  }
-
-  const updateMCPServer = async (server: MCPServer) => {
-    try {
-      await window.api.mcp.updateServer(server)
-      // Main process will send back updated servers via mcp:servers-changed
-    } catch (error) {
-      console.error('Failed to update MCP server:', error)
-      throw error
-    }
-  }
-
-  const deleteMCPServer = async (name: string) => {
-    try {
-      await window.api.mcp.deleteServer(name)
-      // Main process will send back updated servers via mcp:servers-changed
-    } catch (error) {
-      console.error('Failed to delete MCP server:', error)
-      throw error
-    }
-  }
-
-  const setMCPServerActive = async (name: string, isActive: boolean) => {
-    try {
-      await window.api.mcp.setServerActive(name, isActive)
-      // Main process will send back updated servers via mcp:servers-changed
-    } catch (error) {
-      console.error('Failed to set MCP server active status:', error)
-      throw error
-    }
-  }
-
-  const getActiveMCPServers = () => {
-    return mcpServers.filter((server) => server.isActive)
-  }
+  const dispatch = useAppDispatch()

  return {
    mcpServers,
    activedMcpServers,
-    addMCPServer,
-    updateMCPServer,
-    deleteMCPServer,
-    setMCPServerActive,
-    getActiveMCPServers
+    addMCPServer: (server: MCPServer) => dispatch(addMCPServer(server)),
+    updateMCPServer: (server: MCPServer) => dispatch(updateMCPServer(server)),
+    deleteMCPServer: (id: string) => dispatch(deleteMCPServer(id)),
+    setMCPServerActive: (server: MCPServer, isActive: boolean) => dispatch(updateMCPServer({ ...server, isActive })),
+    getActiveMCPServers: () => mcpServers.filter((server) => server.isActive),
+    updateMcpServers: (servers: MCPServer[]) => dispatch(setMCPServers(servers))
  }
 }
-
-export const useInitMCPServers = () => {
-  const mcpServers = useAppSelector((state) => state.mcp.servers)
-  // const dispatch = useAppDispatch()
-
-  // Send servers to main process when they change in Redux
-  useEffect(() => {
-    ipcRenderer.send('mcp:servers-from-renderer', mcpServers)
-  }, [mcpServers])
-
-  // Initial load of MCP servers from main process
-  // useEffect(() => {
-  //   const loadServers = async () => {
-  //     try {
-  //       const servers = await window.api.mcp.listServers()
-  //       dispatch(setMCPServers(servers))
-  //     } catch (error) {
-  //       console.error('Failed to load MCP servers:', error)
-  //     }
-  //   }
-
-  //   loadServers()
-  // }, [dispatch])
-}
@@ -961,10 +961,7 @@
        "argsTooltip": "Each argument on a new line",
        "baseUrlTooltip": "Remote server base URL",
        "command": "Command",
-        "commandRequired": "Please enter a command",
        "config_description": "Configure Model Context Protocol servers",
-        "confirmDelete": "Delete Server",
-        "confirmDeleteMessage": "Are you sure you want to delete the server?",
        "deleteError": "Failed to delete server",
        "deleteSuccess": "Server deleted successfully",
        "dependenciesInstall": "Install Dependencies",
@@ -975,7 +972,8 @@
        "editServer": "Edit Server",
        "env": "Environment Variables",
        "envTooltip": "Format: KEY=value, one per line",
-        "findMore": "Find More MCP Servers",
+        "findMore": "Find More MCP",
+        "searchNpx": "Search MCP",
        "install": "Install",
        "installError": "Failed to install dependencies",
        "installSuccess": "Dependencies installed successfully",
@@ -985,8 +983,8 @@
        "jsonSaveSuccess": "JSON configuration has been saved.",
        "missingDependencies": "is Missing, please install it to continue.",
        "name": "Name",
-        "nameRequired": "Please enter a server name",
        "noServers": "No servers configured",
+        "newServer": "MCP Server",
        "npx_list": {
          "actions": "Actions",
          "desc": "Search and add npm packages as MCP servers",
@@ -1002,10 +1000,13 @@
          "usage": "Usage",
          "version": "Version"
        },
+        "errors": {
+          "32000": "MCP server failed to start, please check the parameters according to the tutorial"
+        },
        "serverPlural": "servers",
        "serverSingular": "server",
        "title": "MCP Servers",
-        "toggleError": "Toggle failed",
+        "startError": "Start failed",
        "type": "Type",
        "updateError": "Failed to update server",
        "updateSuccess": "Server updated successfully",
@@ -960,10 +960,7 @@
        "argsTooltip": "1行に1つの引数を入力してください",
        "baseUrlTooltip": "リモートURLアドレス",
        "command": "コマンド",
-        "commandRequired": "コマンドを入力してください",
        "config_description": "モデルコンテキストプロトコルサーバーの設定",
-        "confirmDelete": "サーバーを削除",
-        "confirmDeleteMessage": "本当にこのサーバーを削除しますか？",
        "deleteError": "サーバーの削除に失敗しました",
        "deleteSuccess": "サーバーが正常に削除されました",
        "dependenciesInstall": "依存関係をインストール",
@@ -974,7 +971,8 @@
        "editServer": "サーバーを編集",
        "env": "環境変数",
        "envTooltip": "形式: KEY=value, 1行に1つ",
-        "findMore": "MCP サーバーを見つける",
+        "findMore": "MCP を見つける",
+        "searchNpx": "MCP を検索",
        "install": "インストール",
        "installError": "依存関係のインストールに失敗しました",
        "installSuccess": "依存関係のインストールに成功しました",
@@ -984,8 +982,8 @@
        "jsonSaveSuccess": "JSON設定が保存されました。",
        "missingDependencies": "が不足しています。続行するにはインストールしてください。",
        "name": "名前",
-        "nameRequired": "サーバー名を入力してください",
        "noServers": "サーバーが設定されていません",
+        "newServer": "MCP サーバー",
        "npx_list": {
          "actions": "アクション",
          "desc": "npm パッケージを検索して MCP サーバーとして追加",
@@ -1004,11 +1002,14 @@
        "serverPlural": "サーバー",
        "serverSingular": "サーバー",
        "title": "MCP サーバー",
-        "toggleError": "切り替えに失敗しました",
+        "startError": "起動に失敗しました",
        "type": "タイプ",
        "updateError": "サーバーの更新に失敗しました",
        "updateSuccess": "サーバーが正常に更新されました",
-        "url": "URL"
+        "url": "URL",
+        "errors": {
+          "32000": "MCP サーバーが起動しませんでした。パラメーターを確認してください"
+        }
      },
      "messages.divider": "メッセージ間に区切り線を表示",
      "messages.grid_columns": "メッセージグリッドの表示列数",
@@ -960,10 +960,7 @@
        "argsTooltip": "Каждый аргумент с новой строки",
        "baseUrlTooltip": "Адрес удаленного URL",
        "command": "Команда",
-        "commandRequired": "Пожалуйста, введите команду",
        "config_description": "Настройка серверов протокола контекста модели",
-        "confirmDelete": "Удалить сервер",
-        "confirmDeleteMessage": "Вы уверены, что хотите удалить этот сервер?",
        "deleteError": "Не удалось удалить сервер",
        "deleteSuccess": "Сервер успешно удален",
        "dependenciesInstall": "Установить зависимости",
@@ -974,7 +971,8 @@
        "editServer": "Редактировать сервер",
        "env": "Переменные окружения",
        "envTooltip": "Формат: KEY=value, по одной на строку",
-        "findMore": "Найти больше MCP серверов",
+        "findMore": "Найти больше MCP",
+        "searchNpx": "Найти MCP",
        "install": "Установить",
        "installError": "Не удалось установить зависимости",
        "installSuccess": "Зависимости успешно установлены",
@@ -984,8 +982,8 @@
        "jsonSaveSuccess": "JSON конфигурация сохранена",
        "missingDependencies": "отсутствует, пожалуйста, установите для продолжения.",
        "name": "Имя",
-        "nameRequired": "Пожалуйста, введите имя сервера",
        "noServers": "Серверы не настроены",
+        "newServer": "MCP сервер",
        "npx_list": {
          "actions": "Действия",
          "desc": "Поиск и добавление npm пакетов в качестве MCP серверов",
@@ -1001,10 +999,13 @@
          "usage": "Использование",
          "version": "Версия"
        },
+        "errors": {
+          "32000": "MCP сервер не запущен, пожалуйста, проверьте параметры"
+        },
        "serverPlural": "серверы",
        "serverSingular": "сервер",
        "title": "Серверы MCP",
-        "toggleError": "Переключение не удалось",
+        "startError": "Запуск не удалось",
        "type": "Тип",
        "updateError": "Ошибка обновления сервера",
        "updateSuccess": "Сервер успешно обновлен",
@@ -961,10 +961,7 @@
        "argsTooltip": "每个参数占一行",
        "baseUrlTooltip": "远程 URL 地址",
        "command": "命令",
-        "commandRequired": "请输入命令",
        "config_description": "配置模型上下文协议服务器",
-        "confirmDelete": "删除服务器",
-        "confirmDeleteMessage": "您确定要删除该服务器吗？",
        "deleteError": "删除服务器失败",
        "deleteSuccess": "服务器删除成功",
        "dependenciesInstall": "安装依赖项",
@@ -975,7 +972,8 @@
        "editServer": "编辑服务器",
        "env": "环境变量",
        "envTooltip": "格式：KEY=value，每行一个",
-        "findMore": "更多 MCP 服务器",
+        "findMore": "更多 MCP",
+        "searchNpx": "搜索 MCP",
        "install": "安装",
        "installError": "安装依赖项失败",
        "installSuccess": "依赖项安装成功",
@@ -985,8 +983,8 @@
        "jsonSaveSuccess": "JSON配置已保存",
        "missingDependencies": "缺失，请安装它以继续",
        "name": "名称",
-        "nameRequired": "请输入服务器名称",
        "noServers": "未配置服务器",
+        "newServer": "MCP 服务器",
        "npx_list": {
          "actions": "操作",
          "desc": "搜索并添加 npm 包作为 MCP 服务",
@@ -1002,10 +1000,13 @@
          "usage": "用法",
          "version": "版本"
        },
+        "errors": {
+          "32000": "MCP 服务器启动失败，请根据教程检查参数是否填写完整"
+        },
        "serverPlural": "服务器",
        "serverSingular": "服务器",
        "title": "MCP 服务器",
-        "toggleError": "切换失败",
+        "startError": "启动失败",
        "type": "类型",
        "updateError": "更新服务器失败",
        "updateSuccess": "服务器更新成功",
@@ -960,10 +960,7 @@
        "argsTooltip": "每個參數佔一行",
        "baseUrlTooltip": "遠端 URL 地址",
        "command": "指令",
-        "commandRequired": "請輸入指令",
        "config_description": "設定模型上下文協議伺服器",
-        "confirmDelete": "刪除伺服器",
-        "confirmDeleteMessage": "您確定要刪除該伺服器嗎？",
        "deleteError": "刪除伺服器失敗",
        "deleteSuccess": "伺服器刪除成功",
        "dependenciesInstall": "安裝相依套件",
@@ -974,7 +971,8 @@
        "editServer": "編輯伺服器",
        "env": "環境變數",
        "envTooltip": "格式：KEY=value，每行一個",
-        "findMore": "更多 MCP 伺服器",
+        "findMore": "更多 MCP",
+        "searchNpx": "搜索 MCP",
        "install": "安裝",
        "installError": "安裝相依套件失敗",
        "installSuccess": "相依套件安裝成功",
@@ -984,8 +982,8 @@
        "jsonSaveSuccess": "JSON配置已儲存",
        "missingDependencies": "缺失，請安裝它以繼續",
        "name": "名稱",
-        "nameRequired": "請輸入伺服器名稱",
        "noServers": "未設定伺服器",
+        "newServer": "MCP 伺服器",
        "npx_list": {
          "actions": "操作",
          "desc": "搜索並添加 npm 包作為 MCP 服務",
@@ -1001,10 +999,13 @@
          "usage": "用法",
          "version": "版本"
        },
+        "errors": {
+          "32000": "MCP 伺服器啟動失敗，請根據教程檢查參數是否填寫完整"
+        },
        "serverPlural": "伺服器",
        "serverSingular": "伺服器",
        "title": "MCP 伺服器",
-        "toggleError": "切換失敗",
+        "startError": "啟動失敗",
        "type": "類型",
        "updateError": "更新伺服器失敗",
        "updateSuccess": "伺服器更新成功",
@@ -886,10 +886,7 @@
        "argsTooltip": "Κάθε παράμετρος σε μια γραμμή",
        "baseUrlTooltip": "Σύνδεσμος Απομακρυσμένης διεύθυνσης URL",
        "command": "Εντολή",
-        "commandRequired": "Παρακαλώ εισάγετε την εντολή",
        "config_description": "Ρυθμίζει το πλαίσιο συντονισμού πρωτοκόλλων διακομιστή",
-        "confirmDelete": "Διαγραφή διακομιστή",
-        "confirmDeleteMessage": "Είστε σίγουροι ότι θέλετε να διαγράψετε αυτόν τον διακομιστή;",
        "deleteError": "Αποτυχία διαγραφής διακομιστή",
        "deleteSuccess": "Ο διακομιστής διαγράφηκε επιτυχώς",
        "dependenciesInstall": "Εγκατάσταση εξαρτήσεων",
@@ -910,7 +907,6 @@
        "jsonSaveSuccess": "Η διαμορφωτική ρύθμιση JSON αποθηκεύτηκε επιτυχώς",
        "missingDependencies": "Απο缺失, παρακαλώ εγκαταστήστε το για να συνεχίσετε",
        "name": "Όνομα",
-        "nameRequired": "Παρακαλώ εισάγετε το όνομα του διακομιστή",
        "noServers": "Δεν έχουν ρυθμιστεί διακομιστές",
        "npx_list": {
          "actions": "Ενέργειες",
@@ -886,10 +886,7 @@
        "argsTooltip": "Cada argumento en una línea",
        "baseUrlTooltip": "Dirección URL remota",
        "command": "Comando",
-        "commandRequired": "Por favor ingrese el comando",
        "config_description": "Configurar modelo de contexto del protocolo del servidor",
-        "confirmDelete": "Eliminar servidor",
-        "confirmDeleteMessage": "¿Está seguro de que desea eliminar este servidor?",
        "deleteError": "Fallo al eliminar servidor",
        "deleteSuccess": "Servidor eliminado exitosamente",
        "dependenciesInstall": "Instalar dependencias",
@@ -910,7 +907,6 @@
        "jsonSaveSuccess": "Configuración JSON guardada exitosamente",
        "missingDependencies": "Faltan, instalelas para continuar",
        "name": "Nombre",
-        "nameRequired": "Por favor ingrese el nombre del servidor",
        "noServers": "No se han configurado servidores",
        "npx_list": {
          "actions": "Acciones",
@@ -886,10 +886,7 @@
        "argsTooltip": "Chaque argument sur une ligne",
        "baseUrlTooltip": "Adresse URL distante",
        "command": "Commande",
-        "commandRequired": "Veuillez entrer une commande",
        "config_description": "Configurer le modèle du protocole de contexte du serveur",
-        "confirmDelete": "Supprimer le serveur",
-        "confirmDeleteMessage": "Êtes-vous sûr de vouloir supprimer ce serveur ?",
        "deleteError": "Échec de la suppression du serveur",
        "deleteSuccess": "Serveur supprimé avec succès",
        "dependenciesInstall": "Installer les dépendances",
@@ -910,7 +907,6 @@
        "jsonSaveSuccess": "Configuration JSON sauvegardée",
        "missingDependencies": "Manquantes, veuillez les installer pour continuer",
        "name": "Nom",
-        "nameRequired": "Veuillez entrer le nom du serveur",
        "noServers": "Aucun serveur configuré",
        "npx_list": {
          "actions": "Actions",
@@ -886,10 +886,7 @@
        "argsTooltip": "Cada argumento em uma linha",
        "baseUrlTooltip": "Endereço de URL remoto",
        "command": "Comando",
-        "commandRequired": "Digite o comando",
        "config_description": "Configurar modelo de protocolo de contexto do servidor",
-        "confirmDelete": "Excluir servidor",
-        "confirmDeleteMessage": "Tem certeza de que deseja excluir este servidor?",
        "deleteError": "Falha ao excluir servidor",
        "deleteSuccess": "Servidor excluído com sucesso",
        "dependenciesInstall": "Instalar dependências",
@@ -910,7 +907,6 @@
        "jsonSaveSuccess": "Configuração JSON salva com sucesso",
        "missingDependencies": "Ausente, instale para continuar",
        "name": "Nome",
-        "nameRequired": "Digite o nome do servidor",
        "noServers": "Nenhum servidor configurado",
        "npx_list": {
          "actions": "Ações",
@@ -618,9 +618,9 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =

  const toggelEnableMCP = (mcp: MCPServer) => {
    setEnabledMCPs((prev) => {
-      const exists = prev.some((item) => item.name === mcp.name)
+      const exists = prev.some((item) => item.id === mcp.id)
      if (exists) {
-        return prev.filter((item) => item.name !== mcp.name)
+        return prev.filter((item) => item.id !== mcp.id)
      } else {
        return [...prev, mcp]
      }
@@ -27,19 +27,14 @@ const MCPToolsButton: FC<Props> = ({ enabledMCPs, toggelEnableMCP, ToolbarButton
  // Check if all active servers are enabled
  const activeServers = mcpServers.filter((s) => s.isActive)

-  const anyEnable = activeServers.some((server) =>
-    enabledMCPs.some((enabledServer) => enabledServer.name === server.name)
-  )
+  const anyEnable = activeServers.some((server) => enabledMCPs.some((enabledServer) => enabledServer.id === server.id))

-  const enableAll = () =>
-    mcpServers.forEach((s) => {
-      toggelEnableMCP(s)
-    })
+  const enableAll = () => mcpServers.forEach(toggelEnableMCP)

  const disableAll = () =>
    mcpServers.forEach((s) => {
      enabledMCPs.forEach((enabledServer) => {
-        if (enabledServer.name === s.name) {
+        if (enabledServer.id === s.id) {
          toggelEnableMCP(s)
        }
      })
@@ -64,32 +59,34 @@ const MCPToolsButton: FC<Props> = ({ enabledMCPs, toggelEnableMCP, ToolbarButton
          </div>
        </div>
      </DropdownHeader>
-      {mcpServers.length > 0 ? (
-        mcpServers
-          .filter((s) => s.isActive)
-          .map((server) => (
-            <McpServerItems key={server.name} className="ant-dropdown-menu-item">
-              <div className="server-info">
-                <div className="server-name">{server.name}</div>
-                {server.description && (
-                  <Tooltip title={server.description} placement="bottom">
-                    <div className="server-description">{truncateText(server.description)}</div>
-                  </Tooltip>
-                )}
-                {server.baseUrl && <div className="server-url">{server.baseUrl}</div>}
-              </div>
-              <Switch
-                size="small"
-                checked={enabledMCPs.some((s) => s.name === server.name)}
-                onChange={() => toggelEnableMCP(server)}
-              />
-            </McpServerItems>
-          ))
-      ) : (
-        <div className="ant-dropdown-menu-item-group">
-          <div className="ant-dropdown-menu-item no-results">{t('settings.mcp.noServers')}</div>
-        </div>
-      )}
+      <DropdownBody>
+        {mcpServers.length > 0 ? (
+          mcpServers
+            .filter((s) => s.isActive)
+            .map((server) => (
+              <McpServerItems key={server.id} className="ant-dropdown-menu-item">
+                <div className="server-info">
+                  <div className="server-name">{server.name}</div>
+                  {server.description && (
+                    <Tooltip title={server.description} placement="bottom">
+                      <div className="server-description">{truncateText(server.description)}</div>
+                    </Tooltip>
+                  )}
+                  {server.baseUrl && <div className="server-url">{server.baseUrl}</div>}
+                </div>
+                <Switch
+                  size="small"
+                  checked={enabledMCPs.some((s) => s.id === server.id)}
+                  onChange={() => toggelEnableMCP(server)}
+                />
+              </McpServerItems>
+            ))
+        ) : (
+          <div className="ant-dropdown-menu-item-group">
+            <div className="ant-dropdown-menu-item no-results">{t('settings.mcp.noServers')}</div>
+          </div>
+        )}
+      </DropdownBody>
    </div>
  )

@@ -106,7 +103,7 @@ const MCPToolsButton: FC<Props> = ({ enabledMCPs, toggelEnableMCP, ToolbarButton
      overlayClassName="mention-models-dropdown">
      <Tooltip placement="top" title={t('settings.mcp.title')} arrow>
        <ToolbarButton type="text" ref={dropdownRef}>
-          <CodeOutlined style={{ color: enabledMCPs.length > 0 ? '#d97757' : 'var(--color-icon)' }} />
+          <CodeOutlined style={{ color: enabledMCPs.length > 0 ? 'var(--color-primary)' : 'var(--color-icon)' }} />
        </ToolbarButton>
      </Tooltip>
    </Dropdown>
@@ -127,6 +124,10 @@ const McpServerItems = styled.div`
      font-weight: 500;
      font-size: 14px;
      color: var(--color-text-1);
+      max-width: 400px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
    }

    .server-description {
@@ -177,4 +178,8 @@ const DropdownHeader = styled.div`
  }
 `

+const DropdownBody = styled.div`
+  padding-bottom: 10px;
+`
+
 export default MCPToolsButton
@@ -100,7 +100,7 @@ const MessageTools: FC<Props> = ({ message }) => {
          </MessageTitleLabel>
        ),
        children: isDone && result && (
-          <ToolResponseContainer style={{ fontFamily, fontSize }}>
+          <ToolResponseContainer style={{ fontFamily, fontSize: '12px' }}>
            <pre>{JSON.stringify(result, null, 2)}</pre>
          </ToolResponseContainer>
        )
@@ -129,9 +129,8 @@ const MessageTools: FC<Props> = ({ message }) => {
        onCancel={() => setExpandedResponse(null)}
        footer={null}
        width="80%"
-        styles={{
-          body: { maxHeight: '80vh', overflow: 'auto' }
-        }}>
+        centered
+        styles={{ body: { maxHeight: '80vh', overflow: 'auto' } }}>
        {expandedResponse && (
          <ExpandedResponseContainer style={{ fontFamily, fontSize }}>
            <ActionButton
@@ -157,7 +156,6 @@ const CollapseContainer = styled(Collapse)`
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  .ant-collapse-header {
    background-color: var(--color-bg-2);
@@ -3,7 +3,7 @@ import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar
 import { HStack } from '@renderer/components/Layout'
 import MinAppsPopover from '@renderer/components/Popups/MinAppsPopover'
 import SearchPopup from '@renderer/components/Popups/SearchPopup'
-import { isMac, isWindows } from '@renderer/config/constant'
+import { isMac } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { modelGenerating } from '@renderer/hooks/useRuntime'
 import { useSettings } from '@renderer/hooks/useSettings'
@@ -71,9 +71,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
          </Tooltip>
        </NavbarLeft>
      )}
-      <NavbarRight
-        style={{ justifyContent: 'space-between', paddingRight: isWindows ? 140 : 12, flex: 1 }}
-        className="home-navbar-right">
+      <NavbarRight style={{ justifyContent: 'space-between', flex: 1 }} className="home-navbar-right">
        <HStack alignItems="center">
          {!showAssistants && (
            <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={0.8}>
@@ -6,13 +6,12 @@ import {
  SearchOutlined,
  SettingOutlined
 } from '@ant-design/icons'
-import { Navbar, NavbarCenter, NavbarRight as NavbarRightFromComponents } from '@renderer/components/app/Navbar'
+import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
 import DragableList from '@renderer/components/DragableList'
 import { HStack } from '@renderer/components/Layout'
 import ListItem from '@renderer/components/ListItem'
 import PromptPopup from '@renderer/components/Popups/PromptPopup'
 import Scrollbar from '@renderer/components/Scrollbar'
-import { isWindows } from '@renderer/config/constant'
 import { useKnowledgeBases } from '@renderer/hooks/useKnowledge'
 import { useShortcut } from '@renderer/hooks/useShortcuts'
 import { NavbarIcon } from '@renderer/pages/home/Navbar'
@@ -252,9 +251,4 @@ const NarrowIcon = styled(NavbarIcon)`
  }
 `

-const NavbarRight = styled(NavbarRightFromComponents)`
-  min-width: auto;
-  padding-right: ${isWindows ? '140px' : 15};
-`
-
 export default KnowledgePage
@@ -1,241 +0,0 @@
-import { TopView } from '@renderer/components/TopView'
-import { useAppSelector } from '@renderer/store'
-import { MCPServer } from '@renderer/types'
-import { Form, Input, Modal, Radio, Switch } from 'antd'
-import TextArea from 'antd/es/input/TextArea'
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-interface ShowParams {
-  server?: MCPServer
-  create?: boolean
-}
-
-interface Props extends ShowParams {
-  resolve: (data: any) => void
-}
-
-interface MCPFormValues {
-  name: string
-  description?: string
-  serverType: 'sse' | 'stdio'
-  baseUrl?: string
-  command?: string
-  args?: string
-  env?: string
-  isActive: boolean
-}
-
-const PopupContainer: React.FC<Props> = ({ server, create, resolve }) => {
-  const [open, setOpen] = useState(true)
-  const { t } = useTranslation()
-  const [serverType, setServerType] = useState<'sse' | 'stdio'>('stdio')
-  const mcpServers = useAppSelector((state) => state.mcp.servers)
-  const [form] = Form.useForm<MCPFormValues>()
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    if (server) {
-      // Determine server type based on server properties
-      const serverType = server.baseUrl ? 'sse' : 'stdio'
-      setServerType(serverType)
-
-      form.setFieldsValue({
-        name: server.name,
-        description: server.description,
-        serverType: serverType,
-        baseUrl: server.baseUrl || '',
-        command: server.command || '',
-        args: server.args ? server.args.join('\n') : '',
-        env: server.env
-          ? Object.entries(server.env)
-              .map(([key, value]) => `${key}=${value}`)
-              .join('\n')
-          : '',
-        isActive: server.isActive
-      })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // Watch the serverType field to update the form layout dynamically
-  useEffect(() => {
-    const type = form.getFieldValue('serverType')
-    type && setServerType(type)
-  }, [form])
-
-  const onOK = async () => {
-    setLoading(true)
-    try {
-      const values = await form.validateFields()
-      const mcpServer: MCPServer = {
-        name: values.name,
-        description: values.description,
-        isActive: values.isActive
-      }
-
-      if (values.serverType === 'sse') {
-        mcpServer.baseUrl = values.baseUrl
-      } else {
-        mcpServer.command = values.command
-        mcpServer.args = values.args ? values.args.split('\n').filter((arg) => arg.trim() !== '') : []
-
-        const env: Record<string, string> = {}
-        if (values.env) {
-          values.env.split('\n').forEach((line) => {
-            if (line.trim()) {
-              const [key, ...chunks] = line.split('=')
-              const value = chunks.join('=')
-              if (key && value) {
-                env[key.trim()] = value.trim()
-              }
-            }
-          })
-        }
-        mcpServer.env = Object.keys(env).length > 0 ? env : undefined
-      }
-
-      if (server && !create) {
-        try {
-          await window.api.mcp.updateServer(mcpServer)
-          window.message.success(t('settings.mcp.updateSuccess'))
-          setLoading(false)
-          setOpen(false)
-          form.resetFields()
-        } catch (error: any) {
-          window.message.error(`${t('settings.mcp.updateError')}: ${error.message}`)
-          setLoading(false)
-        }
-      } else {
-        // Check for duplicate name
-        if (mcpServers.some((server: MCPServer) => server.name === mcpServer.name)) {
-          window.message.error(t('settings.mcp.duplicateName'))
-          setLoading(false)
-          return
-        }
-
-        try {
-          await window.api.mcp.addServer(mcpServer)
-          window.message.success(t('settings.mcp.addSuccess'))
-          setLoading(false)
-          setOpen(false)
-          form.resetFields()
-        } catch (error: any) {
-          window.message.error(`${t('settings.mcp.addError')}: ${error.message}`)
-          setLoading(false)
-        }
-      }
-    } catch (error: any) {
-      setLoading(false)
-    }
-  }
-
-  const onCancel = () => {
-    setOpen(false)
-  }
-
-  const onClose = () => {
-    resolve({})
-  }
-
-  AddMcpServerPopup.hide = onCancel
-
-  return (
-    <Modal
-      title={server ? t('settings.mcp.editServer') : t('settings.mcp.addServer')}
-      open={open}
-      onOk={onOK}
-      onCancel={onCancel}
-      afterClose={onClose}
-      confirmLoading={loading}
-      maskClosable={false}
-      width={600}
-      transitionName="ant-move-down"
-      centered
-      styles={{
-        body: {
-          maxHeight: '70vh',
-          overflowY: 'auto'
-        }
-      }}>
-      <Form form={form} layout="vertical">
-        <Form.Item
-          name="name"
-          label={t('settings.mcp.name')}
-          rules={[{ required: true, message: t('settings.mcp.nameRequired') }]}>
-          <Input disabled={!!server} placeholder={t('common.name')} />
-        </Form.Item>
-
-        <Form.Item name="description" label={t('settings.mcp.description')}>
-          <TextArea rows={2} placeholder={t('common.description')} />
-        </Form.Item>
-
-        <Form.Item name="serverType" label={t('settings.mcp.type')} rules={[{ required: true }]} initialValue="stdio">
-          <Radio.Group
-            onChange={(e) => setServerType(e.target.value)}
-            options={[
-              { label: 'SSE (Server-Sent Events)', value: 'sse' },
-              { label: 'STDIO (Standard Input/Output)', value: 'stdio' }
-            ]}
-          />
-        </Form.Item>
-
-        {serverType === 'sse' && (
-          <Form.Item
-            name="baseUrl"
-            label={t('settings.mcp.url')}
-            rules={[{ required: serverType === 'sse', message: t('settings.mcp.baseUrlRequired') }]}
-            tooltip={t('settings.mcp.baseUrlTooltip')}>
-            <Input placeholder="http://localhost:3000/sse" />
-          </Form.Item>
-        )}
-
-        {serverType === 'stdio' && (
-          <>
-            <Form.Item
-              name="command"
-              label={t('settings.mcp.command')}
-              rules={[{ required: serverType === 'stdio', message: t('settings.mcp.commandRequired') }]}>
-              <Input placeholder="uvx or npx" />
-            </Form.Item>
-
-            <Form.Item name="args" label={t('settings.mcp.args')} tooltip={t('settings.mcp.argsTooltip')}>
-              <TextArea rows={3} placeholder={`arg1\narg2`} style={{ fontFamily: 'monospace' }} />
-            </Form.Item>
-
-            <Form.Item name="env" label={t('settings.mcp.env')} tooltip={t('settings.mcp.envTooltip')}>
-              <TextArea rows={3} placeholder={`KEY1=value1\nKEY2=value2`} style={{ fontFamily: 'monospace' }} />
-            </Form.Item>
-          </>
-        )}
-
-        <Form.Item name="isActive" label={t('settings.mcp.active')} valuePropName="checked" initialValue={true}>
-          <Switch />
-        </Form.Item>
-      </Form>
-    </Modal>
-  )
-}
-
-const TopViewKey = 'AddMcpServerPopup'
-
-export default class AddMcpServerPopup {
-  static topviewId = 0
-  static hide() {
-    TopView.hide(TopViewKey)
-  }
-  static show(props: ShowParams = {}) {
-    return new Promise<any>((resolve) => {
-      TopView.show(
-        <PopupContainer
-          {...props}
-          resolve={(v) => {
-            resolve(v)
-            TopView.hide(TopViewKey)
-          }}
-        />,
-        TopViewKey
-      )
-    })
-  }
-}
@@ -1,152 +0,0 @@
-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()
-
-  const ipcRenderer = window.electron.ipcRenderer
-
-  useEffect(() => {
-    try {
-      const mcpServersObj: Record<string, any> = {}
-
-      mcpServers.forEach((server) => {
-        const { name, ...serverData } = server
-        mcpServersObj[name] = 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 [name, serverConfig] of Object.entries(parsedConfig.mcpServers)) {
-        const server: MCPServer = {
-          name,
-          isActive: false,
-          ...(serverConfig as any)
-        }
-        serversArray.push(server)
-      }
-
-      dispatch(setMCPServers(serversArray))
-      ipcRenderer.send('mcp:servers-from-renderer', mcpServers)
-
-      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
-      )
-    })
-  }
-}
@@ -27,7 +27,7 @@ const InstallNpxUv: FC = () => {
      setIsUvInstalled(true)
      setIsInstallingUv(false)
    } catch (error: any) {
-      window.message.error(`${t('settings.mcp.installError')}: ${error.message}`)
+      window.message.error({ content: `${t('settings.mcp.installError')}: ${error.message}`, key: 'mcp-install-error' })
      setIsInstallingUv(false)
      checkBinaries()
    }
@@ -40,7 +40,10 @@ const InstallNpxUv: FC = () => {
      setIsBunInstalled(true)
      setIsInstallingBun(false)
    } catch (error: any) {
-      window.message.error(`${t('settings.mcp.installError')}: ${error.message}`)
+      window.message.error({
+        content: `${t('settings.mcp.installError')}: ${error.message}`,
+        key: 'mcp-install-error'
+      })
      setIsInstallingBun(false)
      checkBinaries()
    }
@@ -63,7 +66,7 @@ const InstallNpxUv: FC = () => {
          style={{ padding: 8 }}
          description={
            <SettingRow>
-              <SettingSubtitle style={{ margin: 0 }}>
+              <SettingSubtitle style={{ margin: 0, fontWeight: 'normal' }}>
                {isUvInstalled ? 'UV Installed' : `UV ${t('settings.mcp.missingDependencies')}`}
              </SettingSubtitle>
              <Button
@@ -85,7 +88,7 @@ const InstallNpxUv: FC = () => {
          style={{ padding: 8 }}
          description={
            <SettingRow>
-              <SettingSubtitle style={{ margin: 0 }}>
+              <SettingSubtitle style={{ margin: 0, fontWeight: 'normal' }}>
                {isBunInstalled ? 'Bun Installed' : `Bun ${t('settings.mcp.missingDependencies')}`}
              </SettingSubtitle>
              <Button
@@ -0,0 +1,241 @@
+import { useMCPServers } from '@renderer/hooks/useMCPServers'
+import { MCPServer } from '@renderer/types'
+import { Button, Flex, Form, Input, Radio, Switch } from 'antd'
+import TextArea from 'antd/es/input/TextArea'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import { SettingContainer, SettingDivider, SettingTitle } from '..'
+import InstallNpxUv from './InstallNpxUv'
+
+interface Props {
+  server: MCPServer
+}
+
+interface MCPFormValues {
+  name: string
+  description?: string
+  serverType: 'sse' | 'stdio'
+  baseUrl?: string
+  command?: string
+  args?: string
+  env?: string
+  isActive: boolean
+}
+
+const McpSettings: React.FC<Props> = ({ server }) => {
+  const { t } = useTranslation()
+  const [serverType, setServerType] = useState<'sse' | 'stdio'>('stdio')
+  const [form] = Form.useForm<MCPFormValues>()
+  const [loading, setLoading] = useState(false)
+  const [isFormChanged, setIsFormChanged] = useState(false)
+  const [loadingServer, setLoadingServer] = useState<string | null>(null)
+  const { updateMCPServer } = useMCPServers()
+
+  useEffect(() => {
+    if (server) {
+      form.setFieldsValue({
+        name: server.name,
+        description: server.description,
+        serverType: server.baseUrl ? 'sse' : 'stdio',
+        baseUrl: server.baseUrl || '',
+        command: server.command || '',
+        args: server.args ? server.args.join('\n') : '',
+        env: server.env
+          ? Object.entries(server.env)
+              .map(([key, value]) => `${key}=${value}`)
+              .join('\n')
+          : '',
+        isActive: server.isActive
+      })
+    }
+  }, [form, server])
+
+  useEffect(() => {
+    const serverType = server.baseUrl ? 'sse' : 'stdio'
+    setServerType(serverType)
+
+    form.setFieldsValue({
+      name: server.name,
+      description: server.description,
+      serverType: serverType,
+      baseUrl: server.baseUrl || '',
+      command: server.command || '',
+      args: server.args ? server.args.join('\n') : '',
+      env: server.env
+        ? Object.entries(server.env)
+            .map(([key, value]) => `${key}=${value}`)
+            .join('\n')
+        : ''
+    })
+  }, [form, server])
+
+  // Watch the serverType field to update the form layout dynamically
+  useEffect(() => {
+    const type = form.getFieldValue('serverType')
+    type && setServerType(type)
+  }, [form])
+
+  const onSave = async () => {
+    setLoading(true)
+    try {
+      const values = await form.validateFields()
+
+      const mcpServer: MCPServer = {
+        id: server.id,
+        name: values.name,
+        description: values.description,
+        isActive: values.isActive
+      }
+
+      if (values.serverType === 'sse') {
+        mcpServer.baseUrl = values.baseUrl
+      } else {
+        mcpServer.command = values.command
+        mcpServer.args = values.args ? values.args.split('\n').filter((arg) => arg.trim() !== '') : []
+
+        const env: Record<string, string> = {}
+        if (values.env) {
+          values.env.split('\n').forEach((line) => {
+            if (line.trim()) {
+              const [key, ...chunks] = line.split('=')
+              const value = chunks.join('=')
+              if (key && value) {
+                env[key.trim()] = value.trim()
+              }
+            }
+          })
+        }
+        mcpServer.env = Object.keys(env).length > 0 ? env : undefined
+      }
+
+      try {
+        await window.api.mcp.listTools(mcpServer)
+        updateMCPServer({ ...mcpServer, isActive: true })
+        window.message.success({ content: t('settings.mcp.updateSuccess'), key: 'mcp-update-success' })
+        setLoading(false)
+        setIsFormChanged(false)
+      } catch (error: any) {
+        updateMCPServer({ ...mcpServer, isActive: false })
+        window.modal.error({
+          title: t('settings.mcp.updateError'),
+          content: error.message,
+          centered: true
+        })
+        setLoading(false)
+      }
+    } catch (error: any) {
+      setLoading(false)
+    }
+  }
+
+  const onFormValuesChange = () => {
+    setIsFormChanged(true)
+  }
+
+  const formatError = (error: any) => {
+    if (error.message.includes('32000')) {
+      return t('settings.mcp.errors.32000')
+    }
+
+    return error.message
+  }
+
+  const onToggleActive = async (active: boolean) => {
+    await form.validateFields()
+    setLoadingServer(server.id)
+
+    try {
+      if (active) {
+        await window.api.mcp.listTools(server)
+      }
+      updateMCPServer({ ...server, isActive: active })
+    } catch (error: any) {
+      window.modal.error({
+        title: t('settings.mcp.startError'),
+        content: formatError(error),
+        centered: true
+      })
+      console.error('[MCP] Error toggling server active', error)
+    } finally {
+      setLoadingServer(null)
+    }
+  }
+
+  return (
+    <SettingContainer style={{ background: 'transparent' }}>
+      <InstallNpxUv />
+      <SettingTitle>
+        <Flex align="center" gap={8}>
+          <ServerName>{server?.name}</ServerName>
+        </Flex>
+        <Switch
+          value={server.isActive}
+          key={server.id}
+          loading={loadingServer === server.id}
+          onChange={onToggleActive}
+        />
+      </SettingTitle>
+      <SettingDivider />
+      <Form form={form} layout="vertical" onValuesChange={onFormValuesChange}>
+        <Form.Item name="name" label={t('settings.mcp.name')} rules={[{ required: true, message: '' }]}>
+          <Input placeholder={t('common.name')} />
+        </Form.Item>
+        <Form.Item name="description" label={t('settings.mcp.description')}>
+          <TextArea rows={2} placeholder={t('common.description')} />
+        </Form.Item>
+        <Form.Item name="serverType" label={t('settings.mcp.type')} rules={[{ required: true }]} initialValue="stdio">
+          <Radio.Group
+            onChange={(e) => setServerType(e.target.value)}
+            options={[
+              { label: 'SSE', value: 'sse' },
+              { label: 'STDIO', value: 'stdio' }
+            ]}
+          />
+        </Form.Item>
+        {serverType === 'sse' && (
+          <Form.Item
+            name="baseUrl"
+            label={t('settings.mcp.url')}
+            rules={[{ required: serverType === 'sse', message: '' }]}
+            tooltip={t('settings.mcp.baseUrlTooltip')}>
+            <Input placeholder="http://localhost:3000/sse" />
+          </Form.Item>
+        )}
+        {serverType === 'stdio' && (
+          <>
+            <Form.Item
+              name="command"
+              label={t('settings.mcp.command')}
+              rules={[{ required: serverType === 'stdio', message: '' }]}>
+              <Input placeholder="uvx or npx" />
+            </Form.Item>
+
+            <Form.Item
+              name="args"
+              label={t('settings.mcp.args')}
+              tooltip={t('settings.mcp.argsTooltip')}
+              rules={[{ required: serverType === 'stdio', message: '' }]}>
+              <TextArea rows={3} placeholder={`arg1\narg2`} style={{ fontFamily: 'monospace' }} />
+            </Form.Item>
+
+            <Form.Item name="env" label={t('settings.mcp.env')} tooltip={t('settings.mcp.envTooltip')}>
+              <TextArea rows={3} placeholder={`KEY1=value1\nKEY2=value2`} style={{ fontFamily: 'monospace' }} />
+            </Form.Item>
+          </>
+        )}
+        <Button type="primary" onClick={onSave} loading={loading} disabled={!isFormChanged}>
+          {t('common.save')}
+        </Button>
+      </Form>
+    </SettingContainer>
+  )
+}
+
+const ServerName = styled.span`
+  font-size: 14px;
+  font-weight: 500;
+`
+
+export default McpSettings
@@ -1,13 +1,15 @@
-import { SearchOutlined } from '@ant-design/icons'
+import { PlusOutlined, SearchOutlined } from '@ant-design/icons'
+import { nanoid } from '@reduxjs/toolkit'
+import { HStack } from '@renderer/components/Layout'
 import { useTheme } from '@renderer/context/ThemeProvider'
+import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import type { MCPServer } from '@renderer/types'
-import { Button, Input, Space, Spin, Table, Typography } from 'antd'
+import { Button, Input, Space, Spin, Table, Tag, Typography } from 'antd'
 import { npxFinder } from 'npx-scope-finder'
 import { type FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'

 import { SettingDivider, SettingGroup, SettingTitle } from '..'
-import AddMcpServerPopup from './AddMcpServerPopup'

 interface SearchResult {
  name: string
@@ -18,6 +20,8 @@ interface SearchResult {
  fullName: string
 }

+const npmScopes = ['@mcpmarket', '@modelcontextprotocol', '@gongrzhe']
+
 const NpxSearch: FC = () => {
  const { theme } = useTheme()
  const { t } = useTranslation()
@@ -27,11 +31,16 @@ const NpxSearch: FC = () => {
  const [npmScope, setNpmScope] = useState('@modelcontextprotocol')
  const [searchLoading, setSearchLoading] = useState(false)
  const [searchResults, setSearchResults] = useState<SearchResult[]>([])
+  const { addMCPServer } = useMCPServers()

  // Add new function to handle npm scope search
  const handleNpmSearch = async () => {
    if (!npmScope.trim()) {
-      window.message.warning(t('settings.mcp.npx_list.scope_required'))
+      window.message.warning({ content: t('settings.mcp.npx_list.scope_required'), key: 'mcp-npx-scope-required' })
+      return
+    }
+
+    if (searchLoading) {
      return
    }

@@ -45,7 +54,7 @@ const NpxSearch: FC = () => {
      const formattedResults = packages.map((pkg) => {
        return {
          key: pkg.name,
-          name: pkg.name || '',
+          name: pkg.name?.split('/')[1] || '',
          description: pkg.description || 'No description available',
          version: pkg.version || 'Latest',
          usage: `npx ${pkg.name}`,
@@ -57,13 +66,16 @@ const NpxSearch: FC = () => {
      setSearchResults(formattedResults)

      if (formattedResults.length === 0) {
-        window.message.info(t('settings.mcp.npx_list.no_packages'))
+        window.message.info({ content: t('settings.mcp.npx_list.no_packages'), key: 'mcp-npx-no-packages' })
      }
    } catch (error: unknown) {
      if (error instanceof Error) {
-        window.message.error(`${t('settings.mcp.npx_list.search_error')}: ${error.message}`)
+        window.message.error({
+          content: `${t('settings.mcp.npx_list.search_error')}: ${error.message}`,
+          key: 'mcp-npx-search-error'
+        })
      } else {
-        window.message.error(t('settings.mcp.npx_list.search_error'))
+        window.message.error({ content: t('settings.mcp.npx_list.search_error'), key: 'mcp-npx-search-error' })
      }
    } finally {
      setSearchLoading(false)
@@ -91,6 +103,22 @@ const NpxSearch: FC = () => {
          </Button>
        </Space.Compact>

+        <HStack alignItems="center" mt="-5px" mb="5px">
+          {npmScopes.map((scope) => (
+            <Tag
+              key={scope}
+              onClick={() => {
+                if (!searchLoading) {
+                  setNpmScope(scope)
+                  setTimeout(handleNpmSearch, 100)
+                }
+              }}
+              style={{ cursor: searchLoading ? 'not-allowed' : 'pointer' }}>
+              {scope}
+            </Tag>
+          ))}
+        </HStack>
+
        {searchLoading ? (
          <div style={{ textAlign: 'center', padding: '20px' }}>
            <Spin />
@@ -127,31 +155,32 @@ const NpxSearch: FC = () => {
                title: t('settings.mcp.npx_list.version'),
                dataIndex: 'version',
                key: 'version',
-                width: '100px'
+                width: '100px',
+                align: 'center'
              },
              {
                title: t('settings.mcp.npx_list.actions'),
                key: 'actions',
-                width: '120px',
+                width: '80px',
+                align: 'center',
                render: (_, record: SearchResult) => (
                  <Button
                    type="primary"
+                    icon={<PlusOutlined />}
                    size="small"
                    onClick={() => {
                      // 创建一个临时的 MCP 服务器对象
                      const tempServer: MCPServer = {
+                        id: nanoid(),
                        name: record.name,
                        description: `${record.description}\n\n${t('settings.mcp.npx_list.usage')}: ${record.usage}\n${t('settings.mcp.npx_list.npm')}: ${record.npmLink}`,
                        command: 'npx',
                        args: ['-y', record.fullName],
-                        isActive: true
+                        isActive: false
                      }
-
-                      // 使用 showEditModal 函数设置表单值并显示弹窗
-                      AddMcpServerPopup.show({ server: tempServer, create: true })
-                    }}>
-                    {t('settings.mcp.addServer')}
-                  </Button>
+                      addMCPServer(tempServer)
+                    }}
+                  />
                )
              }
            ]}
@@ -1,188 +1,187 @@
-import {
-  DeleteOutlined,
-  EditOutlined,
-  LinkOutlined,
-  PlusOutlined,
-  QuestionCircleOutlined,
-  SearchOutlined
-} from '@ant-design/icons'
+import { CodeOutlined, DeleteOutlined, ExportOutlined, PlusOutlined, SearchOutlined } 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 { useTheme } from '@renderer/context/ThemeProvider'
-import { useAppSelector } from '@renderer/store'
+import ListItem from '@renderer/components/ListItem'
+import Scrollbar from '@renderer/components/Scrollbar'
+import { useMCPServers } from '@renderer/hooks/useMCPServers'
+import { EventEmitter } from '@renderer/services/EventService'
 import { MCPServer } from '@renderer/types'
-import { Button, Space, Switch, Table, Tag, Tooltip, Typography } from 'antd'
-import { FC, useState } from 'react'
+import { Button, 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, SettingDivider, SettingGroup, SettingTitle } from '..'
-import AddMcpServerPopup from './AddMcpServerPopup'
-import EditMcpJsonPopup from './EditMcpJsonPopup'
-import InstallNpxUv from './InstallNpxUv'
+import { SettingContainer } from '..'
+import McpSettings from './McpSettings'
 import NpxSearch from './NpxSearch'

 const MCPSettings: FC = () => {
  const { t } = useTranslation()
-  const { theme } = useTheme()
-  const { Paragraph, Text } = Typography
-  const mcpServers = useAppSelector((state) => state.mcp.servers)
-  const [loadingServer, setLoadingServer] = useState<string | null>(null)
+  const { mcpServers, addMCPServer, updateMcpServers, deleteMCPServer } = useMCPServers()
+  const [selectedMcpServer, setSelectedMcpServer] = useState<MCPServer | null>(mcpServers[0])
+  const [isNpxSearch, setIsNpxSearch] = useState(false)

-  const handleDelete = (serverName: string) => {
-    window.modal.confirm({
-      title: t('settings.mcp.confirmDelete'),
-      content: t('settings.mcp.confirmDeleteMessage'),
-      okText: t('common.delete'),
-      okButtonProps: { danger: true },
-      cancelText: t('common.cancel'),
-      centered: true,
-      onOk: async () => {
-        try {
-          await window.api.mcp.deleteServer(serverName)
-          window.message.success(t('settings.mcp.deleteSuccess'))
-        } catch (error: any) {
-          window.message.error(`${t('settings.mcp.deleteError')}: ${error.message}`)
-        }
-      }
-    })
-  }
+  useEffect(() => {
+    const unsub = EventEmitter.on('open-npx-search', () => setIsNpxSearch(true))
+    return () => unsub()
+  }, [])

-  const handleToggleActive = async (name: string, isActive: boolean) => {
-    setLoadingServer(name)
-    try {
-      await window.api.mcp.setServerActive(name, isActive)
-    } catch (error: any) {
-      window.message.error(`${t('settings.mcp.toggleError')}: ${error.message}`)
-    } finally {
-      setLoadingServer(null)
+  const onAddMcpServer = async () => {
+    const newServer = {
+      id: nanoid(),
+      name: t('settings.mcp.newServer'),
+      description: '',
+      baseUrl: '',
+      command: '',
+      args: [],
+      env: {},
+      isActive: false
    }
+    addMCPServer(newServer)
+    window.message.success({ content: t('settings.mcp.addSuccess'), key: 'mcp-list' })
+    setSelectedMcpServer(newServer)
  }

-  const handleOpenMCPServers = () => {
-    window.open('https://glama.ai/mcp/servers', '_blank')
-  }
-
-  const columns = [
-    {
-      title: t('settings.mcp.name'),
-      dataIndex: 'name',
-      key: 'name',
-      width: '300px',
-      render: (text: string, record: MCPServer) => <Text strong={record.isActive}>{text}</Text>
-    },
-    {
-      title: t('settings.mcp.type'),
-      key: 'type',
-      width: '100px',
-      render: (_: any, record: MCPServer) => <Tag color="cyan">{record.baseUrl ? 'SSE' : 'STDIO'}</Tag>
-    },
-    {
-      title: t('settings.mcp.description'),
-      dataIndex: 'description',
-      key: 'description',
-      width: 'auto',
-      render: (text: string) => {
-        if (!text) {
-          return (
-            <Text type="secondary" italic>
-              {t('common.description')}
-            </Text>
-          )
-        }
-
-        return (
-          <Paragraph
-            className="selectable"
-            ellipsis={{
-              rows: 1,
-              expandable: 'collapsible',
-              symbol: t('common.more'),
-              onExpand: () => {}, // Empty callback required for proper functionality
-              tooltip: true
-            }}
-            style={{ marginBottom: 0 }}>
-            {text}
-          </Paragraph>
-        )
+  const onDeleteMcpServer = useCallback(
+    async (server: MCPServer) => {
+      try {
+        await window.api.mcp.removeServer(server)
+        await deleteMCPServer(server.id)
+        window.message.success({ content: t('settings.mcp.deleteSuccess'), key: 'mcp-list' })
+      } catch (error: any) {
+        window.message.error({
+          content: `${t('settings.mcp.deleteError')}: ${error.message}`,
+          key: 'mcp-list'
+        })
      }
    },
-    {
-      title: t('settings.mcp.active'),
-      dataIndex: 'isActive',
-      key: 'isActive',
-      width: '100px',
-      render: (isActive: boolean, record: MCPServer) => (
-        <Switch
-          checked={isActive}
-          loading={loadingServer === record.name}
-          onChange={(checked) => handleToggleActive(record.name, checked)}
-        />
-      )
-    },
-    {
-      title: t('settings.mcp.actions'),
-      key: 'actions',
-      width: '100px',
-      render: (_: any, record: MCPServer) => (
-        <Space>
-          <Tooltip title={t('common.edit')}>
-            <Button
-              type="primary"
-              ghost
-              icon={<EditOutlined />}
-              onClick={() => AddMcpServerPopup.show({ server: record })}
-            />
-          </Tooltip>
-          <Tooltip title={t('common.delete')}>
-            <Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.name)} />
-          </Tooltip>
-        </Space>
-      )
-    }
-  ]
+    [deleteMCPServer, t]
+  )

-  // Create a CSS class for inactive rows instead of using jsx global
-  const inactiveRowStyle = {
-    opacity: 0.7,
-    backgroundColor: theme === 'dark' ? '#1a1a1a' : '#f5f5f5'
-  }
+  const getMenuItems = useCallback(
+    (server: MCPServer) => {
+      const menus: MenuProps['items'] = [
+        {
+          label: t('common.delete'),
+          danger: true,
+          key: 'delete',
+          icon: <DeleteOutlined />,
+          onClick: () => onDeleteMcpServer(server)
+        }
+      ]
+      return menus
+    },
+    [onDeleteMcpServer, t]
+  )
+
+  useEffect(() => {
+    const _selectedMcpServer = mcpServers.find((server) => server.id === selectedMcpServer?.id)
+    setSelectedMcpServer(_selectedMcpServer || mcpServers[0])
+  }, [mcpServers, selectedMcpServer])

  return (
-    <SettingContainer theme={theme}>
-      <InstallNpxUv />
-      <SettingGroup theme={theme}>
-        <SettingTitle>
-          {t('settings.mcp.title')}
-          <Tooltip title={t('settings.mcp.config_description')}>
-            <QuestionCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
-          </Tooltip>
-        </SettingTitle>
-        <SettingDivider />
-        <HStack gap={15} alignItems="center">
-          <Button type="primary" icon={<PlusOutlined />} onClick={() => AddMcpServerPopup.show()}>
-            {t('settings.mcp.addServer')}
-          </Button>
-          <Button icon={<EditOutlined />} onClick={() => EditMcpJsonPopup.show()}>
-            {t('settings.mcp.editJson')}
-          </Button>
-          <Button icon={<SearchOutlined />} onClick={handleOpenMCPServers}>
-            {t('settings.mcp.findMore')} <LinkOutlined />
-          </Button>
-        </HStack>
-        <Table
-          dataSource={mcpServers}
-          columns={columns}
-          rowKey="name"
-          pagination={false}
-          size="small"
-          locale={{ emptyText: t('settings.mcp.noServers') }}
-          rowClassName={(record) => (!record.isActive ? 'inactive-row' : '')}
-          onRow={(record) => ({ style: !record.isActive ? inactiveRowStyle : {} })}
-          style={{ marginTop: 15 }}
+    <Container>
+      <McpList>
+        <ListItem
+          key="add"
+          title={t('settings.mcp.addServer')}
+          active={false}
+          onClick={onAddMcpServer}
+          icon={<PlusOutlined />}
+          titleStyle={{ fontWeight: 500 }}
+          style={{ marginBottom: 5 }}
        />
-      </SettingGroup>
-      <NpxSearch />
-    </SettingContainer>
+        <DragableList list={mcpServers} onUpdate={updateMcpServers}>
+          {(server: MCPServer) => (
+            <Dropdown menu={{ items: getMenuItems(server) }} trigger={['contextMenu']} key={server.id}>
+              <div>
+                <ListItem
+                  key={server.id}
+                  title={server.name}
+                  active={selectedMcpServer?.id === server.id}
+                  onClick={() => {
+                    setSelectedMcpServer(server)
+                    setIsNpxSearch(false)
+                  }}
+                  titleStyle={{ fontWeight: 500 }}
+                  icon={<CodeOutlined />}
+                  rightContent={
+                    <IndicatorLight
+                      size={6}
+                      color={server.isActive ? 'green' : 'var(--color-text-3)'}
+                      animation={server.isActive}
+                      shadow={false}
+                      style={{ marginRight: 4 }}
+                    />
+                  }
+                />
+              </div>
+            </Dropdown>
+          )}
+        </DragableList>
+      </McpList>
+
+      {isNpxSearch || isEmpty(mcpServers) ? (
+        <SettingContainer>
+          <NpxSearch />
+        </SettingContainer>
+      ) : (
+        selectedMcpServer && <McpSettings server={selectedMcpServer} />
+      )}
+    </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;
+`
+
+const McpList = styled(Scrollbar)`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: var(--settings-width);
+  padding: 12px;
+  border-right: 0.5px solid var(--color-border);
+  height: calc(100vh - var(--navbar-height));
+  .iconfont {
+    color: var(--color-text-2);
+    line-height: 16px;
+  }
+`
+
 export default MCPSettings
@@ -21,7 +21,7 @@ import AboutSettings from './AboutSettings'
 import DataSettings from './DataSettings/DataSettings'
 import DisplaySettings from './DisplaySettings/DisplaySettings'
 import GeneralSettings from './GeneralSettings'
-import MCPSettings from './MCPSettings'
+import MCPSettings, { McpSettingsNavbar } from './MCPSettings'
 import ProvidersList from './ProviderSettings'
 import QuickAssistantSettings from './QuickAssistantSettings'
 import ShortcutSettings from './ShortcutSettings'
@@ -37,6 +37,7 @@ const SettingsPage: FC = () => {
    <Container>
      <Navbar>
        <NavbarCenter style={{ borderRight: 'none' }}>{t('settings.title')}</NavbarCenter>
+        {pathname === '/settings/mcp' && <McpSettingsNavbar />}
      </Navbar>
      <ContentContainer id="content-container">
        <SettingMenus>
@@ -514,6 +514,7 @@ export default class OpenAIProvider extends BaseProvider {

          for (const toolCall of toolCalls) {
            const mcpTool = openAIToolsToMcpTool(mcpTools, toolCall)
+
            if (!mcpTool) {
              continue
            }
@@ -99,12 +99,15 @@ export async function fetchChatCompletion({

    const lastUserMessage = findLast(messages, (m) => m.role === 'user')
    // Get MCP tools
-    let mcpTools: MCPTool[] = []
+    const mcpTools: MCPTool[] = []
    const enabledMCPs = lastUserMessage?.enabledMCPs

    if (enabledMCPs && enabledMCPs.length > 0) {
-      const allMCPTools = await window.api.mcp.listTools()
-      mcpTools = allMCPTools.filter((tool) => enabledMCPs.some((mcp) => mcp.name === tool.serverName))
+      for (const mcpServer of enabledMCPs) {
+        const tools = await window.api.mcp.listTools(mcpServer)
+        console.debug('tools', tools)
+        mcpTools.push(...tools)
+      }
    }

    await AI.completions({
@@ -127,6 +130,7 @@ export async function fetchChatCompletion({
        if (mcpToolResponse) {
          message.metadata = { ...message.metadata, mcpTools: cloneDeep(mcpToolResponse) }
        }
+
        if (generateImage && generateImage.images.length > 0) {
          const existingImages = message.metadata?.generateImage?.images || []
          generateImage.images = [...existingImages, ...generateImage.images]
@@ -42,7 +42,7 @@ const persistedReducer = persistReducer(
  {
    key: 'cherry-studio',
    storage,
-    version: 85,
+    version: 86,
    blacklist: ['runtime', 'messages'],
    migrate
  },
@@ -13,19 +13,19 @@ const mcpSlice = createSlice({
      state.servers = action.payload
    },
    addMCPServer: (state, action: PayloadAction<MCPServer>) => {
-      state.servers.push(action.payload)
+      state.servers.unshift(action.payload)
    },
    updateMCPServer: (state, action: PayloadAction<MCPServer>) => {
-      const index = state.servers.findIndex((server) => server.name === action.payload.name)
+      const index = state.servers.findIndex((server) => server.id === action.payload.id)
      if (index !== -1) {
        state.servers[index] = action.payload
      }
    },
    deleteMCPServer: (state, action: PayloadAction<string>) => {
-      state.servers = state.servers.filter((server) => server.name !== action.payload)
+      state.servers = state.servers.filter((server) => server.id !== action.payload)
    },
-    setMCPServerActive: (state, action: PayloadAction<{ name: string; isActive: boolean }>) => {
-      const index = state.servers.findIndex((server) => server.name === action.payload.name)
+    setMCPServerActive: (state, action: PayloadAction<{ id: string; isActive: boolean }>) => {
+      const index = state.servers.findIndex((server) => server.id === action.payload.id)
      if (index !== -1) {
        state.servers[index].isActive = action.payload.isActive
      }
@@ -1,3 +1,4 @@
+import { nanoid } from '@reduxjs/toolkit'
 import { isMac } from '@renderer/config/constant'
 import { DEFAULT_MIN_APPS } from '@renderer/config/minapps'
 import { SYSTEM_MODELS } from '@renderer/config/models'
@@ -807,6 +808,15 @@ const migrateConfig = {
    delete state.settings.manualUpdateCheck
    state.settings.gridPopoverTrigger = 'click'
    return state
+  },
+  '86': (state: RootState) => {
+    if (state.mcp.servers) {
+      state.mcp.servers = state.mcp.servers.map((server) => ({
+        ...server,
+        id: nanoid()
+      }))
+    }
+    return state
  }
 }

@@ -361,6 +361,7 @@ export interface MCPServerParameter {
 }

 export interface MCPServer {
+  id: string
  name: string
  description?: string
  baseUrl?: string
@@ -380,6 +381,7 @@ export interface MCPToolInputSchema {

 export interface MCPTool {
  id: string
+  serverId: string
  serverName: string
  name: string
  description?: string
@@ -1,5 +1,6 @@
 import { Tool, ToolUnion, ToolUseBlock } from '@anthropic-ai/sdk/resources'
 import { FunctionCall, FunctionDeclaration, SchemaType, Tool as geminiToool } from '@google/generative-ai'
+import store from '@renderer/store'
 import { MCPServer, MCPTool, MCPToolResponse } from '@renderer/types'
 import { ChatCompletionMessageToolCall, ChatCompletionTool } from 'openai/resources'

@@ -58,8 +59,9 @@ function filterPropertieAttributes(tool: MCPTool, filterNestedObj = false) {
 export function mcpToolsToOpenAITools(mcpTools: MCPTool[]): Array<ChatCompletionTool> {
  return mcpTools.map((tool) => ({
    type: 'function',
+    name: tool.name,
    function: {
-      name: tool.id,
+      name: tool.serverId,
      description: tool.description,
      parameters: {
        type: 'object',
@@ -73,11 +75,16 @@ export function openAIToolsToMcpTool(
  mcpTools: MCPTool[] | undefined,
  llmTool: ChatCompletionMessageToolCall
 ): MCPTool | undefined {
-  if (!mcpTools) return undefined
-  const tool = mcpTools.find((tool) => tool.id === llmTool.function.name)
+  if (!mcpTools) {
+    return undefined
+  }
+
+  const tool = mcpTools.find((mcptool) => mcptool.serverId === llmTool.function.name)
+
  if (!tool) {
    return undefined
  }
+
  console.log(
    `[MCP] OpenAI Tool to MCP Tool: ${tool.serverName} ${tool.name}`,
    tool,
@@ -94,6 +101,7 @@ export function openAIToolsToMcpTool(

  return {
    id: tool.id,
+    serverId: tool.serverId,
    serverName: tool.serverName,
    name: tool.name,
    description: tool.description,
@@ -104,11 +112,18 @@ export function openAIToolsToMcpTool(
 export async function callMCPTool(tool: MCPTool): Promise<any> {
  console.log(`[MCP] Calling Tool: ${tool.serverName} ${tool.name}`, tool)
  try {
+    const server = getMcpServerByTool(tool)
+
+    if (!server) {
+      throw new Error(`Server not found: ${tool.serverName}`)
+    }
+
    const resp = await window.api.mcp.callTool({
-      client: tool.serverName,
+      server,
      name: tool.name,
      args: tool.inputSchema
    })
+
    console.log(`[MCP] Tool called: ${tool.serverName} ${tool.name}`, resp)
    return resp
  } catch (e) {
@@ -227,3 +242,8 @@ export function filterMCPTools(
  }
  return mcpTools
 }
+
+export function getMcpServerByTool(tool: MCPTool) {
+  const servers = store.getState().mcp.servers
+  return servers.find((s) => s.id === tool.serverId)
+}