From 946e8dda657c27c2ffaf002c4d94b1dd14919400 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Thu, 24 Apr 2025 15:28:48 +0700
Subject: [PATCH] Merge pull request #4942 from
 menloresearch/enhancement/mcp-servers-search-cache-results

enhancement: cache MCP Server search results to enhance UX
---
 web/screens/Settings/MCP/search.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/screens/Settings/MCP/search.tsx b/web/screens/Settings/MCP/search.tsx
index f3ff5ce30..ea8365ee2 100644
--- a/web/screens/Settings/MCP/search.tsx
+++ b/web/screens/Settings/MCP/search.tsx
@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useCallback } from 'react'
 
 import { Button, Input } from '@janhq/joi'
+import { useAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
 import { PlusIcon } from 'lucide-react'
 import { npxFinder, NPMPackage } from 'npx-scope-finder'
 
@@ -16,12 +18,13 @@ interface MCPConfig {
   }
 }
 
+const mcpPackagesAtom = atomWithStorage<NPMPackage[]>('mcpPackages', [])
 const MCPSearch = () => {
   const [showToast, setShowToast] = useState(false)
   const [toastMessage, setToastMessage] = useState('')
   const [toastType, setToastType] = useState<'success' | 'error'>('success')
   const [orgName, setOrgName] = useState('@modelcontextprotocol')
-  const [packages, setPackages] = useState<NPMPackage[]>([])
+  const [packages, setPackages] = useAtom(mcpPackagesAtom)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
 
@@ -170,7 +173,7 @@ const MCPSearch = () => {
       // Check if this server already exists
       if (config.mcpServers[serverName]) {
         toaster({
-          title: `Add ${serverName} success`,
+          title: `Add ${serverName}`,
           description: `Server ${serverName} already exists in configuration`,
           type: 'error',
         })
@@ -191,7 +194,7 @@ const MCPSearch = () => {
       await window.core?.api?.restartMcpServers()
 
       toaster({
-        title: `Add ${serverName} success`,
+        title: `Add ${serverName}`,
         description: `Added ${serverName} to MCP configuration`,
         type: 'success',
       })