phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

(docs) custom ui branding

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

50
docs/my-website/docs/proxy/ui.md
View file

@ -53,10 +53,11 @@ UI_PASSWORD=langchain
On accessing the LiteLLM UI, you will be prompted to enter your username, password 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. Control the upperbound that users can use for `max_budget`, `budget_duration` or any `key/generate` param per key.
```yaml ```yaml
@ -71,7 +72,7 @@ litellm_settings:
- Send a `/key/generate` request with `max_budget=200` - Send a `/key/generate` request with `max_budget=200`
- Key will be created with `max_budget=100` since 100 is the upper bound - 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> <Tabs>
<TabItem value="google" label="Google SSO"> <TabItem value="google" label="Google SSO">
@ -147,24 +148,24 @@ GENERIC_SCOPE = "openid profile email" # default scope openid is sometimes not e
</Tabs> </Tabs>
### Step 3. Test flow #### Step 3. Test flow
<Image img={require('../../img/litellm_ui_3.gif')} /> <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 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')} /> <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 ```env
export PROXY_ADMIN_ID="116544810872468347480" 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')} /> <Image img={require('../../img/litellm_ui_admin.png')} />
@ -173,3 +174,36 @@ 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. 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

BIN
docs/my-website/img/litellm_custom_ai.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 90 KiB