+
);
diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
index 14959e23e5b..3c0a0f520d4 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@@ -33,6 +33,7 @@ import { formatNumberWithCommas } from "@/utils/dataUtils";
import { mapDisplayToInternalNames } from "../callback_info_helpers";
import MCPServerSelector from "../mcp_server_management/MCPServerSelector";
import MCPToolPermissions from "../mcp_server_management/MCPToolPermissions";
+import AgentSelector from "../agent_management/AgentSelector";
import ModelAliasManager from "../common_components/ModelAliasManager";
import NotificationsManager from "../molecules/notifications_manager";
import KeyLifecycleSettings from "../common_components/KeyLifecycleSettings";
@@ -385,6 +386,26 @@ const CreateKey: React.FC
= ({
delete formValues.allowed_mcp_access_groups;
}
+ // Transform allowed_agents_and_groups into object_permission format
+ if (
+ formValues.allowed_agents_and_groups &&
+ (formValues.allowed_agents_and_groups.agents?.length > 0 ||
+ formValues.allowed_agents_and_groups.accessGroups?.length > 0)
+ ) {
+ if (!formValues.object_permission) {
+ formValues.object_permission = {};
+ }
+ const { agents, accessGroups } = formValues.allowed_agents_and_groups;
+ if (agents && agents.length > 0) {
+ formValues.object_permission.agents = agents;
+ }
+ if (accessGroups && accessGroups.length > 0) {
+ formValues.object_permission.agent_access_groups = accessGroups;
+ }
+ // Remove the original field as it's now part of object_permission
+ delete formValues.allowed_agents_and_groups;
+ }
+
// Add model_aliases if any are defined
if (Object.keys(modelAliases).length > 0) {
formValues.aliases = JSON.stringify(modelAliases);
@@ -1091,6 +1112,33 @@ const CreateKey: React.FC = ({
+
+
+ Agent Settings
+
+
+
+ Allowed Agents{" "}
+
+
+
+
+ }
+ name="allowed_agents_and_groups"
+ help="Select agents or access groups this key can access"
+ >
+ form.setFieldValue("allowed_agents_and_groups", val)}
+ value={form.getFieldValue("allowed_agents_and_groups")}
+ accessToken={accessToken}
+ placeholder="Select agents or access groups (optional)"
+ />
+
+
+
+
{premiumUser ? (
diff --git a/ui/litellm-dashboard/src/components/permissions/AgentPermissions.tsx b/ui/litellm-dashboard/src/components/permissions/AgentPermissions.tsx
new file mode 100644
index 00000000000..995e25643b4
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/permissions/AgentPermissions.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from "react";
+import { Text, Badge } from "@tremor/react";
+import { UserGroupIcon } from "@heroicons/react/outline";
+import { Tooltip } from "antd";
+import { getAgentsList } from "../networking";
+
+interface Agent {
+ agent_id: string;
+ agent_name: string;
+ agent_config?: Record;
+ agent_card_params?: Record;
+}
+
+interface AgentPermissionsProps {
+ agents: string[];
+ agentAccessGroups?: string[];
+ accessToken?: string | null;
+}
+
+export function AgentPermissions({
+ agents,
+ agentAccessGroups = [],
+ accessToken
+}: AgentPermissionsProps) {
+ const [agentDetails, setAgentDetails] = useState([]);
+
+ // Fetch agent details when component mounts
+ useEffect(() => {
+ const fetchAgentDetails = async () => {
+ if (accessToken && agents.length > 0) {
+ try {
+ const response = await getAgentsList(accessToken);
+ if (response && response.agents && Array.isArray(response.agents)) {
+ setAgentDetails(response.agents);
+ }
+ } catch (error) {
+ console.error("Error fetching agents:", error);
+ }
+ }
+ };
+ fetchAgentDetails();
+ }, [accessToken, agents.length]);
+
+ // Function to get display name for agent
+ const getAgentDisplayName = (agentId: string) => {
+ const agentDetail = agentDetails.find((agent) => agent.agent_id === agentId);
+ if (agentDetail) {
+ const truncatedId = agentId.length > 7 ? `${agentId.slice(0, 3)}...${agentId.slice(-4)}` : agentId;
+ return `${agentDetail.agent_name} (${truncatedId})`;
+ }
+ return agentId;
+ };
+
+ // Merge agents and access groups into one list
+ const mergedItems = [
+ ...agents.map((agent) => ({ type: "agent", value: agent })),
+ ...agentAccessGroups.map((group) => ({ type: "accessGroup", value: group })),
+ ];
+ const totalCount = mergedItems.length;
+
+ return (
+
+
+
+ Agents
+
+ {totalCount}
+
+
+
+ {totalCount > 0 ? (
+
+ {mergedItems.map((item, index) => (
+
+
+
+ {item.type === "agent" ? (
+
+
+
+ {getAgentDisplayName(item.value)}
+
+
+ ) : (
+
+
+ {item.value}
+
+ Group
+
+
+ )}
+
+
+
+ ))}
+
+ ) : (
+
+
+ No agents or access groups configured
+
+ )}
+