From 9b31a7c3ac9f4467a4b6b902e9fa579a8827b5a1 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Mon, 20 Jul 2026 19:10:19 +0100
Subject: [PATCH 1/2] feat: Add MCP server settings tab

Operators can now enable or disable the agent's MCP server from settings
and, when it is on, see the endpoint and how external clients connect.
The toggle takes effect immediately without restarting the agent.
---
 src/views/SettingsView.test.ts |  5 ++-
 src/views/SettingsView.vue     | 81 +++++++++++++++++++++++++++++++++-
 2 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/src/views/SettingsView.test.ts b/src/views/SettingsView.test.ts
index 5424551..c809a4a 100644
--- a/src/views/SettingsView.test.ts
+++ b/src/views/SettingsView.test.ts
@@ -97,10 +97,10 @@ describe("SettingsView", () => {
   });
 
   describe("Tab navigation", () => {
-    it("displays all nine tabs", () => {
+    it("displays all ten tabs", () => {
       const wrapper = mountView();
       const tabs = wrapper.findAll(".tab");
-      expect(tabs.length).toBe(9);
+      expect(tabs.length).toBe(10);
     });
 
     it("has General tab", () => {
@@ -383,6 +383,7 @@ describe("SettingsView", () => {
         { id: "notifications", label: "Notifications", icon: "" },
         { id: "credentials", label: "Credentials", icon: "pi pi-key" },
         { id: "ai", label: "AI Assistant", icon: "" },
+        { id: "mcp", label: "MCP Server", icon: "" },
       ]);
     });
   });
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index f9a7a23..6ac40f5 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1009,14 +1009,55 @@
           </div>
         </div>
       </div>
+
+      <div v-show="activeTab === 'mcp'" class="tab-content">
+        <div class="settings-card">
+          <div class="card-header">
+            <Plug :size="16" />
+            <h3>MCP Server</h3>
+          </div>
+          <div class="card-body">
+            <p class="section-description">
+              Expose the assistant's tools over the Model Context Protocol so an external client, an IDE, a desktop
+              app, or another agent, can drive this server through the same capabilities the built-in assistant has.
+              Every call is authenticated and runs with the caller's own permissions, so a client can do exactly what
+              its access allows and no more.
+            </p>
+            <div class="form-group">
+              <label class="form-label checkbox-label">
+                <input v-model="mcpSettings.enabled" type="checkbox" :disabled="!canWriteSettings" />
+                Enable MCP server
+              </label>
+            </div>
+            <div v-if="mcpSettings.enabled" class="config-grid">
+              <div class="config-item full-width">
+                <span class="config-label">Endpoint</span>
+                <code>{{ mcpEndpoint }}</code>
+              </div>
+              <div class="config-item">
+                <span class="config-label">Transport</span>
+                <code>Streamable HTTP</code>
+              </div>
+              <div class="config-item">
+                <span class="config-label">Authentication</span>
+                <code>X-API-Key header</code>
+              </div>
+            </div>
+            <button class="btn btn-primary" :disabled="savingMcp || !canWriteSettings" @click="saveMcpSettings">
+              <i v-if="savingMcp" class="pi pi-spin pi-spinner" />
+              Save MCP Settings
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted, markRaw, type Component } from "vue";
-import { Bell, FolderClosed, Sparkles } from "lucide-vue-next";
-import { settingsApi, healthApi, templatesApi, credentialsApi, registriesApi, configApi } from "@/services/api";
+import { Bell, FolderClosed, Sparkles, Plug } from "lucide-vue-next";
+import { settingsApi, healthApi, templatesApi, credentialsApi, registriesApi, configApi, apiClient } from "@/services/api";
 import type { DomainSettings } from "@/services/api";
 import type { ProtectedCommandRule, ProtectedModeConfig, RegistryCredential, RegistryType } from "@/types";
 import { useNotificationsStore } from "@/stores/notifications";
@@ -1054,10 +1095,12 @@ const tabs = [
   { id: "notifications", label: "Notifications", icon: "" },
   { id: "credentials", label: "Credentials", icon: "pi pi-key" },
   { id: "ai", label: "AI Assistant", icon: "" },
+  { id: "mcp", label: "MCP Server", icon: "" },
 ];
 
 const tabLucideIcons: Record<string, Component> = {
   ai: markRaw(Sparkles),
+  mcp: markRaw(Plug),
   notifications: markRaw(Bell),
 };
 
@@ -1666,6 +1709,39 @@ const saveAISettings = async () => {
   }
 };
 
+const mcpSettings = reactive({ enabled: false });
+const savingMcp = ref(false);
+
+const mcpEndpoint = computed(() => {
+  const base = apiClient.defaults.baseURL || "/api";
+  try {
+    return new URL(`${base}/mcp`, window.location.origin).toString();
+  } catch {
+    return `${base}/mcp`;
+  }
+});
+
+const fetchMcpSettings = async () => {
+  try {
+    const { data } = await configApi.get("mcp.enabled");
+    mcpSettings.enabled = Boolean(data.entry.value);
+  } catch {
+    // Older agents without the config key; the tab stays editable.
+  }
+};
+
+const saveMcpSettings = async () => {
+  savingMcp.value = true;
+  try {
+    const response = await configApi.set("mcp.enabled", mcpSettings.enabled);
+    notifications.success("Saved", response.data.applied ? "MCP settings applied immediately" : "MCP settings saved");
+  } catch (e: any) {
+    notifications.error("Error", e.response?.data?.error || "Failed to save MCP settings");
+  } finally {
+    savingMcp.value = false;
+  }
+};
+
 onMounted(() => {
   fetchSettings();
   pluginsStore.fetchPlugins();
@@ -1674,6 +1750,7 @@ onMounted(() => {
   fetchRegistryTypes();
   fetchAISettings();
   fetchFilesSettings();
+  fetchMcpSettings();
 });
 </script>
 

From fea1754c6ac74045eb80db3b2064c939a66bf8e6 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Tue, 21 Jul 2026 16:44:25 +0100
Subject: [PATCH 2/2] ui: Format MCP settings tab with Prettier

---
 src/views/SettingsView.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 6ac40f5..0ffeaf6 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1018,10 +1018,10 @@
           </div>
           <div class="card-body">
             <p class="section-description">
-              Expose the assistant's tools over the Model Context Protocol so an external client, an IDE, a desktop
-              app, or another agent, can drive this server through the same capabilities the built-in assistant has.
-              Every call is authenticated and runs with the caller's own permissions, so a client can do exactly what
-              its access allows and no more.
+              Expose the assistant's tools over the Model Context Protocol so an external client, an IDE, a desktop app,
+              or another agent, can drive this server through the same capabilities the built-in assistant has. Every
+              call is authenticated and runs with the caller's own permissions, so a client can do exactly what its
+              access allows and no more.
             </p>
             <div class="form-group">
               <label class="form-label checkbox-label">
@@ -1057,7 +1057,15 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted, markRaw, type Component } from "vue";
 import { Bell, FolderClosed, Sparkles, Plug } from "lucide-vue-next";
-import { settingsApi, healthApi, templatesApi, credentialsApi, registriesApi, configApi, apiClient } from "@/services/api";
+import {
+  settingsApi,
+  healthApi,
+  templatesApi,
+  credentialsApi,
+  registriesApi,
+  configApi,
+  apiClient,
+} from "@/services/api";
 import type { DomainSettings } from "@/services/api";
 import type { ProtectedCommandRule, ProtectedModeConfig, RegistryCredential, RegistryType } from "@/types";
 import { useNotificationsStore } from "@/stores/notifications";