32

How: 메인 앱 진입점 + Chat 페이지 구현

프론트엔드 UI 개발 (Streamlit)

학습 목표
  • Streamlit 멀티페이지 앱의 진입점을 구현할 수 있다
  • 채팅 페이지를 Agent와 연동하여 구현할 수 있다
  • 도구 사용 로그를 UI에 표시할 수 있다

메인 앱 + Chat 페이지 구현

Step 1: core/bootstrap.py (서비스와 세션 상태)

  • 서비스 초기화 (@st.cache_resource)
  • session_state 기본값
  • 페이지 공통 준비 함수 boot()

Step 2: app/main.py (진입점)

  • boot() 호출
  • 사이드바 구성

Step 3: app/pages/1_Chat.py

  • 채팅 UI (st.chat_message + st.chat_input)
  • Agent 호출 및 응답 표시
  • 도구 사용 로그 (st.expander)

멀티페이지에서 두 번 걸려 넘어지는 자리

하나. 페이지가 main.py 를 import 하면 안 된다. from app.main import init_services 는 두 가지 이유로 실패한다. D1 이 만든 구조에서 app/ 에는 __init__.py 가 없어 패키지가 아니고, 설령 import 되더라도 app/main.py 는 모듈 최상단에서 st.set_page_config 를 부른다. 페이지가 자기 것을 먼저 부른 뒤이므로 두 번째 호출에서 StreamlitSetPageConfigMustBeFirstCommandError 가 난다. 서비스 초기화는 core/bootstrap.py 로 내리고 양쪽이 거기서 가져온다. 그러면 의존성이 UI 에서 core 로 한 방향으로만 흐르고, D1 에서 세운 원칙과도 맞는다.

둘. 페이지를 직접 열면 session_state 가 비어 있다. pages/ 아래 스크립트는 main.py 를 실행하지 않는다. 브라우저에서 Chat 을 먼저 누르면 st.session_state.messages 에 손대는 순간 예외가 난다. 각 페이지가 자기 첫머리에서 초기화를 부르게 해야 한다. 여기서는 boot() 안에 넣어 한 줄로 끝냈다.

대화 이력을 실제로 넘긴다

agent.run(prompt) 만 부르면 매 질문이 첫 질문이 된다. "그 설비의 센서는?" 같은 뒷말이 풀리지 않는다. 화면에 쌓인 session_state.messages 를 LangChain 메시지로 바꿔 history 로 넘겨야 한다. 이때 이번 질문을 목록에 넣기 전에 이력을 만들어야 같은 문장이 두 번 실리지 않는다.

에디터 로딩 중...
힌트 보기
  • 서비스 초기화는 core/bootstrap.py로 내리고 main.py와 각 페이지가 거기서 가져온다
  • pages/ 스크립트는 main.py를 실행하지 않으므로 각 페이지가 session_state를 직접 초기화해야 한다
  • st.set_page_config는 페이지당 한 번만 부를 수 있다
  • session_state에 messages를 저장해야 페이지 재실행 시 이력 유지
  • history를 agent.run에 넘겨야 앞 턴의 설비를 가리키는 뒷말이 풀린다
  • 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로 보여줘야 해.
이 팁이 도움이 됐나요?
용어