Skip to content

feat: Add MCP server settings tab #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nfebe merged 2 commits into from
Jul 21, 2026
+90 −4
Merged

feat: Add MCP server settings tab #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9b31a7c
feat: Add MCP server settings tab
nfebe Jul 20, 2026
fea1754
ui: Format MCP settings tab with Prettier
nfebe Jul 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/views/SettingsView.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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: "" },
]);
});
});
Expand Down
89 changes: 87 additions & 2 deletions src/views/SettingsView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1009,14 +1009,63 @@
</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";
Expand Down Expand Up @@ -1054,10 +1103,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),
};

Expand Down Expand Up @@ -1666,6 +1717,39 @@ const saveAISettings = async () => {
}
};

const mcpSettings = reactive({ enabled: false });
const savingMcp = ref(false);

const mcpEndpoint = computed(() => {
const base = apiClient.defaults.baseURL || "/api";

@sourceant sourceant Bot Jul 21, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To avoid potential double slashes in the URL (e.g., //mcp) if apiClient.defaults.baseURL ends with a slash, normalize the base path before appending the endpoint.

Suggested change
const base = apiClient.defaults.baseURL || "/api";
const base = (apiClient.defaults.baseURL || "/api").replace(/\/+$/, "");
try {
return new URL(`${base}/mcp`, window.location.origin).toString();
} catch {
return `${base}/mcp`;
}

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();
Expand All @@ -1674,6 +1758,7 @@ onMounted(() => {
fetchRegistryTypes();
fetchAISettings();
fetchFilesSettings();
fetchMcpSettings();
});
</script>

Expand Down
Loading