@@ -204,62 +218,76 @@ export function AgentFieldsForm({
/>
- {toolConfigurations[0]?.label
- ? displayTools.map((c) => (
-
(
- 0 && !hasMcpServers && (
+ <>
+ {toolConfigurations[0]?.label
+ ? displayTools.map((c) => (
+ (
+
- No tools found matching "{toolSearchTerm}".
-
+ ))
+ : null}
+ {displayTools.length === 0 && toolSearchTerm && (
+
+ No tools found matching "{toolSearchTerm}".
+
+ )}
+ {tools.length === 0 && !toolSearchTerm && (
+
+ No tools available for this agent.
+
+ )}
+ {cursor && !toolSearchTerm && (
+
+ {
+ try {
+ setLoadingMore(true);
+ const moreTool = await getTools(cursor);
+ setTools((prevTools) => [
+ ...prevTools,
+ ...moreTool,
+ ]);
+ } catch (error) {
+ console.error("Failed to load more tools:", error);
+ } finally {
+ setLoadingMore(false);
+ }
+ }}
+ disabled={loadingMore || loading}
+ >
+ {loadingMore ? "Loading..." : "Load More Tools"}
+
+
+ )}
+
)}
- {tools.length === 0 && !toolSearchTerm && (
-
- No tools available for this agent.
-
- )}
- {cursor && !toolSearchTerm && (
-
- {
- try {
- setLoadingMore(true);
- const moreTool = await getTools(cursor);
- setTools((prevTools) => [
- ...prevTools,
- ...moreTool,
- ]);
- } catch (error) {
- console.error("Failed to load more tools:", error);
- } finally {
- setLoadingMore(false);
- }
- }}
- disabled={loadingMore || loading}
- >
- {loadingMore ? "Loading..." : "Load More Tools"}
-
-
+ {hasMcpServers && onMcpToolSelectionChange && (
+
diff --git a/apps/web/src/features/agents/components/create-edit-agent-dialogs/create-agent-dialog.tsx b/apps/web/src/features/agents/components/create-edit-agent-dialogs/create-agent-dialog.tsx
index ae945234a..34fca3e83 100644
--- a/apps/web/src/features/agents/components/create-edit-agent-dialogs/create-agent-dialog.tsx
+++ b/apps/web/src/features/agents/components/create-edit-agent-dialogs/create-agent-dialog.tsx
@@ -21,6 +21,8 @@ import { getDeployments } from "@/lib/environment/deployments";
import { GraphSelect } from "./graph-select";
import { useAgentConfig } from "@/hooks/use-agent-config";
import { FormProvider, useForm } from "react-hook-form";
+import { useMcpServers } from "@/features/settings/hooks/use-mcp-servers";
+import { useAuthContext } from "@/providers/Auth";
interface CreateAgentDialogProps {
agentId?: string;
@@ -35,6 +37,24 @@ function CreateAgentFormContent(props: {
selectedDeployment: Deployment;
onClose: () => void;
}) {
+ const { createAgent } = useAgents();
+ const { refreshAgents } = useAgentsContext();
+ const {
+ getSchemaAndUpdateConfig,
+ loading,
+ configurations,
+ toolConfigurations,
+ ragConfigurations,
+ agentsConfigurations,
+ hasMcpServers,
+ } = useAgentConfig();
+ const { selectedTenant, selectedTenantId } = useTenantContext();
+ const { session } = useAuthContext();
+ const { servers: availableServers, loading: serversLoading } = useMcpServers();
+ const [submitting, setSubmitting] = useState(false);
+ // New agents start with no MCP tools selected
+ const [selectedToolsByServer, setSelectedToolsByServer] = useState
>({});
+
const form = useForm<{
name: string;
description: string;
@@ -50,19 +70,6 @@ function CreateAgentFormContent(props: {
},
});
- const { createAgent } = useAgents();
- const { refreshAgents } = useAgentsContext();
- const {
- getSchemaAndUpdateConfig,
- loading,
- configurations,
- toolConfigurations,
- ragConfigurations,
- agentsConfigurations,
- } = useAgentConfig();
- const { selectedTenant } = useTenantContext();
- const [submitting, setSubmitting] = useState(false);
-
const handleSubmit = async (data: {
name: string;
description: string;
@@ -76,6 +83,66 @@ function CreateAgentFormContent(props: {
return;
}
+ let mcpServersPayload: unknown[] | undefined;
+
+ if (hasMcpServers) {
+ // Only include servers that have at least 1 tool selected
+ const serverIdsWithTools = Object.entries(selectedToolsByServer)
+ .filter(([, tools]) => tools.length > 0)
+ .map(([id]) => id);
+
+ if (serverIdsWithTools.length > 0) {
+ // Fetch decrypted server snapshots for selected servers
+ const qs = serverIdsWithTools.map((id) => `ids[]=${encodeURIComponent(id)}`).join("&");
+ const snapshotHeaders: HeadersInit = {};
+ if (session?.accessToken) {
+ snapshotHeaders["Authorization"] = `Bearer ${session.accessToken}`;
+ }
+ if (selectedTenantId) {
+ snapshotHeaders["x-tenant-name"] = selectedTenantId;
+ }
+ const snapshotRes = await fetch(`/api/mcp-servers/snapshot?${qs}`, {
+ headers: snapshotHeaders,
+ });
+ if (!snapshotRes.ok) {
+ toast.error("Failed to fetch MCP server configuration", {
+ description: "Please try again",
+ richColors: true,
+ });
+ return;
+ }
+ const snapshotData = await snapshotRes.json();
+ // Augment each snapshot with its selected tools array
+ const servers = (snapshotData.servers ?? []) as Record[];
+ mcpServersPayload = servers.map((snap) => {
+ const snapTyped = snap as { id?: string; name?: string; slug?: string };
+ const server =
+ (snapTyped.id && availableServers.find((s) => s.id === snapTyped.id)) ||
+ availableServers.find((s) => s.name === snapTyped.name);
+ const slug = snapTyped.slug ?? "";
+ return {
+ ...snap,
+ tools: (server ? (selectedToolsByServer[server.id] ?? []) : []).map(
+ (t) => `${slug}__${t}`,
+ ),
+ };
+ });
+ } else {
+ // Explicit empty array — new agent has no MCP servers
+ mcpServersPayload = [];
+ }
+ }
+
+ const configPayload: Record = {
+ ...config,
+ tenant: selectedTenant?.tenantName,
+ };
+
+ // Only include mcp_servers if the graph schema declares it
+ if (hasMcpServers) {
+ configPayload.mcp_servers = mcpServersPayload;
+ }
+
setSubmitting(true);
const newAgent = await createAgent(
props.selectedDeployment.id,
@@ -83,10 +150,7 @@ function CreateAgentFormContent(props: {
{
name,
description,
- config: {
- ...config,
- tenant: selectedTenant?.tenantName,
- },
+ config: configPayload,
},
);
setSubmitting(false);
@@ -120,6 +184,12 @@ function CreateAgentFormContent(props: {
toolConfigurations={toolConfigurations}
ragConfigurations={ragConfigurations}
agentsConfigurations={agentsConfigurations}
+ hasMcpServers={hasMcpServers}
+ mcpServers={availableServers}
+ mcpServersLoading={serversLoading}
+ selectedToolsByServer={selectedToolsByServer}
+ onMcpToolSelectionChange={setSelectedToolsByServer}
+ tenant={selectedTenant?.tenantName}
/>
)}
diff --git a/apps/web/src/features/agents/components/create-edit-agent-dialogs/edit-agent-dialog.tsx b/apps/web/src/features/agents/components/create-edit-agent-dialogs/edit-agent-dialog.tsx
index f27c55645..31c679c8d 100644
--- a/apps/web/src/features/agents/components/create-edit-agent-dialogs/edit-agent-dialog.tsx
+++ b/apps/web/src/features/agents/components/create-edit-agent-dialogs/edit-agent-dialog.tsx
@@ -11,7 +11,7 @@ import {
import { useAgents } from "@/hooks/use-agents";
import { useAgentConfig } from "@/hooks/use-agent-config";
import { Bot, LoaderCircle, Trash, X } from "lucide-react";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { useAgentsContext } from "@/providers/Agents";
import { useTenantContext } from "@/providers/Tenant";
@@ -20,6 +20,9 @@ import { Agent } from "@/types/agent";
import { FormProvider, useForm } from "react-hook-form";
import { hasStaleSupervisors } from "@/lib/agent-utils";
import { StaleSupervisorsWarningDialog } from "./stale-supervisors-warning-dialog";
+import { useMcpServers } from "@/features/settings/hooks/use-mcp-servers";
+import { useAuthContext } from "@/providers/Auth";
+
interface EditAgentDialogProps {
agent: Agent;
@@ -46,9 +49,15 @@ function EditAgentDialogContent({
toolConfigurations,
ragConfigurations,
agentsConfigurations,
+ hasMcpServers,
} = useAgentConfig();
- const { selectedTenant } = useTenantContext();
+ const { selectedTenant, selectedTenantId } = useTenantContext();
+ const { session } = useAuthContext();
const [deleteSubmitting, setDeleteSubmitting] = useState(false);
+ const [selectedToolsByServer, setSelectedToolsByServer] = useState>({});
+
+ // For pre-populating selected servers on edit: match existing snapshot names to current server IDs
+ const { servers: availableServers, loading: serversLoading } = useMcpServers();
const form = useForm<{
name: string;
@@ -63,6 +72,54 @@ function EditAgentDialogContent({
},
});
+ // Pre-populate selectedToolsByServer from the existing snapshot once both the server list
+ // and schema detection are ready. Match by name — the most stable identifier across
+ // a stored snapshot and the current live server list.
+ const initializedRef = useRef(false);
+ useEffect(() => {
+ if (initializedRef.current) return;
+ if (!hasMcpServers) return;
+ if (availableServers.length === 0) return;
+
+ initializedRef.current = true;
+
+ const rawSnapshot = (agent.config?.configurable?.mcp_servers ?? []) as unknown;
+ const existingSnapshot: { id?: string; name?: string; slug?: string; tools?: string[] }[] = Array.isArray(rawSnapshot) ? rawSnapshot : [];
+ if (existingSnapshot.length > 0) {
+ // New format: mcp_servers array with slug-prefixed tool names
+ const toolsByServer: Record = {};
+ for (const snap of existingSnapshot) {
+ const slug = snap.slug!;
+ const prefix = `${slug}__`;
+ // Match by id first, fall back to name (for snapshots saved before id was added)
+ const server =
+ (snap.id && availableServers.find((s) => s.id === snap.id)) ||
+ availableServers.find((s) => s.name === snap.name);
+ if (server && Array.isArray(snap.tools) && snap.tools.length > 0) {
+ toolsByServer[server.id] = snap.tools.map((t) =>
+ t.startsWith(prefix) ? t.slice(prefix.length) : t
+ );
+ }
+ }
+ if (Object.keys(toolsByServer).length > 0) {
+ setSelectedToolsByServer(toolsByServer);
+ }
+ } else if (!Array.isArray(rawSnapshot)) {
+ // Legacy format (mcp_servers absent, not empty array): single mcp_config with url + unprefixed tool names
+ const legacyConfig = agent.config?.configurable?.mcp_config as
+ | { url?: string; tools?: string[] }
+ | undefined;
+ if (legacyConfig?.url && Array.isArray(legacyConfig.tools) && legacyConfig.tools.length > 0) {
+ const normalizeUrl = (u: string) => (u.endsWith("/mcp") ? u : `${u}/mcp`);
+ const legacyUrl = normalizeUrl(legacyConfig.url);
+ const server = availableServers.find((s) => normalizeUrl(s.url) === legacyUrl);
+ if (server) {
+ setSelectedToolsByServer({ [server.id]: legacyConfig.tools });
+ }
+ }
+ }
+ }, [hasMcpServers, availableServers, agent.config?.configurable?.mcp_servers]);
+
const handleSubmit = async (data: {
name: string;
description: string;
@@ -73,15 +130,73 @@ function EditAgentDialogContent({
return;
}
+ let mcpServersPayload: unknown[] | undefined;
+
+ if (hasMcpServers) {
+ // Only include servers that have at least 1 tool selected
+ const serverIdsWithTools = Object.entries(selectedToolsByServer)
+ .filter(([, tools]) => tools.length > 0)
+ .map(([id]) => id);
+
+ if (serverIdsWithTools.length > 0) {
+ // Fetch decrypted server snapshots for selected servers
+ const qs = serverIdsWithTools.map((id) => `ids[]=${encodeURIComponent(id)}`).join("&");
+ const snapshotHeaders: HeadersInit = {};
+ if (session?.accessToken) {
+ snapshotHeaders["Authorization"] = `Bearer ${session.accessToken}`;
+ }
+ if (selectedTenantId) {
+ snapshotHeaders["x-tenant-name"] = selectedTenantId;
+ }
+ const snapshotRes = await fetch(`/api/mcp-servers/snapshot?${qs}`, {
+ headers: snapshotHeaders,
+ });
+ if (!snapshotRes.ok) {
+ toast.error("Failed to fetch MCP server configuration", {
+ description: "Please try again",
+ });
+ return;
+ }
+ const snapshotData = await snapshotRes.json();
+ // Augment each snapshot with its selected tools array
+ const servers = (snapshotData.servers ?? []) as Record[];
+ mcpServersPayload = servers.map((snap) => {
+ const snapTyped = snap as { id?: string; name?: string; slug?: string };
+ const server =
+ (snapTyped.id && availableServers.find((s) => s.id === snapTyped.id)) ||
+ availableServers.find((s) => s.name === snapTyped.name);
+ const slug = snapTyped.slug ?? "";
+ return {
+ ...snap,
+ tools: (server ? (selectedToolsByServer[server.id] ?? []) : []).map(
+ (t) => `${slug}__${t}`,
+ ),
+ };
+ });
+ } else {
+ // Explicit empty array — agent has no MCP servers assigned
+ mcpServersPayload = [];
+ }
+ }
+
+ const configPayload: Record = {
+ ...data.config,
+ tenant: selectedTenant?.tenantName,
+ };
+
+ // Only include mcp_servers if the graph schema declares it
+ if (hasMcpServers) {
+ configPayload.mcp_servers = mcpServersPayload;
+ // Remove legacy mcp_config so the agent fully migrates to the new format
+ delete configPayload.mcp_config;
+ }
+
const updatedAgent = await updateAgent(
agent.assistant_id,
agent.deploymentId,
{
...data,
- config: {
- ...data.config,
- tenant: selectedTenant?.tenantName,
- },
+ config: configPayload,
},
);
@@ -148,6 +263,12 @@ function EditAgentDialogContent({
agentId={agent.assistant_id}
ragConfigurations={ragConfigurations}
agentsConfigurations={agentsConfigurations}
+ hasMcpServers={hasMcpServers}
+ mcpServers={availableServers}
+ mcpServersLoading={serversLoading}
+ selectedToolsByServer={selectedToolsByServer}
+ onMcpToolSelectionChange={setSelectedToolsByServer}
+ tenant={selectedTenant?.tenantName}
/>
)}
diff --git a/apps/web/src/features/agents/components/create-edit-agent-dialogs/mcp-server-selector/mcp-server-tool-groups.tsx b/apps/web/src/features/agents/components/create-edit-agent-dialogs/mcp-server-selector/mcp-server-tool-groups.tsx
new file mode 100644
index 000000000..44353c95d
--- /dev/null
+++ b/apps/web/src/features/agents/components/create-edit-agent-dialogs/mcp-server-selector/mcp-server-tool-groups.tsx
@@ -0,0 +1,246 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { McpServer } from "@/features/settings/hooks/use-mcp-servers";
+import { useMcpServerTools } from "./use-mcp-server-tools";
+import { ChevronDown } from "lucide-react";
+import _ from "lodash";
+
+// ---------------------------------------------------------------------------
+// ServerToolList
+// Fetches and renders toggle rows for a single server's tools.
+// ---------------------------------------------------------------------------
+
+interface ServerToolListProps {
+ server: McpServer;
+ selectedTools: string[];
+ onToolToggle: (serverId: string, toolName: string, checked: boolean) => void;
+ searchTerm?: string;
+ tenant?: string;
+}
+
+function ServerToolList({
+ server,
+ selectedTools,
+ onToolToggle,
+ searchTerm,
+ tenant,
+}: ServerToolListProps) {
+ const { tools, loading, error } = useMcpServerTools(server.id, tenant);
+
+ if (loading) {
+ return (
+
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+ Server unreachable — tools cannot be loaded.
+
+ );
+ }
+
+ const filteredTools = searchTerm
+ ? tools.filter(
+ (t) =>
+ t.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ t.description?.toLowerCase().includes(searchTerm.toLowerCase()),
+ )
+ : tools;
+
+ if (filteredTools.length === 0 && searchTerm) {
+ return null;
+ }
+
+ if (tools.length === 0) {
+ return (
+
+ No tools available on this server.
+
+ );
+ }
+
+ return (
+
+ {filteredTools.map((tool) => {
+ const checked = selectedTools.includes(tool.name);
+ const id = `mcp-tool-${server.id}-${tool.name}`;
+ return (
+
+
+
+ {_.startCase(tool.name)}
+
+
+ onToolToggle(server.id, tool.name, val)
+ }
+ />
+
+ {tool.description && (
+
+ {tool.description}
+
+ )}
+
+ );
+ })}
+
;
+ onSelectionChange: (selection: Record) => void;
+ searchTerm?: string;
+ tenant?: string;
+}
+
+export function McpServerToolGroups({
+ servers: allServers,
+ serversLoading: loading,
+ selectedToolsByServer,
+ onSelectionChange,
+ searchTerm,
+ tenant,
+}: McpServerToolGroupsProps) {
+ const servers = allServers;
+
+ const handleToolToggle = (
+ serverId: string,
+ toolName: string,
+ checked: boolean,
+ ) => {
+ const current = selectedToolsByServer[serverId] ?? [];
+ const updated = checked
+ ? Array.from(new Set([...current, toolName]))
+ : current.filter((t) => t !== toolName);
+
+ onSelectionChange({
+ ...selectedToolsByServer,
+ [serverId]: updated,
+ });
+ };
+
+ if (loading) {
+ return (
+
+ {Array.from({ length: 2 }).map((_, i) => (
+
+
+ ))}
+
+ {servers.map((server: McpServer) => {
+ const selectedTools = selectedToolsByServer[server.id] ?? [];
+ const selectedCount = selectedTools.length;
+
+ return (
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// ServerGroup
+// A single collapsible server group — separated so tool fetching only happens
+// when the group is present (always), but rendering is controlled by collapsible.
+// ---------------------------------------------------------------------------
+
+interface ServerGroupProps {
+ server: McpServer;
+ selectedTools: string[];
+ selectedCount: number;
+ onToolToggle: (serverId: string, toolName: string, checked: boolean) => void;
+ searchTerm?: string;
+ tenant?: string;
+}
+
+function ServerGroup({
+ server,
+ selectedTools,
+ selectedCount,
+ onToolToggle,
+ searchTerm,
+ tenant,
+}: ServerGroupProps) {
+ return (
+
+
+ {server.name}
+ {selectedCount > 0 && (
+
+ {selectedCount} selected
+
+ )}
+ {server.isDefault && (
+ 0 ? "" : "ml-auto"}>
+ Default
+
+ )}
+
+
+
+
+ );
+}
diff --git a/apps/web/src/features/agents/components/create-edit-agent-dialogs/mcp-server-selector/use-mcp-server-tools.tsx b/apps/web/src/features/agents/components/create-edit-agent-dialogs/mcp-server-selector/use-mcp-server-tools.tsx
new file mode 100644
index 000000000..2baaac418
--- /dev/null
+++ b/apps/web/src/features/agents/components/create-edit-agent-dialogs/mcp-server-selector/use-mcp-server-tools.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useAuthContext } from "@/providers/Auth";
+import { useTenantContext } from "@/providers/Tenant";
+
+export interface Tool {
+ name: string;
+ description?: string;
+}
+
+interface UseMcpServerToolsReturn {
+ tools: Tool[];
+ loading: boolean;
+ error: string | null;
+ refetch: () => void;
+}
+
+/**
+ * Fetches the tool list for a single MCP server via the server-side proxy API.
+ * The proxy handles credential decryption so credentials never reach the browser.
+ *
+ * @param serverId - The ID of the MCP server, or null to skip fetching.
+ */
+export function useMcpServerTools(
+ serverId: string | null,
+ tenant?: string,
+): UseMcpServerToolsReturn {
+ const { session } = useAuthContext();
+ const { selectedTenantId } = useTenantContext();
+ const [tools, setTools] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [fetchCounter, setFetchCounter] = useState(0);
+
+ const refetch = useCallback(() => {
+ setFetchCounter((c) => c + 1);
+ }, []);
+
+ useEffect(() => {
+ if (serverId === null) {
+ setTools([]);
+ setLoading(false);
+ setError(null);
+ return;
+ }
+
+ let aborted = false;
+
+ const run = async () => {
+ setLoading(true);
+ setError(null);
+
+ try {
+ const url = tenant
+ ? `/api/mcp-servers/${serverId}/tools?tenant=${encodeURIComponent(tenant)}`
+ : `/api/mcp-servers/${serverId}/tools`;
+
+ const headers: HeadersInit = {};
+ if (session?.accessToken) {
+ headers["Authorization"] = `Bearer ${session.accessToken}`;
+ }
+ if (selectedTenantId) {
+ headers["x-tenant-name"] = selectedTenantId;
+ }
+
+ const res = await fetch(url, { headers });
+ if (aborted) return;
+
+ if (!res.ok) {
+ setError("Unreachable");
+ setTools([]);
+ return;
+ }
+
+ const data = await res.json();
+ if (aborted) return;
+
+ const parsed: Tool[] = (data.tools ?? []).map(
+ (t: { name: string; description?: string }) => ({
+ name: t.name,
+ description: t.description,
+ }),
+ );
+ setTools(parsed);
+ } catch {
+ if (!aborted) {
+ setError("Unreachable");
+ setTools([]);
+ }
+ } finally {
+ if (!aborted) {
+ setLoading(false);
+ }
+ }
+ };
+
+ run();
+
+ return () => {
+ aborted = true;
+ };
+ }, [serverId, tenant, fetchCounter, session?.accessToken, selectedTenantId]);
+
+ return { tools, loading, error, refetch };
+}
diff --git a/apps/web/src/features/settings/components/mcp-servers/delete-server-alert.tsx b/apps/web/src/features/settings/components/mcp-servers/delete-server-alert.tsx
new file mode 100644
index 000000000..c36d9dc8d
--- /dev/null
+++ b/apps/web/src/features/settings/components/mcp-servers/delete-server-alert.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+interface DeleteServerAlertProps {
+ serverName: string;
+ onDelete: () => void;
+ trigger: React.ReactNode;
+}
+
+export function DeleteServerAlert({
+ serverName,
+ onDelete,
+ trigger,
+}: DeleteServerAlertProps): React.ReactNode {
+ return (
+
+ {trigger}
+
+
+ Delete MCP Server
+
+ Are you sure you want to delete "{serverName}"? This
+ cannot be undone.
+
+
+
+ Cancel
+
+ Delete
+
+
+
+
+ );
+}
diff --git a/apps/web/src/features/settings/components/mcp-servers/mcp-server-actions.tsx b/apps/web/src/features/settings/components/mcp-servers/mcp-server-actions.tsx
new file mode 100644
index 000000000..d0959ab05
--- /dev/null
+++ b/apps/web/src/features/settings/components/mcp-servers/mcp-server-actions.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import React from "react";
+import { MoreVertical, Pencil, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import type { McpServer } from "../../hooks/use-mcp-servers";
+import { McpServerFormDialog } from "./mcp-server-form-dialog";
+import { DeleteServerAlert } from "./delete-server-alert";
+
+interface McpServerActionsProps {
+ server: McpServer;
+ onEdit: (id: string, body: Record) => Promise;
+ onDelete: (id: string) => void;
+}
+
+export function McpServerActions({
+ server,
+ onEdit,
+ onDelete,
+}: McpServerActionsProps): React.ReactNode {
+ return (
+
+ e.stopPropagation()}
+ >
+
+
+
+
+
+
onEdit(server.id, body)}
+ trigger={
+
+ Edit
+
+ }
+ />
+ onDelete(server.id)}
+ trigger={
+
+ Delete
+
+ }
+ />
+
+
+ );
+}
diff --git a/apps/web/src/features/settings/components/mcp-servers/mcp-server-form-dialog.tsx b/apps/web/src/features/settings/components/mcp-servers/mcp-server-form-dialog.tsx
new file mode 100644
index 000000000..1f806fd20
--- /dev/null
+++ b/apps/web/src/features/settings/components/mcp-servers/mcp-server-form-dialog.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import type { McpServer } from "../../hooks/use-mcp-servers";
+
+interface McpServerFormDialogProps {
+ server?: McpServer;
+ onSave: (body: Record) => Promise;
+ trigger: React.ReactNode;
+}
+
+export function McpServerFormDialog({
+ server,
+ onSave,
+ trigger,
+}: McpServerFormDialogProps): React.ReactNode {
+ const [open, setOpen] = useState(false);
+ const [name, setName] = useState("");
+ const [url, setUrl] = useState("");
+ const [authType, setAuthType] = useState<"none" | "bearer" | "apiKey">(
+ "none",
+ );
+ const [credentials, setCredentials] = useState("");
+ const [saving, setSaving] = useState(false);
+
+ // Reset form state when dialog opens
+ useEffect(() => {
+ if (open) {
+ setName(server?.name ?? "");
+ setUrl(server?.url ?? "");
+ setAuthType(server?.authType ?? "none");
+ setCredentials(""); // CRITICAL: never pre-fill with masked value
+ }
+ }, [open, server]);
+
+ const isEditMode = Boolean(server);
+
+ const isValid =
+ name.trim().length > 0 &&
+ url.trim().length > 0 &&
+ (authType === "none" ||
+ isEditMode || // in edit mode, empty credentials means "don't change"
+ credentials.trim().length > 0);
+
+ function handleAuthTypeChange(value: string) {
+ const newType = value as "none" | "bearer" | "apiKey";
+ setAuthType(newType);
+ if (newType === "none") {
+ setCredentials(""); // Pitfall 5: clear stale credentials
+ }
+ }
+
+ async function handleSubmit() {
+ const body: Record = {
+ name: name.trim(),
+ url: url.trim(),
+ authType,
+ };
+
+ if (authType === "none") {
+ body.credentials = null;
+ } else if (credentials !== "") {
+ // Pitfall 1: only include credentials if user actually typed something
+ body.credentials = credentials;
+ }
+ // In edit mode with empty credentials: omit credentials entirely
+
+ setSaving(true);
+ try {
+ await onSave(body);
+ setOpen(false);
+ } catch {
+ // Keep dialog open on error
+ } finally {
+ setSaving(false);
+ }
+ }
+
+ return (
+
+ {/* Render trigger as-is wrapped in a span to avoid nesting issues */}
+ setOpen(true)}
+ onKeyDown={(e) => e.key === "Enter" && setOpen(true)}
+ style={{ display: "contents" }}
+ >
+ {trigger}
+
+
+
+
+ {isEditMode ? "Edit MCP Server" : "Add MCP Server"}
+
+
+
+
+ {/* Name field */}
+
+ Name
+
+
+ {/* URL field */}
+
+ URL
+
+
+ {/* Auth Type field */}
+
+ Auth Type
+
+
+
+
+ None
+ Bearer Token
+ API Key
+
+
+
+
+ {/* Credentials field (conditional) */}
+ {authType !== "none" && (
+
+
+ {authType === "bearer" ? "Bearer Token" : "API Key"}
+ {isEditMode && (
+
+ (re-enter to change)
+
+ )}
+
+
+ )}
+
+
+ {isEditMode ? "Save Changes" : "Add Server"}
+
+
+
+
+ );
+}
diff --git a/apps/web/src/features/settings/components/mcp-servers/mcp-server-list.tsx b/apps/web/src/features/settings/components/mcp-servers/mcp-server-list.tsx
new file mode 100644
index 000000000..646bd5b59
--- /dev/null
+++ b/apps/web/src/features/settings/components/mcp-servers/mcp-server-list.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import React from "react";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { McpServerRow } from "./mcp-server-row";
+import { McpServerFormDialog } from "./mcp-server-form-dialog";
+import type { McpServer } from "../../hooks/use-mcp-servers";
+
+interface McpServerListProps {
+ servers: McpServer[];
+ loading: boolean;
+ renderActions?: (server: McpServer) => React.ReactNode;
+ onAdd?: (body: Record) => Promise;
+}
+
+export function McpServerList({
+ servers,
+ loading,
+ renderActions,
+ onAdd,
+}: McpServerListProps): React.ReactNode {
+ return (
+
+ {/* Top bar */}
+
+
+ Manage MCP server connections for your agents.
+
+ {onAdd && (
+
+
+
+ {/* Loading skeleton */}
+ {loading ? (
+
+ {[0, 1, 2].map((i) => (
+
+ ))}
+
+ ) : (
+
+ {servers.map((server) => (
+
+ )}
+
+ {/* Left: name + badge + URL */}
+
+
+ {server.name}
+ {server.isDefault && (
+
+ Default
+
+ )}
+
+
{server.url}
+
+
+ {/* Right: actions slot */}
+
+ {actions}
+
+
) => Promise;
+ updateServer: (id: string, body: Partial>) => Promise;
+ deleteServer: (id: string) => Promise;
+ refetch: () => Promise;
+}
+
+export function useMcpServers(): UseMcpServersReturn {
+ const { session } = useAuthContext();
+ const { selectedTenantId } = useTenantContext();
+ const [servers, setServers] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const getAuthHeaders = useCallback((): HeadersInit => {
+ const headers: HeadersInit = { "Content-Type": "application/json" };
+ if (session?.accessToken) {
+ headers["Authorization"] = `Bearer ${session.accessToken}`;
+ }
+ if (selectedTenantId) {
+ headers["x-tenant-name"] = selectedTenantId;
+ }
+ return headers;
+ }, [session?.accessToken, selectedTenantId]);
+
+ const fetchServers = useCallback(async () => {
+ if (!selectedTenantId) return;
+ setLoading(true);
+ setError(null);
+ try {
+ const res = await fetch("/api/mcp-servers", { headers: getAuthHeaders() });
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ const data = await res.json();
+ setServers(data.servers ?? []);
+ } catch (err) {
+ console.error("[useMcpServers] Failed to load:", err);
+ setError("Failed to load MCP servers");
+ toast.error("Failed to load MCP servers");
+ } finally {
+ setLoading(false);
+ }
+ }, [getAuthHeaders, selectedTenantId]);
+
+ useEffect(() => {
+ fetchServers();
+ }, [fetchServers]);
+
+ const addServer = useCallback(
+ async (body: Omit) => {
+ try {
+ const res = await fetch("/api/mcp-servers", {
+ method: "POST",
+ headers: getAuthHeaders(),
+ body: JSON.stringify(body),
+ });
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ const newServer: McpServer = await res.json();
+ setServers((prev) => [...prev, newServer]);
+ toast.success("Server added");
+ } catch (err) {
+ console.error("[useMcpServers] Failed to add:", err);
+ toast.error("Failed to add server");
+ }
+ },
+ [getAuthHeaders],
+ );
+
+ const updateServer = useCallback(
+ async (id: string, body: Partial>) => {
+ try {
+ const res = await fetch(`/api/mcp-servers/${id}`, {
+ method: "PUT",
+ headers: getAuthHeaders(),
+ body: JSON.stringify(body),
+ });
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ const updated: McpServer = await res.json();
+ setServers((prev) => prev.map((s) => (s.id === id ? updated : s)));
+ toast.success("Server updated");
+ } catch (err) {
+ console.error("[useMcpServers] Failed to update:", err);
+ toast.error("Failed to update server");
+ }
+ },
+ [getAuthHeaders],
+ );
+
+ const deleteServer = useCallback(async (id: string) => {
+ try {
+ const res = await fetch(`/api/mcp-servers/${id}`, {
+ method: "DELETE",
+ headers: getAuthHeaders(),
+ });
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ setServers((prev) => prev.filter((s) => s.id !== id));
+ toast.success("Server deleted");
+ } catch (err) {
+ console.error("[useMcpServers] Failed to delete:", err);
+ toast.error("Failed to delete server");
+ }
+ }, [getAuthHeaders]);
+
+ return {
+ servers,
+ loading,
+ error,
+ addServer,
+ updateServer,
+ deleteServer,
+ refetch: fetchServers,
+ };
+}
diff --git a/apps/web/src/features/settings/index.tsx b/apps/web/src/features/settings/index.tsx
index b9ba8a5c2..89eac5bb4 100644
--- a/apps/web/src/features/settings/index.tsx
+++ b/apps/web/src/features/settings/index.tsx
@@ -6,11 +6,22 @@ import { Separator } from "@/components/ui/separator";
import { PasswordInput } from "@/components/ui/password-input";
import { Label } from "@/components/ui/label";
import { useLocalStorage } from "@/hooks/use-local-storage";
+import { useMcpServers } from "./hooks/use-mcp-servers";
+import { McpServerList } from "./components/mcp-servers/mcp-server-list";
+import { McpServerActions } from "./components/mcp-servers/mcp-server-actions";
/**
* The Settings interface component containing API Keys configuration.
*/
export default function SettingsInterface(): React.ReactNode {
+ const {
+ servers,
+ loading: mcpLoading,
+ addServer,
+ updateServer,
+ deleteServer,
+ } = useMcpServers();
+
// Use localStorage hooks for each API key
const [openaiApiKey, setOpenaiApiKey] = useLocalStorage(
"lg:settings:openaiApiKey",
@@ -88,6 +99,25 @@ export default function SettingsInterface(): React.ReactNode {