From 79c54256a042a350a3d2a7a9ea23c85e1e2200a3 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Wed, 29 Jan 2025 17:54:20 -0800
Subject: [PATCH] (UI) Allow using a model / credentials for pass through
 routes  (#8099)

* test_add_vertex_pass_through_deployment

* VertexPassThroughRouter

* fix use_in_pass_through

* VertexPassThroughRouter

* fix vertex_credentials

* allow using _initialize_deployment_for_pass_through

* test_add_vertex_pass_through_deployment

* _set_default_vertex_config

* fix verbose_proxy_logger

* fix use_in_pass_through

* fix _get_token_and_url

* test_get_vertex_location_from_url

* test_get_vertex_credentials_none

* run pt unit testing again

* fix add_vertex_credentials

* test_adding_deployments.py

* rename file

* revert to og add model flow

* move placement

* ui somewhat working wildcard

* separate out code for slecting model name

* fix ConditionalPublicModelName

* ui fix confitional render public model name

* fix litellm model name page

* fix advanced settings page page

* ui fix litellm model name flow

* adding pas through models ui

* fix passing litellm params

* ui fix advanced settings

* ui fix order of provider info
---
 .../add_model/advanced_settings.tsx           | 123 +++
 .../conditional_public_model_name.tsx         |  53 ++
 .../add_model/litellm_model_name.tsx          | 107 +++
 .../src/components/model_dashboard.tsx        | 793 +++++-------------
 .../src/components/provider_info_helpers.tsx  |   2 +-
 5 files changed, 511 insertions(+), 567 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx
 create mode 100644 ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
 create mode 100644 ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx

diff --git a/ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx b/ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx
new file mode 100644
index 00000000000..f92b146b484
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx
@@ -0,0 +1,123 @@
+import React from "react";
+import { Form, Switch } from "antd";
+import { Text, Button, Accordion, AccordionHeader, AccordionBody } from "@tremor/react";
+import { Row, Col, Typography, Card } from "antd";
+import TextArea from "antd/es/input/TextArea";
+const { Link } = Typography;
+
+interface AdvancedSettingsProps {
+  showAdvancedSettings: boolean;
+  setShowAdvancedSettings: (show: boolean) => void;
+}
+
+const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
+  showAdvancedSettings,
+  setShowAdvancedSettings,
+}) => {
+  const [form] = Form.useForm();
+
+  const handlePassThroughChange = (checked: boolean) => {
+    const currentParams = form.getFieldValue('litellm_extra_params');
+    try {
+      let paramsObj = currentParams ? JSON.parse(currentParams) : {};
+      if (checked) {
+        paramsObj.use_in_pass_through = true;
+      } else {
+        delete paramsObj.use_in_pass_through;
+      }
+      // Only set the field value if there are remaining parameters
+      if (Object.keys(paramsObj).length > 0) {
+        form.setFieldValue('litellm_extra_params', JSON.stringify(paramsObj, null, 2));
+      } else {
+        form.setFieldValue('litellm_extra_params', '');
+      }
+    } catch (error) {
+      // If JSON parsing fails, only create new object if checked is true
+      if (checked) {
+        form.setFieldValue('litellm_extra_params', JSON.stringify({ use_in_pass_through: true }, null, 2));
+      } else {
+        form.setFieldValue('litellm_extra_params', '');
+      }
+    }
+  };
+
+  return (
+    <>
+
+        <Accordion className="mt-2 mb-4">
+          
+          <AccordionHeader>
+            <b>Advanced Settings</b>
+          </AccordionHeader>
+          <AccordionBody>
+            <div className="bg-white rounded-lg">
+              <Form.Item
+                label="Use in pass through routes"
+                name="use_in_pass_through"
+                valuePropName="checked"
+                className="mb-4 mt-4"
+                tooltip={
+                  <span>
+                    Allow using these credentials in pass through routes.{" "}
+                    <Link href="https://docs.litellm.ai/docs/pass_through/vertex_ai" target="_blank">
+                      Learn more
+                    </Link>
+                  </span>
+                }
+              >
+                <Switch 
+                  onChange={handlePassThroughChange} 
+                  className="bg-gray-600" 
+                />
+              </Form.Item>
+              <Form.Item
+                label="LiteLLM Params"
+                name="litellm_extra_params"
+                tooltip="Optional litellm params used for making a litellm.completion() call."
+                className="mb-4 mt-4"
+              >
+                <TextArea
+                  rows={4}
+                  placeholder='{
+                    "rpm": 100,
+                    "timeout": 0,
+                    "stream_timeout": 0
+                  }'
+                />
+              </Form.Item>
+              <Row className="mb-4">
+                <Col span={10}></Col>
+                <Col span={10}>
+                  <Text className="text-gray-600 text-sm">
+                    Pass JSON of litellm supported params{" "}
+                    <Link
+                      href="https://docs.litellm.ai/docs/completion/input"
+                      target="_blank"
+                    >
+                      litellm.completion() call
+                    </Link>
+                  </Text>
+                </Col>
+              </Row>
+              <Form.Item
+                label="Model Info"
+                name="model_info_params"
+                tooltip="Optional model info params. Returned when calling `/model/info` endpoint."
+                className="mb-0"
+              >
+                <TextArea
+                  rows={4}
+                  placeholder='{
+                    "mode": "chat"
+                  }'
+                />
+              </Form.Item>
+            </div>
+          </AccordionBody>
+        </Accordion>
+
+    </>
+  );
+};
+
+export default AdvancedSettings;
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx b/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
new file mode 100644
index 00000000000..85fd870aff2
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { Form } from "antd";
+import { TextInput, Text } from "@tremor/react";
+import { Row, Col } from "antd";
+
+const ConditionalPublicModelName: React.FC = () => {
+  // Access the form instance
+  const form = Form.useFormInstance();
+
+  // Watch the 'model' field for changes
+  const selectedModels = Form.useWatch('model', form) || [];
+  const showPublicModelName = !selectedModels.includes('all-wildcard');
+
+  if (!showPublicModelName) return null;
+
+  return (
+    <>
+      <Form.Item
+        label="Public Model Name"
+        name="model_name"
+        tooltip="Model name your users will pass in. Also used for load-balancing, LiteLLM will load balance between all models with this public name."
+        labelCol={{ span: 10 }}
+        wrapperCol={{ span: 16 }}
+        labelAlign="left"
+        required={false}
+        className="mb-0"
+        rules={[
+          ({ getFieldValue }) => ({
+            validator(_, value) {
+              const selectedModels = getFieldValue('model') || [];
+              if (!selectedModels.includes('all-wildcard') || value) {
+                return Promise.resolve();
+              }
+              return Promise.reject(new Error('Public Model Name is required unless "All Models" is selected.'));
+            },
+          }),
+        ]}
+      >
+        <TextInput placeholder="my-gpt-4" />
+      </Form.Item>
+      <Row>
+        <Col span={10}></Col>
+        <Col span={10}>
+          <Text className="mb-2">
+            Model name your users will pass in.
+          </Text>
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default ConditionalPublicModelName;
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx b/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx
new file mode 100644
index 00000000000..4eefde584c0
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx
@@ -0,0 +1,107 @@
+import React from "react";
+import { Form, Select as AntSelect } from "antd";
+import { TextInput, Text } from "@tremor/react";
+import { Row, Col } from "antd";
+import { Providers } from "../provider_info_helpers";
+
+interface LiteLLMModelNameFieldProps {
+  selectedProvider: string;
+  providerModels: string[];
+  getPlaceholder: (provider: string) => string;
+}
+
+const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
+  selectedProvider,
+  providerModels,
+  getPlaceholder,
+}) => {
+  const form = Form.useFormInstance();
+
+  const handleModelChange = (value: string[]) => {
+    // If "all-wildcard" is selected, clear the model_name field
+    if (value.includes("all-wildcard")) {
+      form.setFieldsValue({ model_name: undefined });
+    }
+  };
+
+  return (
+    <>
+      <Form.Item
+        label="LiteLLM Model Name(s)"
+        tooltip="Actual model name used for making litellm.completion() / litellm.embedding() call."
+        className="mb-0"
+      >
+        <Form.Item
+          name="model"
+          rules={[{ required: true, message: "Please select at least one model." }]}
+          noStyle
+        >
+          {(selectedProvider === Providers.Azure) || 
+           (selectedProvider === Providers.OpenAI_Compatible) || 
+           (selectedProvider === Providers.Ollama) ? (
+            <TextInput placeholder={getPlaceholder(selectedProvider.toString())} />
+          ) : providerModels.length > 0 ? (
+            <AntSelect
+              allowClear
+              showSearch
+              placeholder="Select models"
+              onChange={handleModelChange}
+              optionFilterProp="children"
+              filterOption={(input, option) =>
+                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+              }
+              options={[
+                {
+                  label: `All ${selectedProvider} Models (Wildcard)`,
+                  value: 'all-wildcard'
+                },
+                ...providerModels.map(model => ({
+                  label: model,
+                  value: model
+                })),
+                {
+                  label: 'Custom Model Name (Enter below)',
+                  value: 'custom'
+                }
+              ]}
+              style={{ width: '100%' }}
+            />
+          ) : (
+            <TextInput placeholder={getPlaceholder(selectedProvider.toString())} />
+          )}
+        </Form.Item>
+
+        {/* Custom Model Name field */}
+        <Form.Item
+          noStyle
+          shouldUpdate={(prevValues, currentValues) => 
+            prevValues.model !== currentValues.model
+          }
+        >
+          {({ getFieldValue }) => {
+            const selectedModels = getFieldValue('model') || [];
+            return selectedModels.includes('custom') && (
+              <Form.Item
+                name="custom_model_name"
+                rules={[{ required: true, message: "Please enter a custom model name." }]}
+                className="mt-2"
+              >
+                <TextInput placeholder="Enter custom model name" />
+              </Form.Item>
+            );
+          }}
+        </Form.Item>
+      </Form.Item>
+      <Row>
+        <Col span={10}></Col>
+        <Col span={10}>
+          <Text className="mb-3 mt-1">
+            Actual model name used for making litellm.completion() call. We'll loadbalance models with the same 'public name'
+          </Text>
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default LiteLLMModelNameField;
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index d94fd89f9af..2cd3c91e04d 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -16,6 +16,9 @@ import {
   AccordionHeader,
   AccordionBody,
 } from "@tremor/react";
+import ConditionalPublicModelName from "./add_model/conditional_public_model_name";
+import LiteLLMModelNameField from "./add_model/litellm_model_name";
+import AdvancedSettings from "./add_model/advanced_settings";
 import {
   TabPanel,
   TabPanels,
@@ -156,14 +159,10 @@ export const handleSubmit = async (
 ) => {
   try {
     // If model_name is not provided, use provider.toLowerCase() + "/*"
-    if (!formValues["model_name"]) {
+    if (formValues["model"] && formValues["model"].includes("all-wildcard")) {
       formValues["model_name"] = formValues["custom_llm_provider"].toLowerCase() + "/*";
     }
-
-    // If model is not provided, use provider.toLowerCase() + "/*"
-    if (!formValues["model"]) {
       formValues["model"] = [formValues["custom_llm_provider"].toLowerCase() + "/*"];
-    }
 
     /**
      * For multiple litellm model names - create a separate deployment for each
@@ -284,7 +283,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
   const [form] = Form.useForm();
   const [modelMap, setModelMap] = useState<any>(null);
   const [lastRefreshed, setLastRefreshed] = useState("");
-
+  
   const [providerModels, setProviderModels] = useState<Array<string>>([]); // Explicitly typing providerModels as a string array
 
   const providers = Object.values(Providers).filter((key) =>
@@ -1761,580 +1760,242 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
           </TabPanel>
           <TabPanel className="h-full">
             <Title2 level={2}>Add new model</Title2>
-            <TabGroup>
-              <TabList>
-                <Tab>Basic Setup</Tab>
-                <Tab>Wildcard Setup (All Models)</Tab>
-              </TabList>
-              <TabPanels>
-                {/* Advanced Setup Tab - Now First */}
-                <TabPanel>
-                  <Card>
-                    <Form
-                      form={form}
-                      onFinish={handleOk}
-                      labelCol={{ span: 10 }}
-                      wrapperCol={{ span: 16 }}
-                      labelAlign="left"
+            <Card>
+              <Form
+                form={form}
+                onFinish={handleOk}
+                labelCol={{ span: 10 }}
+                wrapperCol={{ span: 16 }}
+                labelAlign="left"
+              >
+                <>
+                  {/* Provider Selection */}
+                  <Form.Item
+                    rules={[{ required: true, message: "Required" }]}
+                    label="Provider:"
+                    name="custom_llm_provider"
+                    tooltip="E.g. OpenAI, Azure OpenAI, Anthropic, Bedrock, etc."
+                    labelCol={{ span: 10 }}
+                    labelAlign="left"
+                  >
+                    <Select
+                      value={selectedProvider as string}
+                      onChange={(value) => {
+                        // Set the selected provider
+                        setSelectedProvider(value);
+                        // Update provider-specific models
+                        setProviderModelsFn(provider_map[value]);
+                        // Reset the 'model' field
+                        form.setFieldsValue({ model: [] });
+                        // Reset the 'model_name' field
+                        form.setFieldsValue({ model_name: undefined });
+                      }}
                     >
-                      <>
-                        {/* Provider selection and advanced fields content */}
-                        <Form.Item
-                          rules={[{ required: true, message: "Required" }]}
-                          label="Provider:"
-                          name="custom_llm_provider"
-                          tooltip="E.g. OpenAI, Azure OpenAI, Anthropic, Bedrock, etc."
-                          labelCol={{ span: 10 }}
-                          labelAlign="left"
+                      {Object.keys(Providers).map((providerKey) => (
+                        <SelectItem
+                          key={providerKey}
+                          value={Providers[providerKey as keyof typeof Providers]}
+                          onClick={() => {
+                            setProviderModelsFn(provider_map[providerKey as keyof typeof Providers]);
+                            setSelectedProvider(Providers[providerKey as keyof typeof Providers]);
+                          }}
                         >
-                          <Select value={selectedProvider as string}>
-                            {Object.keys(Providers).map((providerKey) => (
-                              <SelectItem
-                                key={providerKey}
-                                value={Providers[providerKey as keyof typeof Providers]}
-                                onClick={() => {
-                                  setProviderModelsFn(provider_map[providerKey as keyof typeof Providers]);
-                                  setSelectedProvider(Providers[providerKey as keyof typeof Providers]);
-                                }}
-                              >
-                                <div className="flex items-center space-x-2">
-                                  <img
-                                    src={providerLogoMap[Providers[providerKey as keyof typeof Providers]]}
-                                    alt={`${Providers[providerKey as keyof typeof Providers]} logo`}
-                                    className="w-5 h-5"
-                                    onError={(e) => {
-                                      // Create a div with provider initial as fallback
-                                      const target = e.target as HTMLImageElement;
-                                      const parent = target.parentElement;
-                                      if (parent) {
-                                        const fallbackDiv = document.createElement('div');
-                                        fallbackDiv.className = 'w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-xs';
-                                        fallbackDiv.textContent = Providers[providerKey as keyof typeof Providers].charAt(0);
-                                        parent.replaceChild(fallbackDiv, target);
-                                      }
-                                    }}
-                                  />
-                                  <span>{Providers[providerKey as keyof typeof Providers]}</span>
-                                </div>
-                              </SelectItem>
-                            ))}
-                          </Select>
-                        </Form.Item>
-
-                        {/* Provider-specific fields */}
-                        {dynamicProviderForm !== undefined &&
-                          dynamicProviderForm.fields.length > 0 && (
-                            <DynamicFields
-                              fields={dynamicProviderForm.fields}
-                              selectedProvider={dynamicProviderForm.name}
+                          <div className="flex items-center space-x-2">
+                            <img
+                              src={providerLogoMap[Providers[providerKey as keyof typeof Providers]]}
+                              alt={`${Providers[providerKey as keyof typeof Providers]} logo`}
+                              className="w-5 h-5"
+                              onError={(e) => {
+                                // Create a div with provider initial as fallback
+                                const target = e.target as HTMLImageElement;
+                                const parent = target.parentElement;
+                                if (parent) {
+                                  const fallbackDiv = document.createElement('div');
+                                  fallbackDiv.className = 'w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-xs';
+                                  fallbackDiv.textContent = Providers[providerKey as keyof typeof Providers].charAt(0);
+                                  parent.replaceChild(fallbackDiv, target);
+                                }
+                              }}
                             />
-                          )}
+                            <span>{Providers[providerKey as keyof typeof Providers]}</span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </Form.Item>
+                  <LiteLLMModelNameField
+                      selectedProvider={selectedProvider as string}
+                      providerModels={providerModels}
+                      getPlaceholder={getPlaceholder}
+                    />
+                  
+                  {/* Conditionally Render "Public Model Name" */}
+                  <ConditionalPublicModelName  />
 
-                        {/* Advanced fields */}
-                        <Form.Item
-                          label="Public Model Name"
-                          name="model_name"
-                          tooltip="Model name your users will pass in. Also used for load-balancing, LiteLLM will load balance between all models with this public name."
-                          className="mb-0"
-                          rules={[{ required: false }]}
-                        >
-                          <TextInput />
-                        </Form.Item>
-                        <Row>
-                          <Col span={10}></Col>
-                          <Col span={10}>
-                            <Text className="mb-3 mt-1">
-                              Model name your users will pass in.
-                            </Text>
-                          </Col>
-                        </Row>
-                        
+                  {/* Provider-specific fields */}
+                  {dynamicProviderForm !== undefined &&
+                    dynamicProviderForm.fields.length > 0 && (
+                      <DynamicFields
+                        fields={dynamicProviderForm.fields}
+                        selectedProvider={dynamicProviderForm.name}
+                      />
+                  )}
 
-                        <Form.Item
-                          label="LiteLLM Model Name(s)"
-                          tooltip="Actual model name used for making litellm.completion() / litellm.embedding() call."
-                          className="mb-0"
-                        >
-                          <Form.Item
-                            name="model"
-                            rules={[{ required: false }]}
-                            noStyle
-                          >
-                            {(selectedProvider === Providers.Azure) || (selectedProvider === Providers.OpenAI_Compatible) || (selectedProvider === Providers.Ollama) ? (
-                              <TextInput placeholder={getPlaceholder(selectedProvider.toString())} />
-                            ) : providerModels.length > 0 ? (
-                              <MultiSelect>
-                                <MultiSelectItem value="custom">Custom Model Name (Enter below)</MultiSelectItem>
-                                {providerModels.map((model, index) => (
-                                  <MultiSelectItem key={index} value={model}>
-                                    {model}
-                                  </MultiSelectItem>
-                                ))}
-                              </MultiSelect>
-                            ) : (
-                              <TextInput placeholder={getPlaceholder(selectedProvider.toString())} />
-                            )}
-                          
-                          </Form.Item>
-
-                          <Form.Item
-                            noStyle
-                            shouldUpdate={(prevValues, currentValues) => prevValues.model !== currentValues.model}
-                          >
-                            {({ getFieldValue }) => {
-                              const selectedModels = getFieldValue('model') || [];
-                              return selectedModels.includes('custom') && (
-                                <Form.Item
-                                  name="custom_model_name"
-                                  rules={[{ required: true, message: "Please enter a custom model name" }]}
-                                  className="mt-2"
-                                >
-                                  <TextInput placeholder="Enter custom model name" />
-                                </Form.Item>
-                              )
-                            }}
-                          </Form.Item>
-                          
-                        </Form.Item>
-                        <Row>
+                  {selectedProvider != Providers.Bedrock &&
+                    selectedProvider != Providers.Vertex_AI &&
+                    selectedProvider != Providers.Ollama &&
+                    (dynamicProviderForm === undefined ||
+                      dynamicProviderForm.fields.length == 0) && (
+                      <Form.Item
+                        rules={[{ required: true, message: "Required" }]}
+                        label="API Key"
+                        name="api_key"
+                        tooltip="LLM API Credentials"
+                      >
+                        <TextInput placeholder="sk-" type="password" />
+                      </Form.Item>
+                    )}
+                  {selectedProvider == Providers.OpenAI && (
+                    <Form.Item label="Organization ID" name="organization">
+                      <TextInput placeholder="[OPTIONAL] my-unique-org" />
+                    </Form.Item>
+                  )}
+                  {selectedProvider == Providers.Vertex_AI && (
+                    <Form.Item
+                      rules={[{ required: true, message: "Required" }]}
+                      label="Vertex Project"
+                      name="vertex_project"
+                    >
+                      <TextInput placeholder="adroit-cadet-1234.." />
+                    </Form.Item>
+                  )}
+                  {selectedProvider == Providers.Vertex_AI && (
+                    <Form.Item
+                      rules={[{ required: true, message: "Required" }]}
+                      label="Vertex Location"
+                      name="vertex_location"
+                    >
+                      <TextInput placeholder="us-east-1" />
+                    </Form.Item>
+                  )}
+                  {selectedProvider == Providers.Vertex_AI && (
+                    <Form.Item
+                      rules={[{ required: true, message: "Required" }]}
+                      label="Vertex Credentials"
+                      name="vertex_credentials"
+                      className="mb-0"
+                    >
+                      <Upload {...props}>
+                        <Button2 icon={<UploadOutlined />}>
+                          Click to Upload
+                        </Button2>
+                      </Upload>
+                    </Form.Item>
+                  )}
+                  {selectedProvider == Providers.Vertex_AI && (
+                    <Row>
                       <Col span={10}></Col>
                       <Col span={10}>
                         <Text className="mb-3 mt-1">
-                          Actual model name used for making{" "}
-                          <Link
-                            href="https://docs.litellm.ai/docs/providers"
-                            target="_blank"
-                          >
-                            litellm.completion() call
-                          </Link>
-                          . We&apos;ll{" "}
-                          <Link
-                            href="https://docs.litellm.ai/docs/proxy/reliability#step-1---set-deployments-on-config"
-                            target="_blank"
-                          >
-                            loadbalance
-                          </Link>{" "}
-                          models with the same &apos;public name&apos;
+                          Give litellm a gcp service account(.json file), so it
+                          can make the relevant calls
                         </Text>
                       </Col>
                     </Row>
-                                            {/* All the provider-specific fields */}
-                                            {dynamicProviderForm !== undefined &&
-                          dynamicProviderForm.fields.length > 0 && (
-                            <DynamicFields
-                              fields={dynamicProviderForm.fields}
-                              selectedProvider={dynamicProviderForm.name}
-                            />
-                          )}
-                        
-                        {selectedProvider != Providers.Bedrock &&
-                          selectedProvider != Providers.Vertex_AI &&
-                          selectedProvider != Providers.Ollama &&
-                          (dynamicProviderForm === undefined ||
-                            dynamicProviderForm.fields.length == 0) && (
-                            <Form.Item
-                              rules={[{ required: true, message: "Required" }]}
-                              label="API Key"
-                              name="api_key"
-                              tooltip="LLM API Credentials"
-                            >
-                              <TextInput placeholder="sk-" type="password" />
-                            </Form.Item>
-                          )}
-                        {selectedProvider == Providers.OpenAI && (
-                          <Form.Item label="Organization ID" name="organization">
-                            <TextInput placeholder="[OPTIONAL] my-unique-org" />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Vertex_AI && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="Vertex Project"
-                            name="vertex_project"
-                          >
-                            <TextInput placeholder="adroit-cadet-1234.." />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Vertex_AI && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="Vertex Location"
-                            name="vertex_location"
-                          >
-                            <TextInput placeholder="us-east-1" />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Vertex_AI && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="Vertex Credentials"
-                            name="vertex_credentials"
-                            className="mb-0"
-                          >
-                            <Upload {...props}>
-                              <Button2 icon={<UploadOutlined />}>
-                                Click to Upload
-                              </Button2>
-                            </Upload>
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Vertex_AI && (
-                          <Row>
-                            <Col span={10}></Col>
-                            <Col span={10}>
-                              <Text className="mb-3 mt-1">
-                                Give litellm a gcp service account(.json file), so it
-                                can make the relevant calls
-                              </Text>
-                            </Col>
-                          </Row>
-                        )}
-                        {(selectedProvider == Providers.Azure ||
-                          selectedProvider == Providers.OpenAI_Compatible) && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="API Base"
-                            name="api_base"
-                          >
-                            <TextInput placeholder="https://..." />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Azure && (
-                          <Form.Item
-                            label="API Version"
-                            name="api_version"
-                            tooltip="By default litellm will use the latest version. If you want to use a different version, you can specify it here"
-                          >
-                            <TextInput placeholder="2023-07-01-preview" />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Azure && (
-                          <div>
-                            <Form.Item
-                              label="Base Model"
-                              name="base_model"
-                              className="mb-0"
-                            >
-                              <TextInput placeholder="azure/gpt-3.5-turbo" />
-                            </Form.Item>
-                            <Row>
-                              <Col span={10}></Col>
-                              <Col span={10}>
-                                <Text className="mb-2">
-                                  The actual model your azure deployment uses. Used
-                                  for accurate cost tracking. Select name from{" "}
-                                  <Link
-                                    href="https://github.com/BerriAI/litellm/blob/main/model_prices_and_context_window.json"
-                                    target="_blank"
-                                  >
-                                    here
-                                  </Link>
-                                </Text>
-                              </Col>
-                            </Row>
-                          </div>
-                        )}
-                        {selectedProvider == Providers.Bedrock && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="AWS Access Key ID"
-                            name="aws_access_key_id"
-                            tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
-                          >
-                            <TextInput placeholder="" />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Bedrock && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="AWS Secret Access Key"
-                            name="aws_secret_access_key"
-                            tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
-                          >
-                            <TextInput placeholder="" />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Bedrock && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="AWS Region Name"
-                            name="aws_region_name"
-                            tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
-                          >
-                            <TextInput placeholder="us-east-1" />
-                          </Form.Item>
-                        )}
-                        <Form.Item
-                          label="LiteLLM Params"
-                          name="litellm_extra_params"
-                          tooltip="Optional litellm params used for making a litellm.completion() call."
-                          className="mb-0"
-                        >
-                          <TextArea
-                            rows={4}
-                            placeholder='{
-                          "rpm": 100,
-                          "timeout": 0,
-                          "stream_timeout": 0
-                        }'
-                          />
-                        </Form.Item>
-                        <Row>
-                          <Col span={10}></Col>
-                          <Col span={10}>
-                            <Text className="mb-3 mt-1">
-                              Pass JSON of litellm supported params{" "}
-                              <Link
-                                href="https://docs.litellm.ai/docs/completion/input"
-                                target="_blank"
-                              >
-                                litellm.completion() call
-                              </Link>
-                            </Text>
-                          </Col>
-                        </Row>
-                        <Form.Item
-                          label="Model Info"
-                          name="model_info_params"
-                          tooltip="Optional model info params. Returned when calling `/model/info` endpoint."
-                          className="mb-0"
-                        >
-                          <TextArea
-                            rows={4}
-                            placeholder='{
-                          "mode": "chat"
-                        }'
-                          />
-                        </Form.Item>
-
-                        <div className="flex justify-between items-center mb-4">
-                          <Tooltip title="Get help on our github">
-                            <Typography.Link href="https://github.com/BerriAI/litellm/issues">
-                              Need Help?
-                            </Typography.Link>
-                          </Tooltip>
-                          <Button2 htmlType="submit">Add Model</Button2>
-                        </div>
-                      </>
-                    </Form>
-                  </Card>
-                </TabPanel>
-
-                {/* Basic Setup Tab - Now Second */}
-                <TabPanel>
-                  <Card>
-                    <Form
-                      form={form}
-                      onFinish={handleOk}
-                      labelCol={{ span: 10 }}
-                      wrapperCol={{ span: 16 }}
-                      labelAlign="left"
+                  )}
+                  {(selectedProvider == Providers.Azure ||
+                    selectedProvider == Providers.OpenAI_Compatible) && (
+                    <Form.Item
+                      rules={[{ required: true, message: "Required" }]}
+                      label="API Base"
+                      name="api_base"
                     >
-                      <>
-                        {/* Basic setup content */}
-                        <Form.Item
-                          rules={[{ required: true, message: "Required" }]}
-                          label="Provider:"
-                          name="custom_llm_provider"
-                          tooltip="E.g. OpenAI, Azure OpenAI, Anthropic, Bedrock, etc."
-                          labelCol={{ span: 10 }}
-                          labelAlign="left"
-                        >
-                          <Select value={selectedProvider as string}>
-                            {Object.keys(Providers).map((providerKey) => (
-                              <SelectItem
-                                key={providerKey}
-                                value={Providers[providerKey as keyof typeof Providers]}
-                                onClick={() => {
-                                  setProviderModelsFn(provider_map[providerKey as keyof typeof Providers]);
-                                  setSelectedProvider(Providers[providerKey as keyof typeof Providers]);
-                                }}
-                              >
-                                <div className="flex items-center space-x-2">
-                                  <img
-                                    src={providerLogoMap[Providers[providerKey as keyof typeof Providers]]}
-                                    alt={`${Providers[providerKey as keyof typeof Providers]} logo`}
-                                    className="w-5 h-5"
-                                    onError={(e) => {
-                                      // Create a div with provider initial as fallback
-                                      const target = e.target as HTMLImageElement;
-                                      const parent = target.parentElement;
-                                      if (parent) {
-                                        const fallbackDiv = document.createElement('div');
-                                        fallbackDiv.className = 'w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-xs';
-                                        fallbackDiv.textContent = Providers[providerKey as keyof typeof Providers].charAt(0);
-                                        parent.replaceChild(fallbackDiv, target);
-                                      }
-                                    }}
-                                  />
-                                  <span>{Providers[providerKey as keyof typeof Providers]}</span>
-                                </div>
-                              </SelectItem>
-                            ))}
-                          </Select>
-                        </Form.Item>
-
-                        {/* All the provider-specific fields */}
-                        {dynamicProviderForm !== undefined &&
-                          dynamicProviderForm.fields.length > 0 && (
-                            <DynamicFields
-                              fields={dynamicProviderForm.fields}
-                              selectedProvider={dynamicProviderForm.name}
-                            />
-                          )}
-                        
-                        {selectedProvider != Providers.Bedrock &&
-                          selectedProvider != Providers.Vertex_AI &&
-                          selectedProvider != Providers.Ollama &&
-                          (dynamicProviderForm === undefined ||
-                            dynamicProviderForm.fields.length == 0) && (
-                            <Form.Item
-                              rules={[{ required: true, message: "Required" }]}
-                              label="API Key"
-                              name="api_key"
-                              tooltip="LLM API Credentials"
+                      <TextInput placeholder="https://..." />
+                    </Form.Item>
+                  )}
+                  {selectedProvider == Providers.Azure && (
+                    <Form.Item
+                      label="API Version"
+                      name="api_version"
+                      tooltip="By default litellm will use the latest version. If you want to use a different version, you can specify it here"
+                    >
+                      <TextInput placeholder="2023-07-01-preview" />
+                    </Form.Item>
+                  )}
+                  {selectedProvider == Providers.Azure && (
+                    <div>
+                      <Form.Item
+                        label="Base Model"
+                        name="base_model"
+                        className="mb-0"
+                      >
+                        <TextInput placeholder="azure/gpt-3.5-turbo" />
+                      </Form.Item>
+                      <Row>
+                        <Col span={10}></Col>
+                        <Col span={10}>
+                          <Text className="mb-2">
+                            The actual model your azure deployment uses. Used
+                            for accurate cost tracking. Select name from{" "}
+                            <Link
+                              href="https://github.com/BerriAI/litellm/blob/main/model_prices_and_context_window.json"
+                              target="_blank"
                             >
-                              <TextInput placeholder="sk-" type="password" />
-                            </Form.Item>
-                          )}
-                        {selectedProvider == Providers.OpenAI && (
-                          <Form.Item label="Organization ID" name="organization">
-                            <TextInput placeholder="[OPTIONAL] my-unique-org" />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Vertex_AI && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="Vertex Project"
-                            name="vertex_project"
-                          >
-                            <TextInput placeholder="adroit-cadet-1234.." />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Vertex_AI && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="Vertex Location"
-                            name="vertex_location"
-                          >
-                            <TextInput placeholder="us-east-1" />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Vertex_AI && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="Vertex Credentials"
-                            name="vertex_credentials"
-                            className="mb-0"
-                          >
-                            <Upload {...props}>
-                              <Button2 icon={<UploadOutlined />}>
-                                Click to Upload
-                              </Button2>
-                            </Upload>
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Vertex_AI && (
-                          <Row>
-                            <Col span={10}></Col>
-                            <Col span={10}>
-                              <Text className="mb-3 mt-1">
-                                Give litellm a gcp service account(.json file), so it
-                                can make the relevant calls
-                              </Text>
-                            </Col>
-                          </Row>
-                        )}
-                        {(selectedProvider == Providers.Azure ||
-                          selectedProvider == Providers.OpenAI_Compatible) && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="API Base"
-                            name="api_base"
-                          >
-                            <TextInput placeholder="https://..." />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Azure && (
-                          <Form.Item
-                            label="API Version"
-                            name="api_version"
-                            tooltip="By default litellm will use the latest version. If you want to use a different version, you can specify it here"
-                          >
-                            <TextInput placeholder="2023-07-01-preview" />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Azure && (
-                          <div>
-                            <Form.Item
-                              label="Base Model"
-                              name="base_model"
-                              className="mb-0"
-                            >
-                              <TextInput placeholder="azure/gpt-3.5-turbo" />
-                            </Form.Item>
-                            <Row>
-                              <Col span={10}></Col>
-                              <Col span={10}>
-                                <Text className="mb-2">
-                                  The actual model your azure deployment uses. Used
-                                  for accurate cost tracking. Select name from{" "}
-                                  <Link
-                                    href="https://github.com/BerriAI/litellm/blob/main/model_prices_and_context_window.json"
-                                    target="_blank"
-                                  >
-                                    here
-                                  </Link>
-                                </Text>
-                              </Col>
-                            </Row>
-                          </div>
-                        )}
-                        {selectedProvider == Providers.Bedrock && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="AWS Access Key ID"
-                            name="aws_access_key_id"
-                            tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
-                          >
-                            <TextInput placeholder="" />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Bedrock && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="AWS Secret Access Key"
-                            name="aws_secret_access_key"
-                            tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
-                          >
-                            <TextInput placeholder="" />
-                          </Form.Item>
-                        )}
-                        {selectedProvider == Providers.Bedrock && (
-                          <Form.Item
-                            rules={[{ required: true, message: "Required" }]}
-                            label="AWS Region Name"
-                            name="aws_region_name"
-                            tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
-                          >
-                            <TextInput placeholder="us-east-1" />
-                          </Form.Item>
-                        )}
+                              here
+                            </Link>
+                          </Text>
+                        </Col>
+                      </Row>
+                    </div>
+                  )}
+                  {selectedProvider == Providers.Bedrock && (
+                    <Form.Item
+                      rules={[{ required: true, message: "Required" }]}
+                      label="AWS Access Key ID"
+                      name="aws_access_key_id"
+                      tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
+                    >
+                      <TextInput placeholder="" />
+                    </Form.Item>
+                  )}
+                  {selectedProvider == Providers.Bedrock && (
+                    <Form.Item
+                      rules={[{ required: true, message: "Required" }]}
+                      label="AWS Secret Access Key"
+                      name="aws_secret_access_key"
+                      tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
+                    >
+                      <TextInput placeholder="" />
+                    </Form.Item>
+                  )}
+                  {selectedProvider == Providers.Bedrock && (
+                    <Form.Item
+                      rules={[{ required: true, message: "Required" }]}
+                      label="AWS Region Name"
+                      name="aws_region_name"
+                      tooltip="You can provide the raw key or the environment variable (e.g. `os.environ/MY_SECRET_KEY`)."
+                    >
+                      <TextInput placeholder="us-east-1" />
+                    </Form.Item>
+                  )}
 
-                        <div className="flex justify-between items-center mb-4">
-                          <Tooltip title="Get help on our github">
-                            <Typography.Link href="https://github.com/BerriAI/litellm/issues">
-                              Need Help?
-                            </Typography.Link>
-                          </Tooltip>
-                          <Button2 htmlType="submit">Add Model</Button2>
-                        </div>
-                      </>
-                    </Form>
-                  </Card>
-                </TabPanel>
-              </TabPanels>
-            </TabGroup>
+                  <AdvancedSettings 
+                    showAdvancedSettings={showAdvancedSettings}
+                    setShowAdvancedSettings={setShowAdvancedSettings}
+                  />
+                  
+
+                  <div className="flex justify-between items-center mb-4">
+                    <Tooltip title="Get help on our github">
+                      <Typography.Link href="https://github.com/BerriAI/litellm/issues">
+                        Need Help?
+                      </Typography.Link>
+                    </Tooltip>
+                    <Button2 htmlType="submit">Add Model</Button2>
+                  </div>
+                </>
+              </Form>
+            </Card>
           </TabPanel>
           <TabPanel>
             <Card>
diff --git a/ui/litellm-dashboard/src/components/provider_info_helpers.tsx b/ui/litellm-dashboard/src/components/provider_info_helpers.tsx
index 1e7f29ddb17..940cdefb28d 100644
--- a/ui/litellm-dashboard/src/components/provider_info_helpers.tsx
+++ b/ui/litellm-dashboard/src/components/provider_info_helpers.tsx
@@ -6,13 +6,13 @@ export enum Providers {
     Azure = "Azure",
     Azure_AI_Studio = "Azure AI Studio",
     Anthropic = "Anthropic",
+    Vertex_AI = "Vertex AI (Anthropic, Gemini, etc.)",
     Google_AI_Studio = "Google AI Studio",
     Bedrock = "Amazon Bedrock",
     Groq = "Groq",
     MistralAI = "Mistral AI",
     Deepseek = "Deepseek",
     OpenAI_Compatible = "OpenAI-Compatible Endpoints (Together AI, etc.)",
-    Vertex_AI = "Vertex AI (Anthropic, Gemini, etc.)",
     Cohere = "Cohere",
     Databricks = "Databricks",
     Ollama = "Ollama",