Membuat Agen AI dengan Vertex AI Agent Builder

1. Sebelum memulai

Codelab mandiri ini akan memandu Anda membangun Agen AI dengan Vertex AI Agent Builder Google Cloud. Setiap langkah akan menyoroti fitur Agent Builder tertentu dan menjelaskan tujuannya.

Prasyarat

Pemahaman dasar tentang AI Generatif di Google Cloud
Pemahaman dasar tentang Konsep Agen AI
Pemahaman dasar tentang Gemini CodeAssist (Opsional)

Yang akan Anda pelajari

Cara membuat Agen AI sederhana menggunakan Vertex AI Agent Builder
Cara mendasari agen yang dibuat dengan melampirkan penyimpanan data
Cara mengintegrasikan Agen AI ke situs Anda(Opsional)

Yang Anda butuhkan

Pikiran yang ingin tahu
Komputer dan Wi-Fi yang berfungsi dengan baik
Project Google Cloud dengan penagihan terlampir.

Catatan: Jika Anda belum memiliki project Google Cloud, Anda dapat membuatnya dengan mengikuti petunjuk ini. Anda juga dapat melihat Layanan Paket Gratis Google Cloud.

2. Mendesain Agen AI Pertama Anda

Sekarang Anda siap membuat agen AI Anda sendiri. Namun, sebelum memulai pengembangan, Anda harus menetapkan visi yang jelas untuk agen Anda. Tanyakan pada diri Anda pertanyaan-pertanyaan penting berikut:

Masalah apa yang akan diselesaikan? Apakah aplikasi ini akan mengotomatiskan tugas, memberikan informasi, menawarkan hiburan, atau memfasilitasi eksplorasi kreatif?
Apa fungsi utamanya? Apakah akan menjalankan tugas atau mendelegasikan tugas? Apakah akan membuat teks, atau membuat kombinasi media yang berbeda?
Apa saja batasannya? Apakah robot ini dapat melakukan semuanya secara mandiri?
Kepribadian atau persona apa yang harus dimiliki? Apakah akan formal, informal, lucu, bermanfaat, atau informatif?
Apa metrik keberhasilannya? Bagaimana cara Anda mengukur efektivitas agen?

Untuk mempercepat prosesnya, berikut jawaban atas pertanyaan tersebut untuk agen perjalanan yang akan Anda buat hari ini:

Masalah apa yang akan diselesaikan?
Merencanakan perjalanan bisa memakan waktu dan melelahkan. Agen perjalanan ini akan membantu pengguna menemukan tujuan, merencanakan itinerari, memesan penerbangan dan akomodasi.
Apa fungsi utamanya?
Agen harus dapat
menjawab pertanyaan tentang tujuan, seperti persyaratan visa
merencanakan rencana perjalanan yang sesuai dengan jadwal dan tujuan pengguna
memesan penerbangan dan akomodasi
Apa saja batasannya?
Agen mungkin tidak dapat menjawab kueri yang rumit secara default
Agen tidak akan dapat membuat gambar visual
Pengetahuan agen akan dibatasi oleh model yang mendasarinya
Kepribadian atau persona apa yang harus dimiliki?
Agen ini harus berpengetahuan luas, membantu, dan antusias tentang perjalanan. Harus mampu menyampaikan informasi secara jelas dan ringkas.
Apa metrik keberhasilannya?
Keberhasilan agen ini dapat diukur berdasarkan seberapa puas pengguna dengan rekomendasinya (menjelajahi, merencanakan, memesan)

3. Membangun Agen AI dengan Vertex AI Agent Builder

Dengan Vertex AI Agent Builder, Agen AI dapat dibuat hanya dalam beberapa langkah.

Langkah 1:

Buka Vertex AI Agent Builder.
Anda akan melihat halaman selamat datang.
Klik tombol CONTINUE AND ACTIVATE THE API.

Langkah 2:

Anda akan dialihkan ke halaman Pembuatan Aplikasi.
Klik tombol CREATE A NEW APP.

Langkah 3:

Pilih Conversational agent, lalu klik CREATE

Catatan:

Setelah Anda mengklik CREATE, tab baru Diaglogflow Conversational Agents akan terbuka.
Jika Anda diminta untuk memilih Project Google Cloud, pilih project Google Cloud yang terkait dengan akun Gmail yang benar.
Jika Anda mengerjakan lab ini di akun baru, Anda akan diminta untuk mengaktifkan Dialogflow API. Klik Enable API untuk mengaktifkannya.

Jika mengklik tombol tidak berhasil, Anda dapat mengaktifkannya secara manual dengan membuka halaman API secara langsung.
Di halaman Dialogflow yang baru dibuka, klik Create Agent

Sekarang, Anda akan melihat beberapa opsi untuk membuat agen, pilih Buat sendiri.

Langkah 4:

Pilih Nama Tampilan (misalnya, Travel Buddy)
Untuk Lokasi, pilih global (Global serving, data-at-rest in US) sebagai Region
Pertahankan konfigurasi lainnya, default
Klik tombol CREATE.

Langkah 5:

Pilih Nama Playbook (misalnya, Agen Info)
Tambahkan Goal (misalnya, Bantu pelanggan menjawab pertanyaan terkait perjalanan)
Tentukan Instruction (misalnya - Sapa pengguna, lalu tanyakan bantuan yang bisa diberikan)
Tekan Simpan setelah semuanya selesai

Langkah 6:

Klik ikon Alihkan Simulator
Pilih agen yang baru saja Anda buat (misalnya, Info Agent)
Pilih model AI generatif pokok untuk agen Anda (misalnya, gemini-1.5-flash)
Uji agen Anda dengan melakukan percakapan dengannya (yaitu, Ketik sesuatu di kotak teks "Masukkan Input Pengguna")

Selamat! Anda baru saja berhasil membuat Agen AI menggunakan Vertex AI Agent Builder.

4. Melampirkan Datastore ke Agen

Coba tanyakan kepada agen Anda tentang cara menuju Wakanda (misalnya, "Bagaimana cara terbaik untuk mencapai Wakanda?"), Anda akan mendapatkan respons seperti ini:

Meskipun secara faktual benar, daripada hanya menyatakan "Saya tidak dapat memberikan informasi" dan mengakhiri percakapan, akan lebih membantu pengguna jika agen menyarankan tempat serupa. Pendekatan ini berpotensi membuat pengguna benar-benar memesan perjalanan melalui agen.

Agar agen dapat merekomendasikan tempat serupa, Anda dapat memberikan informasi selengkapnya kepada agen melalui Datastore. Hal ini berfungsi sebagai basis pengetahuan tambahan yang dapat dirujuk agen jika agen tidak dapat menjawab pertanyaan pengguna berdasarkan pengetahuan bawaannya.

Catatan: Jika Anda ingin menutup simulator, klik ikon aktifkan/nonaktifkan simulator lagi

Membuat penyimpanan data sangat mudah, klik tombol + Data store di bagian bawah halaman Agent Basics.

Isi informasi berikut:

Nama alat: Lokasi Alternatif
Jenis: Penyimpanan data
Deskripsi: Gunakan alat ini jika permintaan pengguna berisi lokasi yang tidak ada

Klik Save setelah selesai.

Tindakan ini akan membuat alat penyimpanan data bagi agen untuk berkomunikasi dengan penyimpanan data, tetapi Anda tetap perlu membuat penyimpanan data sebenarnya yang berisi informasi. Untuk melakukannya, klik Tambahkan penyimpanan data dan Buat penyimpanan data.

Setelah mengklik Create new data store, Anda akan dialihkan ke halaman Vertex AI Agent Builder seperti di bawah

Pilih opsi Di Cloud Storage

Setelah Anda menyelesaikan langkah tersebut,

klik FILE (Ini sangat penting, jika tidak, impor Anda akan gagal)
type ai-workshops/agents/data/wakanda.txt
klik LANJUTKAN

Jika Anda penasaran, berikut isi file teks yang diberikan:

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.



Di halaman berikutnya, beri nama penyimpanan data Anda (misalnya, Wakanda Alternative), lalu klik CREATE.

Sebagai langkah terakhir, PILIH sumber data yang baru saja Anda buat,lalu klik BUAT. Anda dapat melihat progres impor penyimpanan data dengan mengklik penyimpanan data Anda**.**

Catatan: Aktivitas impor akan memerlukan waktu beberapa saat hingga berhasil diselesaikan. Sementara itu, Anda dapat menjelajahi opsi penyimpanan data lainnya yang tersedia untuk agen Vertex AI Anda di sini

Jika semuanya berjalan lancar, kembali ke tab dialogflow Anda dan klik muat ulang, Anda akan melihat penyimpanan data yang dibuat di halaman Available data stores.

Untuk mencegah Agent berhalusinasi, dalam konfigurasi perujukan untuk penyimpanan data Anda, tetapkan setelan ke Sangat Rendah yang menerapkan batasan yang lebih ketat pada Agent agar tidak mengarang-ngarang. Untuk saat ini, biarkan setelan default, tetapi Anda dapat menjelajahinya dengan setelan yang berbeda kapan saja.

