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. 에이전트에 데이터 스토어 연결
상담사에게 Wakanda에 가는 방법을 물어보세요 (예: 'Wakanda에 가는 가장 좋은 방법은 무엇인가요?'). 다음과 같은 응답을 받게 됩니다.
사실에 기반한 대답이지만 '정보를 제공해 드릴 수 없습니다'라고 말하고 대화를 종료하는 대신 상담사가 유사한 장소를 제안하는 것이 사용자에게 더 도움이 될 것입니다. 이 접근 방식을 사용하면 사용자가 실제로 상담사를 통해 여행을 예약할 수 있습니다.
상담사가 유사한 장소를 추천할 수 있도록 하려면 Datastore를 통해 상담사에게 추가 정보를 제공하면 됩니다. 상담사가 내장된 지식을 바탕으로 사용자 질문에 답변할 수 없는 경우 참고할 수 있는 추가 지식 베이스 역할을 합니다.
참고: 시뮬레이터를 닫으려면 전환 시뮬레이터 아이콘을 다시 클릭합니다.
데이터 스토어를 만드는 것은 간단합니다. 상담사 기본사항 페이지 하단에 있는 + 데이터 스토어 버튼을 클릭합니다.
다음 정보를 입력합니다.
- 도구 이름: 대체 위치
- 유형: 데이터 스토어
- 설명: 사용자의 요청에 존재하지 않는 위치가 포함된 경우 이 도구를 사용하세요.
작업을 마쳤으면 저장을 클릭합니다.
이렇게 하면 에이전트가 데이터 스토어와 통신할 수 있는 데이터 스토어 도구가 생성되지만 정보가 포함된 실제 데이터 스토어는 여전히 만들어야 합니다. 이렇게 하려면 데이터 스토어 추가 및 데이터 스토어 만들기를 클릭합니다.
새 데이터 스토어 만들기를 클릭하면 아래와 같이 Vertex AI Agent Builder 페이지로 리디렉션됩니다.
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 탭으로 돌아가 새로고침을 클릭합니다. 그러면 사용 가능한 데이터 스토어 페이지에 생성된 데이터 스토어가 표시됩니다.
상상과 관련된 에이전트의 작동을 방지하려면 데이터 스토어의 접지 구성에서 설정을 매우 낮음으로 설정합니다. 그러면 에이전트가 허구를 만들어내는 것을 더 엄격하게 제한할 수 있습니다. 지금은 기본값으로 유지하되 언제든지 다른 설정으로 살펴볼 수 있습니다.
이제 추가된 데이터 스토어를 선택하고 확인을 클릭한 다음 저장을 클릭합니다.
이제 상담사 기본사항 페이지로 돌아갑니다. 플레이북 구성 하단에 새로 만든 데이터 스토어(예: 대체 위치)를 사용할 수 있게 됩니다. 데이터 스토어 (예: 대체 위치)를 선택하고 페이지 상단의 저장 버튼을 클릭합니다.
거의 완료되었습니다. 마지막 단계는 상담사 안내에 '대체 위치' 도구를 포함하는 것입니다. 상담사 안내에 - 사용자의 요청에 존재하지 않는 위치가 포함된 경우 ${TOOL: 대체 위치}를 사용하세요라는 줄을 추가한 다음 저장을 클릭합니다.
이제 다 됐습니다. 전환 시뮬레이터를 다시 열고 동일한 질문 (예: 와칸다에 도착하는 가장 좋은 방법은 무엇인가요?)을 던져 보겠습니다.
축하합니다. 이제 상담사가 텍스트 파일에 제공된 정보를 사용하여 장소를 추천합니다.
이제 자체 상담사 빌더 AI 상담사를 빌드했습니다. 더 나은 환경을 위해 상담사를 맞춤설정하는 방법을 자세히 알아보려면 아래의 추가 활동을 확인하세요.
5. 추가 활동 - AI 상담사 게시
이전 단계에서는 AI 에이전트를 개발하고 관련 참조 데이터로 학습시켰습니다. 다음 섹션에서는 이 에이전트를 웹사이트에 삽입하여 방문자와 실시간으로 상호작용하는 방법이라는 중요한 문제를 다룹니다.
에이전트를 노출하는 방법에는 여러 가지가 있습니다. 내보내거나 직접 게시할 수 있습니다. 문서를 살펴보고 가능한 옵션을 알아볼 수 있습니다.
Dialogflow 탭의 오른쪽 상단에서 오버플로 메뉴를 클릭한 다음 상담사 게시를 클릭합니다.
모든 구성을 기본값으로 유지하고 인증되지 않은 API 사용 설정을 클릭합니다.
참고: 인증되지 않은 API를 사용 설정하는 것은 데모 목적으로만 사용해야 하며 프로덕션 워크로드에는 이 구성을 사용하지 않는 것이 좋습니다. 안전하게 게시하는 방법을 알아보려면 이 문서를 참고하세요.
클릭하면 작은 CSS 코드 스니펫이 표시됩니다.
코드 스니펫을 복사하기만 하면 됩니다. 나중에 이 코드 스니펫을 웹사이트에 통합합니다.
웹사이트를 만들려면 Cloud 편집기 환경을 사용합니다. Cloud 편집기를 여는 단계는 다음과 같습니다.
- 다른 탭에서 Google Cloud 콘솔을 엽니다.
- 오른쪽 상단의 Cloud Shell 활성화 버튼을 클릭합니다.
- 편집기 열기 버튼을 클릭합니다.
Cloud Shell을 승인하라는 메시지가 표시되면 승인을 클릭하여 계속합니다.
다음 섹션에서는 Gemini Code Assist를 사용하여 상담사 스니펫과 통합할 샘플 Python flask 웹 애플리케이션을 만듭니다.
Cloud Shell 편집기가 열리면 Gemini Code Assist를 클릭하고 Google Cloud 프로젝트에 로그인합니다. API를 사용 설정하라는 메시지가 표시되면 사용 설정을 클릭합니다.
완료되면 Gemini Code Assist에 flask 앱을 만들고 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라는 새 파일을 만들고 파일을 저장합니다.
다음 단계에서는 이 스니펫을 실행하기 위해 flask를 설치하라는 메시지가 표시됩니다. Cloud Shell에는 이미 일반적으로 사용되는 모든 유틸리티가 기본적으로 설치되어 있으므로 지금은 필요하지 않습니다.
파일을 저장한 후 (Ctrl + S 또는 CMD + S) 터미널 열기를 클릭하여 제공된 코드를 실행합니다.
터미널에서 아래 명령어를 실행합니다.
python app.py
참고: app.py 파일이 있는 올바른 폴더에 있는지 확인합니다.
Python Flask 앱이 포트 5000에서 실행됩니다. 이 웹 애플리케이션의 미리보기를 보려면 Cloud Shell에서 웹 미리보기 아이콘을 클릭합니다. 그런 다음 포트 변경, 5000 입력을 클릭하고 변경 및 미리보기를 클릭하여 저장할 수 있습니다.
샘플 웹사이트가 표시되고 이미 AI 상담사가 제공됩니다. AI 상담사를 클릭하고 채팅을 시작하면 됩니다.
다양한 프롬프트로 자유롭게 테스트해 보세요. Gemini Code Assist에 웹사이트를 아름답게 꾸미거나 AI 상담사에게 더 많은 기반 데이터를 추가하여 더 많은 정보를 얻도록 요청할 수도 있습니다.
준비가 되면 다음 단계로 이 AI 상담사를 Google Cloud에 호스팅하여 누구나 어디서나 액세스할 수 있도록 해 보세요. 이 Codelab의 나머지 부분에서는 이 샘플 Flask 애플리케이션을 Cloud Run에 컨테이너로 배포합니다.
참고: Cloud Run에만 국한되지 않습니다 (Cloud Run이 무엇인지 모르는 경우에도 문의할 수 있음). Gemini Code Assist에 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 계정에 청구되지 않도록 하려면 다음 단계를 따르세요.