(docs) custom ui branding

This commit is contained in:
ishaan-jaff 2024-02-21 22:07:35 -08:00
parent bfdacf6d6b
commit f04b67c433
2 changed files with 43 additions and 9 deletions

View file

@ -53,10 +53,11 @@ UI_PASSWORD=langchain
On accessing the LiteLLM UI, you will be prompted to enter your username, password
## ✨ Enterprise Features
## Setup SSO/Auth for UI
### Setup SSO/Auth for UI
### Step 1: Set upperbounds for keys
#### Step 1: Set upperbounds for keys
Control the upperbound that users can use for `max_budget`, `budget_duration` or any `key/generate` param per key.
```yaml
@ -71,7 +72,7 @@ litellm_settings:
- Send a `/key/generate` request with `max_budget=200`
- Key will be created with `max_budget=100` since 100 is the upper bound
### Step 2: Setup Oauth Client
#### Step 2: Setup Oauth Client
<Tabs>
<TabItem value="google" label="Google SSO">
@ -147,24 +148,24 @@ GENERIC_SCOPE = "openid profile email" # default scope openid is sometimes not e
</Tabs>
### Step 3. Test flow
#### Step 3. Test flow
<Image img={require('../../img/litellm_ui_3.gif')} />
## Set Admin view w/ SSO
### Set Admin view w/ SSO
You just need to set Proxy Admin ID
### Step 1: Copy your ID from the UI
#### Step 1: Copy your ID from the UI
<Image img={require('../../img/litellm_ui_copy_id.png')} />
### Step 2: Set it in your .env as the PROXY_ADMIN_ID
#### Step 2: Set it in your .env as the PROXY_ADMIN_ID
```env
export PROXY_ADMIN_ID="116544810872468347480"
```
### Step 3: See all proxy keys
#### Step 3: See all proxy keys
<Image img={require('../../img/litellm_ui_admin.png')} />
@ -172,4 +173,37 @@ export PROXY_ADMIN_ID="116544810872468347480"
If you don't see all your keys this could be due to a cached token. So just re-login and it should work.
:::
:::
### Custom Branding Admin UI
Use your companies custom branding on the LiteLLM Admin UI
We allow you to
- Customize the UI Logo
- Customize the UI color scheme
<Image img={require('../../img/litellm_custom_ai.png')} />
#### Usage
- Navigate to [/enterprise/enterprise_ui](https://github.com/BerriAI/litellm/blob/main/enterprise/enterprise_ui/_enterprise_colors.json)
- Inside the `enterprise_ui` directory, rename `_enterprise_colors.json` to `enterprise_colors.json`
- Set your companies custom color scheme in `enterprise_colors.json`
Example contents of `enterprise_colors.json`
Set your colors to any of the following colors: https://www.tremor.so/docs/layout/color-palette#default-colors
```json
{
"brand": {
"DEFAULT": "teal",
"faint": "teal",
"muted": "teal",
"subtle": "teal",
"emphasis": "teal",
"inverted": "teal"
}
}
```
- Set the path to your custom png/jpg logo as `UI_LOGO_PATH` in your .env
- Deploy LiteLLM Proxy Server

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB