Merge pull request #1649 from BerriAI/litellm_dashboard_v_2

build(ui/litellm-dashboard): initial commit of litellm dashboard

.gitignore

@@ -35,3 +35,8 @@ hosted_config.yaml
 litellm/proxy/tests/node_modules
 litellm/proxy/tests/package.json
 litellm/proxy/tests/package-lock.json
+ui/litellm-dashboard/.next
+ui/litellm-dashboard/node_modules
+ui/litellm-dashboard/next-env.d.ts
+ui/litellm-dashboard/package.json
+ui/litellm-dashboard/package-lock.json

litellm/proxy/_types.py

@@ -141,11 +141,33 @@ class GenerateRequestBase(LiteLLMBase):
 
 class GenerateKeyRequest(GenerateRequestBase):
     key_alias: Optional[str] = None
-    duration: Optional[str] = "1h"
+    duration: Optional[str] = None
     aliases: Optional[dict] = {}
     config: Optional[dict] = {}
 
 
+class GenerateKeyResponse(GenerateKeyRequest):
+    key: str
+    key_name: Optional[str] = None
+    expires: Optional[datetime]
+    user_id: str
+
+    @root_validator(pre=True)
+    def set_model_info(cls, values):
+        if values.get("token") is not None:
+            values.update({"key": values.get("token")})
+        dict_fields = ["metadata", "aliases", "config"]
+        for field in dict_fields:
+            value = values.get(field)
+            if value is not None and isinstance(value, str):
+                try:
+                    values[field] = json.loads(value)
+                except json.JSONDecodeError:
+                    raise ValueError(f"Field {field} should be a valid dictionary")
+
+        return values
+
+
 class UpdateKeyRequest(GenerateKeyRequest):
     # Note: the defaults of all Params here MUST BE NONE
     # else they will get overwritten
@@ -174,12 +196,6 @@ class UserAPIKeyAuth(LiteLLMBase):  # the expected response object for user api
     rpm_limit: Optional[int] = None
 
 
-class GenerateKeyResponse(LiteLLMBase):
-    key: str
-    expires: Optional[datetime]
-    user_id: str
-
-
 class DeleteKeyRequest(LiteLLMBase):
     keys: List
 

litellm/proxy/proxy_cli.py

