AI 에이전트의 웹 인터페이스 구축 - 실시간 대화 시스템 개발

AI 에이전트의 웹 인터페이스 구축 - 실시간 대화 시스템 개발

AI 에이전트가 웹에서 실시간으로 사용자와 대화하려면 웹 인터페이스가 필요합니다.
이번 글에서는 React + FastAPI + CrewAI를 활용하여
실시간 AI 대화 시스템을 구축하는 방법을 배워봅니다.

---

🔹 1. AI 웹 인터페이스란?

📌 AI 웹 인터페이스의 필요성

Manus와 같은 AI 시스템에서는 사용자가 웹을 통해 AI와 대화할 수 있어야 합니다.
이를 위해 FastAPI를 백엔드로 활용하고, React를 프론트엔드로 활용하여
실시간 대화형 AI 챗봇을 구현합니다.

✅ AI 웹 인터페이스의 주요 기능

• 실시간 채팅 지원 (사용자 입력 → AI 응답)
• Ollama + CrewAI 연동 (다중 AI 협업 가능)
• 웹소켓(WebSocket) 기반 대화 시스템 구축

✅ AI 웹 인터페이스의 구조

[ React (프론트엔드) ]  ⇄  [ FastAPI (백엔드) ]  ⇄  [ CrewAI (AI 처리) ]

💡 목표: AI가 웹에서 실시간으로 사용자와 대화하는 시스템 구축

---

🔹 2. FastAPI 백엔드 구축 (AI 대화 처리 API)

✅ 1. FastAPI 프로젝트 생성 및 WebSocket 설정

FastAPI에서 WebSocket을 활용하여 실시간 AI 응답 시스템을 구축합니다.

🔹 FastAPI 설치 (이미 설치되지 않았다면 추가)

pip install fastapi uvicorn crewai

🔹 Python 코드 (FastAPI AI 웹소켓 서버)

from fastapi import FastAPI, WebSocket
from crewai import Agent, Task, Crew

app = FastAPI()

# AI 에이전트 정의
ai_agent = Agent(
    name="AI 조력자",
    role="사용자의 질문을 분석하고 답변을 제공하는 AI",
    backstory="다양한 정보를 제공하는 AI 시스템",
    model="mistral"
)

# 웹소켓 엔드포인트 생성 (실시간 채팅)
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        
        # AI 에이전트가 입력 분석
        task = Task(description=data, agent=ai_agent)
        crew = Crew(agents=[ai_agent], tasks=[task])
        result = crew.kickoff()

        await websocket.send_text(result)

# FastAPI 실행 (로컬 테스트)
if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

✅ FastAPI 서버 실행

uvicorn main:app --host 0.0.0.0 --port=8000 --reload

✅ API 엔드포인트 설명

HTTP Method 엔드포인트 설명

WebSocket

/ws

실시간 대화 API (웹소켓)

---

🔹 3. React 프론트엔드 구축 (실시간 채팅 UI 개발)

반응형

✅ 1. React 프로젝트 생성 및 WebSocket 설정

웹에서 AI와 실시간 대화를 하기 위해 React를 활용하여 챗봇 UI를 구현합니다.

🔹 React 프로젝트 생성

npx create-react-app ai-chatbot
cd ai-chatbot
npm install

🔹 WebSocket 라이브러리 설치

npm install react-use-websocket

---

✅ 2. React 챗봇 UI 구현 (AI 실시간 채팅 인터페이스)

🔹 React 코드 (AI 챗봇 컴포넌트 - Chatbot.js)

import React, { useState } from "react";
import useWebSocket from "react-use-websocket";

const Chatbot = () => {
  const [message, setMessage] = useState("");
  const [chat, setChat] = useState([]);
  const { sendMessage, lastMessage } = useWebSocket("ws://localhost:8000/ws");

  // 메시지 전송
  const handleSend = () => {
    if (message.trim() !== "") {
      sendMessage(message);
      setChat([...chat, { role: "user", text: message }]);
      setMessage("");
    }
  };

  // AI 응답 업데이트
  React.useEffect(() => {
    if (lastMessage !== null) {
      setChat((prevChat) => [...prevChat, { role: "ai", text: lastMessage.data }]);
    }
  }, [lastMessage]);

  return (
    <div className="chat-container">
      <h2>AI Chatbot</h2>
      <div className="chat-box">
        {chat.map((msg, index) => (
          <div key={index} className={`chat-msg ${msg.role}`}>
            {msg.text}
          </div>
        ))}
      </div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="메시지를 입력하세요..."
      />
      <button onClick={handleSend}>전송</button>
    </div>
  );
};

export default Chatbot;

---

✅ 3. React 스타일 추가 (Chatbot.css)

.chat-container {
  max-width: 600px;
  margin: auto;
  text-align: center;
}

.chat-box {
  border: 1px solid #ccc;
  padding: 10px;
  height: 400px;
  overflow-y: auto;
}

.chat-msg {
  padding: 8px;
  margin: 5px;
  border-radius: 5px;
}

.chat-msg.user {
  background-color: #d1e7ff;
  text-align: right;
}

.chat-msg.ai {
  background-color: #f1f1f1;
  text-align: left;
}

---

✅ 4. React 앱 실행 및 테스트

🔹 React 앱 실행

npm start

🔹 AI 실시간 채팅 테스트
1️⃣ 사용자가 메시지 입력 → 전송
2️⃣ FastAPI 웹소켓을 통해 CrewAI가 메시지 분석
3️⃣ AI가 응답하여 실시간으로 웹 UI에 표시

---

🔹 4. AI 웹 인터페이스 확장 가능성

✅ 1. 다중 AI 협업 추가 (연구원 + 기술 작가 조합)

• AI 연구원이 사용자의 질문을 분석
• AI 기술 작가가 더 자연스러운 문장으로 응답

🔹 AI 협업 설정 예제

researcher = Agent(
    name="연구원",
    role="기술 트렌드를 조사하는 AI",
    model="mistral"
)

writer = Agent(
    name="기술 작가",
    role="문서를 작성하는 AI",
    model="mistral"
)

task1 = Task(description="최신 AI 기술 동향 조사", agent=researcher)
task2 = Task(description="조사 내용을 사용자가 이해하기 쉽게 정리", agent=writer)

crew = Crew(agents=[researcher, writer], tasks=[task1, task2])

---

✅ 2. AI의 장기 기억 기능 추가 (LangChain Memory 활용)

LangChain Memory를 활용하면 AI가 이전 대화를 기억하고 맥락을 유지할 수 있습니다.

🔹 대화 메모리 추가

from langchain.memory import ConversationBufferMemory
memory = ConversationBufferMemory()

🔹 대화 저장 및 불러오기

memory.save_context({"input": user_message}, {"output": ai_response})
previous_conversation = memory.load_memory_variables({})

---

🎯 5. AI 웹 인터페이스 구축 정리

✅ React + FastAPI + CrewAI를 활용하면 AI 실시간 대화 시스템을 구축할 수 있다.
✅ WebSocket을 활용하면 실시간 AI 응답이 가능하다.
✅ LangChain Memory를 추가하면 AI가 대화 맥락을 유지할 수 있다.
✅ 다중 AI 협업을 통해 더욱 지능적인 AI 시스템을 만들 수 있다.

---

🚀 다음 글 미리보기:

👉 "Docker를 이용한 AI 에이전트 컨테이너화 및 배포"
👉 AI 시스템을 Docker로 배포하여 어디서든 실행하는 방법을 배워봅니다.