From 40d63853ecf18ffafd83c1025b1d563c72bbcc12 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 14 Apr 2025 15:26:13 +0700
Subject: [PATCH 1/5] chore: initial commit mcp setting

---
 web/screens/Settings/MCP/index.tsx           | 13 +++++++++++++
 web/screens/Settings/SettingDetail/index.tsx |  4 ++++
 web/screens/Settings/index.tsx               |  1 +
 3 files changed, 18 insertions(+)
 create mode 100644 web/screens/Settings/MCP/index.tsx

diff --git a/web/screens/Settings/MCP/index.tsx b/web/screens/Settings/MCP/index.tsx
new file mode 100644
index 000000000..905416cea
--- /dev/null
+++ b/web/screens/Settings/MCP/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const MCP = () => {
+  return (
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, cumque
+      deleniti dolorem ducimus nisi rerum cum et sunt maxime, dicta sequi
+      assumenda sit illum? Minima beatae repudiandae praesentium sed incidunt!
+    </p>
+  )
+}
+
+export default MCP
diff --git a/web/screens/Settings/SettingDetail/index.tsx b/web/screens/Settings/SettingDetail/index.tsx
index 8ceb600e6..43bbd6c1c 100644
--- a/web/screens/Settings/SettingDetail/index.tsx
+++ b/web/screens/Settings/SettingDetail/index.tsx
@@ -15,6 +15,7 @@ import RemoteEngineSettings from '@/screens/Settings/Engines/RemoteEngineSetting
 import ExtensionSetting from '@/screens/Settings/ExtensionSetting'
 import Hardware from '@/screens/Settings/Hardware'
 import Hotkeys from '@/screens/Settings/Hotkeys'
+import MCP from '@/screens/Settings/MCP'
 import MyModels from '@/screens/Settings/MyModels'
 import Privacy from '@/screens/Settings/Privacy'
 
