🛒 feat: Implement Marketplace Permissions Management UI

- Added MarketplaceAdminSettings component for managing marketplace permissions.
- Updated roles.js to include marketplace permissions in the API.
- Refactored interface.js to streamline marketplace permissions handling.
- Enhanced Marketplace component to integrate admin settings.
- Updated localization files to include new marketplace-related keys.
- Added new API endpoint for updating marketplace permissions in data-service.

api/server/routes/roles.js

@@ -1,12 +1,13 @@
 const express = require('express');
 const {
+  SystemRoles,
+  roleDefaults,
+  PermissionTypes,
+  agentPermissionsSchema,
   promptPermissionsSchema,
   memoryPermissionsSchema,
-  agentPermissionsSchema,
+  marketplacePermissionsSchema,
   peoplePickerPermissionsSchema,
-  PermissionTypes,
-  roleDefaults,
-  SystemRoles,
 } = require('librechat-data-provider');
 const { checkAdmin, requireJwtAuth } = require('~/server/middleware');
 const { updateRoleByName, getRoleByName } = require('~/models/Role');
@@ -39,6 +40,11 @@ const permissionConfigs = {
     permissionType: PermissionTypes.PEOPLE_PICKER,
     errorMessage: 'Invalid people picker permissions.',
   },
+  marketplace: {
+    schema: marketplacePermissionsSchema,
+    permissionType: PermissionTypes.MARKETPLACE,
+    errorMessage: 'Invalid marketplace permissions.',
+  },
 };
 
 /**
@@ -136,4 +142,10 @@ router.put('/:roleName/memories', checkAdmin, createPermissionUpdateHandler('mem
  */
 router.put('/:roleName/people-picker', checkAdmin, createPermissionUpdateHandler('people-picker'));
 
+/**
+ * PUT /api/roles/:roleName/marketplace
+ * Update marketplace permissions for a specific role
+ */
+router.put('/:roleName/marketplace', checkAdmin, createPermissionUpdateHandler('marketplace'));
+
 module.exports = router;

api/server/services/start/interface.js

@@ -59,12 +59,7 @@ async function loadDefaultInterface(config, configDefaults, roleName = SystemRol
       roles: interfaceConfig?.peoplePicker?.roles ?? defaults.peoplePicker?.roles,
     },
     marketplace: {
-      admin: {
+      use: interfaceConfig?.marketplace?.use ?? defaults.marketplace?.use,
-        use: interfaceConfig?.marketplace?.admin?.use ?? defaults.marketplace?.admin.use,
-      },
-      user: {
-        use: interfaceConfig?.marketplace?.user?.use ?? defaults.marketplace?.user.use,
-      },
     },
   });
 
@@ -89,7 +84,7 @@ async function loadDefaultInterface(config, configDefaults, roleName = SystemRol
         roleName === SystemRoles.USER ? false : loadedInterface.peoplePicker?.roles,
     },
     [PermissionTypes.MARKETPLACE]: {
-      [Permissions.USE]: loadedInterface.marketplace.user?.use,
+      [Permissions.USE]: roleName === SystemRoles.USER ? false : loadedInterface.marketplace?.use,
     },
     [PermissionTypes.FILE_SEARCH]: { [Permissions.USE]: loadedInterface.fileSearch },
     [PermissionTypes.FILE_CITATIONS]: { [Permissions.USE]: loadedInterface.fileCitations },
@@ -112,7 +107,7 @@ async function loadDefaultInterface(config, configDefaults, roleName = SystemRol
       [Permissions.VIEW_ROLES]: loadedInterface.peoplePicker?.roles,
     },
     [PermissionTypes.MARKETPLACE]: {
-      [Permissions.USE]: loadedInterface.marketplace.admin?.use,
+      [Permissions.USE]: loadedInterface.marketplace?.use,
     },
     [PermissionTypes.FILE_SEARCH]: { [Permissions.USE]: loadedInterface.fileSearch },
     [PermissionTypes.FILE_CITATIONS]: { [Permissions.USE]: loadedInterface.fileCitations },

client/src/components/Agents/Marketplace.tsx

