✨enhancement: experimental feature toggle (#5514)

web-app/src/containers/SettingsMenu.tsx

@@ -2,55 +2,12 @@ import { Link, useMatches } from '@tanstack/react-router'
 import { route } from '@/constants/routes'
 import { useTranslation } from 'react-i18next'
 import { useModelProvider } from '@/hooks/useModelProvider'
-import { isProd } from '@/lib/version'
+import { useGeneralSetting } from '@/hooks/useGeneralSetting'
-
-const menuSettings = [
-  {
-    title: 'common.general',
-    route: route.settings.general,
-  },
-  {
-    title: 'common.appearance',
-    route: route.settings.appearance,
-  },
-  {
-    title: 'common.privacy',
-    route: route.settings.privacy,
-  },
-  {
-    title: 'common.keyboardShortcuts',
-    route: route.settings.shortcuts,
-  },
-  {
-    title: 'Hardware',
-    route: route.settings.hardware,
-  },
-  // Only show MCP Servers in non-production environment
-  ...(!isProd
-    ? [
-        {
-          title: 'MCP Servers',
-          route: route.settings.mcp_servers,
-        },
-      ]
-    : []),
-  {
-    title: 'Local API Server',
-    route: route.settings.local_api_server,
-  },
-  {
-    title: 'HTTPS Proxy',
-    route: route.settings.https_proxy,
-  },
-  {
-    title: 'Extensions',
-    route: route.settings.extensions,
-  },
-]
 
 const SettingsMenu = () => {
   const { t } = useTranslation()
   const { providers } = useModelProvider()
+  const { experimentalFeatures } = useGeneralSetting()
   const firstItemProvider =
     providers.length > 0 ? providers[0].provider : 'llama.cpp'
   const matches = useMatches()
@@ -60,6 +17,50 @@ const SettingsMenu = () => {
       'providerName' in match.params
   )
 
+  const menuSettings = [
+    {
+      title: 'common.general',
+      route: route.settings.general,
+    },
+    {
+      title: 'common.appearance',
+      route: route.settings.appearance,
+    },
+    {
+      title: 'common.privacy',
+      route: route.settings.privacy,
+    },
+    {
+      title: 'common.keyboardShortcuts',
+      route: route.settings.shortcuts,
+    },
+    {
+      title: 'Hardware',
+      route: route.settings.hardware,
+    },
+    // Only show MCP Servers when experimental features are enabled
+    ...(experimentalFeatures
+      ? [
+          {
+            title: 'MCP Servers',
+            route: route.settings.mcp_servers,
+          },
+        ]
+      : []),
+    {
+      title: 'Local API Server',
+      route: route.settings.local_api_server,
+    },
+    {
+      title: 'HTTPS Proxy',
+      route: route.settings.https_proxy,
+    },
+    {
+      title: 'Extensions',
+      route: route.settings.extensions,
+    },
+  ]
+
   return (
     <div className="flex h-full w-44 shrink-0 px-1.5 pt-3 border-r border-main-view-fg/5">
       <div className="flex flex-col gap-1 w-full text-main-view-fg/90 font-medium">

web-app/src/hooks/useGeneralSetting.ts

@@ -5,6 +5,8 @@ import { localStorageKey } from '@/constants/localStorage'
 type LeftPanelStoreState = {
   currentLanguage: Language
   spellCheckChatInput: boolean
+  experimentalFeatures: boolean
+  setExperimentalFeatures: (value: boolean) => void
   setSpellCheckChatInput: (value: boolean) => void
   setCurrentLanguage: (value: Language) => void
 }
@@ -14,6 +16,8 @@ export const useGeneralSetting = create<LeftPanelStoreState>()(
     (set) => ({
       currentLanguage: 'en',
       spellCheckChatInput: true,
+      experimentalFeatures: false,
+      setExperimentalFeatures: (value) => set({ experimentalFeatures: value }),
       setSpellCheckChatInput: (value) => set({ spellCheckChatInput: value }),
       setCurrentLanguage: (value) => set({ currentLanguage: value }),
     }),

web-app/src/routes/settings/general.tsx

@@ -64,7 +64,12 @@ const openFileTitle = (): string => {
 
 function General() {
   const { t } = useTranslation()
-  const { spellCheckChatInput, setSpellCheckChatInput } = useGeneralSetting()
+  const {
+    spellCheckChatInput,
+    setSpellCheckChatInput,
+    experimentalFeatures,
+    setExperimentalFeatures,
+  } = useGeneralSetting()
   const { checkForUpdate } = useAppUpdater()
   const [janDataFolder, setJanDataFolder] = useState<string | undefined>()
   const [isCopied, setIsCopied] = useState(false)
@@ -390,6 +395,16 @@ function General() {
                   />
                 }
               />
+              <CardItem
+                title="Experimental Features"
+                description="Enable experimental features and cutting-edge functionality that may be unstable."
+                actions={
+                  <Switch
+                    checked={experimentalFeatures}
+                    onCheckedChange={(e) => setExperimentalFeatures(e)}
+                  />
+                }
+              />
               <CardItem
                 title={t('settings.others.resetFactory', {
                   ns: 'settings',