From fa0ef8271e903d554596531b250c22abacf2f3bf Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Sat, 20 Apr 2024 19:00:38 -0700 Subject: [PATCH] ui - show team name on the top --- ui/litellm-dashboard/src/app/page.tsx | 3 + .../src/components/api_ref.tsx | 153 ++++++++++++++++++ .../src/components/leftnav.tsx | 13 +- .../src/components/view_user_spend.tsx | 2 +- .../src/components/view_user_team.tsx | 19 +-- 5 files changed, 169 insertions(+), 21 deletions(-) create mode 100644 ui/litellm-dashboard/src/components/api_ref.tsx diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx index 0a7cc6403f..f20f0aee7c 100644 --- a/ui/litellm-dashboard/src/app/page.tsx +++ b/ui/litellm-dashboard/src/app/page.tsx @@ -9,6 +9,7 @@ import Teams from "@/components/teams"; import AdminPanel from "@/components/admins"; import Settings from "@/components/settings"; import GeneralSettings from "@/components/general_settings"; +import APIRef from "@/components/api_ref"; import ChatUI from "@/components/chat_ui"; import Sidebar from "../components/leftnav"; import Usage from "../components/usage"; @@ -165,6 +166,8 @@ const CreateKeyPage = () => { accessToken={accessToken} showSSOBanner={showSSOBanner} /> + ) : page == "api_ref" ? ( + ) : page == "settings" ? ( { + return ( + <> + +
+ + OpenAI Compatible Proxy: API Reference + LiteLLM is OpenAI Compatible. This means your API Key works with the OpenAI SDK. Just replace the base_url to point to your litellm proxy. Example Below + + + + OpenAI Python SDK + LlamaIndex + Langchain Py + + + + + {` +import openai +client = openai.OpenAI( + api_key="your_api_key", + base_url="http://0.0.0.0:4000" # LiteLLM Proxy is OpenAI compatible, Read More: https://docs.litellm.ai/docs/proxy/user_keys +) + +response = client.chat.completions.create( + model="gpt-3.5-turbo", # model to send to the proxy + messages = [ + { + "role": "user", + "content": "this is a test request, write a short poem" + } + ] +) + +print(response) + `} + + + + + {` +import os, dotenv + +from llama_index.llms import AzureOpenAI +from llama_index.embeddings import AzureOpenAIEmbedding +from llama_index import VectorStoreIndex, SimpleDirectoryReader, ServiceContext + +llm = AzureOpenAI( + engine="azure-gpt-3.5", # model_name on litellm proxy + temperature=0.0, + azure_endpoint="http://0.0.0.0:4000", # litellm proxy endpoint + api_key="sk-1234", # litellm proxy API Key + api_version="2023-07-01-preview", +) + +embed_model = AzureOpenAIEmbedding( + deployment_name="azure-embedding-model", + azure_endpoint="http://0.0.0.0:4000", + api_key="sk-1234", + api_version="2023-07-01-preview", +) + + +documents = SimpleDirectoryReader("llama_index_data").load_data() +service_context = ServiceContext.from_defaults(llm=llm, embed_model=embed_model) +index = VectorStoreIndex.from_documents(documents, service_context=service_context) + +query_engine = index.as_query_engine() +response = query_engine.query("What did the author do growing up?") +print(response) + + `} + + + + + {` +from langchain.chat_models import ChatOpenAI +from langchain.prompts.chat import ( + ChatPromptTemplate, + HumanMessagePromptTemplate, + SystemMessagePromptTemplate, +) +from langchain.schema import HumanMessage, SystemMessage + +chat = ChatOpenAI( + openai_api_base="http://0.0.0.0:4000", + model = "gpt-3.5-turbo", + temperature=0.1 +) + +messages = [ + SystemMessage( + content="You are a helpful assistant that im using to make a test request to." + ), + HumanMessage( + content="test from litellm. tell me why it's amazing in 1 sentence" + ), +] +response = chat(messages) + +print(response) + + `} + + + + + + +
+ + + + + ) +} + +export default APIRef; + diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx index dd6ef09707..08e37b744a 100644 --- a/ui/litellm-dashboard/src/components/leftnav.tsx +++ b/ui/litellm-dashboard/src/components/leftnav.tsx @@ -46,8 +46,8 @@ const Sidebar: React.FC = ({ ); } return ( - - + + = ({ Test Key + { + userRole == "App User" ? ( + setPage("api_ref")}> + + API Reference + + + ) : null + } { userRole == "Admin" ? ( setPage("models")}> diff --git a/ui/litellm-dashboard/src/components/view_user_spend.tsx b/ui/litellm-dashboard/src/components/view_user_spend.tsx index be7494a1b9..d4b446e4ea 100644 --- a/ui/litellm-dashboard/src/components/view_user_spend.tsx +++ b/ui/litellm-dashboard/src/components/view_user_spend.tsx @@ -80,7 +80,7 @@ const ViewUserSpend: React.FC = ({ userID, userRole, accessT return ( <>

Total Spend

-

${roundedSpend}

+

${roundedSpend}

) diff --git a/ui/litellm-dashboard/src/components/view_user_team.tsx b/ui/litellm-dashboard/src/components/view_user_team.tsx index 0101c93df6..cbc58e5f70 100644 --- a/ui/litellm-dashboard/src/components/view_user_team.tsx +++ b/ui/litellm-dashboard/src/components/view_user_team.tsx @@ -53,7 +53,6 @@ const ViewUserTeam: React.FC = ({ userID, userRole, selectedT fetchUserModels(); }, [accessToken, userID, userRole]); - if (userRole !== 'App User') return null; // logic to decide what models to display let modelsToDisplay = []; @@ -69,24 +68,8 @@ const ViewUserTeam: React.FC = ({ userID, userRole, selectedT return ( <>
-

Team: {selectedTeam?.team_alias}

- - - Team Models - - - - {modelsToDisplay.map((model: string, index: number) => ( - - {model} - - ))} - - - +

{selectedTeam?.team_alias}

- - ) }