첫 번째 LLM Playground 만들기

첫 번째 LLM Playground 만들기

10분 안에 여러 LLM 제공자를 평가할 수 있는 playground를 만들어 봐요. 프로덕션에서 확인하고 싶다면 우리 웹사이트를 확인해 보세요.

어떻게 할까요?: 서버를 만들고 템플릿 프론트엔드에 연결해서, 끝나면 동작하는 playground UI를 갖게 됩니다!

info

시작하기 전에 환경 설정 가이드를 따라왔는지 확인해 주세요. 이 튜토리얼은 최소 1개 모델 제공자(예: OpenAI)의 API 키가 필요하다는 점을 참고하세요.

출처: 문서

본문

1. 빠른 시작

키가 잘 작동하는지 확인해 봅시다. 원하는 환경(예: Google Colab)에서 이 스크립트를 실행하세요.

🚨 placeholder 키 값을 여러분의 키로 반드시 바꾸는 것을 잊지 마세요!

uv add litellm
from litellm import completion## set ENV variablesos.environ["OPENAI_API_KEY"] = "openai key" ## REPLACE THISos.environ["COHERE_API_KEY"] = "cohere key" ## REPLACE THISos.environ["AI21_API_KEY"] = "ai21 key" ## REPLACE THISmessages = [{ "content": "Hello, how are you?","role": "user"}]# openai callresponse = completion(model="gpt-5.6-luna", messages=messages)# cohere callresponse = completion("command-nightly", messages)# ai21 callresponse = completion("j2-mid", messages)

2. 서버 설정

백엔드 서버로 기본 Flask 앱을 만들어요. completion 호출을 위한 특정 route를 지정할 거예요.

참고:

  • 🚨 placeholder 키 값을 여러분의 키로 반드시 바꾸는 것을 잊지 마세요!

  • completion_with_retries: LLM API 호출은 프로덕션에서 실패할 수 있어요. 이 함수는 일반 litellm completion() 호출을 tenacity로 감싸서 실패 시 재시도하도록 해줍니다.

LiteLLM 관련 코드 조각:

import osfrom litellm import completion_with_retries ## set ENV variablesos.environ["OPENAI_API_KEY"] = "openai key" ## REPLACE THISos.environ["COHERE_API_KEY"] = "cohere key" ## REPLACE THISos.environ["AI21_API_KEY"] = "ai21 key" ## REPLACE [email protected]('/chat/completions', methods=["POST"])def api_completion():    data = request.json    data["max_tokens"] = 256 # By default let's set max_tokens to 256    try:        # COMPLETION CALL        response = completion_with_retries(**data)    except Exception as e:        # print the error        print(e)    return response

전체 코드:

import osfrom flask import Flask, jsonify, requestfrom litellm import completion_with_retries ## set ENV variablesos.environ["OPENAI_API_KEY"] = "openai key" ## REPLACE THISos.environ["COHERE_API_KEY"] = "cohere key" ## REPLACE THISos.environ["AI21_API_KEY"] = "ai21 key" ## REPLACE THISapp = Flask(__name__)# Example [email protected]('/', methods=['GET'])def hello():    return jsonify(message="Hello, Flask!")@app.route('/chat/completions', methods=["POST"])def api_completion():    data = request.json    data["max_tokens"] = 256 # By default let's set max_tokens to 256    try:        # COMPLETION CALL        response = completion_with_retries(**data)    except Exception as e:        # print the error        print(e)    return responseif __name__ == '__main__':    from waitress import serve    serve(app, host="0.0.0.0", port=4000, threads=500)

테스트해 보기

서버를 시작합니다:

python main.py

테스트를 위해 이 curl 명령을 실행해요:

curl -X POST localhost:4000/chat/completions \-H 'Content-Type: application/json' \-d '{  "model": "gpt-5.6-luna",  "messages": [{    "content": "Hello, how are you?",    "role": "user"  }]}'

이런 결과를 볼 수 있을 거예요.

3. 프론트엔드 템플릿에 연결

3.1 템플릿 다운로드

프론트엔드로는 Streamlit을 사용할 거예요. 이를 통해 간단한 파이썬 웹앱을 만들 수 있어요.

우리가(LiteLLM) 만든 playground 템플릿을 다운로드해 보세요:

git clone https://github.com/BerriAI/litellm_playground_fe_template.git

3.2 실행하기

2단계의 서버가 포트 4000에서 계속 실행 중인지 확인하세요.

info

다른 포트를 사용했다면 괜찮아요. playground 템플릿의 app.py에서 해당 줄만 바꾸면 됩니다.

이제 앱을 실행해 보세요:

cd litellm_playground_fe_template && streamlit run app.py

Streamlit이 없다면 uv add로 추가하거나(설치 가이드 확인) 하면 됩니다.

uv add streamlit

이런 화면이 보일 거예요.

축하합니다 🚀

50개 이상의 LLM API를 호출할 수 있는 첫 번째 LLM Playground를 만들었어요!

다음 단계:

  • 이제 추가할 수 있는 모든 LLM 제공자 목록 확인하기

더 알아보기 (Learn more)