AIPython

Streamlit로 만드는 에이전트 UI - 위젯과 rerun, session_state 데이터 흐름

Toma

2026년 6월 14일

약 12분

AIPython

Streamlit로 만드는 에이전트 UI - 위젯과 rerun, session_state 데이터 흐름

Toma

2026년 6월 14일

약 12분

🎈 이 글은 Python만으로 에이전트 UI를 빠르게 그릴 수 있는 Streamlit의 기본 사용법과 데이터 흐름에 대한 기록입니다.

🎈 Streamlit

👋 Welcome Streamlit

💡 Streamlit을 활용하는 이유

HTML, CSS, JS를 몰라도 python만으로 st의 위젯을 활용해 브라우저에 UI를 그릴 수 있다.
Streamlit이 자체적으로 리액트 컴포넌트를 만들어두고 맵핑해두었기 때문이다.
hot reload를 지원한다.

⚠️ 다만 프로덕션 단계에서는 사용을 지양하는 것이 좋다.

python

import streamlit as st

st.write("Hello world")

st.button("Click me Please")

st.text_input("Write your API KEY", max_chars=20)

st.feedback("faces")

with st.sidebar:
    # with -> 영역 구분, 이 아래 위젯들은 모두 sidebar 영역에 속함
    st.badge("Badge 1")

tab1, tab2, tab3 = st.tabs(["Agent", "Chat", "Output"])

with tab1:
    st.header("Agent")
with tab2:
    st.header("Agent2")
with tab3:
    st.header("Agent3")

python

streamlit run main.py

Streamlit이 어떻게 동작하는지 이해하는 것이 중요하다.

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2026-06-14_11.44.47.png

python

st.chat_message()

# def chat_message(
#    name: str | Literal['user', 'assistant', 'ai', 'human'],
#    *,
#    avatar: AtomicImage | None = None,
#    width: Width = "stretch"
# ) -> DeltaGenerator

python

with st.chat_message("ai"):
    st.text("Hello")
    with st.status("Agent is using Tool") as status:
        time.sleep(1)
        status.update(label="Agent is searching the Web ...")
        time.sleep(2)
        status.update(label="Agent is reading the Page")
        time.sleep(3)
        status.update(state="complete")
        
with st.chat_message("human"):
    st.text("Hi!")

st.chat_input("Write a message for the assistant.", accept_file=True)

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2026-06-14_13.43.43.png

🔄 Streamlit Data Flow

1. data flow — Streamlit 프로그램에서 data가 어떻게 흐르는지에 대한 이해다.

💡 Streamlit은 기본적으로 위젯과 상호작용하면 **전체 코드를 위에서 아래로 rerun(재실행)**한다.

그렇다면 어떻게 영속적인 데이터를 가질 수 있을까? 바로 session state를 활용하면 된다.

2. session state — Streamlit에서 data의 상태를 어떻게 관리하는지에 대한 것이다.

💡 영속적이어야 하는 data는 session_state에 담아두고 최초 한 번만 초기화하면 된다. session_state는 메모리를 잃지 않는다. (예: 채팅 기록이나 비용이 많이 발생하는 요청의 응답 등)

python

st.session_state["is_admin"] = False

python

import streamlit as st

# 최초 한번만 초기화 되도록
if "is_admin" not in st.session_state:
    st.session_state["is_admin"] = False

st.header("Hello!")

name  = st.text_input("What is your name?")

if name:
    st.write(f"Hello {name}")
    st.session_state["is_admin"] = True

print(st.session_state["is_admin"])

🎈 이 글은 Python만으로 에이전트 UI를 빠르게 그릴 수 있는 Streamlit의 기본 사용법과 데이터 흐름에 대한 기록입니다.

🎈 Streamlit

👋 Welcome Streamlit

💡 Streamlit을 활용하는 이유

HTML, CSS, JS를 몰라도 python만으로 st의 위젯을 활용해 브라우저에 UI를 그릴 수 있다.
Streamlit이 자체적으로 리액트 컴포넌트를 만들어두고 맵핑해두었기 때문이다.
hot reload를 지원한다.

⚠️ 다만 프로덕션 단계에서는 사용을 지양하는 것이 좋다.

python

import streamlit as st

st.write("Hello world")

st.button("Click me Please")

st.text_input("Write your API KEY", max_chars=20)

st.feedback("faces")

with st.sidebar:
    # with -> 영역 구분, 이 아래 위젯들은 모두 sidebar 영역에 속함
    st.badge("Badge 1")

tab1, tab2, tab3 = st.tabs(["Agent", "Chat", "Output"])

with tab1:
    st.header("Agent")
with tab2:
    st.header("Agent2")
with tab3:
    st.header("Agent3")

python

streamlit run main.py

Streamlit이 어떻게 동작하는지 이해하는 것이 중요하다.

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2026-06-14_11.44.47.png

python

st.chat_message()

# def chat_message(
#    name: str | Literal['user', 'assistant', 'ai', 'human'],
#    *,
#    avatar: AtomicImage | None = None,
#    width: Width = "stretch"
# ) -> DeltaGenerator

python

with st.chat_message("ai"):
    st.text("Hello")
    with st.status("Agent is using Tool") as status:
        time.sleep(1)
        status.update(label="Agent is searching the Web ...")
        time.sleep(2)
        status.update(label="Agent is reading the Page")
        time.sleep(3)
        status.update(state="complete")
        
with st.chat_message("human"):
    st.text("Hi!")

st.chat_input("Write a message for the assistant.", accept_file=True)

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2026-06-14_13.43.43.png

🔄 Streamlit Data Flow

1. data flow — Streamlit 프로그램에서 data가 어떻게 흐르는지에 대한 이해다.

💡 Streamlit은 기본적으로 위젯과 상호작용하면 **전체 코드를 위에서 아래로 rerun(재실행)**한다.

그렇다면 어떻게 영속적인 데이터를 가질 수 있을까? 바로 session state를 활용하면 된다.

2. session state — Streamlit에서 data의 상태를 어떻게 관리하는지에 대한 것이다.

💡 영속적이어야 하는 data는 session_state에 담아두고 최초 한 번만 초기화하면 된다. session_state는 메모리를 잃지 않는다. (예: 채팅 기록이나 비용이 많이 발생하는 요청의 응답 등)

python

st.session_state["is_admin"] = False

python

import streamlit as st

# 최초 한번만 초기화 되도록
if "is_admin" not in st.session_state:
    st.session_state["is_admin"] = False

st.header("Hello!")

name  = st.text_input("What is your name?")

if name:
    st.write(f"Hello {name}")
    st.session_state["is_admin"] = True

print(st.session_state["is_admin"])