Sekarang, pilih penyimpanan data yang ditambahkan, klik confirm, lalu klik save.

Sekarang, kembali ke halaman Agent Basics. Di bagian bawah konfigurasi playbook, Anda akan melihat penyimpanan data yang baru dibuat(misalnya, Lokasi Alternatif) tersedia untuk digunakan. Centang Penyimpanan Data (misalnya, Lokasi Alternatif), lalu klik tombol Simpan di bagian atas halaman.

Anda hampir selesai! Langkah terakhir adalah menyertakan alat "Lokasi Alternatif" dalam petunjuk agen. Tambahkan baris, - Gunakan ${TOOL: Alternative Location} jika permintaan pengguna berisi lokasi yang tidak ada, ke petunjuk agen, lalu klik simpan.

Kita sudah siap. Buka kembali simulator tombol dan ajukan pertanyaan yang sama (yaitu, Apa cara terbaik untuk mencapai Wakanda?)

Selamat! Agen Anda kini merekomendasikan tempat menggunakan informasi yang diberikan dari file teks.

Selesai, kita telah selesai membuat agen AI pembuat agen kita sendiri. Jika Anda ingin mempelajari lebih lanjut cara menyesuaikan agen untuk pengalaman yang lebih baik, lihat Aktivitas Tambahan di bawah.

5. Aktivitas Tambahan - Mengaktifkan agen AI Anda

Pada langkah-langkah sebelumnya, Anda telah mengembangkan agen AI dan mendasarkannya pada data referensi yang relevan. Di bagian berikut, Anda akan membahas pertanyaan penting tentang cara menyematkan agen ini dalam situs Anda, sehingga memungkinkan interaksi real-time dengan pengunjung.

Ada banyak cara untuk mengekspos agen Anda. Anda dapat mengekspornya atau langsung memublikasikannya. Anda dapat menjelajahi dokumentasi untuk mengetahui opsi yang mungkin tersedia.

Di sudut kanan atas tab Dialogflow, klik Menu tambahan, lalu Publikasikan agen

Tetapkan semua konfigurasi ke Default, lalu klik Enable unauthenticated API.

Catatan: Pengaktifan API yang tidak diautentikasi hanya untuk tujuan demo dan konfigurasi ini tidak direkomendasikan untuk digunakan pada beban kerja produksi. Jika Anda tertarik untuk memublikasikan secara aman, lihat dokumentasi ini.

Setelah mengklik, Anda akan melihat cuplikan kode CSS kecil:

Cukup salin cuplikan kode. Anda akan mengintegrasikan cuplikan kode ini ke situs nanti.

Untuk membuat situs, Anda akan menggunakan lingkungan Cloud Editor. Berikut langkah-langkah untuk membuka Cloud Editor:

Buka Konsol Google Cloud di tab lain.
Klik tombol Activate Cloud Shell di pojok kanan atas
Klik tombol Open Editor.

Jika ada perintah untuk Memberi Otorisasi Cloud Shell, klik Authorize untuk melanjutkan.

Di bagian berikut, Anda akan menggunakan Gemini Code Assist untuk membuat contoh aplikasi web python flask guna diintegrasikan dengan cuplikan Agen Anda.

Setelah Editor Cloud Shell dibuka, klik Gemini Code Assist dan login ke Project Google Cloud Anda. Jika Anda diminta untuk mengaktifkan API, klik Aktifkan.

Setelah selesai, minta Gemini Code Assist untuk membuat aplikasi flask dan mengintegrasikan cuplikan kode agen AI ke dalamnya.

Berikut contoh perintah yang dapat Anda gunakan

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



Catatan: Di sini kita telah meminta aplikasi flask python. Jika Anda lebih memilih bahasa pemrograman atau framework lain, silakan gunakan. Gemini Code Assist memiliki kemampuan untuk membuat berbagai bahasa pemrograman. Lihat Bahasa, IDE, dan antarmuka yang didukung untuk mengetahui detail selengkapnya.

Anda akan melihat bahwa cuplikan kode yang diberikan sudah terintegrasi dengan agen AI. Untuk menguji apakah kode yang diberikan valid dan berfungsi seperti yang diinginkan, Anda dapat mengikuti petunjuk yang diberikan oleh Gemini Code Assist tentang cara menjalankan bagian kode ini dari respons output.

Cuplikan kode Respons Output Contoh -

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)



Sesuai dengan petunjuk yang diberikan

Salin cuplikan kode aplikasi flask contoh yang diberikan,
Buat file baru bernama app.py dan simpan file.

