ADK AI 에이전트를 웹 UI에 통합하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 웹 개발자: FastAPI와 Angular 기반 애플리케이션에서 AI 에이전트를 통합하는 방법을 배우고자 하는 중급 이상 개발자

- 난이도: 중급 (FastAPI, Angular, Server-Sent Events(SSE) 이해 필요)

핵심 요약

• ADK AI 에이전트를 FastAPI로 서빙하기 위해 root_agent 변수명을 반드시 사용해야 함 (from google.adk.agents import Agent 참조)
• FastAPI 설정 시 get_fast_api_app() 헬퍼 함수를 사용하여 간단한 설정 가능 (예: app = get_fast_api_app(...) 코드 참조)
• Angular에서 SSE를 통해 에이전트와 통신 시 EventSource 및 text/event-stream 헤더를 반드시 처리해야 함

섹션별 세부 요약

1. ADK 에이전트 초기화

• agent.py 파일에서 root_agent 변수명으로 에이전트 정의
• gemini-2.0-flash 모델 사용, costa_rica_expert_agent 이름 지정
• instruction 필드에 사용자 질문 대응 규칙 명시

2. FastAPI 서빙 설정

• main.py에서 get_fast_api_app() 헬퍼 함수로 서버 구성
• SESSION_DB_URL 및 ALLOWED_ORIGINS 설정 필수
• uvicorn.run(app, ...)으로 서버 실행 (포트 8080 기본)

3. Angular에서 SSE 통신 구현

• runSse() 메서드로 /run_sse 엔드포인트 호출
• text/event-stream 헤더와 EventSource 객체 사용
• data: 형식의 스트리밍 데이터 파싱 및 처리

결론

• ADK의 get_fast_api_app() 헬퍼 함수를 활용하면 FastAPI 서빙이 간단해짐
• Angular에서 SSE 통신 시 EventSource 및 text/event-stream 처리가 필수 (예: fetch(..., { Accept: 'text/event-stream' }) 코드 참조)
• 향후 SSE 스트리밍 핸들링이 간소화될 예정 (다음 포스트 참고)