From ea255e2bd07c5e253d7dbebbe5502d7b87886a1c Mon Sep 17 00:00:00 2001 From: yuneng-jiang Date: Sat, 7 Feb 2026 15:11:49 -0800 Subject: [PATCH] UI contributing and trouble shooting docs --- CONTRIBUTING.md | 48 +++++- .../docs/extras/contributing_code.md | 150 +++++++++++++----- docs/my-website/docs/troubleshoot.md | 52 ++++++ 3 files changed, 205 insertions(+), 45 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a418c8c57a..77bc15ff50 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -7,11 +7,20 @@ Thank you for your interest in contributing to LiteLLM! We welcome contributions Here are the core requirements for any PR submitted to LiteLLM: - [ ] **Sign the Contributor License Agreement (CLA)** - [see details](#contributor-license-agreement-cla) +- [ ] **Keep scope isolated** - Your changes should address 1 specific problem at a time + +#### Proxy (Backend) PRs + - [ ] **Add testing** - Adding at least 1 test is a hard requirement - [see details](#adding-testing) - [ ] **Ensure your PR passes all checks**: - [ ] [Unit Tests](#running-unit-tests) - `make test-unit` - [ ] [Linting / Formatting](#running-linting-and-formatting-checks) - `make lint` -- [ ] **Keep scope isolated** - Your changes should address 1 specific problem at a time + +#### UI PRs + +- [ ] **Ensure the UI builds successfully** - `npm run build` +- [ ] **Ensure all UI unit tests pass** - `npm run test` +- [ ] **Add tests for new components or logic** - If you are adding a new component or new logic, add corresponding tests ## **Contributor License Agreement (CLA)** @@ -245,6 +254,43 @@ docker run \ --config /app/config.yaml --detailed_debug ``` +## UI Development + +### 1. Setup Your Local UI Development Environment + +```bash +# Clone the repo (if you haven't already) +git clone https://github.com/YOUR_USERNAME/litellm.git +cd litellm + +# Navigate to the UI dashboard directory +cd ui/litellm-dashboard + +# Install dependencies +npm install + +# Start the development server +npm run dev +``` + +### 2. Adding UI Tests + +If you are adding a **new component** or **new logic**, you must add corresponding tests. + +### 3. Running UI Unit Tests + +```bash +npm run test +``` + +### 4. Building the UI + +Ensure the UI builds successfully before submitting your PR: + +```bash +npm run build +``` + ## Submitting Your PR 1. **Push your branch**: `git push origin your-feature-branch` diff --git a/docs/my-website/docs/extras/contributing_code.md b/docs/my-website/docs/extras/contributing_code.md index 930a47eec7..673a83aca0 100644 --- a/docs/my-website/docs/extras/contributing_code.md +++ b/docs/my-website/docs/extras/contributing_code.md @@ -1,27 +1,36 @@ # Contributing Code -## **Checklist before submitting a PR** +## Checklist before submitting a PR -Here are the core requirements for any PR submitted to LiteLLM +Here are the core requirements for any PR submitted to LiteLLM: -- [ ] Sign the Contributor License Agreement (CLA) - [see details](#contributor-license-agreement-cla) -- [ ] Add testing, **Adding at least 1 test is a hard requirement** - [see details](#2-adding-testing-to-your-pr) -- [ ] Ensure your PR passes the following tests: - - [ ] [Unit Tests](#3-running-unit-tests) - - [ ] [Formatting / Linting Tests](#35-running-linting-tests) -- [ ] Keep scope as isolated as possible. As a general rule, your changes should address 1 specific problem at a time +- [ ] Sign the [Contributor License Agreement (CLA)](#contributor-license-agreement-cla) +- [ ] Keep scope as isolated as possible — your changes should address **one specific problem** at a time -## **Contributor License Agreement (CLA)** +### Proxy (Backend) PRs + +- [ ] Add testing — **at least 1 test is a hard requirement** ([details](#2-adding-tests)) +- [ ] Ensure your PR passes: + - [ ] [Unit Tests](#3-running-unit-tests) — `make test-unit` + - [ ] [Formatting / Linting Tests](#4-running-linting-tests) — `make lint` + +### UI PRs + +- [ ] Ensure the UI builds successfully — `npm run build` +- [ ] Ensure all UI unit tests pass — `npm run test` +- [ ] If you are adding a **new component** or **new logic**, add corresponding tests + +## Contributor License Agreement (CLA) Before contributing code to LiteLLM, you must sign our [Contributor License Agreement (CLA)](https://cla-assistant.io/BerriAI/litellm). This is a legal requirement for all contributions to be merged into the main repository. The CLA helps protect both you and the project by clearly defining the terms under which your contributions are made. -**Important:** We strongly recommend reviewing and signing the CLA before starting work on your contribution to avoid any delays in the PR process. You can find the CLA [here](https://cla-assistant.io/BerriAI/litellm) and sign it through our CLA management system when you submit your first PR. +**Important:** We strongly recommend signing the CLA **before** starting work on your contribution to avoid delays in the review process. You can find and sign the CLA [here](https://cla-assistant.io/BerriAI/litellm). -## Quick start +--- -## 1. Setup your local dev environment +## Proxy (Backend) -Here's how to modify the repo locally: +### 1. Setting up your local dev environment Step 1: Clone the repo @@ -29,56 +38,53 @@ Step 1: Clone the repo git clone https://github.com/BerriAI/litellm.git ``` -Step 2: Install dev dependencies: +Step 2: Install dev dependencies ```shell poetry install --with dev --extras proxy ``` -That's it, your local dev environment is ready! +### 2. Adding tests -## 2. Adding Testing to your PR +- Add your tests to the [`tests/test_litellm/` directory](https://github.com/BerriAI/litellm/tree/main/tests/litellm). +- This directory mirrors the `litellm/` directory 1:1 and should **only** contain mocked tests. +- **Do not** add real LLM API calls to this directory. -- Add your test to the [`tests/test_litellm/` directory](https://github.com/BerriAI/litellm/tree/main/tests/litellm) +#### File naming convention for `tests/test_litellm/` -- This directory 1:1 maps the the `litellm/` directory, and can only contain mocked tests. -- Do not add real llm api calls to this directory. +The test directory follows the same structure as `litellm/`: -### 2.1 File Naming Convention for `tests/test_litellm/` - -The `tests/test_litellm/` directory follows the same directory structure as `litellm/`. - -- `litellm/proxy/test_caching_routes.py` maps to `litellm/proxy/caching_routes.py` - `test_{filename}.py` maps to `litellm/{filename}.py` +- `litellm/proxy/test_caching_routes.py` maps to `litellm/proxy/caching_routes.py` -## 3. Running Unit Tests +### 3. Running unit tests -run the following command on the root of the litellm directory +Run the following command from the root of the `litellm` directory: ```shell make test-unit ``` -## 3.5 Running Linting Tests +### 4. Running linting tests -run the following command on the root of the litellm directory +Run the following command from the root of the `litellm` directory: ```shell make lint ``` -LiteLLM uses mypy for linting. On ci/cd we also run `black` for formatting. +LiteLLM uses `mypy` for type checking. CI/CD also runs `black` for formatting. -## 4. Submit a PR with your changes! +### 5. Submit a PR -- push your fork to your GitHub repo -- submit a PR from there +- Push your changes to your fork on GitHub +- Open a Pull Request from your fork -## Advanced +--- -### Building LiteLLM Docker Image +## UI -Some people might want to build the LiteLLM docker image themselves. Follow these instructions if you want to build / run the LiteLLM Docker Image yourself. +### 1. Setting up your local dev environment Step 1: Clone the repo @@ -86,17 +92,72 @@ Step 1: Clone the repo git clone https://github.com/BerriAI/litellm.git ``` -Step 2: Build the Docker Image +Step 2: Navigate to the UI dashboard directory -Build using Dockerfile.non_root +```shell +cd ui/litellm-dashboard +``` + +Step 3: Install dependencies + +```shell +npm install +``` + +Step 4: Start the development server + +```shell +npm run dev +``` + +### 2. Adding tests + +If you are adding a **new component** or **new logic**, you must add corresponding tests. + +### 3. Running UI unit tests + +```shell +npm run test +``` + +### 4. Building the UI + +Ensure the UI builds successfully before submitting your PR: + +```shell +npm run build +``` + +### 5. Submit a PR + +- Push your changes to your fork on GitHub +- Open a Pull Request from your fork + +--- + +## Advanced + +### Building the LiteLLM Docker Image + +Follow these instructions if you want to build and run the LiteLLM Docker image yourself. + +Step 1: Clone the repo + +```shell +git clone https://github.com/BerriAI/litellm.git +``` + +Step 2: Build the Docker image + +Build using `Dockerfile.non_root`: ```shell docker build -f docker/Dockerfile.non_root -t litellm_test_image . ``` -Step 3: Run the Docker Image +Step 3: Run the Docker image -Make sure config.yaml is present in the root directory. This is your litellm proxy config file. +Make sure `config.yaml` is present in the root directory. This is your LiteLLM proxy config file. ```shell docker run \ @@ -107,18 +168,19 @@ docker run \ litellm_test_image \ --config /app/config.yaml --detailed_debug ``` -### Running LiteLLM Proxy Locally -1. cd into the `proxy/` directory +### Running the LiteLLM Proxy Locally -``` +1. Navigate to the `proxy/` directory: + +```shell cd litellm/litellm/proxy ``` -2. Run the proxy +2. Run the proxy: ```shell python3 proxy_cli.py --config /path/to/config.yaml # RUNNING on http://0.0.0.0:4000 -``` \ No newline at end of file +``` diff --git a/docs/my-website/docs/troubleshoot.md b/docs/my-website/docs/troubleshoot.md index f9ed47972e..179f1c7897 100644 --- a/docs/my-website/docs/troubleshoot.md +++ b/docs/my-website/docs/troubleshoot.md @@ -45,6 +45,58 @@ Full error logs, stack traces, and any images from service metrics (CPU, memory, --- +## UI Issues + +If you're experiencing issues with the LiteLLM Admin UI, please include the following information in addition to the general details above. + +### 1. Steps to Reproduce + +A clear, step-by-step description of how to trigger the issue (e.g., "Navigate to Settings → Team, click 'Create Team', fill in fields, click submit → error appears"). + +### 2. LiteLLM Version + +The current version of LiteLLM you're running. Check via `litellm --version` or the UI's settings page. + +### 3. Architecture & Deployment Setup + +Distributed environments are a known source of UI issues. Please describe: + +- **Number of LiteLLM instances/replicas** and how they are deployed (e.g., Kubernetes, Docker Compose, ECS) +- **Load balancer** type and configuration (e.g., ALB, Nginx, Cloudflare Tunnel) — include whether sticky sessions are enabled +- **How the UI is accessed** — directly via LiteLLM, through a reverse proxy, or behind an ingress controller +- **Any CDN or caching layers** between the user and the LiteLLM server + +### 4. Network Tab Requests + +Open your browser's Developer Tools (F12 → Network tab), reproduce the issue, and share: + +- The **failing request(s)** — URL, method, status code, and response body +- **Screenshots or HAR export** of the relevant network activity +- Any **CORS or mixed-content errors** shown in the Console tab + +### 5. Environment Variables + +Non-sensitive environment variables related to the UI and proxy setup, such as: + +- `LITELLM_MASTER_KEY` +- `PROXY_BASE_URL` / `LITELLM_PROXY_BASE_URL` +- `UI_BASE_PATH` +- Any SSO-related variables (e.g., `GOOGLE_CLIENT_ID`, `MICROSOFT_TENANT`) + +Do **not** include passwords, secrets, or API keys. + +### 6. Browser & Access Details + +- **Browser** and version (e.g., Chrome 120, Firefox 121) +- **Access URL** used to reach the UI (redact sensitive parts) +- Whether the issue occurs for **all users or specific roles** (Admin, Internal User, etc.) + +### 7. Screenshots or Screen Recordings + +A screenshot or short screen recording of the issue is extremely helpful. Include any visible error messages, toasts, or unexpected behavior. + +--- + ## Support Channels [Schedule Demo 👋](https://calendly.com/d/4mp-gd3-k5k/berriai-1-1-onboarding-litellm-hosted-version)