diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx
index 7f97012846..2de324499e 100644
--- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx
+++ b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx
@@ -182,4 +182,40 @@ describe("ChatUI", () => {
expect(screen.queryByText("ResponsesModel")).toBeNull();
});
});
+
+ /**
+ * Tests that the 'Enter custom model' option is available in the model selector dropdown.
+ * This ensures users can manually enter a model name if it's not in the list.
+ */
+ it("should show 'Enter custom model' option in model selector", async () => {
+ const { getByText } = render(
+ ,
+ );
+
+ // Wait for the component to render
+ await waitFor(() => {
+ expect(getByText("Test Key")).toBeInTheDocument();
+ });
+
+ // Open the "Select Model" dropdown
+ const selectModelLabel = getByText("Select Model");
+ const modelSelectContainer = selectModelLabel.closest("div");
+ const modelSelect = modelSelectContainer?.querySelector(".ant-select-selector");
+
+ fireEvent.mouseDown(modelSelect!);
+
+ await waitFor(() => {
+ // Get all options in the dropdown (Ant Design renders these in a portal)
+ const options = document.querySelectorAll(".ant-select-item-option-content");
+ expect(options.length).toBeGreaterThan(0);
+ // Check if the first option is 'Enter custom model'
+ expect(options[0]).toHaveTextContent("Enter custom model");
+ });
+ });
});
diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
index 31cb87611a..bc3af2cfc7 100644
--- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
+++ b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
@@ -1208,6 +1208,7 @@ const ChatUI: React.FC = ({
placeholder="Select a Model"
onChange={onModelChange}
options={[
+ { value: "custom", label: "Enter custom model", key: "custom" },
...Array.from(
new Set(
modelInfo
@@ -1237,7 +1238,6 @@ const ChatUI: React.FC = ({
label: model_group,
key: index,
})),
- { value: "custom", label: "Enter custom model", key: "custom" },
]}
style={{ width: "100%" }}
showSearch={true}