25

Core: Streamlit Chat UI 설계 패턴

프론트엔드 UI 개발 (Streamlit)

학습 목표

st.chat_message와 st.chat_input의 사용법을 이해한다 채팅 이력 표시 패턴을 이해한다 Agent 응답을 스트리밍으로 표시하는 방법을 안다

Streamlit Chat UI 핵심 패턴

기본 구조

에디터 로딩 중...

도구 사용 로그 표시

에디터 로딩 중...

사이드바 활용

에디터 로딩 중...

스트리밍 응답 (선택사항)

에디터 로딩 중...
핵심 포인트
  • st.chat_message + st.chat_input = 채팅 UI 완성
  • session_state에 대화 이력 저장 (재실행 시 유지)
  • st.expander로 도구 로그를 접을 수 있게
  • @st.cache_resource로 서비스 인스턴스 1회 생성