Pada langkah berikutnya, Anda akan diminta menginstal flask untuk menjalankan cuplikan ini. Hal ini tidak diperlukan untuk saat ini karena Cloud Shell sudah menginstal semua utilitas yang umum digunakan secara default.

Simpan file (Ctrl + S atau CMD + S), lalu klik Open Terminal, tempat Anda akan menjalankan kode yang diberikan.

Di terminal, jalankan perintah di bawah

python app.py



Catatan: Pastikan Anda berada di folder yang tepat, tempat file app.py berada

Aplikasi flask python akan berjalan di port 5000. Untuk melihat pratinjau aplikasi web ini, klik ikon Web Preview di cloud shell. Kemudian, Anda dapat mengklik Change Port, memasukkan 5000, dan mengklik Change and Preview untuk menyimpannya.

Situs contoh akan muncul dan agen AI sudah tersedia. Cukup klik agen AI dan mulai percakapan dengannya.

Anda dapat mengujinya dengan perintah yang berbeda. Anda juga dapat meminta Gemini Code Assist untuk mempercantik situs Anda, atau menambahkan data perujukan lainnya ke agen AI dan membuatnya lebih bermanfaat.

Setelah siap, sebagai langkah berikutnya, Anda dapat mencoba menghosting agen AI ini di Google Cloud agar dapat diakses oleh siapa saja, di mana saja. Untuk pengingat codelab ini, Anda akan men-deploy aplikasi flask contoh ini di Cloud Run sebagai container.

Catatan: Tidak hanya terbatas pada Cloud Run (bahkan Anda dapat menanyakan hal ini jika tidak tahu apa itu Cloud Run), Anda dapat meminta Gemini Code Assist untuk membantu Anda men-deploy ini di Google Cloud atau di mana saja dengan praktik terbaik, Gemini Code Assist juga dapat membantu Anda dalam hal tersebut.

Kembali ke Cloud Shell Terminal dan tekan Ctrl + C untuk menghentikan proses. Klik Open Editor lagi dan minta Gemini Code Assist untuk membantu kita membuat aplikasi dalam penampung dan men-deploy-nya di cloud run.

Can you help me deploy this sample flask app to cloud run service



Langkah ini memberikan beberapa petunjuk dan perintah yang harus diikuti untuk menghosting aplikasi kita di layanan Cloud Run. Mari ikuti petunjuknya

Berikut adalah contoh respons output

Langkah-Langkah Men-deploy ke Cloud Run

Prasyarat:

Akun Google Cloud: Anda memerlukan akun Google Cloud dengan penagihan diaktifkan.
gcloud CLI: Instal dan inisialisasi Google Cloud SDK (gcloud CLI) di mesin lokal Anda. Anda akan menggunakannya untuk berinteraksi dengan Google Cloud dari terminal.
Docker: Instal Docker di komputer lokal Anda. Cloud Run menggunakan Docker untuk memasukkan aplikasi Anda ke dalam container.
Penyiapan Project: Pastikan Anda telah memilih project Google Cloud di gcloud CLI. Anda dapat memeriksa dengan gcloud config list project dan menyetelnya dengan gcloud config set project YOUR_PROJECT_ID

Catatan: Karena kita melakukan seluruh aktivitas ini di Cloud Shell, tidak perlu menyiapkan project

Buat **requirements.txt****:**

File ini mencantumkan semua paket Python yang dibutuhkan aplikasi Anda. Di direktori project Anda (tempat main.py berada), buat file bernama requirements.txt dan tambahkan baris berikut

Buat **Dockerfile****:**

Dockerfile menentukan cara membangun image Docker untuk aplikasi Anda. Buat file bernama Dockerfile (tanpa ekstensi) di direktori project Anda dan tambahkan konten berikut:

# 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"]



Membangun Image Docker:

Buka terminal Anda, buka direktori project Anda, lalu jalankan:

gcloud builds submit –tag gcr.io/bgr-workshop-23rd/travel-buddy

Deploy ke Cloud Run:

Setelah image dibangun dan diupload, deploy ke Cloud Run dengan perintah berikut:

gcloud run deploy travel-buddy --image gcr.io/bgr-workshop-23rd/travel-buddy --region us-central1



Setelah menyelesaikan langkah-langkah ini, Anda akan melihat aplikasi dengan agen AI terintegrasi akan aktif untuk pengguna akhir Anda.

Selamat dan selamat belajar.

6. Pembersihan

Agar tidak menimbulkan biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam codelab ini, ikuti langkah-langkah berikut:

Di konsol Google Cloud, buka halaman Manage resources.
Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Delete.
Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.
Atau, Anda dapat membuka Cloud Run di konsol, memilih layanan yang baru saja Anda deploy, lalu menghapusnya.