scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-09 03:18:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 109

feat: allow assigning mcp servers to agents

Browse source
This commit is contained in:
Krrish Dholakia 2026-02-25 09:49:39 -08:00
parent 89a88a401e
commit 7ed621a960
1 changed files with 38 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
ui/litellm-dashboard/src/components/agents/add_agent_form.tsx
View file

@ -9,8 +9,11 @@ import {
keyCreateForAgentCall,
keyListCall,
keyUpdateCall,
modelAvailableCall,
AgentCreateInfo,
} from "../networking";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
import { getModelDisplayName } from "../key_team_helpers/fetch_available_models_team_key";
import AgentFormFields from "./agent_form_fields";
import DynamicAgentFormFields, { buildDynamicAgentData } from "./dynamic_agent_form_fields";
import { getDefaultFormValues, buildAgentDataFromForm } from "./agent_config";
@ -34,6 +37,7 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
accessToken,
onSuccess,
}) => {
const { userId, userRole } = useAuthorized();
const [form] = Form.useForm();
const [currentStep, setCurrentStep] = useState(0);
const [isSubmitting, setIsSubmitting] = useState(false);
@ -48,6 +52,8 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
const [existingKeys, setExistingKeys] = useState<any[]>([]);
const [selectedExistingKey, setSelectedExistingKey] = useState<string | null>(null);
const [loadingKeys, setLoadingKeys] = useState(false);
const [availableModels, setAvailableModels] = useState<string[]>([]);
const [loadingModels, setLoadingModels] = useState(false);
// Step 2: results
const [createdAgentName, setCreatedAgentName] = useState<string>("");
@ -88,6 +94,31 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
}
}, [currentStep, accessToken]);
// Fetch available models when Assign Key step is active (same list as key generation)
useEffect(() => {
if (currentStep !== 2 || !accessToken || !userId || !userRole) return;
let cancelled = false;
setLoadingModels(true);
modelAvailableCall(accessToken, userId, userRole)
.then((response) => {
if (cancelled) return;
const modelsArray = response?.data ?? (Array.isArray(response) ? response : []);
const ids = modelsArray
.map((m: { id?: string; model_name?: string }) => m.id ?? m.model_name)
.filter(Boolean) as string[];
setAvailableModels(ids);
})
.catch((error) => {
if (!cancelled) console.error("Error fetching models:", error);
})
.finally(() => {
if (!cancelled) setLoadingModels(false);
});
return () => {
cancelled = true;
};
}, [currentStep, accessToken, userId, userRole]);
const selectedAgentTypeInfo = agentTypeMetadata.find(
(info) => info.agent_type === agentType
);
@ -481,10 +512,16 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="e.g. gpt-4o, claude-3-5-sonnet"
placeholder={loadingModels ? "Loading models..." : "e.g. gpt-4o, claude-3-5-sonnet"}
value={newKeyModels}
onChange={setNewKeyModels}
tokenSeparators={[","]}
loading={loadingModels}
showSearch
options={availableModels.map((m) => ({
label: getModelDisplayName(m),
value: m,
}))}
/>
</div>
</div>