✅ Swarm + 웹 UI 연결하기 (6편)

 

✅ Swarm + 웹 UI 연결하기 (6편)

– AI Agent들의 대화를 실시간으로 보고, 선택하고, 공유까지!

지금까지 만든 멀티 Agent 시스템은 강력하지만,
“CLI에서만 돌아간다”는 점은 비기술 사용자에게 큰 제약이죠.

이번 글에서는 Swarm을 기반으로
✅ 실시간 대화 시각화
✅ 사용자 요청 입력
✅ 결과 복사, 저장, 피드백 제공
등의 기능을 갖춘 웹 인터페이스를 연결해보겠습니다.

---

🛠 선택 가능한 프론트엔드 방식 2가지

방식 장점 도구

Streamlit	빠른 프로토타이핑, 파이썬만으로 가능	streamlit, requests
React	UI 커스터마이징 자유도 높음, 실제 서비스에 적합	Next.js, axios, tailwindcss

이번 글에서는 Streamlit 예제로 먼저 실습하고,
마지막에 React로 확장하는 방향을 안내드립니다.

---

🧪 1. Streamlit 앱 기본 구조 만들기

✅ 설치

pip install streamlit requests

✅ 기본 코드 (app.py)

import streamlit as st
import requests

st.set_page_config(page_title="Swarm AI", layout="wide")

st.title("🧠 Swarm 멀티 에이전트 시뮬레이터")

user_input = st.text_area("💬 당신의 질문을 입력하세요", height=150)

if st.button("🚀 Agent 실행하기"):
    with st.spinner("Swarm Agent들이 회의 중입니다..."):
        res = requests.post(
            "http://localhost:8000/swarm/task",
            json={"message": user_input}
        )
        output = res.json()["result"]

        st.success("✅ Agent 실행 완료")
        for msg in output:
            role = msg.get("name", "GPT")
            content = msg.get("content", "")
            st.markdown(f"**{role}**:\n\n{content}\n\n---")

---

🧪 2. 실행

streamlit run app.py

결과 예시

🧠 Swarm 멀티 에이전트 시뮬레이터

[사용자 입력]
→ “React로 로그인 기능 어떻게 구현하나요?”

[결과]
🧩 분석가: 이메일, 비밀번호 입력 필드 필요  
🧩 개발자: <React 컴포넌트 코드>  
🧩 리뷰어: UX 개선 제안  
🧩 작성자: 최종 요약 보고서

---

🌐 3. React로 확장 시 (구조 안내)

반응형

기본 구조

frontend/
├── pages/
│   └── index.tsx          # 메인 UI
├── components/
│   └── ChatBubble.tsx     # 역할별 메시지 표시
├── api/
│   └── callSwarm.ts       # FastAPI 호출 로직

예시 흐름

1. 사용자가 입력 → axios.post('/swarm/task', { message })
2. 응답을 AgentMessage[] 형태로 state에 저장
3. 역할(role)에 따라 다른 스타일로 채팅 버블 구성
4. 복사 버튼, 공유 버튼, 피드백 버튼 등 추가

---

🔁 4. 개선 아이디어

기능 설명

🎨 역할별 컬러 구분	Analyst, Developer, Reviewer 등 배경색 다르게 표시
📝 요약 복사 버튼	GPT 결과를 1클릭으로 클립보드 복사
💬 Agent 선택 실행	일부 Agent만 실행하는 옵션 추가
📊 Agent 평가 기능	각 Agent에 👍 / 👎 버튼으로 피드백 수집

---

✅ 마무리

지금까지 우리는 Swarm 시스템을
✔ FastAPI로 외부에 열고,
✔ Streamlit 또는 React로 사용자 UI를 붙여
✔ 실제 서비스 수준의 대화형 협업 시스템으로 발전시켰습니다.

Swarm은 단순한 실험용 프레임워크가 아니라,
AI 제품의 백엔드 + 프론트엔드 구조 전체를 만들 수 있는 도구입니다.

---

 

SwarmUI, AI웹인터페이스, StreamlitAI, ReactGPT, SwarmWebApp, LLMUX, 에이전트시각화, AI시스템프론트엔드, GPT대화UI, 실시간에이전트시뮬레이션

---

👉 다음 편은
7편: Swarm Agent 평가 및 피드백 수집 시스템 구축하기 – 사용자 중심 AI 개선 루프 만들기
를 다룹니다.
Agent들의 응답을 사용자가 평가하고, 개선 데이터를 다시 GPT에게 학습시키는 루프 구조를 만들고 싶으신가요? 😊