1. 시작하기 전에
이 자체 학습 Codelab에서는 Google Cloud의 Vertex AI Agent Builder를 사용하여 AI 에이전트를 빌드하는 방법을 안내합니다. 각 단계에서는 특정 에이전트 빌더 기능을 강조하고 그 목적을 설명합니다.
기본 요건
- Google Cloud의 생성형 AI에 대한 기본적인 이해
- AI 에이전트 개념에 대한 기본적인 이해
- Gemini CodeAssist에 대한 기본적인 이해 (선택사항)
학습할 내용
- Vertex AI Agent Builder를 사용하여 간단한 AI 에이전트를 만드는 방법
- 데이터 스토어를 연결하여 생성된 에이전트를 그라운딩하는 방법
- 웹사이트에 AI 에이전트를 통합하는 방법(선택사항)
필요한 항목
- 호기심 많은 마음
- 작동하는 컴퓨터와 안정적인 Wi-Fi
- 결제가 연결된 Google Cloud 프로젝트.
참고: 아직 Google Cloud 프로젝트가 없으면 안내에 따라 하나 만드세요. Google Cloud 무료 등급 서비스도 확인해 보세요.
2. 첫 번째 AI 에이전트 설계
이제 나만의 AI 에이전트를 만들 준비가 되었습니다. 하지만 개발에 들어가기 전에 에이전트에 대한 명확한 비전을 수립해야 합니다. 다음과 같은 주요 질문을 스스로에게 던져 보세요.
- 어떤 문제를 해결할 수 있나요? 작업을 자동화하거나, 정보를 제공하거나, 엔터테인먼트를 제공하거나, 창의적인 탐색을 지원하나요?
- 기본 기능은 무엇인가요? 작업을 실행할까요, 아니면 작업을 위임할까요? 텍스트를 생성할까요? 아니면 다양한 미디어의 조합을 생성할까요?
- 어떤 한계가 있나요? 모든 작업을 자율적으로 수행할 수 있나요?
- 어떤 성격이나 페르소나를 가져야 하나요? 격식체인가요, 비격식체인가요, 유머인가요, 도움이 되는 내용인가요, 유익한 내용인가요?
- 성공 측정항목은 무엇인가요? 상담사의 효과는 어떻게 측정할 수 있나요?
절차를 빠르게 진행하기 위해 오늘 만들 여행사 에이전트에 대한 질문의 답변을 알려드립니다.
- 어떤 문제를 해결할 수 있나요?
- 여행을 계획하는 것은 시간이 많이 걸리고 부담스러울 수 있습니다. 이 여행사는 사용자가 목적지를 찾고, 일정을 계획하고, 항공편과 숙박을 예약하는 데 도움을 줍니다.
- 기본 기능은 무엇인가요?
- 상담사는 다음을 수행할 수 있어야 합니다.
- 비자 요건과 같은 목적지에 관한 질문에 답변
- 사용자의 일정과 목표에 맞는 여행 일정 계획
- 항공편 및 숙박 예약
- 어떤 한계가 있나요?
- 상담사가 기본적으로 복잡한 질문에 답변하지 못할 수 있음
- 에이전트가 시각적 이미지를 생성할 수 없습니다.
- 에이전트의 지식은 기본 모델에 의해 제한됩니다.
- 어떤 성격이나 페르소나를 가져야 하나요?
- 이 상담사는 여행에 대해 잘 알고 있고, 도움이 되며, 열정적이어야 합니다. 정보를 명확하고 간결하게 전달할 수 있어야 합니다.
- 성공 측정항목은 무엇인가요?
- 이 에이전트의 성공은 사용자가 추천 (탐색, 계획, 예약)에 얼마나 만족하는지에 따라 측정할 수 있습니다.
3. Vertex AI Agent Builder를 사용한 AI 에이전트 빌드
Vertex AI Agent Builder를 사용하면 몇 단계만으로 AI 에이전트를 만들 수 있습니다.
1단계:
- Vertex AI Agent Builder로 이동합니다.
- 시작 페이지가 표시됩니다.
- 계속 및 API 활성화 버튼을 클릭합니다.
2단계:
- 앱 생성 페이지로 리디렉션됩니다.
- 새 앱 만들기 버튼을 클릭합니다.
3단계:
- 대화형 에이전트를 선택하고 만들기를 클릭합니다.
참고:
- 만들기를 클릭하면 Dialogflow 대화형 에이전트의 새 탭이 열립니다.
- Google Cloud 프로젝트를 선택하라는 메시지가 표시되면 올바른 Gmail 계정과 연결된 Google Cloud 프로젝트를 선택하세요.
- 새 계정에서 이 실습을 진행하는 경우 Dialogflow API를 사용 설정하라는 메시지가 표시됩니다. API 사용 설정을 클릭하여 사용 설정합니다.
- 버튼을 클릭해도 작동하지 않으면 API 페이지 로 직접 이동하여 수동으로 사용 설정할 수 있습니다.
- 새로 열린 Dialogflow 페이지에서 에이전트 만들기를 클릭합니다.
- 이제 에이전트 생성 옵션이 표시됩니다. 직접 빌드를 선택합니다.
4단계:
- 표시 이름을 선택합니다 (예: 여행 도우미).
- 위치에서 지역으로 전역 (전역 제공, 미국 내 저장 데이터)을 선택합니다.
- 기타 구성은 기본값으로 유지
- 만들기 버튼을 클릭합니다.
5단계:
- 플레이북 이름을 선택합니다 (예: 정보 에이전트).
- 목표 추가 (예: 고객이 여행 관련 질문에 답변하도록 지원)
- 요청 사항을 정의합니다 (예: - 사용자에게 인사한 다음, 오늘 어떻게 도와드릴지 묻습니다).
- 모든 항목이 확정되면 저장을 누릅니다.
6단계:
- 시뮬레이터 전환 아이콘
을 클릭합니다. - 방금 만든 에이전트 (예: 정보 에이전트)를 선택합니다.
- 에이전트의 기본 생성형 AI 모델을 선택합니다 (예: gemini-1.5-flash).
- 에이전트와 대화하여 테스트합니다 (예: '사용자 입력' 텍스트 상자에 입력).
축하합니다. Vertex AI Agent Builder를 사용하여 AI 에이전트를 만들었습니다.
4. 에이전트에 데이터 스토어 연결
에이전트에게 와칸다로 가는 방법을 물어보면('와칸다로 가는 가장 좋은 방법이 뭐야?') 다음과 같은 대답을 받게 됩니다.
사실상 정확하지만 단순히 '정보를 제공할 수 없습니다'라고 말하고 대화를 종료하는 대신 상담사가 유사한 장소를 추천하면 사용자에게 더 도움이 될 것입니다. 이 접근 방식을 사용하면 사용자가 실제로 에이전트를 통해 여행을 예약할 수 있습니다.
에이전트가 유사한 장소를 추천할 수 있도록 데이터 스토어를 통해 에이전트에게 추가 정보를 제공할 수 있습니다. 상담사가 내장된 지식을 기반으로 사용자 질문에 답할 수 없는 경우 상담사가 참고할 수 있는 추가 지식 베이스 역할을 합니다.
참고: 시뮬레이터를 닫으려면 시뮬레이터 전환 아이콘을 다시 클릭하세요.
데이터 스토어는 간단하게 만들 수 있습니다. Agent Basics 페이지 하단의 + Data store 버튼을 클릭하세요.
다음 정보를 입력합니다.
- 도구 이름: 대체 위치
- 유형: 데이터 스토어
- 설명: 사용자의 요청에 존재하지 않는 위치가 포함된 경우 이 도구를 사용하세요.
작업을 마쳤으면 저장을 클릭합니다.
이렇게 하면 에이전트가 데이터 스토어와 통신할 수 있는 데이터 스토어 도구가 생성되지만 정보가 포함된 실제 데이터 스토어를 만들어야 합니다. 이렇게 하려면 데이터 스토어 추가 및 데이터 스토어 만들기를 클릭합니다.
새 데이터 스토어 만들기를 클릭하면 아래와 같이 Vertex AI 에이전트 빌더 페이지로 리디렉션됩니다.
Cloud Storage 옵션 선택
이 단계를 완료하면
- 파일을 클릭합니다 (매우 중요합니다. 그렇지 않으면 가져오기가 실패합니다).
- ai-workshops/agents/data/wakanda.txt를 입력합니다.
- 계속을 클릭합니다.
궁금하신 분들을 위해 제공된 텍스트 파일의 콘텐츠를 알려드립니다.
Places that are similar to Wakanda
- Oribi Gorge in South Africa: The rock formations here are reminiscent of the Warrior Falls in Wakanda.
- Iguazu Falls: Located on the border of Argentina and Brazil, these massive waterfalls were a major inspiration for the Warrior Falls.
- Immerse yourself in Wakandan culture: Read the Black Panther comics, watch the movies, and explore online resources to learn more about Wakandan culture, language, and technology.
- Visit a Disney theme park: While there isn't a dedicated Wakanda land yet, you might be able to meet Black Panther at Disneyland or on a Marvel Day at Sea Disney cruise.
다음 페이지에서 데이터 스토어의 이름을 지정하고 (예: Wakanda Alternative) 만들기를 클릭합니다.
마지막 단계로 방금 만든 데이터 소스를 선택하고 만들기를 클릭합니다. 데이터 스토어를 클릭하면 데이터 스토어 가져오기 진행 상황을 확인할 수 있습니다.
참고: 가져오기 활동이 완료되는 데 시간이 걸리므로 이 활동이 진행되는 동안 여기에서 Vertex AI 에이전트에 사용할 수 있는 데이터 스토어 옵션을 자세히 살펴보세요.
모든 것이 원활하게 진행되었다면 Dialogflow 탭으로 돌아가 새로고침을 클릭합니다. 사용 가능한 데이터 스토어 페이지에 데이터 스토어가 생성된 것을 확인할 수 있습니다.
에이전트의 환각을 방지하려면 데이터 스토어의 그라운딩 구성에서 에이전트가 허구의 내용을 만들지 못하도록 더 엄격한 제한을 적용하는 매우 낮음으로 설정을 지정하세요. 지금은 기본값으로 유지하되 언제든지 다른 설정으로 탐색할 수 있습니다.
이제 추가된 데이터 스토어를 선택하고 확인을 클릭한 다음 저장을 클릭합니다.
이제 Agent Basics 페이지로 돌아갑니다. 플레이북 구성 하단에 새로 만든 데이터 스토어(예: Alternative Location)가 사용 가능한 상태로 표시됩니다. 데이터 스토어 (예: Alternative Location)를 선택하고 페이지 상단의 저장 버튼을 클릭합니다.
거의 완료되었습니다. 마지막 단계는 에이전트의 안내에 '대체 위치' 도구를 포함하는 것입니다. 상담사 안내에 - 사용자의 요청에 존재하지 않는 위치가 포함된 경우 ${TOOL: Alternative Location}을 사용해라는 줄을 추가한 다음 저장을 클릭합니다.
이제 다 됐습니다. 토글 시뮬레이터를 다시 열고 동일한 질문 (예: 와칸다에 가는 가장 좋은 방법은 뭐야?)을 해 보겠습니다.
축하합니다. 이제 에이전트가 텍스트 파일에서 제공된 정보를 사용하여 장소를 추천합니다.
이제 자체 에이전트 빌더 AI 에이전트 빌드가 완료되었습니다. 더 나은 환경을 위해 에이전트를 맞춤설정하는 방법을 자세히 알아보려면 아래의 추가 활동을 확인하세요.
5. 추가 활동 - AI 에이전트 라이브로 만들기
이전 단계에서는 AI 에이전트를 개발하고 관련 참조 데이터로 그라운딩했습니다. 다음 섹션에서는 이 에이전트를 웹사이트에 삽입하여 방문자와 실시간으로 상호작용할 수 있도록 하는 방법을 다룹니다.
에이전트를 노출하는 방법에는 여러 가지가 있습니다. 내보내거나 직접 게시할 수 있습니다. 문서를 살펴보고 가능한 옵션을 알아보세요.
Dialogflow 탭의 오른쪽 상단에서 더보기 메뉴를 클릭한 다음 에이전트 게시를 클릭합니다.
모든 구성을 기본값으로 유지하고 인증되지 않은 API 사용 설정을 클릭합니다.
참고: 인증되지 않은 API를 사용 설정하는 것은 데모 목적으로만 사용해야 하며 프로덕션 워크로드에는 이 구성을 사용하지 않는 것이 좋습니다. 안전하게 게시하는 데 관심이 있다면 이 문서를 참고하세요.
클릭하면 다음과 같은 작은 CSS 코드 스니펫이 표시됩니다.
코드 스니펫을 복사하기만 하면 됩니다. 이 코드 스니펫은 나중에 웹사이트에 통합됩니다.
웹사이트를 만들려면 Cloud Editor 환경을 사용합니다. Cloud Editor를 여는 단계는 다음과 같습니다.
- 다른 탭에서 Google Cloud 콘솔을 엽니다.
- 오른쪽 상단에 있는 Cloud Shell 활성화 버튼을 클릭합니다.
- 편집기 열기 버튼을 클릭합니다.
Cloud Shell을 승인하라는 메시지가 표시되면 승인을 클릭하여 계속합니다.
다음 섹션에서는 Gemini Code Assist를 사용하여 에이전트 스니펫과 통합할 샘플 Python Flask 웹 애플리케이션을 만듭니다.
Cloud Shell 편집기가 열리면 Gemini Code Assist를 클릭하고 Google Cloud 프로젝트에 로그인합니다. API를 사용 설정하라는 메시지가 표시되면 사용 설정을 클릭합니다.
완료되면 Gemini Code Assist에 플라스크 앱을 만들고 AI 에이전트 코드 스니펫을 통합해 달라고 요청합니다.
다음은 사용할 수 있는 샘플 프롬프트입니다.
Here is my Travel buddy Vertex AI agent builder agent publish code snippet,
<REPLACE IT WITH YOUR AI AGENT PUBLISH CODE SNIPPET>
can you create a sample flask app to use it
참고: 여기서는 Python Flask 앱을 요청했습니다. 다른 프로그래밍 언어나 프레임워크를 선호하는 경우 자유롭게 사용하세요. Gemini Code Assist는 다양한 프로그래밍 언어를 생성할 수 있습니다. 자세한 내용은 지원되는 언어, IDE, 인터페이스를 참고하세요.
제공된 코드 스니펫이 이미 AI 에이전트와 통합되어 있는 것을 확인할 수 있습니다. 제공된 코드가 유효하고 의도한 대로 작동하는지 테스트하려면 출력 대답의 이 코드 섹션을 실행하는 방법에 관한 Gemini Code Assist의 안내를 따르세요.
샘플 출력 응답 코드 스니펫 -
from flask import Flask, render_template_string
app = Flask(__name__)
# HTML template string with the provided Dialogflow Messenger code
html_template = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Buddy Chatbot</title>
<link rel="stylesheet" href="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/themes/df-messenger-default.css">
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
<style>
df-messenger {
z-index: 999;
position: fixed;
--df-messenger-font-color: #000;
--df-messenger-font-family: Google Sans;
--df-messenger-chat-background: #f3f6fc;
--df-messenger-message-user-background: #d3e3fd;
--df-messenger-message-bot-background: #fff;
bottom: 16px;
right: 16px;
}
body {
font-family: sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h1>Welcome to Travel Buddy!</h1>
<p>Start chatting with our AI Travel buddy, in the bottom right corner.</p>
<df-messenger
project-id="<SAMPLE>"
agent-id="<SAMPLE>"
language-code="en"
max-query-length="-1">
<df-messenger-chat-bubble
chat-title="Travel Buddy">
</df-messenger-chat-bubble>
</df-messenger>
</body>
</html>
"""
@app.route("/")
def index():
"""Renders the HTML template with the Dialogflow Messenger."""
return render_template_string(html_template)
if __name__ == "__main__":
app.run(debug=True)
제공된 안내에 따라
- 제공된 샘플 Flask 앱 코드 스니펫을 복사합니다.
- app.py라는 새 파일을 만들고 파일을 저장합니다.
다음 단계에서는 이 스니펫을 실행하기 위해 플라스크를 설치하라고 요청합니다. Cloud Shell에는 기본적으로 일반적으로 사용되는 유틸리티가 모두 설치되어 있으므로 지금은 필요하지 않습니다.
파일을 저장 (Ctrl + S 또는 CMD + S)한 다음 터미널 열기를 클릭하여 제공된 코드를 실행합니다.
터미널에서 아래 명령어를 실행합니다.
python app.py
참고: app.py 파일이 있는 올바른 폴더에 있는지 확인합니다.
Python Flask 앱은 포트 5000에서 실행됩니다. 이 웹 애플리케이션의 미리보기를 보려면 Cloud Shell에서 웹 미리보기 아이콘을 클릭합니다. 그런 다음 포트 변경을 클릭하고 5000을 입력한 후 변경 및 미리보기를 클릭하여 저장합니다.
샘플 웹사이트가 표시되고 AI 에이전트가 이미 제공됩니다. AI 에이전트를 클릭하고 채팅을 시작하면 됩니다.
다양한 프롬프트로 테스트해 보세요. Gemini Code Assist에 웹사이트를 미화해 달라고 요청하거나, AI 에이전트에 그라운딩 데이터를 추가하여 더 많은 리소스를 제공하도록 요청할 수도 있습니다.
준비가 되면 다음 단계로 Google Cloud에서 이 AI 에이전트를 호스팅하여 누구나 어디서나 액세스할 수 있도록 할 수 있습니다. 이 Codelab의 나머지 부분에서는 이 샘플 Flask 애플리케이션을 Cloud Run에 컨테이너로 배포합니다.
참고: Cloud Run에만 국한되지 않습니다. Cloud Run이 무엇인지 모르는 경우에도 질문할 수 있습니다. Gemini 코드 어시스턴트에게 권장사항에 따라 Google Cloud 또는 어디에나 배포하도록 요청할 수 있으며, 이 부분에서도 도움을 받을 수 있습니다.
Cloud Shell 터미널로 돌아가서 Ctrl + C를 눌러 프로세스를 종료합니다. 편집기 열기를 다시 클릭하고 Gemini Code Assist에 애플리케이션을 컨테이너화하고 cloud run에 배포하는 데 도움을 요청합니다.
Can you help me deploy this sample flask app to cloud run service
Cloud Run 서비스에서 앱을 호스팅하기 위해 따라야 하는 몇 가지 안내와 명령어를 제공합니다. 안내를 따르세요.
다음은 샘플 출력 응답입니다.
Cloud Run에 배포하는 단계
- 기본 요건:
- Google Cloud 계정: 결제가 사용 설정된 Google Cloud 계정이 필요합니다.
- gcloud CLI: 로컬 머신에 Google Cloud SDK (gcloud CLI)를 설치하고 초기화합니다. 이를 사용하여 터미널에서 Google Cloud와 상호작용합니다.
- Docker: 로컬 머신에 Docker를 설치합니다. Cloud Run은 Docker를 사용하여 애플리케이션을 컨테이너화합니다.
- 프로젝트 설정: gcloud CLI에서 Google Cloud 프로젝트가 선택되어 있는지 확인합니다.
gcloud config list project로 확인하고gcloud config set project YOUR_PROJECT_ID로 설정할 수 있습니다.
참고: 이 전체 활동은 Cloud Shell에서 실행되므로 프로젝트를 설정할 필요가 없습니다.
- 만들기 **
requirements.txt****:**
- 이 파일에는 앱에 필요한 모든 Python 패키지가 나열되어 있습니다. 프로젝트 디렉터리 (
main.py이 있는 위치)에requirements.txt이라는 파일을 만들고 다음 줄을 추가합니다.
- 만들기 **
Dockerfile****:**
Dockerfile은 애플리케이션의 Docker 이미지를 빌드하는 방법을 정의합니다. 프로젝트 디렉터리에Dockerfile이라는 파일 (확장자 없음)을 만들고 다음 콘텐츠를 추가합니다.
# Use an official Python runtime as a parent imageFROM python:3.9-slim-buster
# Set the working directory to /appWORKDIR /app
# Copy the current directory contents into the container at /app
COPY . /app
# Install any needed packages specified in requirements.txt
RUN pip install --no-cache-dir -r requirements.txt
# Make port 5000 available to the world outside this container
EXPOSE 5000
# Define environment variable
ENV NAME World
# Run app.py when the container launches
CMD ["python", ".py"]
- Docker 이미지 빌드:
- 터미널을 열고 프로젝트 디렉터리로 이동하여 다음을 실행합니다.
gcloud builds submit –tag gcr.io/bgr-workshop-23rd/travel-buddy
- Cloud Run에 배포:
- 이미지를 빌드하고 업로드한 후 다음 명령어를 사용하여 Cloud Run에 배포합니다.
gcloud run deploy travel-buddy --image gcr.io/bgr-workshop-23rd/travel-buddy --region us-central1
이 단계를 완료하면 통합된 AI 에이전트가 포함된 애플리케이션이 최종 사용자에게 표시됩니다.
축하드리며 즐거운 학습이 되시길 바랍니다.
6. 삭제
이 Codelab에서 사용한 리소스의 비용이 Google Cloud 계정에 청구되지 않도록 하려면 다음 단계를 따르세요.