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] 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>
   )
 }