fix: avoid spamming server restarts (#5212)

web-app/src/hooks/useMCPServers.ts

@@ -24,9 +24,10 @@ type MCPServerStoreState = {
   editServer: (key: string, config: MCPServerConfig) => void
   deleteServer: (key: string) => void
   setServers: (servers: MCPServers) => void
+  syncServers: () => void
 }
 
-export const useMCPServers = create<MCPServerStoreState>()((set) => ({
+export const useMCPServers = create<MCPServerStoreState>()((set, get) => ({
   open: true,
   mcpServers: {}, // Start with empty object
   loading: false,
@@ -37,7 +38,6 @@ export const useMCPServers = create<MCPServerStoreState>()((set) => ({
   addServer: (key, config) =>
     set((state) => {
       const mcpServers = { ...state.mcpServers, [key]: config }
-      updateMCPConfig(JSON.stringify({ mcpServers }))
       return { mcpServers }
     }),
 
@@ -48,13 +48,11 @@ export const useMCPServers = create<MCPServerStoreState>()((set) => ({
       if (!state.mcpServers[key]) return state
 
       const mcpServers = { ...state.mcpServers, [key]: config }
-      updateMCPConfig(JSON.stringify({ mcpServers }))
       return { mcpServers }
     }),
   setServers: (servers) =>
     set((state) => {
       const mcpServers = { ...state.mcpServers, ...servers }
-      updateMCPConfig(JSON.stringify({ mcpServers }))
       return { mcpServers }
     }),
   // Delete an MCP server by key
@@ -67,14 +65,17 @@ export const useMCPServers = create<MCPServerStoreState>()((set) => ({
       if (updatedServers[key]) {
         delete updatedServers[key]
       }
-      updateMCPConfig(
-        JSON.stringify({
-          mcpServers: updatedServers,
-        })
-      )
       return {
         mcpServers: updatedServers,
         deletedServerKeys: [...state.deletedServerKeys, key],
       }
     }),
+  syncServers: async () => {
+    const mcpServers = get().mcpServers
+    await updateMCPConfig(
+      JSON.stringify({
+        mcpServers,
+      })
+    )
+  },
 }))

web-app/src/routes/settings/mcp-servers.tsx

@@ -26,7 +26,8 @@ export const Route = createFileRoute(route.settings.mcp_servers as any)({
 })
 
 function MCPServers() {
-  const { mcpServers, addServer, editServer, deleteServer } = useMCPServers()
+  const { mcpServers, addServer, editServer, deleteServer, syncServers } =
+    useMCPServers()
   const { allowAllMCPPermissions, setAllowAllMCPPermissions } =
     useToolApproval()
 
@@ -64,17 +65,19 @@ function MCPServers() {
   const handleSaveServer = (name: string, config: MCPServerConfig) => {
     if (editingKey) {
       // Edit existing server
-      editServer(editingKey, config)
 
       // If server name changed, delete old one and add new one
       if (editingKey !== name) {
         deleteServer(editingKey)
         addServer(name, config)
+      } else {
+        editServer(editingKey, config)
       }
     } else {
       // Add new server
       addServer(name, config)
     }
+    syncServers()
   }
 
   const handleEdit = (serverKey: string) => {
@@ -90,6 +93,7 @@ function MCPServers() {
     if (serverToDelete) {
       deleteServer(serverToDelete)
       setServerToDelete(null)
+      syncServers()
     }
   }
 
@@ -126,6 +130,7 @@ function MCPServers() {
         }
       )
     }
+    syncServers()
   }
 
   const toggleServer = (serverKey: string, active: boolean) => {
@@ -135,6 +140,7 @@ function MCPServers() {
         ...(mcpServers[serverKey] as MCPServerConfig),
         active,
       })
+      syncServers()
     }
   }