@@ -190,17 +190,27 @@ def run_server(
     global feature_telemetry
     args = locals()
     if local:
-        from proxy_server import app, save_worker_config, usage_telemetry
+        from proxy_server import app, save_worker_config, usage_telemetry, ProxyConfig
     else:
         try:
-            from .proxy_server import app, save_worker_config, usage_telemetry
+            from .proxy_server import (
+                app,
+                save_worker_config,
+                usage_telemetry,
+                ProxyConfig,
+            )
         except ImportError as e:
             if "litellm[proxy]" in str(e):
                 # user is missing a proxy dependency, ask them to pip install litellm[proxy]
                 raise e
             else:
                 # this is just a local/relative import error, user git cloned litellm
-                from proxy_server import app, save_worker_config, usage_telemetry
+                from proxy_server import (
+                    app,
+                    save_worker_config,
+                    usage_telemetry,
+                    ProxyConfig,
+                )
     feature_telemetry = usage_telemetry
     if version == True:
         pkg_version = importlib.metadata.version("litellm")
@@ -373,16 +383,16 @@ def run_server(
             read from there and save it to os.env['DATABASE_URL']
             """
             try:
-                import yaml
+                import yaml, asyncio
             except:
                 raise ImportError(
                     "yaml needs to be imported. Run - `pip install 'litellm[proxy]'`"
                 )
 
-            if os.path.exists(config):
-                with open(config, "r") as config_file:
-                    config = yaml.safe_load(config_file)
-            general_settings = config.get("general_settings", {})
+            proxy_config = ProxyConfig()
+            _, _, general_settings = asyncio.run(
+                proxy_config.load_config(router=None, config_file_path=config)
+            )
             database_url = general_settings.get("database_url", None)
             if database_url and database_url.startswith("os.environ/"):
                 original_dir = os.getcwd()

litellm/proxy/proxy_server.py

@@ -516,11 +516,15 @@ async def user_api_key_auth(
                 )
 
             if (
-                (route.startswith("/key/") or route.startswith("/user/"))
-                or route.startswith("/model/")
-                and not is_master_key_valid
-                and general_settings.get("allow_user_auth", False) != True
+                (
+                    route.startswith("/key/")
+                    or route.startswith("/user/")
+                    or route.startswith("/model/")
+                )
+                and (not is_master_key_valid)
+                and (not general_settings.get("allow_user_auth", False))
             ):
+                assert not general_settings.get("allow_user_auth", False)
                 if route == "/key/info":
                     # check if user can access this route
                     query_params = request.query_params
@@ -547,7 +551,7 @@ async def user_api_key_auth(
                     pass
                 else:
                     raise Exception(
-                        f"If master key is set, only master key can be used to generate, delete, update or get info for new keys/users"
+                        f"only master key can be used to generate, delete, update or get info for new keys/users."
                     )
 
             return UserAPIKeyAuth(api_key=api_key, **valid_token_dict)
@@ -1383,12 +1387,7 @@ async def generate_key_helper_fn(
     except Exception as e:
         traceback.print_exc()
         raise HTTPException(status_code=status.HTTP_500_INTERNAL_SERVER_ERROR)
-    return {
-        "token": token,
-        "expires": expires,
-        "user_id": user_id,
-        "max_budget": max_budget,
-    }
+    return key_data
 
 
 async def delete_verification_token(tokens: List):
@@ -2397,12 +2396,9 @@ async def generate_key_fn(
             data_json["key_budget_duration"] = data_json.pop("budget_duration", None)
 
         response = await generate_key_helper_fn(**data_json)
-        return GenerateKeyResponse(
-            key=response["token"],
-            expires=response["expires"],
-            user_id=response["user_id"],
-        )
+        return GenerateKeyResponse(**response)
     except Exception as e:
+        traceback.print_exc()
         if isinstance(e, HTTPException):
             raise ProxyException(
                 message=getattr(e, "detail", f"Authentication Error({str(e)})"),
@@ -2943,11 +2939,17 @@ async def google_callback(code: str, request: Request):
 
             key = response["token"]  # type: ignore
             user_id = response["user_id"]  # type: ignore
-            return RedirectResponse(url="chat.openai.com")
-            # return RedirectResponse(url=google_auth_url)
-            # return JSONResponse(
-            #     content={"key": key, "user_id": user_id}, status_code=200
-            # )
+            litellm_dashboard_ui = "http://localhost:3000"
+
+            litellm_dashboard_ui += (
+                "?userID="
+                + user_id
+                + "&accessToken="
+                + key
+                + "&proxyBaseUrl="
+                + os.getenv("GOOGLE_REDIRECT_URI")
+            )
+            return RedirectResponse(url=litellm_dashboard_ui)
 
         else:
             # Handle user info retrieval error

litellm/utils.py

@@ -2190,7 +2190,6 @@ def client(original_function):
             result = original_function(*args, **kwargs)
             end_time = datetime.datetime.now()
             if "stream" in kwargs and kwargs["stream"] == True:
-                # TODO: Add to cache for streaming
                 if (
                     "complete_response" in kwargs
                     and kwargs["complete_response"] == True

ui/litellm-dashboard/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

ui/litellm-dashboard/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

ui/litellm-dashboard/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

ui/litellm-dashboard/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "litellm-dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.18",
+    "@headlessui/tailwindcss": "^0.2.0",
+    "@heroicons/react": "^1.0.6",
+    "@remixicon/react": "^4.1.1",
+    "@tremor/react": "^3.13.3",
+    "antd": "^5.13.2",
+    "next": "14.1.0",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "@types/node": "^20",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "5.3.3"
+  }
+}

ui/litellm-dashboard/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

ui/litellm-dashboard/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

ui/litellm-dashboard/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

ui/litellm-dashboard/src/app/globals.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+/* @media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+} */
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

ui/litellm-dashboard/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

ui/litellm-dashboard/src/app/page.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Navbar from "../components/navbar";
+import UserDashboard from "../components/user_dashboard";
+const CreateKeyPage = () => {
+  return (
+    <div className="flex min-h-screen flex-col items-center">
+      <Navbar />
+      <UserDashboard />
+    </div>
+  );
+};
+
+export default CreateKeyPage;

ui/litellm-dashboard/src/components/create_key_button.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Button, TextInput, Grid, Col } from "@tremor/react";
+import { message } from "antd";
+import { Card, Metric, Text } from "@tremor/react";
+import { keyCreateCall } from "./networking";
+// Define the props type
+interface CreateKeyProps {
+  userID: string;
+  accessToken: string;
+  proxyBaseUrl: string;
+  data: any[] | null;
+  setData: React.Dispatch<React.SetStateAction<any[] | null>>;
+}
+
+import { Modal, Button as Button2 } from "antd";
+
+const CreateKey: React.FC<CreateKeyProps> = ({
+  userID,
+  accessToken,
+  proxyBaseUrl,
+  data,
+  setData,
+}) => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [apiKey, setApiKey] = useState(null);
+  const handleOk = () => {
+    // Handle the OK action
+    console.log("OK Clicked");
+    setIsModalVisible(false);
+  };
+
+  const handleCancel = () => {
+    // Handle the cancel action or closing the modal
+    console.log("Modal closed");
+    setIsModalVisible(false);
+    setApiKey(null);
+  };
+
+  const handleCreate = async () => {
+    if (data == null) {
+      return;
+    }
+    try {
+      message.info("Making API Call");
+      setIsModalVisible(true);
+      const response = await keyCreateCall(proxyBaseUrl, accessToken, userID);
+      // Successfully completed the deletion. Update the state to trigger a rerender.
+      setData([...data, response]);
+      setApiKey(response["key"]);
+      message.success("API Key Created");
+    } catch (error) {
+      console.error("Error deleting the key:", error);
+      // Handle any error situations, such as displaying an error message to the user.
+    }
+  };
+
+  return (
+    <div>
+      <Button className="mx-auto" onClick={handleCreate}>
+        + Create New Key
+      </Button>
+      <Modal
+        title="Save your key"
+        open={isModalVisible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+      >
+        <Grid numItems={1} className="gap-2 w-full">
+          <Col numColSpan={1}>
+            <p>
+              Please save this secret key somewhere safe and accessible. For
+              security reasons, <b>you won't be able to view it again</b>{" "}
+              through your LiteLLM account. If you lose this secret key, you'll
+              need to generate a new one.
+            </p>
+          </Col>
+          <Col numColSpan={1}>
+            {apiKey != null ? (
+              <Text>API Key: {apiKey}</Text>
+            ) : (
+              <Text>Key being created, this might take 30s</Text>
+            )}
+          </Col>
+        </Grid>
+      </Modal>
+    </div>
+  );
+};
+
+export default CreateKey;

ui/litellm-dashboard/src/components/enter_proxy_url.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import React, { useState, ChangeEvent } from "react";
+import { Button, Col, Grid, TextInput } from "@tremor/react";
+import { Card, Text } from "@tremor/react";
+
+const EnterProxyUrl: React.FC = () => {
+  const [proxyUrl, setProxyUrl] = useState<string>("");
+  const [isUrlSaved, setIsUrlSaved] = useState<boolean>(false);
+
+  const handleUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setProxyUrl(event.target.value);
+    // Reset the saved status when the URL changes
+    setIsUrlSaved(false);
+  };
+
+  const handleSaveClick = () => {
+    // You can perform any additional validation or actions here
+    // For now, let's just display the message
+    setIsUrlSaved(true);
+  };
+
+  // Construct the URL for clicking
+  const clickableUrl = `${window.location.href}?proxyBaseUrl=${proxyUrl}`;
+
+  return (
+    <div>
+      <Card decoration="top" decorationColor="blue" style={{ width: '1000px' }}>
+        <Text>Admin Configuration</Text>
+        <label htmlFor="proxyUrl">Enter Proxy URL:</label>
+        <TextInput
+          type="text"
+          id="proxyUrl"
+          value={proxyUrl}
+          onChange={handleUrlChange}
+          placeholder="https://your-proxy-endpoint.com"
+        />
+        <Button onClick={handleSaveClick} className="gap-2">Save</Button>
+        {/* Display message if the URL is saved */}
+        {isUrlSaved && (
+          <div>
+            <Grid numItems={1} className="gap-2">
+            <Col>
+            <p>
+              Proxy Admin UI (Save this URL): {clickableUrl}
+            </p>
+            </Col>
+            <Col>
+            <p>
+              Get Started with Proxy Admin UI  👉 
+              <a href={clickableUrl} target="_blank" rel="noopener noreferrer" style={{ color: 'blue', textDecoration: 'underline' }}>
+                {clickableUrl}
+              </a>
+            </p>
+            </Col>
+            </Grid>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+};
+
+export default EnterProxyUrl;

ui/litellm-dashboard/src/components/navbar.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import Image from 'next/image'
+import React, { useState } from 'react';
+function Navbar() {
+    return (
+        <nav className="left-0 right-0 top-0 flex justify-between items-center h-12">
+            <div className="text-left mx-4 my-2 absolute top-0 left-0">
+                <div className="flex flex-col items-center">
+                <Link href="/">
+                    <button className="text-gray-800 text-2xl px-4 py-1 rounded text-center">🚅 LiteLLM</button>
+                </Link>
+            </div>
+            </div>
+            <div className="text-right mx-4 my-2 absolute top-0 right-0">
+            <a href="https://docs.litellm.ai/docs/" target="_blank" rel="noopener noreferrer">
+                <button className="border border-gray-800 rounded-lg text-gray-800 text-xl px-4 py-1 rounded p-1 mr-2 text-center">Docs</button>
+            </a>
+            <a href="https://calendly.com/d/4mp-gd3-k5k/berriai-1-1-onboarding-litellm-hosted-version" target="_blank" rel="noopener noreferrer">
+                <button className="border border-gray-800 rounded-lg text-gray-800 text-xl px-4 py-1 rounded p-1 text-center">Schedule Demo</button>
+            </a>
+            </div>
+        </nav>
+    )
+}
+
+export default Navbar;

ui/litellm-dashboard/src/components/networking.tsx

@@ -0,0 +1,98 @@
+/**
+ * Helper file for calls being made to proxy
+ */
+
+export const keyCreateCall = async (
+  proxyBaseUrl: String,
+  accessToken: String,
+  userID: String
+) => {
+  try {
+    const response = await fetch(`${proxyBaseUrl}/key/generate`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        team_id: "core-infra-4",
+        max_budget: 10,
+        user_id: userID,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    console.log(data);
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+};
+
+export const keyDeleteCall = async (
+  proxyBaseUrl: String,
+  accessToken: String,
+  user_key: String
+) => {
+  try {
+    const response = await fetch(`${proxyBaseUrl}/key/delete`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        keys: [user_key],
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    console.log(data);
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+};
+
+export const userInfoCall = async (
+  proxyBaseUrl: String,
+  accessToken: String,
+  userID: String
+) => {
+  try {
+    const response = await fetch(
+      `${proxyBaseUrl}/user/info?user_id=${userID}`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    console.log(data);
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+};

ui/litellm-dashboard/src/components/user_dashboard.tsx

@@ -0,0 +1,80 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { userInfoCall } from "./networking";
+import { Grid, Col, Card, Text } from "@tremor/react";
+import CreateKey from "./create_key_button";
+import ViewKeyTable from "./view_key_table";
+import EnterProxyUrl from "./enter_proxy_url";
+import { useSearchParams } from "next/navigation";
+
+const UserDashboard = () => {
+  const [data, setData] = useState<null | any[]>(null); // Keep the initialization of state here
+  // Assuming useSearchParams() hook exists and works in your setup
+  const searchParams = useSearchParams();
+  const userID = searchParams.get("userID");
+  const accessToken = searchParams.get("accessToken");
+  const proxyBaseUrl = searchParams.get("proxyBaseUrl");
+
+  // Moved useEffect inside the component and used a condition to run fetch only if the params are available
+  useEffect(() => {
+    if (userID && accessToken && proxyBaseUrl && !data) {
+      const fetchData = async () => {
+        try {
+          const response = await userInfoCall(
+            proxyBaseUrl,
+            accessToken,
+            userID
+          );
+          setData(response["keys"]); // Assuming this is the correct path to your data
+        } catch (error) {
+          console.error("There was an error fetching the data", error);
+          // Optionally, update your UI to reflect the error state here as well
+        }
+      };
+      fetchData();
+    }
+  }, [userID, accessToken, proxyBaseUrl, data]);
+
+  if (proxyBaseUrl == null) {
+    return (
+      <div>
+        <EnterProxyUrl />
+      </div>
+    );
+  }
+  else if (userID == null || accessToken == null) {
+    // redirect to page: ProxyBaseUrl/google-login/key/generate
+    const baseUrl = proxyBaseUrl.endsWith('/') ? proxyBaseUrl : proxyBaseUrl + '/';
+  
+    // Now you can construct the full URL
+    const url = `${baseUrl}google-login/key/generate`;
+
+    window.location.href = url;
+    
+
+    return null;
+  }
+  
+  return (
+    <Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
+      <Col numColSpan={1}>
+        <ViewKeyTable
+          userID={userID}
+          accessToken={accessToken}
+          proxyBaseUrl={proxyBaseUrl}
+          data={data}
+          setData={setData}
+        />
+        <CreateKey
+          userID={userID}
+          accessToken={accessToken}
+          proxyBaseUrl={proxyBaseUrl}
+          data={data}
+          setData={setData}
+        />
+      </Col>
+    </Grid>
+  );
+};
+
+export default UserDashboard;

ui/litellm-dashboard/src/components/view_key_table.tsx

@@ -0,0 +1,99 @@
+"use client";
+import React, { useEffect } from "react";
+import { keyDeleteCall } from "./networking";
+import { StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline";
+import {
+  Badge,
+  Card,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  Text,
+  Title,
+  Icon,
+} from "@tremor/react";
+
+// Define the props type
+interface ViewKeyTableProps {
+  userID: string;
+  accessToken: string;
+  proxyBaseUrl: string;
+  data: any[] | null;
+  setData: React.Dispatch<React.SetStateAction<any[] | null>>;
+}
+
+const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
+  userID,
+  accessToken,
+  proxyBaseUrl,
+  data,
+  setData,
+}) => {
+  const handleDelete = async (token: String) => {
+    if (data == null) {
+      return;
+    }
+    try {
+      await keyDeleteCall(proxyBaseUrl, accessToken, token);
+      // Successfully completed the deletion. Update the state to trigger a rerender.
+      const filteredData = data.filter((item) => item.token !== token);
+      setData(filteredData);
+    } catch (error) {
+      console.error("Error deleting the key:", error);
+      // Handle any error situations, such as displaying an error message to the user.
+    }
+  };
+
+  if (data == null) {
+    return;
+  }
+  console.log("RERENDER TRIGGERED");
+  return (
+    <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh] mb-4">
+      <Title>API Keys</Title>
+      <Table className="mt-5">
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell>Secret Key</TableHeaderCell>
+            <TableHeaderCell>Spend</TableHeaderCell>
+            <TableHeaderCell>Expires</TableHeaderCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map((item) => {
+            console.log(item);
+            return (
+              <TableRow key={item.token}>
+                <TableCell>
+                  <Text>{item.key_name}</Text>
+                </TableCell>
+                <TableCell>
+                  <Text>{item.spend}</Text>
+                </TableCell>
+                <TableCell>
+                  {item.expires != null ? (
+                    <Text>{item.expires}</Text>
+                  ) : (
+                    <Text>Never expires</Text>
+                  )}
+                </TableCell>
+                <TableCell>
+                  <Icon
+                    onClick={() => handleDelete(item.token)}
+                    icon={TrashIcon}
+                    size="xs"
+                  />
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </Card>
+  );
+};
+
+export default ViewKeyTable;

ui/litellm-dashboard/tailwind.config.js

@@ -0,0 +1,130 @@
+/** @type {import('tailwindcss').Config} */ 
+
+const colors = require("tailwindcss/colors");
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: "class",
+  theme: {
+    transparent: "transparent",
+    current: "currentColor",
+    extend: {
+      colors: {
+        // light mode
+        tremor: {
+          brand: {
+            faint: colors.blue[50],
+            muted: colors.blue[200],
+            subtle: colors.blue[400],
+            DEFAULT: colors.blue[500],
+            emphasis: colors.blue[700],
+            inverted: colors.white,
+          },
+          background: {
+            muted: colors.gray[50],
+            subtle: colors.gray[100],
+            DEFAULT: colors.white,
+            emphasis: colors.gray[700],
+          },
+          border: {
+            DEFAULT: colors.gray[200],
+          },
+          ring: {
+            DEFAULT: colors.gray[200],
+          },
+          content: {
+            subtle: colors.gray[400],
+            DEFAULT: colors.gray[500],
+            emphasis: colors.gray[700],
+            strong: colors.gray[900],
+            inverted: colors.white,
+          },
+        },
+        // dark mode
+        "dark-tremor": {
+          brand: {
+            faint: "#0B1229",
+            muted: colors.blue[950],
+            subtle: colors.blue[800],
+            DEFAULT: colors.blue[500],
+            emphasis: colors.blue[400],
+            inverted: colors.blue[950],
+          },
+          background: {
+            muted: "#131A2B",
+            subtle: colors.gray[800],
+            DEFAULT: colors.gray[900],
+            emphasis: colors.gray[300],
+          },
+          border: {
+            DEFAULT: colors.gray[700],
+          },
+          ring: {
+            DEFAULT: colors.gray[800],
+          },
+          content: {
+            subtle: colors.gray[600],
+            DEFAULT: colors.gray[500],
+            emphasis: colors.gray[200],
+            strong: colors.gray[50],
+            inverted: colors.gray[950],
+          },
+        },
+      },
+      boxShadow: {
+        // light
+        "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        "tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        "tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        // dark
+        "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        "dark-tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        "dark-tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      },
+      borderRadius: {
+        "tremor-small": "0.375rem",
+        "tremor-default": "0.5rem",
+        "tremor-full": "9999px",
+      },
+      fontSize: {
+        "tremor-label": ["0.75rem", { lineHeight: "1rem" }],
+        "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
+        "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
+        "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
+      },
+    },
+  },
+  safelist: [
+    {
+      pattern:
+        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ["hover", "ui-selected"],
+    },
+    {
+      pattern:
+        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ["hover", "ui-selected"],
+    },
+    {
+      pattern:
+        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ["hover", "ui-selected"],
+    },
+    {
+      pattern:
+        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    },
+    {
+      pattern:
+        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    },
+    {
+      pattern:
+        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    },
+  ],
+  plugins: [require('@headlessui/tailwindcss'), require('@tailwindcss/forms')],
+  
+};

ui/litellm-dashboard/tailwind.config.ts

@@ -0,0 +1,129 @@
+/** @type {import('tailwindcss').Config} */ 
+
+const colors = require("tailwindcss/colors");
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    transparent: "transparent",
+    current: "currentColor",
+    extend: {
+      colors: {
+        // light mode
+        tremor: {
+          brand: {
+            faint: colors.blue[50],
+            muted: colors.blue[200],
+            subtle: colors.blue[400],
+            DEFAULT: colors.blue[500],
+            emphasis: colors.blue[700],
+            inverted: colors.white,
+          },
+          background: {
+            muted: colors.gray[50],
+            subtle: colors.gray[100],
+            DEFAULT: colors.white,
+            emphasis: colors.gray[700],
+          },
+          border: {
+            DEFAULT: colors.gray[200],
+          },
+          ring: {
+            DEFAULT: colors.gray[200],
+          },
+          content: {
+            subtle: colors.gray[400],
+            DEFAULT: colors.gray[500],
+            emphasis: colors.gray[700],
+            strong: colors.gray[900],
+            inverted: colors.white,
+          },
+        },
+        // dark mode
+        "dark-tremor": {
+          brand: {
+            faint: "#0B1229",
+            muted: colors.blue[950],
+            subtle: colors.blue[800],
+            DEFAULT: colors.blue[500],
+            emphasis: colors.blue[400],
+            inverted: colors.blue[950],
+          },
+          background: {
+            muted: "#131A2B",
+            subtle: colors.gray[800],
+            DEFAULT: colors.gray[900],
+            emphasis: colors.gray[300],
+          },
+          border: {
+            DEFAULT: colors.gray[700],
+          },
+          ring: {
+            DEFAULT: colors.gray[800],
+          },
+          content: {
+            subtle: colors.gray[600],
+            DEFAULT: colors.gray[500],
+            emphasis: colors.gray[200],
+            strong: colors.gray[50],
+            inverted: colors.gray[950],
+          },
+        },
+      },
+      boxShadow: {
+        // light
+        "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        "tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        "tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        // dark
+        "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        "dark-tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        "dark-tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      },
+      borderRadius: {
+        "tremor-small": "0.375rem",
+        "tremor-default": "0.5rem",
+        "tremor-full": "9999px",
+      },
+      fontSize: {
+        "tremor-label": ["0.75rem", { lineHeight: "1rem" }],
+        "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
+        "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
+        "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
+      },
+    },
+  },
+  safelist: [
+    {
+      pattern:
+        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ["hover", "ui-selected"],
+    },
+    {
+      pattern:
+        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ["hover", "ui-selected"],
+    },
+    {
+      pattern:
+        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ["hover", "ui-selected"],
+    },
+    {
+      pattern:
+        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    },
+    {
+      pattern:
+        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    },
+    {
+      pattern:
+        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    },
+  ],
+  plugins: [require('@headlessui/tailwindcss'), require('@tailwindcss/forms')],
+  darkMode: "class"
+};

ui/litellm-dashboard/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

ui/package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "@headlessui/react": "^1.7.18",
+    "@headlessui/tailwindcss": "^0.2.0",
+    "@tremor/react": "^3.13.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7"
+  }
+}