[front] Add skills-only MCP server setting

Author: aubin-tchoi

front/components/actions/mcp/MCPServerDetails.tsx

@@ -21,6 +21,8 @@ import { clientFetch } from "@app/lib/egress/client";
 import {
   useMCPServer,
   useMCPServers,
+  useMCPServersUsage,
+  useMCPServerViewsFromSpaces,
   useMutateMCPServersViewsForAdmin,
 } from "@app/lib/swr/mcp_servers";
 import { useSpacesAsAdmin } from "@app/lib/swr/spaces";
@@ -58,11 +60,31 @@ export function MCPServerDetails({
   onClose,
   readOnly = false,
 }: MCPServerDetailsProps) {
-  const { spaces } = useSpacesAsAdmin({
+  const { spaces, isSpacesLoading, isSpacesError } = useSpacesAsAdmin({
     workspaceId: owner.sId,
     disabled: !isOpen || !isAdmin(owner),
   });
 
+  const {
+    serverViews: directlyAvailableMCPServerViews,
+    isLoading: isDirectAvailabilityLoading,
+    isError: isDirectAvailabilityError,
+    mutateServerViews: mutateDirectlyAvailableMCPServerViews,
+  } = useMCPServerViewsFromSpaces(owner, spaces, {
+    disabled: !isOpen || readOnly,
+  });
+  const isDirectAvailabilityResolved =
+    !isSpacesLoading &&
+    !isSpacesError &&
+    !isDirectAvailabilityLoading &&
+    !isDirectAvailabilityError;
+  const isRestrictedToSkills =
+    isDirectAvailabilityResolved &&
+    mcpServerView !== null &&
+    !directlyAvailableMCPServerViews.some(
+      (view) => view.server.sId === mcpServerView.server.sId
+    );
+
   const { server: mcpServerWithViews, mutateMCPServer } = useMCPServer({
     owner,
     serverId: mcpServerView?.server.sId ?? "",
@@ -89,6 +111,10 @@ export function MCPServerDetails({
     owner,
     disabled: !isOpen || readOnly,
   });
+  const { usage, mutate: mutateMCPServersUsage } = useMCPServersUsage({
+    owner,
+    disabled: !isOpen || readOnly,
+  });
 
   // Collect all effective view names from other servers (excluding the current one).
   const existingViewNames = useMemo(
@@ -105,19 +131,23 @@ export function MCPServerDetails({
 
   const defaults = useMemo<MCPServerFormValues>(() => {
     if (mcpServerView) {
-      return getMCPServerFormDefaults(
-        mcpServerView,
-        mcpServerWithViews ?? undefined,
-        spaces
-      );
+      return {
+        ...getMCPServerFormDefaults(
+          mcpServerView,
+          mcpServerWithViews ?? undefined,
+          spaces
+        ),
+        isRestrictedToSkills,
+      };
     }
     return {
       name: "",
       description: "",
+      isRestrictedToSkills: false,
       toolSettings: {},
       sharingSettings: {},
     };
-  }, [mcpServerView, mcpServerWithViews, spaces]);
+  }, [isRestrictedToSkills, mcpServerView, mcpServerWithViews, spaces]);
 
   const form = useForm<MCPServerFormValues>({
     values: defaults,
@@ -136,6 +166,33 @@ export function MCPServerDetails({
       : undefined,
   });
 
+  const confirmDirectAvailabilityChange = async (
+    isAvailableToAgents: boolean
+  ): Promise<boolean> => {
+    if (isAvailableToAgents || !mcpServerView) {
+      return true;
+    }
+
+    const affectedAgents = usage?.[mcpServerView.server.sId]?.agents ?? [];
+    if (affectedAgents.length === 0) {
+      return true;
+    }
+
+    return confirm({
+      title: "Remove this tool from agents?",
+      message: (
+        <div>
+          This tool is currently used directly by {affectedAgents.length}{" "}
+          {affectedAgents.length === 1 ? "agent" : "agents"}. Saving this change
+          will remove it from those agents. Skills using this tool will not be
+          affected.
+        </div>
+      ),
+      validateLabel: "Continue",
+      validateVariant: "warning",
+    });
+  };
+
   const applyToolChanges = async (
     toolChanges: Array<{
       toolName: string;
@@ -217,20 +274,22 @@ export function MCPServerDetails({
 
   const applyInfoChanges = async (diff: {
     serverView?: { name: string; description: string };
+    isRestrictedToSkills?: boolean;
     icon?: string;
     authSharedSecret?: string;
     authCustomHeaders?: any;
     authMeta?: Record<string, string> | null;
   }) => {
     const hasServerViewChanges = diff.serverView !== undefined;
+    const hasSkillsOnlyChanges = diff.isRestrictedToSkills !== undefined;
     const hasIconChanges = diff.icon !== undefined;
     const hasSecretChanges = diff.authSharedSecret !== undefined;
     const hasHeaderChanges = diff.authCustomHeaders !== undefined;
     const hasMetaChanges = diff.authMeta !== undefined;
     const hasRemoteChanges =
       hasIconChanges || hasSecretChanges || hasHeaderChanges || hasMetaChanges;
 
-    if (!hasServerViewChanges && !hasRemoteChanges) {
+    if (!hasServerViewChanges && !hasSkillsOnlyChanges && !hasRemoteChanges) {
       return;
     }
 
@@ -250,6 +309,23 @@ export function MCPServerDetails({
       }
     }
 
+    if (hasSkillsOnlyChanges) {
+      const response = await clientFetch(
+        `/api/w/${owner.sId}/mcp/views/${mcpServerView?.sId}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            isRestrictedToSkills: diff.isRestrictedToSkills,
+          }),
+        }
+      );
+      if (!response.ok) {
+        const body = await response.json();
+        throw new Error(body.error?.message ?? "Failed to update server view");
+      }
+    }
+
     // Patch remote server settings if needed. icon and meta use separate
     // requests because they are distinct discriminants in the API schema.
     // sharedSecret and customHeaders can be combined in one request.
@@ -357,6 +433,8 @@ export function MCPServerDetails({
           // Revalidate caches.
           await mutateMCPServersViewsForAdmin();
           await mutateMCPServer();
+          await mutateMCPServersUsage();
+          await mutateDirectlyAvailableMCPServerViews();
 
           sendNotification({
             type: "success",
@@ -442,6 +520,8 @@ export function MCPServerDetails({
         spaces={spaces}
         readOnly={readOnly}
         sensitivityLabelsController={sensitivityLabelsController}
+        confirmDirectAvailabilityChange={confirmDirectAvailabilityChange}
+        isDirectAvailabilityResolved={isDirectAvailabilityResolved}
       />
     </FormProvider>
   );

front/components/actions/mcp/MCPServerDetailsInfo.tsx

@@ -24,13 +24,19 @@ type MCPServerDetailsInfoProps = {
   owner: LightWorkspaceType;
   readOnly?: boolean;
   sensitivityLabelsController?: SensitivityLabelsController;
+  confirmDirectAvailabilityChange?: (
+    isAvailableToAgents: boolean
+  ) => Promise<boolean>;
+  isDirectAvailabilityResolved?: boolean;
 };
 
 export function MCPServerDetailsInfo({
   mcpServerView,
   owner,
   readOnly = false,
   sensitivityLabelsController,
+  confirmDirectAvailabilityChange,
+  isDirectAvailabilityResolved,
 }: MCPServerDetailsInfoProps) {
   const editedAt = useMemo(() => {
     const d = new Date(0);
@@ -82,7 +88,11 @@ export function MCPServerDetailsInfo({
         </div>
       )}
       <Separator />
-      <MCPServerViewForm mcpServerView={mcpServerView} />
+      <MCPServerViewForm
+        mcpServerView={mcpServerView}
+        confirmDirectAvailabilityChange={confirmDirectAvailabilityChange}
+        isDirectAvailabilityResolved={isDirectAvailabilityResolved ?? false}
+      />
       <Separator />
       {mcpServerView.server.authorization && (
         <MCPServerSettings

front/components/actions/mcp/MCPServerDetailsSheet.tsx

@@ -46,6 +46,10 @@ interface MCPServerDetailsSheetProps {
   spaces: SpaceType[];
   readOnly?: boolean;
   sensitivityLabelsController?: SensitivityLabelsController;
+  confirmDirectAvailabilityChange: (
+    isAvailableToAgents: boolean
+  ) => Promise<boolean>;
+  isDirectAvailabilityResolved: boolean;
 }
 
 export function MCPServerDetailsSheet({
@@ -58,6 +62,8 @@ export function MCPServerDetailsSheet({
   spaces,
   readOnly = false,
   sensitivityLabelsController,
+  confirmDirectAvailabilityChange,
+  isDirectAvailabilityResolved,
 }: MCPServerDetailsSheetProps) {
   const [selectedTab, setSelectedTab] = useState<TabType>("info");
   const [prevIsOpen, setPrevIsOpen] = useState(isOpen);
@@ -208,6 +214,12 @@ export function MCPServerDetailsSheet({
                         sensitivityLabelsController={
                           sensitivityLabelsController
                         }
+                        confirmDirectAvailabilityChange={
+                          confirmDirectAvailabilityChange
+                        }
+                        isDirectAvailabilityResolved={
+                          isDirectAvailabilityResolved
+                        }
                       />
                     </div>
                   )}

front/components/actions/mcp/create/MCPServerViewForm.tsx

@@ -1,15 +1,27 @@
 import type { MCPServerFormValues } from "@app/components/actions/mcp/forms/mcpServerFormSchema";
 import { getMcpServerViewDescription } from "@app/lib/actions/mcp_helper";
 import type { MCPServerViewType } from "@app/lib/api/mcp";
-import { Input } from "@dust-tt/sparkle";
-import { useFormContext } from "react-hook-form";
+import { CheckBoxWithTextAndDescription, Input } from "@dust-tt/sparkle";
+import { useController, useFormContext } from "react-hook-form";
 
 interface MCPServerViewFormProps {
   mcpServerView: MCPServerViewType;
+  confirmDirectAvailabilityChange?: (
+    isAvailableToAgents: boolean
+  ) => Promise<boolean>;
+  isDirectAvailabilityResolved: boolean;
 }
 
-export function MCPServerViewForm({ mcpServerView }: MCPServerViewFormProps) {
+export function MCPServerViewForm({
+  mcpServerView,
+  confirmDirectAvailabilityChange,
+  isDirectAvailabilityResolved,
+}: MCPServerViewFormProps) {
   const form = useFormContext<MCPServerFormValues>();
+  const { field: isRestrictedToSkillsField } = useController({
+    name: "isRestrictedToSkills",
+    control: form.control,
+  });
 
   return (
     <div className="space-y-5 text-foreground">
@@ -38,6 +50,24 @@ export function MCPServerViewForm({ mcpServerView }: MCPServerViewFormProps) {
           This is only for internal reference and is not shown to the model.
         </p>
       </div>
+
+      <CheckBoxWithTextAndDescription
+        text="Available to agents"
+        description="Allow agents to add and use this tool directly. Skills can always use it."
+        checked={!isRestrictedToSkillsField.value}
+        disabled={!isDirectAvailabilityResolved}
+        onCheckedChange={(checked) => {
+          const isAvailableToAgents = checked === true;
+          void (async () => {
+            const confirmed =
+              !confirmDirectAvailabilityChange ||
+              (await confirmDirectAvailabilityChange(isAvailableToAgents));
+            if (confirmed) {
+              isRestrictedToSkillsField.onChange(!isAvailableToAgents);
+            }
+          })();
+        }}
+      />
     </div>
   );
 }

front/components/actions/mcp/forms/mcpServerFormSchema.ts

@@ -60,6 +60,7 @@ function decodeToolSettingsFromForm(
 export type ServerSettings = {
   name: string;
   description: string;
+  isRestrictedToSkills: boolean;
   icon?: string;
   sharedSecret?: string;
   customHeaders?: HeaderRow[] | null;
@@ -161,6 +162,7 @@ export function getMCPServerFormDefaults(
   const defaults: MCPServerFormValues = {
     name: view.name ?? view.server.name,
     description: getMcpServerViewDescription(view),
+    isRestrictedToSkills: false,
     toolSettings: encodeToolSettingsForForm(toolSettings),
     sharingSettings,
   };
@@ -209,6 +211,7 @@ export function getMCPServerFormSchema(
         { message: "This name is already in use." }
       ),
     description: z.string().min(1, "Description is required."),
+    isRestrictedToSkills: z.boolean(),
     toolSettings: z.record(
       z.object({
         enabled: z.boolean(),
@@ -248,6 +251,7 @@ export function getMCPServerFormSchema(
 
 type FormDiffType = {
   serverView?: { name: string; description: string };
+  isRestrictedToSkills?: boolean;
   icon?: string;
   authSharedSecret?: string;
   authCustomHeaders?: HeaderRow[] | null;
@@ -287,6 +291,10 @@ export function diffMCPServerForm(
     };
   }
 
+  if (current.isRestrictedToSkills !== initial.isRestrictedToSkills) {
+    out.isRestrictedToSkills = current.isRestrictedToSkills;
+  }
+
   // Check remote-specific changes.
   if (isRemote) {
     if (current.icon && current.icon !== initial.icon) {