50분
How: 메인 앱 진입점 + Chat 페이지 구현
프론트엔드 UI 개발 (Streamlit)
How: 메인 앱 진입점 + Chat 페이지 구현
통합 프로젝트 > 프론트엔드 UI 개발 (Streamlit)
학습 목표
Streamlit 멀티페이지 앱의 진입점을 구현할 수 있다 채팅 페이지를 Agent와 연동하여 구현할 수 있다 도구 사용 로그를 UI에 표시할 수 있다
메인 앱 + Chat 페이지 구현
Step 1: main.py (진입점)
- 서비스 초기화 (@st.cache_resource)
- session_state 설정
- 사이드바 구성
Step 2: pages/1_Chat.py
- 채팅 UI (st.chat_message + st.chat_input)
- Agent 호출 및 응답 표시
- 도구 사용 로그 (st.expander)
에디터 로딩 중...
힌트 보기
- • st.chat_message("user") / st.chat_message("assistant")로 역할 구분
- • session_state에 messages를 저장해야 페이지 재실행 시 이력 유지
- • st.spinner("생각 중...")으로 로딩 상태 표시
- • st.expander로 상세 정보를 접을 수 있게
정답 보기
에디터 로딩 중...
AI로 학습하기 — 꿀팁
🤖Streamlit 채팅 페이지 + Agent 연동 생성AI 학습 팁
AI에게 Streamlit 멀티페이지 진입점과 LangGraph Agent를 연동한 채팅 페이지 코드를 한 번에 생성시키세요.
Streamlit 멀티페이지 앱의 app.py 진입점과 pages/1_Chat.py 채팅 페이지를 작성해줘. 채팅 페이지는 st.session_state로 대화 히스토리를 유지하고, 사용자 메시지를 LangGraph Agent에 넘겨 스트리밍 응답을 st.write_stream으로 출력하며, 어떤 도구가 호출됐는지 expander로 보여줘야 해.
이 팁이 도움이 됐나요?