기여하기 - UI

기여하기 - UI (Contributing - UI)

LiteLLM UI에 기여해 주셔서 감사해요! 이 가이드는 로컬 개발 환경을 설정하는 데 도움을 줍니다.

1. 저장소 클론

git clone https://github.com/BerriAI/litellm.git
cd litellm

2. 프록시 시작

config 파일(예: config.yaml)을 만드세요:

model_list:
  - model_name: gpt-5.6-terra
    litellm_params:
      model: openai/gpt-5.6-terra

general_settings:
  master_key: os.environ/LITELLM_MASTER_KEY
  database_url: postgresql://<user>:***@<host>:<port>/<dbname>
  store_model_in_db: true

포트 4000에서 프록시를 시작하세요:

uv run litellm --config config.yaml --port 4000

UI는 저장소에 미리 빌드되어 있어요. http://localhost:4000/ui 에서 접근하세요.

출처: 문서

본문

3. UI 개발

UI 개발에는 두 가지 옵션이 있어요:

옵션 A: 개발 모드 (핫 리로드)

포트 3000에서 핫 리로드로 UI를 실행합니다. 프록시는 포트 4000에서 실행돼요.

cd ui/litellm-dashboard
npm install
npm run dev

로그인 흐름:

http://localhost:3000 으로 이동
로그인을 위해 http://localhost:4000/ui 로 리다이렉트됩니다
로그인 후 수동으로 http://localhost:3000/ 로 돌아갑니다
이제 인증되었고 핫 리로드로 개발할 수 있어요

리다이렉트 루프나 인증 문제가 발생하면 localhost 브라우저 쿠키를 지우거나 Build Mode를 사용하세요.

옵션 B: 빌드 모드 (Build Mode)

UI를 빌드해 프록시로 복사합니다. 변경 사항은 다시 빌드해야 적용돼요.

ui/litellm-dashboard/src/ 에서 코드를 변경하세요.
UI를 빌드합니다

cd ui/litellm-dashboard
npm install
npm run build

빌드 후 출력을 프록시로 복사하세요:

cp -r out/* ../../litellm/proxy/_experimental/out/

그다음 프록시를 재시작하고 http://localhost:4000/ui 에서 UI에 접근하세요.

4. PR 전 체크리스트

Pull Request를 제출하기 전에 ui/litellm-dashboard/ 에서 다음이 로컬로 통과하는지 확인하세요:

변경과 관련된 테스트 실행:

npx vitest run src/components/path/to/YourComponent.test.tsx

테스트는 컴포넌트와 함께 배치됩니다 (예: TeamInfo.tsx → TeamInfo.test.tsx). 새 컴포넌트를 추가하면 옆에 해당 .test.tsx 파일을 추가하세요.

빌드 실행:

npm run build

이것들은 ui_tests와 ui_build CI 검사에 매핑됩니다.

5. PR 제출

변경을 위한 새 브랜치를 만드세요:

git checkout -b feat/your-feature-name

변경을 스테이징하고 커밋합니다:

git add .
git commit -m "feat: description of your changes"

포크로 푸시합니다:

git push origin feat/your-feature-name

PR 템플릿에 따라 GitHub에서 Pull Request를 생성합니다