@@ -9,6 +9,7 @@ import type t from 'librechat-data-provider';
 import type { ContextType } from '~/common';
 import { useGetEndpointsQuery, useGetAgentCategoriesQuery } from '~/data-provider';
 import { useDocumentTitle, useHasAccess, useLocalize } from '~/hooks';
+import MarketplaceAdminSettings from './MarketplaceAdminSettings';
 import { SidePanelProvider, useChatContext } from '~/Providers';
 import { MarketplaceProvider } from './MarketplaceContext';
 import { SidePanelGroup } from '~/components/SidePanel';
@@ -301,8 +302,12 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
               {/* Scrollable container */}
               <div
                 ref={scrollContainerRef}
-                className="scrollbar-gutter-stable flex h-full flex-col overflow-y-auto overflow-x-hidden"
+                className="scrollbar-gutter-stable relative flex h-full flex-col overflow-y-auto overflow-x-hidden"
               >
+                {/* Admin Settings */}
+                <div className="absolute right-4 top-4 z-30">
+                  <MarketplaceAdminSettings />
+                </div>
                 {/* Simplified header for agents marketplace - only show nav controls when needed */}
                 {!isSmallScreen && (
                   <div className="sticky top-0 z-20 flex items-center justify-between bg-surface-secondary p-2 font-semibold text-text-primary md:h-14">

client/src/components/Agents/MarketplaceAdminSettings.tsx

@@ -0,0 +1,211 @@
+import { useMemo, useEffect, useState } from 'react';
+import * as Ariakit from '@ariakit/react';
+import { ShieldEllipsis } from 'lucide-react';
+import { useForm, Controller } from 'react-hook-form';
+import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
+import {
+  Button,
+  Switch,
+  OGDialog,
+  DropdownPopup,
+  OGDialogTitle,
+  OGDialogContent,
+  OGDialogTrigger,
+  useToastContext,
+} from '@librechat/client';
+import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
+import { useUpdateMarketplacePermissionsMutation } from '~/data-provider';
+import { useLocalize, useAuthContext } from '~/hooks';
+
+type FormValues = {
+  [Permissions.USE]: boolean;
+};
+
+type LabelControllerProps = {
+  label: string;
+  marketplacePerm: Permissions.USE;
+  control: Control<FormValues, unknown, FormValues>;
+  setValue: UseFormSetValue<FormValues>;
+  getValues: UseFormGetValues<FormValues>;
+};
+
+const LabelController: React.FC<LabelControllerProps> = ({
+  control,
+  marketplacePerm,
+  label,
+  getValues,
+  setValue,
+}) => (
+  <div className="mb-4 flex items-center justify-between gap-2">
+    <button
+      className="cursor-pointer select-none"
+      type="button"
+      onClick={() =>
+        setValue(marketplacePerm, !getValues(marketplacePerm), {
+          shouldDirty: true,
+        })
+      }
+      tabIndex={0}
+    >
+      {label}
+    </button>
+    <Controller
+      name={marketplacePerm}
+      control={control}
+      render={({ field }) => (
+        <Switch
+          {...field}
+          checked={field.value}
+          onCheckedChange={field.onChange}
+          value={field.value.toString()}
+        />
+      )}
+    />
+  </div>
+);
+
+const MarketplaceAdminSettings = () => {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const { user, roles } = useAuthContext();
+  const { mutate, isLoading } = useUpdateMarketplacePermissionsMutation({
+    onSuccess: () => {
+      showToast({ status: 'success', message: localize('com_ui_saved') });
+    },
+    onError: () => {
+      showToast({ status: 'error', message: localize('com_ui_error_save_admin_settings') });
+    },
+  });
+
+  const [isRoleMenuOpen, setIsRoleMenuOpen] = useState(false);
+  const [selectedRole, setSelectedRole] = useState<SystemRoles>(SystemRoles.USER);
+
+  const defaultValues = useMemo(() => {
+    const rolePerms = roles?.[selectedRole]?.permissions;
+    if (rolePerms) {
+      return rolePerms[PermissionTypes.MARKETPLACE];
+    }
+    return roleDefaults[selectedRole].permissions[PermissionTypes.MARKETPLACE];
+  }, [roles, selectedRole]);
+
+  const {
+    reset,
+    control,
+    setValue,
+    getValues,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<FormValues>({
+    mode: 'onChange',
+    defaultValues,
+  });
+
+  useEffect(() => {
+    const value = roles?.[selectedRole]?.permissions?.[PermissionTypes.MARKETPLACE];
+    if (value) {
+      reset(value);
+    } else {
+      reset(roleDefaults[selectedRole].permissions[PermissionTypes.MARKETPLACE]);
+    }
+  }, [roles, selectedRole, reset]);
+
+  if (user?.role !== SystemRoles.ADMIN) {
+    return null;
+  }
+
+  const labelControllerData: {
+    marketplacePerm: Permissions.USE;
+    label: string;
+  }[] = [
+    {
+      marketplacePerm: Permissions.USE,
+      label: localize('com_ui_marketplace_allow_use'),
+    },
+  ];
+
+  const onSubmit = (data: FormValues) => {
+    mutate({ roleName: selectedRole, updates: data });
+  };
+
+  const roleDropdownItems = [
+    {
+      label: SystemRoles.USER,
+      onClick: () => {
+        setSelectedRole(SystemRoles.USER);
+      },
+    },
+    {
+      label: SystemRoles.ADMIN,
+      onClick: () => {
+        setSelectedRole(SystemRoles.ADMIN);
+      },
+    },
+  ];
+
+  return (
+    <OGDialog>
+      <OGDialogTrigger asChild>
+        <Button
+          variant={'outline'}
+          className="btn btn-neutral border-token-border-light relative gap-1 rounded-lg font-medium"
+        >
+          <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
+          {localize('com_ui_admin_settings')}
+        </Button>
+      </OGDialogTrigger>
+      <OGDialogContent className="w-full border-border-light bg-surface-primary text-text-primary md:w-1/4">
+        <OGDialogTitle>{`${localize('com_ui_admin_settings')} - ${localize(
+          'com_ui_marketplace',
+        )}`}</OGDialogTitle>
+        <div className="p-2">
+          {/* Role selection dropdown */}
+          <div className="flex items-center gap-2">
+            <span className="font-medium">{localize('com_ui_role_select')}:</span>
+            <DropdownPopup
+              unmountOnHide={true}
+              menuId="role-dropdown"
+              isOpen={isRoleMenuOpen}
+              setIsOpen={setIsRoleMenuOpen}
+              trigger={
+                <Ariakit.MenuButton className="inline-flex w-1/4 items-center justify-center rounded-lg border border-border-light bg-transparent px-2 py-1 text-text-primary transition-all ease-in-out hover:bg-surface-tertiary">
+                  {selectedRole}
+                </Ariakit.MenuButton>
+              }
+              items={roleDropdownItems}
+              itemClassName="items-center justify-center"
+              sameWidth={true}
+            />
+          </div>
+          {/* Permissions form */}
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="py-5">
+              {labelControllerData.map(({ marketplacePerm, label }) => (
+                <div key={marketplacePerm}>
+                  <LabelController
+                    control={control}
+                    marketplacePerm={marketplacePerm}
+                    label={label}
+                    getValues={getValues}
+                    setValue={setValue}
+                  />
+                </div>
+              ))}
+            </div>
+            <div className="flex justify-end">
+              <button
+                type="button"
+                onClick={handleSubmit(onSubmit)}
+                disabled={isSubmitting || isLoading}
+                className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
+              >
+                {localize('com_ui_save')}
+              </button>
+            </div>
+          </form>
+        </div>
+      </OGDialogContent>
+    </OGDialog>
+  );
+};
+
+export default MarketplaceAdminSettings;

client/src/data-provider/roles.ts

@@ -4,6 +4,7 @@ import {
   dataService,
   promptPermissionsSchema,
   memoryPermissionsSchema,
+  marketplacePermissionsSchema,
   peoplePickerPermissionsSchema,
 } from 'librechat-data-provider';
 import type {
@@ -169,3 +170,39 @@ export const useUpdatePeoplePickerPermissionsMutation = (
     },
   );
 };
+
+export const useUpdateMarketplacePermissionsMutation = (
+  options?: t.UpdateMarketplacePermOptions,
+): UseMutationResult<
+  t.UpdatePermResponse,
+  t.TError | undefined,
+  t.UpdateMarketplacePermVars,
+  unknown
+> => {
+  const queryClient = useQueryClient();
+  const { onMutate, onSuccess, onError } = options ?? {};
+  return useMutation(
+    (variables) => {
+      marketplacePermissionsSchema.partial().parse(variables.updates);
+      return dataService.updateMarketplacePermissions(variables);
+    },
+    {
+      onSuccess: (data, variables, context) => {
+        queryClient.invalidateQueries([QueryKeys.roles, variables.roleName]);
+        if (onSuccess) {
+          onSuccess(data, variables, context);
+        }
+      },
+      onError: (...args) => {
+        const error = args[0];
+        if (error != null) {
+          console.error('Failed to update marketplace permissions:', error);
+        }
+        if (onError) {
+          onError(...args);
+        }
+      },
+      onMutate,
+    },
+  );
+};

client/src/locales/en/translation.json

@@ -592,6 +592,10 @@
   "com_ui_people_picker_allow_view_users": "Allow viewing users",
   "com_ui_people_picker_allow_view_groups": "Allow viewing groups",
   "com_ui_people_picker_allow_view_roles": "Allow viewing roles",
+  "com_ui_marketplace": "Marketplace",
+  "com_ui_marketplace_allow_use": "Allow using Marketplace",
+  "com_ui_marketplace_admin_settings": "Marketplace Admin Settings",
+  "com_ui_marketplace_admin_settings_description": "Configure which roles can access the Agent Marketplace.",
   "com_ui_all": "all",
   "com_ui_all_proper": "All",
   "com_ui_analyzing": "Analyzing",

packages/data-provider/src/api-endpoints.ts

@@ -278,6 +278,9 @@ export const updateAgentPermissions = (roleName: string) => `${getRole(roleName)
 export const updatePeoplePickerPermissions = (roleName: string) =>
   `${getRole(roleName)}/people-picker`;
 
+export const updateMarketplacePermissions = (roleName: string) =>
+  `${getRole(roleName)}/marketplace`;
+
 /* Conversation Tags */
 export const conversationTags = (tag?: string) =>
   `/api/tags${tag != null && tag ? `/${encodeURIComponent(tag)}` : ''}`;

packages/data-provider/src/config.ts

@@ -541,16 +541,7 @@ export const interfaceSchema = z
       .optional(),
     marketplace: z
       .object({
-        admin: z
+        use: z.boolean().optional(),
-          .object({
-            use: z.boolean().optional(),
-          })
-          .optional(),
-        user: z
-          .object({
-            use: z.boolean().optional(),
-          })
-          .optional(),
       })
       .optional(),
     fileSearch: z.boolean().optional(),
@@ -576,12 +567,7 @@ export const interfaceSchema = z
       roles: true,
     },
     marketplace: {
-      admin: {
+      use: false,
-        use: false,
-      },
-      user: {
-        use: false,
-      },
     },
     fileSearch: true,
     fileCitations: true,

packages/data-provider/src/data-service.ts

@@ -800,6 +800,12 @@ export function updatePeoplePickerPermissions(
   );
 }
 
+export function updateMarketplacePermissions(
+  variables: m.UpdateMarketplacePermVars,
+): Promise<m.UpdatePermResponse> {
+  return request.put(endpoints.updateMarketplacePermissions(variables.roleName), variables.updates);
+}
+
 /* Tags */
 export function getConversationTags(): Promise<t.TConversationTagsResponse> {
   return request.get(endpoints.conversationTags());

packages/data-provider/src/types/mutations.ts

@@ -305,6 +305,15 @@ export type UpdatePeoplePickerPermOptions = MutationOptions<
   types.TError | null | undefined
 >;
 
+export type UpdateMarketplacePermVars = UpdatePermVars<p.TMarketplacePermissions>;
+
+export type UpdateMarketplacePermOptions = MutationOptions<
+  UpdatePermResponse,
+  UpdateMarketplacePermVars,
+  unknown,
+  types.TError | null | undefined
+>;
+
 export type UpdateConversationTagOptions = MutationOptions<
   types.TConversationTag,
   types.TConversationTagRequest