@@ -31,6 +32,9 @@ const SettingDetail = () => {
     case 'Engines':
       return <Engines />
 
+    case 'MCP Servers':
+      return <MCP />
+
     case 'Extensions':
       return <ExtensionCatalog />
 
diff --git a/web/screens/Settings/index.tsx b/web/screens/Settings/index.tsx
index d126f0d0e..8db1dd0b3 100644
--- a/web/screens/Settings/index.tsx
+++ b/web/screens/Settings/index.tsx
@@ -19,6 +19,7 @@ export const SettingScreenList = [
   'Privacy',
   'Advanced Settings',
   'Engines',
+  'MCP Servers',
   'Extensions',
 ] as const
 

From ef1a85b58c9d756c8515c01fc296483daef1b372 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 14 Apr 2025 21:32:04 +0700
Subject: [PATCH 2/5] chore: setting mcp

---
 web/screens/Settings/MCP/index.tsx | 126 +++++++++++++++++++++++++++--
 1 file changed, 120 insertions(+), 6 deletions(-)

diff --git a/web/screens/Settings/MCP/index.tsx b/web/screens/Settings/MCP/index.tsx
index 905416cea..28f26d5f0 100644
--- a/web/screens/Settings/MCP/index.tsx
+++ b/web/screens/Settings/MCP/index.tsx
@@ -1,12 +1,126 @@
-import React from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
+
+import { fs, joinPath } from '@janhq/core'
+import { Button } from '@janhq/joi'
+import { useAtomValue } from 'jotai'
+
+import { janDataFolderPathAtom } from '@/helpers/atoms/AppConfig.atom'
 
 const MCP = () => {
+  const janDataFolderPath = useAtomValue(janDataFolderPathAtom)
+  const [configContent, setConfigContent] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+
+  console.log(janDataFolderPath, 'janDataFolderPath')
+
+  const readConfigFile = useCallback(async () => {
+    try {
+      const configPath = await joinPath([janDataFolderPath, 'mcp_config.json'])
+
+      // Check if the file exists
+      const fileExists = await fs.existsSync(configPath)
+
+      if (fileExists) {
+        // Read the file
+        const content = await fs.readFileSync(configPath, 'utf-8')
+        setConfigContent(content)
+      } else {
+        // Create a default config if it doesn't exist
+        const defaultConfig = JSON.stringify(
+          {
+            servers: [],
+            settings: {
+              enabled: true,
+            },
+          },
+          null,
+          2
+        )
+
+        await fs.writeFileSync(configPath, defaultConfig)
+        setConfigContent(defaultConfig)
+      }
+
+      setError('')
+    } catch (err) {
+      console.error('Error reading config file:', err)
+      setError('Failed to read config file')
+    }
+  }, [janDataFolderPath])
+
+  useEffect(() => {
+    if (janDataFolderPath) {
+      readConfigFile()
+    }
+  }, [janDataFolderPath, readConfigFile])
+
+  const saveConfigFile = useCallback(async () => {
+    try {
+      setIsSaving(true)
+      setSuccess('')
+      setError('')
+
+      // Validate JSON
+      try {
+        JSON.parse(configContent)
+      } catch (err) {
+        setError('Invalid JSON format')
+        setIsSaving(false)
+        return
+      }
+
+      const configPath = await joinPath([janDataFolderPath, 'mcp_config.json'])
+
+      // Write to the file
+      await fs.writeFileSync(configPath, configContent)
+
+      setSuccess('Config saved successfully')
+      setIsSaving(false)
+    } catch (err) {
+      console.error('Error saving config file:', err)
+      setError('Failed to save config file')
+      setIsSaving(false)
+    }
+  }, [janDataFolderPath, configContent])
+
   return (
-    <p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, cumque
-      deleniti dolorem ducimus nisi rerum cum et sunt maxime, dicta sequi
-      assumenda sit illum? Minima beatae repudiandae praesentium sed incidunt!
-    </p>
+    <div className="p-4">
+      <h2 className="mb-4 text-xl font-bold">MCP Configuration</h2>
+
+      {error && (
+        <div className="mb-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700">
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="mb-4 rounded border border-green-400 bg-green-100 px-4 py-3 text-green-700">
+          {success}
+        </div>
+      )}
+
+      <div className="mb-4">
+        <label className="mb-2 block text-sm font-medium">
+          Configuration File (JSON)
+        </label>
+        <textarea
+          className="h-80 w-full rounded border border-gray-800 p-2 font-mono text-sm"
+          value={configContent}
+          onChange={(e) => {
+            setConfigContent(e.target.value)
+            setSuccess('')
+          }}
+        />
+      </div>
+
+      <div className="flex justify-end">
+        <Button onClick={saveConfigFile} disabled={isSaving}>
+          {isSaving ? 'Saving...' : 'Save Config'}
+        </Button>
+      </div>
+    </div>
   )
 }
 

From 70be283d0eba88cbe7a227f7edb5ac8201cfee53 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Mon, 14 Apr 2025 22:03:06 +0700
Subject: [PATCH 3/5] chore: add mcp write and read commands

---
 src-tauri/src/core/cmd.rs          | 29 +++++++++++++++++++++++++
 src-tauri/src/lib.rs               |  2 ++
 web/screens/Settings/MCP/index.tsx | 34 ++++--------------------------
 web/services/tauriService.ts       |  2 ++
 4 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/src-tauri/src/core/cmd.rs b/src-tauri/src/core/cmd.rs
index ca3d051af..3d7d921ee 100644
--- a/src-tauri/src/core/cmd.rs
+++ b/src-tauri/src/core/cmd.rs
@@ -7,6 +7,9 @@ use tauri::{AppHandle, Manager, Runtime, State};
 use super::{server, setup, state::AppState};
 
 const CONFIGURATION_FILE_NAME: &str = "settings.json";
+const DEFAULT_MCP_CONFIG: &str = r#"{
+    "mcpServers": {}
+}"#;
 
 #[derive(Serialize, Deserialize, Debug, Clone)]
 pub struct AppConfiguration {
@@ -352,3 +355,29 @@ pub async fn call_tool(
 
     Err(format!("Tool {} not found", tool_name))
 }
+
+#[tauri::command]
+pub async fn get_mcp_configs(app: AppHandle) -> Result<String, String> {
+    let mut path = get_jan_data_folder_path(app);
+    path.push("mcp_config.json");
+    log::info!("read mcp configs, path: {:?}", path);
+
+    // Create default empty config if file doesn't exist
+    if !path.exists() {
+        log::info!("mcp_config.json not found, creating default empty config");
+        fs::write(&path, DEFAULT_MCP_CONFIG)
+            .map_err(|e| format!("Failed to create default MCP config: {}", e))?;
+    }
+
+    let contents = fs::read_to_string(path).map_err(|e| e.to_string())?;
+    return Ok(contents);
+}
+
+#[tauri::command]
+pub async fn save_mcp_configs(app: AppHandle, configs: String) -> Result<(), String> {
+    let mut path = get_jan_data_folder_path(app);
+    path.push("mcp_config.json");
+    log::info!("save mcp configs, path: {:?}", path);
+
+    fs::write(path, configs).map_err(|e| e.to_string())
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index f37d97ae2..7248e15cc 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -39,6 +39,8 @@ pub fn run() {
             core::cmd::app_token,
             core::cmd::start_server,
             core::cmd::stop_server,
+            core::cmd::save_mcp_configs,
+            core::cmd::get_mcp_configs,
             // MCP commands
             core::cmd::get_tools,
             core::cmd::call_tool,
diff --git a/web/screens/Settings/MCP/index.tsx b/web/screens/Settings/MCP/index.tsx
index 28f26d5f0..90cb785f5 100644
--- a/web/screens/Settings/MCP/index.tsx
+++ b/web/screens/Settings/MCP/index.tsx
@@ -17,31 +17,9 @@ const MCP = () => {
 
   const readConfigFile = useCallback(async () => {
     try {
-      const configPath = await joinPath([janDataFolderPath, 'mcp_config.json'])
-
-      // Check if the file exists
-      const fileExists = await fs.existsSync(configPath)
-
-      if (fileExists) {
-        // Read the file
-        const content = await fs.readFileSync(configPath, 'utf-8')
-        setConfigContent(content)
-      } else {
-        // Create a default config if it doesn't exist
-        const defaultConfig = JSON.stringify(
-          {
-            servers: [],
-            settings: {
-              enabled: true,
-            },
-          },
-          null,
-          2
-        )
-
-        await fs.writeFileSync(configPath, defaultConfig)
-        setConfigContent(defaultConfig)
-      }
+      // Read the file
+      const content = await window.core?.api.getMcpConfigs()
+      setConfigContent(content)
 
       setError('')
     } catch (err) {
@@ -70,11 +48,7 @@ const MCP = () => {
         setIsSaving(false)
         return
       }
-
-      const configPath = await joinPath([janDataFolderPath, 'mcp_config.json'])
-
-      // Write to the file
-      await fs.writeFileSync(configPath, configContent)
+      await window.core?.api?.saveMcpConfigs({ configs: configContent })
 
       setSuccess('Config saved successfully')
       setIsSaving(false)
diff --git a/web/services/tauriService.ts b/web/services/tauriService.ts
index 2c592f951..666383bd1 100644
--- a/web/services/tauriService.ts
+++ b/web/services/tauriService.ts
@@ -19,6 +19,8 @@ export const Routes = [
   'getThreadAssistant',
   'createThreadAssistant',
   'modifyThreadAssistant',
+  'saveMcpConfigs',
+  'getMcpConfigs',
 ].map((r) => ({
   path: `app`,
   route: r,

From 6aa2ea8da4285c3ca00b5849fb8e7b5a84e407d7 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 15 Apr 2025 20:01:31 +0700
Subject: [PATCH 4/5] chore: update UI mcp settings

---
 web/package.json                              |   1 +
 web/screens/Settings/MCP/configuration.tsx    |  98 +++++++++
 web/screens/Settings/MCP/index.tsx            | 113 +++-------
 web/screens/Settings/MCP/search.tsx           | 208 ++++++++++++++++++
 .../ThreadCenterPanel/TextMessage/index.tsx   |   3 +-
 5 files changed, 333 insertions(+), 90 deletions(-)
 create mode 100644 web/screens/Settings/MCP/configuration.tsx
 create mode 100644 web/screens/Settings/MCP/search.tsx

diff --git a/web/package.json b/web/package.json
index 7999c74e9..cdf2d8d8b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -37,6 +37,7 @@
     "marked": "^9.1.2",
     "next": "14.2.3",
     "next-themes": "^0.2.1",
+    "npx-scope-finder": "^1.3.0",
     "openai": "^4.90.0",
     "postcss": "8.4.31",
     "postcss-url": "10.1.3",
diff --git a/web/screens/Settings/MCP/configuration.tsx b/web/screens/Settings/MCP/configuration.tsx
new file mode 100644
index 000000000..b829066d2
--- /dev/null
+++ b/web/screens/Settings/MCP/configuration.tsx
@@ -0,0 +1,98 @@
+import React, { useState, useEffect, useCallback } from 'react'
+
+import { Button, TextArea } from '@janhq/joi'
+import { useAtomValue } from 'jotai'
+
+import { janDataFolderPathAtom } from '@/helpers/atoms/AppConfig.atom'
+
+const MCPConfiguration = () => {
+  const janDataFolderPath = useAtomValue(janDataFolderPathAtom)
+  const [configContent, setConfigContent] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+
+  const readConfigFile = useCallback(async () => {
+    try {
+      // Read the file
+      const content = await window.core?.api.getMcpConfigs()
+      setConfigContent(content)
+
+      setError('')
+    } catch (err) {
+      console.error('Error reading config file:', err)
+      setError('Failed to read config file')
+    }
+  }, [janDataFolderPath])
+
+  useEffect(() => {
+    if (janDataFolderPath) {
+      readConfigFile()
+    }
+  }, [janDataFolderPath, readConfigFile])
+
+  const saveConfigFile = useCallback(async () => {
+    try {
+      setIsSaving(true)
+      setSuccess('')
+      setError('')
+
+      // Validate JSON
+      try {
+        JSON.parse(configContent)
+      } catch (err) {
+        setError('Invalid JSON format')
+        setIsSaving(false)
+        return
+      }
+      await window.core?.api?.saveMcpConfigs({ configs: configContent })
+
+      setSuccess('Config saved successfully')
+      setIsSaving(false)
+    } catch (err) {
+      console.error('Error saving config file:', err)
+      setError('Failed to save config file')
+      setIsSaving(false)
+    }
+  }, [janDataFolderPath, configContent])
+
+  return (
+    <>
+      {error && (
+        <div className="mb-4 rounded bg-[hsla(var(--destructive-bg))] px-4 py-3 text-[hsla(var(--destructive-fg))]">
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="mb-4 rounded bg-[hsla(var(--success-bg))] px-4 py-3 text-[hsla(var(--success-fg))]">
+          {success}
+        </div>
+      )}
+
+      <div className="mb-4 mt-2">
+        <label className="mb-2 block text-sm font-medium">
+          Configuration File (JSON)
+        </label>
+        <TextArea
+          // className="h-80 w-full rounded border border-gray-800 p-2 font-mono text-sm"
+          className="font-mono text-xs"
+          value={configContent}
+          rows={20}
+          onChange={(e) => {
+            setConfigContent(e.target.value)
+            setSuccess('')
+          }}
+        />
+      </div>
+
+      <div className="flex justify-end">
+        <Button onClick={saveConfigFile} disabled={isSaving}>
+          {isSaving ? 'Saving...' : 'Save Config'}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default MCPConfiguration
diff --git a/web/screens/Settings/MCP/index.tsx b/web/screens/Settings/MCP/index.tsx
index 90cb785f5..b45339220 100644
--- a/web/screens/Settings/MCP/index.tsx
+++ b/web/screens/Settings/MCP/index.tsx
@@ -1,100 +1,37 @@
 import React, { useState, useEffect, useCallback } from 'react'
 
-import { fs, joinPath } from '@janhq/core'
-import { Button } from '@janhq/joi'
+import { ScrollArea, Tabs } from '@janhq/joi'
+import MCPSearch from './search'
+import MCPConfiguration from './configuration'
 import { useAtomValue } from 'jotai'
-
-import { janDataFolderPathAtom } from '@/helpers/atoms/AppConfig.atom'
+import { showScrollBarAtom } from '@/helpers/atoms/Setting.atom'
 
 const MCP = () => {
-  const janDataFolderPath = useAtomValue(janDataFolderPathAtom)
-  const [configContent, setConfigContent] = useState('')
-  const [isSaving, setIsSaving] = useState(false)
-  const [error, setError] = useState('')
-  const [success, setSuccess] = useState('')
-
-  console.log(janDataFolderPath, 'janDataFolderPath')
-
-  const readConfigFile = useCallback(async () => {
-    try {
-      // Read the file
-      const content = await window.core?.api.getMcpConfigs()
-      setConfigContent(content)
-
-      setError('')
-    } catch (err) {
-      console.error('Error reading config file:', err)
-      setError('Failed to read config file')
-    }
-  }, [janDataFolderPath])
-
-  useEffect(() => {
-    if (janDataFolderPath) {
-      readConfigFile()
-    }
-  }, [janDataFolderPath, readConfigFile])
-
-  const saveConfigFile = useCallback(async () => {
-    try {
-      setIsSaving(true)
-      setSuccess('')
-      setError('')
-
-      // Validate JSON
-      try {
-        JSON.parse(configContent)
-      } catch (err) {
-        setError('Invalid JSON format')
-        setIsSaving(false)
-        return
-      }
-      await window.core?.api?.saveMcpConfigs({ configs: configContent })
-
-      setSuccess('Config saved successfully')
-      setIsSaving(false)
-    } catch (err) {
-      console.error('Error saving config file:', err)
-      setError('Failed to save config file')
-      setIsSaving(false)
-    }
-  }, [janDataFolderPath, configContent])
+  const [tabValue, setTabValue] = useState('search_mcp')
+  const showScrollBar = useAtomValue(showScrollBarAtom)
 
   return (
-    <div className="p-4">
-      <h2 className="mb-4 text-xl font-bold">MCP Configuration</h2>
-
-      {error && (
-        <div className="mb-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700">
-          {error}
+    <ScrollArea
+      type={showScrollBar ? 'always' : 'scroll'}
+      className="h-full w-full"
+    >
+      <div className="block w-full px-4 pb-4">
+        <div className="sticky top-0 bg-[hsla(var(--app-bg))] py-4">
+          <h2 className="mb-4 text-lg font-bold">MCP servers</h2>
+          <Tabs
+            options={[
+              { name: 'Search MCP', value: 'search_mcp' },
+              { name: 'Configuration', value: 'config' },
+            ]}
+            tabStyle="segmented"
+            value={tabValue}
+            onValueChange={(value) => setTabValue(value as string)}
+          />
         </div>
-      )}
-
-      {success && (
-        <div className="mb-4 rounded border border-green-400 bg-green-100 px-4 py-3 text-green-700">
-          {success}
-        </div>
-      )}
-
-      <div className="mb-4">
-        <label className="mb-2 block text-sm font-medium">
-          Configuration File (JSON)
-        </label>
-        <textarea
-          className="h-80 w-full rounded border border-gray-800 p-2 font-mono text-sm"
-          value={configContent}
-          onChange={(e) => {
-            setConfigContent(e.target.value)
-            setSuccess('')
-          }}
-        />
+        {tabValue === 'search_mcp' && <MCPSearch />}
+        {tabValue === 'config' && <MCPConfiguration />}
       </div>
-
-      <div className="flex justify-end">
-        <Button onClick={saveConfigFile} disabled={isSaving}>
-          {isSaving ? 'Saving...' : 'Save Config'}
-        </Button>
-      </div>
-    </div>
+    </ScrollArea>
   )
 }
 
diff --git a/web/screens/Settings/MCP/search.tsx b/web/screens/Settings/MCP/search.tsx
new file mode 100644
index 000000000..22aebd284
--- /dev/null
+++ b/web/screens/Settings/MCP/search.tsx
@@ -0,0 +1,208 @@
+import React, { useState, useEffect, useCallback } from 'react'
+
+import { npxFinder, NPMPackage } from 'npx-scope-finder'
+
+import { Button, Input } from '@janhq/joi'
+import { PlusIcon } from 'lucide-react'
+import { toaster } from '@/containers/Toast'
+
+interface MCPConfig {
+  mcpServers: {
+    [key: string]: {
+      command: string
+      args: string[]
+      env: Record<string, string>
+    }
+  }
+}
+
+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 [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const searchOrganizationPackages = useCallback(async () => {
+    if (!orgName) return
+
+    try {
+      setLoading(true)
+      setError('')
+
+      // Remove @ symbol if present at the beginning
+      // const scopeName = orgName.startsWith('@') ? orgName.substring(1) : orgName
+
+      // Use npxFinder to search for packages from the specified organization
+      const result = await npxFinder(orgName)
+
+      setPackages(result || [])
+    } catch (err) {
+      console.error('Error searching for packages:', err)
+      setError('Failed to search for packages. Please try again.')
+    } finally {
+      setLoading(false)
+    }
+  }, [orgName])
+
+  // Search for packages when the component mounts
+  useEffect(() => {
+    searchOrganizationPackages()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <>
+      <h2 className="mt-2 text-lg font-bold">NPX Package List</h2>
+      <p className="text-[hsla(var(--text-secondary))]">
+        Search and add npm packages as MCP servers
+      </p>
+
+      <div className="mt-6">
+        <div className="flex gap-2">
+          <input
+            id="orgName"
+            type="text"
+            value={orgName}
+            onChange={(e) => setOrgName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && orgName) {
+                e.preventDefault()
+                searchOrganizationPackages()
+              }
+            }}
+            className="input w-full"
+            placeholder="Enter npm scope name (e.g. @janhq)"
+          />
+          <Button
+            onClick={searchOrganizationPackages}
+            disabled={loading || !orgName}
+          >
+            {loading ? 'Searching...' : 'Search'}
+          </Button>
+        </div>
+        {error && <p className="mt-2 text-sm text-red-500">{error}</p>}
+      </div>
+
+      {packages.length > 0 ? (
+        <div className="mt-6">
+          {packages.map((pkg, index) => (
+            <div
+              key={index}
+              className="my-2 rounded-xl border border-[hsla(var(--app-border))]"
+            >
+              <div className="flex justify-between border-b border-[hsla(var(--app-border))] px-4 py-3">
+                <span>{pkg.name?.split('/')[1]}</span>
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-sm text-[hsla(var(--text-secondary))]">
+                    {pkg.version}
+                  </span>
+                  <Button theme="icon" onClick={() => handleAddToConfig(pkg)}>
+                    <PlusIcon />
+                  </Button>
+                </div>
+              </div>
+              <div className="px-4 py-3">
+                <p>{pkg.description || 'No description'}</p>
+                <p className="my-2 whitespace-nowrap text-[hsla(var(--text-secondary))]">
+                  Usage: npx {pkg.name}
+                </p>
+                <a
+                  target="_blank"
+                  href={`https://www.npmjs.com/package/${pkg.name}`}
+                >{`https://www.npmjs.com/package/${pkg.name}`}</a>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        !loading && (
+          <div className="mt-4">
+            <p>
+              No packages found. Try searching for a different organization.
+            </p>
+          </div>
+        )
+      )}
+
+      {showToast && (
+        <div
+          className={`fixed bottom-4 right-4 z-50 rounded-md p-4 shadow-lg ${
+            toastType === 'success'
+              ? 'bg-green-100 text-green-800'
+              : 'bg-red-100 text-red-800'
+          }`}
+        >
+          <div className="flex items-center justify-between">
+            <span>{toastMessage}</span>
+            <button
+              onClick={() => setShowToast(false)}
+              className="ml-4 text-gray-500 hover:text-gray-700"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  )
+
+  // Function to add a package to the MCP configuration
+  async function handleAddToConfig(pkg: NPMPackage) {
+    try {
+      // Get current configuration
+      const currentConfig = await window.core?.api.getMcpConfigs()
+
+      // Parse the configuration
+      let config: MCPConfig
+      try {
+        config = JSON.parse(currentConfig || '{"mcpServers": {}}')
+      } catch (err) {
+        // If parsing fails, start with an empty configuration
+        config = { mcpServers: {} }
+      }
+
+      // Generate a unique server name based on the package name
+      const serverName = pkg.name?.split('/')[1] || 'unknown'
+
+      // Check if this server already exists
+      if (config.mcpServers[serverName]) {
+        toaster({
+          title: `Add ${serverName} success`,
+          description: `Server ${serverName} already exists in configuration`,
+          type: 'error',
+        })
+        return
+      }
+
+      // Add the new server configuration
+      config.mcpServers[serverName] = {
+        command: 'npx',
+        args: ['-y', pkg.name || ''],
+        env: {},
+      }
+
+      // Save the updated configuration
+      await window.core?.api?.saveMcpConfigs({
+        configs: JSON.stringify(config, null, 2),
+      })
+
+      toaster({
+        title: `Add ${serverName} success`,
+        description: `Added ${serverName} to MCP configuration`,
+        type: 'success',
+      })
+    } catch (err) {
+      toaster({
+        title: `Add ${pkg.name?.split('/')[1] || 'unknown'} failed`,
+        description: `Failed to add package to configuration`,
+        type: 'error',
+      })
+      console.error('Error adding package to configuration:', err)
+    }
+  }
+}
+
+export default MCPSearch
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
index 3af675de5..9d1558ec9 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
@@ -81,7 +81,7 @@ const MessageContainer: React.FC<
         'group relative mx-auto px-4',
         !(props.metadata && 'parent_id' in props.metadata) && 'py-2',
         chatWidth === 'compact' && 'max-w-[700px]',
-        isUser && 'pb-4 pt-0'
+        !isUser && 'pb-4 pt-0'
       )}
     >
       {!(props.metadata && 'parent_id' in props.metadata) && (
@@ -92,7 +92,6 @@ const MessageContainer: React.FC<
           )}
         >
           {!isUser && !isSystem && <LogoMark width={28} />}
-
           <div
             className={twMerge(
               'font-extrabold capitalize',

From f07a821a00e20b34627b771c3942fbadef31c671 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 15 Apr 2025 20:02:05 +0700
Subject: [PATCH 5/5] chore: update tab setting

---
 web/screens/Settings/MCP/index.tsx  | 7 +++++--
 web/screens/Settings/MCP/search.tsx | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/screens/Settings/MCP/index.tsx b/web/screens/Settings/MCP/index.tsx
index b45339220..b5770ef4c 100644
--- a/web/screens/Settings/MCP/index.tsx
+++ b/web/screens/Settings/MCP/index.tsx
@@ -1,9 +1,12 @@
 import React, { useState, useEffect, useCallback } from 'react'
 
 import { ScrollArea, Tabs } from '@janhq/joi'
-import MCPSearch from './search'
-import MCPConfiguration from './configuration'
+
 import { useAtomValue } from 'jotai'
+
+import MCPConfiguration from './configuration'
+import MCPSearch from './search'
+
 import { showScrollBarAtom } from '@/helpers/atoms/Setting.atom'
 
 const MCP = () => {
diff --git a/web/screens/Settings/MCP/search.tsx b/web/screens/Settings/MCP/search.tsx
index 22aebd284..4a4696515 100644
--- a/web/screens/Settings/MCP/search.tsx
+++ b/web/screens/Settings/MCP/search.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useCallback } from 'react'
 
-import { npxFinder, NPMPackage } from 'npx-scope-finder'
-
 import { Button, Input } from '@janhq/joi'
 import { PlusIcon } from 'lucide-react'
+import { npxFinder, NPMPackage } from 'npx-scope-finder'
+
 import { toaster } from '@/containers/Toast'
 
 interface MCPConfig {