Cesar GarciaandGitHub
4d6a430adc
* docs: update UI contributing guide with correct commands - Replace outdated proxy_cli.py command with poetry run litellm - Add config.yaml example with required settings - Clarify that UI comes pre-built in the repo - Add two development options: Build Mode and Dev Mode (hot reload) - Note about redirect issues in Dev Mode * docs: add hot reload login flow and PR submission section - Document the 3000 -> 4000 -> 3000 login flow for hot reload - Reorder: Hot Reload as Option A, Build Mode as Option B - Add section 4 on submitting PRs - Add note that UI changes don't require tests * Update login flow navigation URL in contributing.md
2.1 KiB
Contributing - UI
Thanks for contributing to the LiteLLM UI! This guide will help you set up your local development environment.
1. Clone the repo
git clone https://github.com/BerriAI/litellm.git
cd litellm
2. Start the Proxy
Create a config file (e.g., config.yaml):
model_list:
- model_name: gpt-4o
litellm_params:
model: openai/gpt-4o
general_settings:
master_key: sk-1234
database_url: postgresql://<user>:<password>@<host>:<port>/<dbname>
store_model_in_db: true
Start the proxy on port 4000:
poetry run litellm --config config.yaml --port 4000
The UI comes pre-built in the repo. Access it at http://localhost:4000/ui
3. UI Development
There are two options for UI development:
Option A: Development Mode (Hot Reload)
This runs the UI on port 3000 with hot reload. The proxy runs on port 4000.
cd ui/litellm-dashboard
npm install
npm run dev
Login flow:
- Go to
http://localhost:3000 - You'll be redirected to
http://localhost:4000/uifor login - After logging in, manually navigate back to
http://localhost:3000/ - You're now authenticated and can develop with hot reload
:::note If you experience redirect loops or authentication issues, clear your browser cookies for localhost or use Build Mode instead. :::
Option B: Build Mode
This builds the UI and copies it to the proxy. Changes require rebuilding.
-
Make your code changes in
ui/litellm-dashboard/src/ -
Build the UI
cd ui/litellm-dashboard
npm install
npm run build
After building, copy the output to the proxy:
cp -r out/* ../../litellm/proxy/_experimental/out/
Then restart the proxy and access the UI at http://localhost:4000/ui
4. Submitting a PR
- Create a new branch for your changes:
git checkout -b feat/your-feature-name
- Stage and commit your changes:
git add .
git commit -m "feat: description of your changes"
- Push to your fork:
git push origin feat/your-feature-name
- Create a Pull Request on GitHub following the PR template