Mengintegrasikan konsep AI mendasar di aplikasi Google Chat

1. Sebelum memulai

Apa yang dimaksud dengan aplikasi Google Chat dengan AI?

Aplikasi Google Chat dengan AI dapat melakukan hal berikut:

• Menghadirkan layanan dan resource Anda ke Google Chat, yang memungkinkan pengguna mendapatkan informasi dan mengambil tindakan tanpa meninggalkan percakapan.
• Mengintegrasikan dengan model AI generatif untuk membuat, menelusuri, dan mengedit data seperti teks atau gambar.
• Mendukung pengalaman agentic dengan menerapkan konsep AI percakapan untuk interaksi yang lebih praktis, alami, canggih, dan bermanfaat.

Mengapa perlu mengintegrasikan aplikasi Google Chat dengan AI?

Kasus penggunaan umum termasuk dalam kategori berikut:

• Pembuatan dan pengeditan konten. Buat teks pemasaran, kreasikan postingan media sosial, hasilkan gambar realistis, buat musik, atau bantu pembuatan konten video.
• Penelusuran dan analisis data. Ekstrak insight penting dari pusat informasi yang tidak terstruktur, rangkum teks panjang, klasifikasikan konten, atau terjemahkan bahasa dengan akurasi dan kecepatan yang ditingkatkan.
• Percakapan. Lakukan percakapan yang natural, informatif, dan efisien seperti yang Anda lakukan dengan asisten.
• Otomatisasi tugas. Melakukan tindakan atas nama pengguna, seperti membuat acara kalender baru, mengirim dokumen, atau mengelola tiket dalam sistem eksternal.

Kemampuan untuk mengintegrasikan kapabilitas ini secara langsung dalam antarmuka Google Chat yang familier merupakan peluang besar bagi siapa saja yang ingin meningkatkan pengalaman dan produktivitas penggunanya.

Prasyarat

• Pengetahuan dasar tentang Google Cloud dan Node.js.
• Pengetahuan dasar tentang aplikasi Google Chat, termasuk pesan, kartu, autentikasi, API, dan endpoint HTTP.

Yang akan Anda bangun

Dalam codelab ini, Anda akan membuat delapan aplikasi Google Chat minimalis yang mengintegrasikan konsep AI mendasar untuk menunjukkan cara penerapannya dalam aplikasi di dunia nyata. Semuanya dibuat sebagai add-on Google Workspace dan mengandalkan arsitektur HTTP:

Cara kerjanya sebagai berikut:

1. Pengguna mengirim pesan di Google Chat ke aplikasi Chat, baik sebagai pesan langsung maupun di ruang Chat.
2. Permintaan HTTP dikirim ke server web yang berjalan sebagai fungsi Node.js Google Cloud Run yang berisi logika aplikasi Chat.
3. Secara opsional, logika aplikasi Chat dapat diintegrasikan dengan layanan Google Workspace (seperti Kalender dan Spreadsheet), layanan Google lainnya (seperti Maps, YouTube, dan Vertex AI), atau layanan web lainnya (seperti sistem pengelolaan project atau alat pembuatan tiket).
4. Server web mengirimkan respons HTTP kembali ke layanan aplikasi Chat di Chat.
5. Respons dikirimkan kepada pengguna.
6. Secara opsional, aplikasi Chat dapat memanggil Chat API untuk memposting pesan secara asinkron atau melakukan operasi lain.

Fungsi Node.js Google Cloud Run setiap aplikasi Google Chat berisi versi file sumbernya sendiri untuk melakukan tindakan yang diperlukan pada langkah #3 dan #6 di atas:

• package.json: Manifes pusat yang berfungsi sebagai cetak biru untuk project Node.js. File ini digunakan untuk menentukan metadata, dependensi, dan skrip.
• env.js: Skrip yang menetapkan konstanta yang diperlukan untuk eksekusi. File ini harus diedit berdasarkan lingkungan dan konfigurasi.
• index.js: Skrip utama yang menangani logika untuk peristiwa interaksi Google Chat. Hanya jenis peristiwa pesan yang diterapkan dalam codelab ini, tetapi biasanya akan mencakup jenis lain seperti klik kartu, perintah garis miring, dan dialog dalam aplikasi di dunia nyata.

Aplikasi perintah

Aplikasi ini mengandalkan model Gemini untuk melakukan percakapan dengan pengguna dalam bahasa alami mereka menggunakan jawaban teks yang ringkas dan sederhana.

Aplikasi Format

Aplikasi ini dibuat berdasarkan Prompt app dengan menambahkan dukungan untuk jawaban teks kaya yang sesuai dengan format teks pesan Google Chat tertentu.

Aplikasi Ground

Aplikasi ini dibangun berdasarkan Format app dengan menambahkan dukungan untuk alat Google Penelusuran dan menampilkan sumber dalam pesan jawaban dengan kartu.

Aplikasi MCP

Aplikasi ini dibuat berdasarkan Format app dengan menambahkan dukungan untuk Model Context Protocol (MCP) Bantuan Developer Google Workspace.

Aplikasi multi-giliran

Aplikasi ini dibangun berdasarkan Format app dengan menambahkan dukungan untuk memori percakapan dengan database Google Cloud Firestore.

Aplikasi alat kustom

Aplikasi ini dibangun berdasarkan Multi-turn app dengan menambahkan dukungan untuk alat kustom panggilan fungsi yang memanggil Google Workspace Calendar API berdasarkan informasi yang diberikan oleh pengguna.

Aplikasi streaming

Aplikasi ini mengandalkan model Gemini untuk membuat cerita pendek berdasarkan tema yang diberikan oleh pengguna. Google Chat API digunakan untuk mengirim hasil dan status dalam pesan seiring progres yang dibuat.

Aplikasi multimodal

Aplikasi ini mengandalkan model Gemini untuk mengedit gambar berdasarkan petunjuk tekstual dari pengguna. Google Chat API digunakan untuk mendownload dan mengupload gambar sebagai lampiran pesan.

Yang akan Anda pelajari

• Konsep dasar AI relevan dengan aplikasi Google Chat dan cara menerapkannya.
• Untuk mengakses Vertex AI menggunakan Google Gen AI SDK.
• Untuk menggunakan Google Workspace API guna mengembangkan fitur yang menarik dan canggih.
• Untuk memanfaatkan Cloud Run dalam membangun aplikasi Google Chat yang skalabel.

Yang Anda butuhkan

• Telah menyelesaikan panduan memulai Membangun aplikasi Google Chat HTTP dengan Node.js. Codelab ini dibuat berdasarkan hasil project Google Cloud, aplikasi Google Chat, dan fungsi Google Cloud Run.

2. Memulai persiapan

Lakukan inisialisasi dan akses resource

Di bagian ini, Anda akan mengakses dan mengonfigurasi resource berikut dari browser web pilihan Anda.

Catatan: Sebaiknya simpan resource ini di tempat yang mudah dijangkau karena Anda perlu menggunakannya di sepanjang codelab ini.

Konfigurasi Google Chat API

Buka konsol Google Cloud di tab baru, lalu ikuti langkah-langkah berikut:

1. Pilih project Anda.
2. Di kolom penelusuran Google Cloud, telusuri "Google Chat API", lalu klik Google Chat API, klik Manage, lalu klik Configuration.

Buka konfigurasi Google Chat API

3. Tetapkan Nama aplikasi dan Deskripsi ke Gen AI App.
4. Klik Simpan.

Ruang Google Chat

Buka Google Chat di tab baru, lalu ikuti langkah-langkah berikut:

1. Jika belum dilakukan, buka ruang pesan langsung dengan aplikasi Chat.
2. Ketik Hello, lalu tekan enter. Aplikasi Chat akan membalas dengan nama dan gambar avatar Anda.

Layanan fungsi Google Cloud Run

Buka konsol Google Cloud di tab baru, lalu ikuti langkah-langkah berikut:

1. Pilih project Anda.
2. Klik Menu ☰ > Cloud Run > Services.

Buka Cloud Run > Services

3. Dalam daftar layanan, klik addonchatapp, lalu buka tab Source.

Download kode sumber dan resource secara lokal

Perhatian: Kode ini telah disederhanakan secara signifikan untuk menunjukkan konsep dalam codelab ini. Jika Anda memilih menggunakan kembali salah satu kode ini di aplikasi produksi, pastikan untuk menangani error, menguji secara menyeluruh, dan mengikuti praktik terbaik.

1. Download repositori GitHub ini.

Download zip

2. Di lingkungan pengembangan lokal pilihan Anda, buka direktori node/chat/gen-ai-apps.

3. Aplikasi perintah

Aplikasi ini meminta Gemini di Vertex AI untuk melakukan percakapan dengan pengguna dalam bahasa alami mereka menggunakan jawaban teks yang ringkas dan sederhana. Penerapannya mengandalkan Google Gen AI SDK untuk Node.js.

Tinjau konsep

Bahasa alami

Bahasa apa pun yang diucapkan atau ditulis oleh manusia untuk komunikasi sehari-hari, bukan bahasa buatan atau berbasis komputer.

Cloud Run Functions

Cloud Run functions sangat cocok untuk membangun backend serverless, melakukan pemrosesan data real-time, dan membuat aplikasi cerdas. Anda tidak perlu menyediakan, mengelola, melakukan patch, atau mengupdate server apa pun. Layanan ini melakukan penskalaan otomatis, dan sangat tersedia serta fault-tolerant.

Membuat Perintah

Membuat perintah mengacu pada teknik menyusun input (perintah) untuk memandu model AI generatif menghasilkan output yang diinginkan. Biasanya, hal ini melibatkan penyusunan pertanyaan dengan cermat, memberikan konteks, memberikan petunjuk, atau memberikan contoh untuk mendapatkan respons yang spesifik dan relevan dari model.

Vertex AI

Vertex AI menawarkan semua yang Anda perlukan untuk membangun dan menggunakan AI generatif, termasuk solusi AI, penelusuran dan percakapan, lebih dari 130 model dasar, serta platform AI terpadu.

Gemini

Gemini adalah LLM multimodal dari Google yang dapat diakses melalui Vertex AI. Teknologi ini membantu orang menemukan potensi diri sendiri sehingga mereka dapat memperkaya imajinasi, memperluas pengetahuan, dan meningkatkan produktivitas.

Google Gen AI SDK

Google Gen AI SDK dirancang bagi developer untuk membangun aplikasi yang didukung oleh Gemini. SDK ini menyediakan antarmuka terpadu yang kompatibel dengan Gemini Developer API dan Vertex AI. API ini dilengkapi dengan library klien di Python, Go, Node.js, dan Java.

Alur ulasan

Tinjau kode sumber

env.js

...
// Replace with your GCP project ID.
projectID: process.env.PROJECT_ID || 'your-google-cloud-project-id',

// Replace with your GCP project location.
location: process.env.LOCATION || 'your-google-cloud-project-location',

// Replace with the Gemini model to use.
model: process.env.MODEL || 'gemini-2.5-flash-lite',
...

index.js

// Import the Google Gen AI SDK.
import { GoogleGenAI } from '@google/genai';
...
// Use Vertex AI.
const genAI = new GoogleGenAI({vertexai: true, project: env.projectID, location: env.location});

http('gen-ai-app', async (req, res) => {
 // Send a new Chat message with the generated answer
 return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
   text: await generateAnswer(req.body.chat.messagePayload.message.text)
 }}}}});
});

async function generateAnswer(message) {
 // The prompt is made of the user's message and specific instructions for the model.
 const prompt = 'In a consice and with plain text only (no formatting), '
                 + 'answer the following message in the same language: ' + message;
 const aiResponse = await genAI.models.generateContent({model: env.model, contents: prompt});
 return aiResponse.candidates[0].content.parts[0].text;
};
...

package.json

...
"main": "index.js",
"type": "module",
"scripts": {
  "start": "node index.js"
},
"dependencies": {
  "@google-cloud/functions-framework": "^4.0.0",
  "@google/genai": "1.15.0"
},
...

Mengaktifkan Vertex AI API

1. Di Konsol Google Cloud, aktifkan API Vertex AI:

Mengaktifkan Vertex AI API

2. Klik Menu ☰ > APIs & Services > Enabled APIs & Services, lalu konfirmasi bahwa Vertex AI API ada dalam daftar.

Buka APIs & Services > Enabled APIs & Services

Mengupdate fungsi Node.js Google Cloud Run

1. Di lingkungan pengembangan lokal Anda, ubah direktori saat ini menjadi node/chat/gen-ai-apps/1-prompt. Direktori ini berisi seluruh kode sumber dan resource.
2. Buka env.js di editor dan tetapkan hal berikut:
3. projectID: ID project Google Cloud Anda. Project ID dapat diambil dari halaman sambutan konsol Google Cloud.

Buka halaman selamat datang di konsol Google Cloud

2. location: Region layanan fungsi Google Cloud Run Anda. ID ini dapat diambil dari halaman detail layanan fungsi Google Cloud Run.

Buka Cloud Run > Services

3. model: Model yang akan digunakan. Anda dapat menemukan semua model yang tersedia dari dokumentasi Vertex AI. Model yang ditetapkan secara default adalah Flash untuk eksekusi yang cepat dan murah.

Buka dokumentasi Vertex AI

3. Buka tab Sumber di halaman detail layanan fungsi Google Cloud Run.

Buka Cloud Run > Services

4. Klik Edit sumber.
5. Tetapkan Function entry point ke gen-ai-app.
6. Klik ➕, ketik env.js, lalu klik ✔️ untuk membuat file sumber yang tidak ada.
7. Ganti seluruh konten file index.js, env.js, dan package.json dengan konten di lingkungan pengembangan lokal Anda.
8. Klik Simpan dan deploy ulang.
9. Tunggu hingga deployment revisi berhasil diselesaikan.

Cobalah

1. Di ruang pesan langsung dengan aplikasi Chat di Google Chat, ketik Hello, how are you? dan tekan enter. Aplikasi harus menjawab dengan ringkas dalam teks biasa sesuai petunjuk kami dalam perintah.

2. Di ruang pesan langsung dengan aplikasi Chat di Google Chat, ketik Bonjour comment allez-vous? dan tekan enter. Aplikasi akan menjawab dalam bahasa Prancis sesuai dengan petunjuk kami dalam perintah.

4. Aplikasi Format

Aplikasi ini dibuat berdasarkan Prompt app dengan menambahkan dukungan untuk jawaban teks kaya yang sesuai dengan format pesan teks Google Chat. Petunjuk dalam perintah diperbarui dengan deskripsi lengkap tentang berbagai opsi yang dapat digunakan model.

Tinjau konsep

Pesan teks Google Chat

Pesan teks Google Chat mendukung berbagai opsi pemformatan untuk memungkinkan pesan yang lebih jelas dan lebih ekspresif langsung di dalam antarmuka Google Chat. Aturan ini didasarkan pada aturan markdown tertentu untuk menerapkan huruf tebal, miring, coret, membuat hyperlink, dll.

Alur ulasan

Tinjau kode sumber

index.js

...
async function generateAnswer(message) {
 // Specify formatting options that are compatible with Google Chat messages
 // https://developers.google.com/workspace/chat/format-messages#format-texts
 const prompt = `Use simple text for concise answers. The only formatting options you can use is to
(1) surround some text with a single star for bold such as *text* for strong emphasis
(2) surround some text with a single underscore for italic such as _text_ for gentle emphasis
(3) surround some text with a single tild for strikethrough such as ~text~ for removal
(4) use a less than before followed by a URL followed by a pipe followed by a link text followed
    by a more than for a hyperlink such as <https://example.com|link text> for resource referencing
(5) use a backslash followed by the letter n for a new line such as \n for readibility
(6) surround some text with a single backquote such as \`text\` for quoting code
(7) surround an entire paragraph with three backquotes in dedicated lines such as
    \`\`\`\nparagraph\n\`\`\` for quoting code
(8) prepend lines with list items with a single star or hyphen followed by a single space
    such as * list item or - list item for bulleting ;
DO NOT USE ANY OTHER FORMATTING OTHER THAN THOSE.
Answer the following message in the same language: ${message}`;
...
};
...

Memperbarui fungsi Node.js Google Cloud Run

1. Di lingkungan pengembangan lokal Anda, ubah direktori saat ini menjadi node/chat/gen-ai-apps/2-format. Direktori ini berisi seluruh kode sumber dan resource.
2. Buka tab Sumber di halaman detail layanan fungsi Google Cloud Run.

Buka Cloud Run > Services

3. Klik Edit sumber.
4. Ganti seluruh konten file index.js dengan konten di lingkungan pengembangan lokal Anda.
5. Klik Simpan dan deploy ulang.
6. Tunggu hingga deployment revisi berhasil diselesaikan.

Cobalah

1. Di ruang pesan langsung dengan aplikasi Chat di Google Chat, ketik Showcase all formatting options you have with one paragraph each dan tekan enter. Aplikasi harus menjawab dengan contoh pemformatan berdasarkan petunjuk kami dalam perintah.

2. Di ruang pesan langsung dengan aplikasi Chat di Google Chat, ketik What are Google Chat apps? What's great about them? dan tekan enter. Aplikasi harus menjawab dengan format jika berguna.

5. Aplikasi di perangkat

Aplikasi ini dibuat berdasarkan Format app dengan menambahkan dukungan untuk perujukan dan menampilkan sumber. Fitur ini menjalankan alat Google Penelusuran dan melampirkan kartu dengan link ke jawaban.

Tinjau konsep

Perujukan (Grounding)

Grounding adalah teknik menghubungkan model ke sumber informasi. Teknik ini sering digunakan dalam aplikasi praktis untuk meningkatkan akurasi dan relevansi konten yang dihasilkan dengan mereferensikan data dunia nyata, sehingga mencegah model berhalusinasi atau menghasilkan informasi yang salah secara faktual.

Alat Google Penelusuran

Alat Google Penelusuran meningkatkan perujukan dengan memungkinkan model menelusuri informasi real-time di web, sehingga memastikan respons akurat dan terbaru.

Framework Kartu Google Workspace

Framework kartu di Google Workspace memungkinkan developer membuat antarmuka pengguna yang interaktif dan kaya. Dengan library ini, Anda dapat membuat kartu yang teratur dan menarik secara visual yang dapat menyertakan teks, gambar, tombol, dan widget lainnya. Kartu ini meningkatkan pengalaman pengguna dengan memberikan informasi terstruktur dan memungkinkan tindakan cepat langsung dalam percakapan.

Alur peninjauan

Tinjau kode sumber

index.js

...
const aiResponse = await genAI.models.generateContent({
 model: env.model,
 contents: prompt,
 // Google Search tool is enabled
 config: { tools: [{ googleSearch: {}}]}
});

let groundingCardsV2 = undefined;
const grounding = aiResponse.candidates[0].groundingMetadata;
// Go through the grounding metadata if any
if (grounding && grounding.groundingChunks && grounding.groundingChunks.length > 0) {
 let linkButtons = [];
 grounding.groundingChunks.forEach(groundingChunk => {
   if (groundingChunk.web) {
     // Create one link button per web URL returned
     linkButtons.push({
       text: groundingChunk.web.domain,
       onClick: { openLink: { url: groundingChunk.web.uri}}
     });
   }
 });
 // Create a card with link buttons
 groundingCardsV2 = [{
   cardId: "sourcesCard",
   card: { sections: [{
     header: "Sources",
     widgets: [{ buttonList: { buttons: linkButtons}}]
   }]}
 }];
}

// Send a Chat message with the generated answer
return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
 text: aiResponse.candidates[0].content.parts[0].text,
 // The sources are referenced in the card
 cardsV2: groundingCardsV2
}}}}});
...

Memperbarui fungsi Node.js Google Cloud Run

1. Di lingkungan pengembangan lokal Anda, ubah direktori saat ini menjadi node/chat/gen-ai-apps/3-ground. Direktori ini berisi seluruh kode sumber dan resource.
2. Buka tab Sumber di halaman detail layanan fungsi Google Cloud Run.

Buka Cloud Run > Services

3. Klik Edit sumber.
4. Ganti seluruh konten file index.js dengan konten di lingkungan pengembangan lokal Anda.
5. Klik Simpan dan deploy ulang.
6. Tunggu hingga deployment revisi berhasil diselesaikan.

Cobalah

Di ruang pesan langsung dengan aplikasi Chat di Google Chat, ketik What's the world population? dan tekan enter. Aplikasi akan menjawab dengan melampirkan link sumber dalam kartu.

6. Aplikasi MCP

Aplikasi ini dibuat berdasarkan Format app dengan menambahkan dukungan untuk alat yang disediakan oleh server Model Context Protocol (MCP) yang dihosting dari jarak jauh. Fitur ini terhubung ke MCP Bantuan Developer Google Workspace yang menyediakan alat untuk mengakses dan menelusuri dokumentasi Developer Google Workspace.

Tinjau konsep

Model Context Protocol (MCP)

Model Context Protocol adalah framework open source yang mengintegrasikan model dengan layanan eksternal secara standar. Model dapat menemukan, memahami, dan berinteraksi dengan berbagai alat secara terprogram, sehingga memperluas kemampuannya, melakukan tindakan di dunia nyata, dan mengakses informasi terbaru.

MCP TypeScript SDK

TypeScript SDK menerapkan spesifikasi MCP lengkap, sehingga menyederhanakan pembuatan klien MCP yang terhubung ke server MCP mana pun. Selain itu, API ini memungkinkan pengembangan server MCP yang menyediakan akses ke resource, perintah, dan alat.

Alur ulasan

Tinjau kode sumber

index.js

// Import the MCP TypeScript SDK.
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
...
// Create and connect the MCP client from the URL.
const mcpServerUrl = new URL("https://workspace-developer.goog/mcp");
const client = new Client({ name: "gen-ai-app-mcp", version: "1.0.0" });
// Try Streamable HTTP first (new) and SSE (old) as fallback for transport
try {
 await client.connect(new StreamableHTTPClientTransport(mcpServerUrl));
} catch (error) {
 await client.connect(new SSEClientTransport(mcpServerUrl));
}

http('gen-ai-app', async (req, res) => {
 ...
 const aiResponse = await genAI.models.generateContent({
   model: env.model,
   contents: prompt,
   // MCP tools are enabled
   config: { tools: [mcpToTool(client)]}
 });
 ...
}
...

package.json

...
"dependencies": {
  ...
  "@modelcontextprotocol/sdk": "^1.18.1"
},
...

Memperbarui fungsi Node.js Google Cloud Run

1. Di lingkungan pengembangan lokal Anda, ubah direktori saat ini menjadi node/chat/gen-ai-apps/4-mcp. Direktori ini berisi seluruh kode sumber dan resource.
2. Buka tab Sumber di halaman detail layanan fungsi Google Cloud Run.

Buka Cloud Run > Services

3. Klik Edit sumber.
4. Ganti seluruh konten file index.js dan package.json dengan konten di lingkungan pengembangan lokal Anda.
5. Klik Simpan dan deploy ulang.
6. Tunggu hingga deployment revisi berhasil diselesaikan.

Cobalah

1. Di ruang pesan langsung dengan aplikasi Chat di Google Chat, ketik What can you do for me? dan tekan enter. Aplikasi harus menjelaskan apa yang dapat dilakukannya (alat MCP).

2. Di ruang pesan langsung dengan aplikasi Chat di Google Chat, ketik I would like to get the latest official documentation for the Google Sheets API append values dan tekan enter. Aplikasi harus menjawab dengan dokumentasi yang diminta (menggunakan alat MCP).

7. Aplikasi multi-turn

Aplikasi ini dibangun berdasarkan Format app dengan menambahkan dukungan untuk memori percakapan dengan melacak histori interaksi chat. Fitur ini memungkinkan pengalaman yang lebih alami, cerdas, dan dipersonalisasi. Aplikasi menggunakan database Google Cloud Firestore default yang terkait dengan project Google Cloud-nya untuk penyimpanan.

Tinjau konsep

Multi-turn

Konsep multi-giliran mengacu pada kemampuan model untuk mempertahankan konteks dan kontinuitas di beberapa pertukaran dan percakapan. Fitur ini wajib dimiliki untuk mendukung percakapan yang kompleks, fungsi canggih yang didukung AI, dan pengalaman pengguna yang alami.

Google Cloud Firestore

Google Cloud Firestore adalah database cloud NoSQL yang fleksibel dan skalabel untuk pengembangan seluler, web, dan server. Firestore menyimpan data dalam dokumen, yang disusun dalam koleksi, dan memungkinkan sinkronisasi real-time serta dukungan offline.

Alur ulasan

Tinjau kode sumber

index.js

// Import the Google Cloud Firestore client library.
import { Firestore } from '@google-cloud/firestore';
...
// Configure DB
const USERS_PREFIX = 'users/';
const CHATS_COLLECTION = 'chats';
const db = new Firestore();
...
// Create or update data for a given user
async function createOrUpdateChatHistory(userId, data) {
 await db.collection(CHATS_COLLECTION).doc(userId.replace(USERS_PREFIX, '')).set(data);
};

// Retrieve data snapshot for a given user
async function getChatHistory(userId) {
 return await db.collection(CHATS_COLLECTION).doc(userId.replace(USERS_PREFIX, '')).get();
};
...

...
http('gen-ai-app', async (req, res) => {
 // Retrieve the chat history of the user
 const chatHistory = await getChatHistory(userId);
 const chat = genAI.chats.create({
   model: env.model,
   // Initiate the model with chat history for context
   history: chatHistory.exists ? chatHistory.data().contents : []
 });
 // If no history, send a first message to the model with instructions on how to behave
 if(!chatHistory.exists) {
   const preambule = 'The only formatting options you can use is to '
                   + ...
                   + 'DO NOT USE ANY OTHER FORMATTING OTHER THAN THOSE. '
                   + 'Answer in the same language that I use.';
   // The answer to this message is ignored
   await chat.sendMessage({message: preambule});
 }

 // Send the user's message to the model to generate the answer
 const aiResponse = await chat.sendMessage({message: userMessage});

 // Persist the updated chat history of the user
 await createOrUpdateChatHistory(userId, {contents: chat.getHistory({curated: true})});

 // Send a Chat message with the generated answer
 return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
   text: aiResponse.candidates[0].content.parts[0].text
 }}}}});
});
...

package.json

...
"dependencies": {
  ...
  "@google-cloud/firestore": "^7.11.5"
},
...

Aktifkan Google Cloud Firestore API

1. Di Konsol Google Cloud, aktifkan Google Cloud Firestore API:

Aktifkan Google Cloud Firestore API

2. Klik Menu ☰ > APIs & Services > Enabled APIs & Services, lalu konfirmasi bahwa Cloud Firestore API ada dalam daftar.

Buka APIs & Services > Enabled APIs & Services

Buat database Cloud Firestore

1. Di konsol Google Cloud, klik Menu ☰ > Firestore

Buka Firestore

2. Klik Create a Firestore database.
3. Biarkan konfigurasi default, lalu klik Create Database

Memperbarui fungsi Node.js Google Cloud Run

1. Di lingkungan pengembangan lokal Anda, ubah direktori saat ini menjadi node/chat/gen-ai-apps/5-multi-turn. Direktori ini berisi seluruh kode sumber dan resource.
2. Buka tab Sumber di halaman detail layanan fungsi Google Cloud Run.

Buka Cloud Run > Services

3. Klik Edit sumber.
4. Ganti seluruh konten file index.js dan package.json dengan konten di lingkungan pengembangan lokal Anda.
5. Klik Simpan dan deploy ulang.
6. Tunggu hingga deployment revisi berhasil diselesaikan.

Cobalah

1. Di ruang pesan langsung dengan aplikasi Chat di Google Chat, ketik Can you speak with the English from the 80's for now on? dan tekan enter. Aplikasi akan merespons secara positif.

2. Di ruang pesan langsung dengan aplikasi Chat di Google Chat, ketik Define what Google Chat apps are in one sentence dan tekan enter. Aplikasi harus terus merespons dengan bahasa Inggris dari tahun 80-an.

Catatan: Aplikasi ini berfokus pada demonstrasi interaksi multi-turn dan tidak menyertakan fitur pengelolaan histori chat seperti penghapusan atau pengeditan data, karena fitur ini tidak menjadi inti konsep.

Untuk menyesuaikan histori chat yang digunakan oleh model, Anda dapat langsung mengubah dokumen pengguna yang sesuai dalam koleksi chats di database Google Cloud Firestore (default).

Jika Anda perlu menghapus histori pengguna, ikuti langkah-langkah berikut:

1. Di konsol Google Cloud, klik Menu ☰ > Firestore

Buka Firestore

2. Di daftar database, klik (default)
3. Pilih koleksi chats, lalu pilih dokumen dengan ID pengguna
4. Klik tiga titik di samping ID dokumen, lalu klik Hapus dokumen
5. Pada dialog konfirmasi, klik Hapus.

8. Aplikasi alat kustom

Aplikasi ini dibuat berdasarkan Multi-turn app dengan menambahkan dukungan untuk alat kustom panggilan fungsi yang mengandalkan Google Workspace Calendar API untuk mengambil acara berikutnya dari kalender publik. Model mengelola semua interaksi pengguna, termasuk menerima input dan memberikan output dari alat. Namun, aplikasi tetap bertanggung jawab untuk mengeksekusi panggilan API yang diperlukan dan memberikan hasil ke model atas permintaan. Aplikasi menggunakan Kunci API Google karena tidak memerlukan kredensial pengguna untuk mengambil data kalender publik.

Tinjau konsep

Pemanggilan fungsi

Pemanggilan fungsi memungkinkan model mendeteksi saat permintaan pengguna dapat dipenuhi oleh alat atau API eksternal. Kemudian, model akan memberikan parameter yang diperlukan untuk memanggil alat tersebut, mengintegrasikan fungsi eksternal ke dalam responsnya.

Google Workspace API

Google Workspace API memungkinkan developer mengintegrasikan aplikasi mereka dengan berbagai layanan Google Workspace. API ini menyediakan akses terprogram ke fungsi di berbagai produk seperti Gmail, Chat, Kalender, Drive, Dokumen, Spreadsheet, dan lainnya, sehingga memungkinkan otomatisasi, sinkronisasi data, dan pembuatan alur kerja kustom.

Alur ulasan

Tinjau kode sumber

env.js

...
// Replace with your Google API key.
googleApiKey: process.env.GOOGLE_API_KEY || 'your-google-api-key',
...

index.js

// Import parameter type definitions from Google Gen AI SDK.
import { GoogleGenAI, Type } from '@google/genai';
// Import Google APIs that include the Google Calendar API.
import { google } from 'googleapis';
...
// Create a Google Calendar API client using a Google API key.
const calendar = google.calendar({version: 'v3', auth: env.googleApiKey});
...
// Define the tool used for function calling
const getNextPublicCalendarEventTitleFunctionDeclaration = {
 name: 'getNextPublicCalendarEventTitle',
 parameters: {
   type: Type.OBJECT,
   description: 'Get the title of the next event of a public calendar.',
   properties: {
     calendarId: {
       type: Type.STRING,
       description: 'ID of the public calendar to get the next event title.',
     }
   },
   required: ['calendarId']
 }
};

// The function referenced in the tool definition
async function getNextPublicCalendarEventTitle(calendarId) {
 // Use Calendar API to retrieve the next event in the given calendar
 const response = await calendar.events.list({
   calendarId: calendarId,
   timeMin: new Date().toISOString(),
   maxResults: 1,
   singleEvents: true,
   orderBy: 'startTime',
 });
 const events = response.data.items;
 if (!events || events.length === 0) {
   return null;
 }
 return `${events[0].summary}`;
};
...

...
http('gen-ai-app', async (req, res) => {
 ...
 // Send the user's message to the model to generate the answer
 let aiResponse = await chat.sendMessage({
   message: userMessage,
   // The tool used for function calling is enabled
   config: { tools: [{ functionDeclarations: [getNextPublicCalendarEventTitleFunctionDeclaration]}]}
 });

 // Handle the function calling turn with the model if any
 const functionCall = aiResponse.candidates[0].content.parts[0].functionCall;
 if (functionCall) {
   let functionResult = null;
   switch(functionCall.name) {
     case 'getNextPublicCalendarEventTitle':
       // Make the function call as per model request
       functionResult = await getNextPublicCalendarEventTitle(functionCall.args['calendarId']);
       break;
     default:
   }
   // Finish the function calling turn by sending the execution result to the model
   aiResponse = await chat.sendMessage({ message: { functionResponse: {
     name: functionCall.name,
     response: { output: functionResult }
   }}});
 }
 ...
 // Send a Chat message with the generated answer
 return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
   text: aiResponse.candidates[0].content.parts[0].text
 }}}}});
});
...

package.json

...
"dependencies": {
  ...
   "googleapis": "^160.0.0"
},
...

Aktifkan Calendar API

1. Di konsol Google Cloud, aktifkan Google Calendar API:

Mengaktifkan Google Calendar API

2. Klik Menu ☰ > APIs & Services > Enabled APIs & Services lalu konfirmasi bahwa Google Calendar API ada dalam daftar.

Buka APIs & Services > Enabled APIs & Services

Membuat Kunci API Google

Di konsol Google Cloud, ikuti langkah-langkah berikut:

1. Klik Menu ☰ > APIs & Services > Credentials.

Buka APIs & Services > Credentials

2. Klik + Create credentials, lalu pilih API key.
3. Tunggu hingga operasi selesai.
4. Di dialog konfirmasi, temukan kolom teks Kunci API Anda, lalu klik Salin ke papan klip.

Mengupdate fungsi Node.js Google Cloud Run

1. Di lingkungan pengembangan lokal Anda, ubah direktori saat ini menjadi node/chat/gen-ai-apps/6-custom-tool. Direktori ini berisi seluruh kode sumber dan resource.
2. Buka tab Sumber di halaman detail layanan fungsi Google Cloud Run.

Buka Cloud Run > Services

3. Klik Edit sumber.
4. Ganti seluruh konten file index.js dan package.json dengan konten di lingkungan pengembangan lokal Anda.
5. Buka file env.js, lalu lakukan hal berikut
6. Tambahkan googleApiKey ke kolom yang diekspor

export const env = {
 ...
 googleApiKey: 'your-google-api-key',
};

2. Ganti your-google-api-key dengan Kunci Google API yang disalin pada langkah sebelumnya. Kunci ini dapat diambil dari halaman kredensial Google Cloud dengan mengklik Show key.

Buka APIs & Services > Credentials

6. Klik Simpan dan deploy ulang.
7. Tunggu hingga deployment revisi berhasil diselesaikan.

Cobalah

1. Di Google Kalender, ikuti langkah-langkah berikut:
2. Di bagian Kalender lainnya, klik +, lalu klik Buat kalender baru.
3. Tetapkan Name ke My Public Calendar
4. Klik Buat kalender.
5. Tunggu hingga operasi selesai.
6. Di bagian Setelan untuk kalender saya, pilih kalender yang baru dibuat Kalender Publik Saya
7. Di bagian Izin akses untuk acara, pilih Sediakan untuk publik, lalu klik Oke dalam dialog Peringatan.
8. Di bagian Izin akses untuk acara, pilih Lihat semua detail acara dari menu dropdown di samping opsi Sediakan untuk publik
9. Di bagian Integrasikan kalender, salin nilai kolom ID Kalender ke papan klip
10. Klik panah kiri di pojok kiri atas untuk keluar dari Setelan.
11. Klik kalender untuk membuat acara baru untuk besok, ketik Important meeting, pilih Kalender Publik Saya dari dropdown, lalu klik Simpan
12. Di ruang pesan langsung dengan aplikasi Chat di Google Chat, ketik When is the next meeting? dan tekan enter. Aplikasi harus meminta presisi karena tidak jelas kalender mana yang dirujuk.

3. Di ruang pesan langsung dengan aplikasi Chat di Google Chat, tempelkan ID kalender yang sebelumnya Anda salin ke papan klip, lalu tekan enter. Aplikasi akan menjawab dengan detail tentang acara yang dibuat sebelumnya.

9. Aplikasi streaming

Aplikasi ini mengandalkan model Gemini untuk membuat cerita berdurasi 2 menit berdasarkan tema yang diberikan oleh pengguna. Karena perlu waktu untuk membuat jawaban lengkap, aplikasi melakukan panggilan ke model dalam mode streaming dan mengandalkan Google Chat API untuk mengirim konten dan status dalam pesan seiring kemajuan yang dibuat.

Tinjau konsep

Google Chat API

Google Chat API memungkinkan developer berinteraksi dengan Google Chat secara terprogram, sehingga mereka dapat mengirim pesan, membuat ruang, mengelola anggota, dan lainnya, untuk membangun integrasi dan bot kustom.

Streaming

Streaming mengacu pada proses penerimaan data dalam aliran berkelanjutan, bukan menunggu seluruh respons dihasilkan. Untuk panggilan model AI, streaming memungkinkan aplikasi menampilkan hasil parsial kepada pengguna segera setelah tersedia, sehingga meningkatkan performa yang dirasakan dan pengalaman pengguna, terutama untuk tugas pembuatan yang lebih panjang. Hal ini sangat relevan untuk model AI generatif yang mungkin membutuhkan waktu yang cukup lama untuk menghasilkan output yang lengkap.

Alur ulasan

Tinjau kode sumber

index.js

// Import Google Auth library used to create Google Chat API client
import { GoogleAuth } from 'google-auth-library';
...
http('gen-ai-app', async (req, res) => {
 // Use app authentication.
 // Application Default Credentials (ADC) will use the Cloud Run function's
 // default service account, we just need to specify the Chat API app auth scopes.
 const auth = new GoogleAuth({
   // Chat API app authentication scopes
   scopes: ['https://www.googleapis.com/auth/chat.bot']
 });

 // Create Chat service client with application credentials
 const chatClient = google.chat({
   version: 'v1',
   auth: await auth.getClient()
 });

 // Send a server streaming request to generate the answer
 const aiResponse = await genAI.models.generateContentStream({
   model: env.model,
   contents: `Generate a story about a ${userMessage}. `
               + `It should take 2 minutes to read it out loud.`
 });

 // Send a first Chat message to summarize what will be done
 await chatClient.spaces.messages.create({
   parent: spaceName,
   requestBody: { text: `Sure, let me work on generating a short story `
                           + `about a ${userMessage} like you requested.`}
 });

 // Go through the response chunks received from the stream
 let messageName = undefined;
 let answer = "";
 for await (const chunk of aiResponse) {
   const text = chunk.text;
   if (text) {
     // Update the answer by concatenating the response chunks
     answer += text;
     // The Chat message request body is the same for message creation and update
     const responseBody = {
       text: answer,
       accessoryWidgets: [getStatusAccessoryWidget('Generating story...', 'progress_activity')]
     }
     if (!messageName) {
       // Create a Chat message dedicated to the generated content
       const messageResponse = await chatClient.spaces.messages.create({
         parent: spaceName,
         requestBody: responseBody
       });
       messageName = messageResponse.data.name;
     } else {
       // Update the Chat message dedicated to the generated content
       await chatClient.spaces.messages.patch({
         name: messageName,
         updateMask: 'text,accessory_widgets',
         requestBody: responseBody
       });
     }
   }
 }

 // Update the accessory widget with final progress status
 await chatClient.spaces.messages.patch({
   name: messageName,
   updateMask: 'accessory_widgets',
   requestBody: {
     accessoryWidgets: [getStatusAccessoryWidget('Story is fully generated', 'check')]
   }
 });

 // Send a last Chat message to confirm it's done
 return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
   text: 'All done, I hope you like it!'
 }}}}});
});

// Create an accessory widget with progress status
function getStatusAccessoryWidget(text, icon) {
 return { buttonList: { buttons: [{
   text: text,
   icon: { materialIcon: { name: icon}},
   // This is a workaround to have the icon shown, it's not clickable
   onClick: { openLink: { url: "https://google.com"}},
   disabled: true
 }]}};
}

package.json

...
"dependencies": {
  ...
   "google-auth-library": "^10.3.0"
},
...

Memperbarui fungsi Node.js Google Cloud Run

1. Di lingkungan pengembangan lokal Anda, ubah direktori saat ini menjadi node/chat/gen-ai-apps/7-stream. Direktori ini berisi seluruh kode sumber dan resource.
2. Buka tab Sumber di halaman detail layanan fungsi Google Cloud Run.

Buka Cloud Run > Services

3. Klik Edit sumber.
4. Ganti seluruh konten file index.js dan package.json dengan konten di lingkungan pengembangan lokal Anda.
5. Klik Simpan dan deploy ulang.
6. Tunggu hingga deployment revisi berhasil diselesaikan.

Cobalah

Di ruang pesan langsung dengan aplikasi Chat di Google Chat, ketik turtle dan tekan enter. Aplikasi harus menjawab dengan pesan konfirmasi, cerita yang dibuat dengan status saat progres dibuat, dan pesan konfirmasi penyelesaian.

10. Aplikasi multimodal

Aplikasi ini mengandalkan model untuk mengedit gambar berdasarkan petunjuk tekstual dari pengguna. Pengguna dan aplikasi menambahkan gambar mereka sebagai lampiran pesan Google Chat untuk dipertukarkan. Aplikasi ini mengandalkan Google Chat API untuk mendownload dan mengupload gambar secara terprogram.

Catatan: Google Chat API tidak mendukung upload lampiran dengan autentikasi aplikasi pada saat penulisan.

Sebagai solusi sementara, aplikasi menggunakan peniruan identitas pengguna untuk mengupload output lampiran dan mengirim respons yang berisi lampiran yang tidak ideal. Hal ini memerlukan pengaktifan Delegasi Seluruh Domain (DWD) untuk akun layanan default Cloud Run dan penyediaan kredensial untuk fungsi Cloud Run.

Lihat masalah publik untuk mendapatkan status terbaru terkait hal ini.

Peringatan: Untuk menerapkan solusi sementara, aplikasi mengandalkan kunci akun layanan yang diekspor demi kesederhanaan. Mengekspor kunci pribadi tidak direkomendasikan dalam produksi karena kunci tersebut tidak boleh disimpan di lokasi yang tidak aman, seperti kontrol sumber.

Untuk mempelajari lebih lanjut praktik terbaik dan penerapan akun layanan yang aman, lihat Memilih waktu penggunaan akun layanan.

Tinjau konsep

Lampiran pesan Google Chat

Lampiran pesan Google Chat adalah file, seperti gambar atau video, yang diupload ke pesan Google Chat. Lampiran ini dapat dikelola secara terprogram, sehingga aplikasi dapat berinteraksi dengan media kaya langsung dalam percakapan.

Delegasi Seluruh Domain (DWD)

Delegasi Tingkat Domain (DWD) memungkinkan akun layanan meniru identitas pengguna di domain Google Workspace, sehingga aplikasi dapat melakukan tindakan atas nama pengguna tersebut tanpa otorisasi langsung. Hal ini berguna bagi aplikasi yang perlu mengakses data pengguna atau melakukan tindakan (seperti mengupload lampiran ke Google Chat) dalam konteks pengguna, meskipun pengguna tidak aktif, dengan memberikan akses luas akun layanan di seluruh domain.

Alur ulasan

Tinjau kode sumber

env.js

...
// Replace with the Gemini model to use.
model: process.env.MODEL || 'gemini-2.0-flash-preview-image-generation',
...

index.js

...
// Import byte stream management libraries.
import { Buffer } from 'buffer';
import { Readable } from 'stream';
...
// Download a Google Chat attachment as base 64 string.
async function downloadFile(appChatClient, attachmentName) {
 const response = await appChatClient.media.download({
     resourceName: attachmentName,
     alt: 'media'
   }, {
     responseType: 'stream'
 });
 const chunks = [];
 return new Promise((resolve) => {
   response.data.on('data', (chunk) => {
     chunks.push(chunk);
   });
   response.data.on('end', () => {
     const fileBuffer = Buffer.concat(chunks);
     const base64String = fileBuffer.toString('base64');
     resolve(base64String);
   });
 });
}

// Upload a base 64 string as Google Chat attachment of a space.
async function uploadFile(useChatClient, spaceName, data) {
 const filename = 'generated_image.png';
 return await userChatClient.media.upload({
   parent: spaceName,
   requestBody: { filename: filename },
   media: {
     mimeType: 'image/png',
     body: Readable.from(Buffer.from(data, 'base64'))
   }
 });
}
...

...
http('gen-ai-app', async (req, res) => {
 const userEmail = req.body.chat.user.email;
 const spaceName = req.body.chat.messagePayload.space.name;
 const userMessage = req.body.chat.messagePayload.message.text;
 const attachmentName = req.body.chat.messagePayload.message.attachment[0].attachmentDataRef.resourceName;
 const attachmentContentType = req.body.chat.messagePayload.message.attachment[0].contentType;

 // Set up app authentication used to download the attachment input
 // Application Default Credentials (ADC) will use the Cloud Run function's
 // default service account.
 const appAuth = new GoogleAuth({
   // Specify the Chat API app authentication scopes
   scopes: ['https://www.googleapis.com/auth/chat.bot']
 });
 // Create Chat service client with application credentials
 const appChatClient = google.chat({
   version: 'v1',
   auth: await appAuth.getClient()
 });

 // Send a request to generate the answer with both text and image contents
 const aiResponse = await genAI.models.generateContent({
   model: env.model,
   contents: [{
     role: 'USER',
     parts: [
       // The text content of the message
       { text: userMessage },
       // The attachment of the message is downloaded and added inline
       { inlineData: {
         data: await downloadFile(appChatClient, attachmentName),
         mimeType: attachmentContentType
       }}
     ]
   }],
   config: { responseModalities: ['TEXT', 'IMAGE']}
 });

 // Set up user impersonation authentication used to upload the attachment output
 // and send the response.
 const impersonatedUserAuth = new GoogleAuth({
   // Specify the Chat API user authentication scopes
   scopes: ['https://www.googleapis.com/auth/chat.messages'],
   keyFile: './credentials.json',
   clientOptions: {
     // Impersonate the user who sent the original message
     subject: userEmail
   }
 });
 // Create Chat service client with impersonated user credentials
 const userChatClient = google.chat({
   version: 'v1',
   auth: await impersonatedUserAuth.getClient()
 });

 let responseText = undefined;
 let responseAttachment = undefined;
 // Go through the response parts received
 for (const part of aiResponse.candidates[0].content.parts) {
   if (part.inlineData) {
     // The resulting image is retrieved inline and uploaded
     const mediaResponse = await uploadFile(userChatClient, spaceName, part.inlineData.data);
     responseAttachment = mediaResponse.data;
   } else {
     responseText = part.text;
   }
 }

 // Create a Chat message dedicated to the generated content
 await userChatClient.spaces.messages.create({
   parent: spaceName,
   requestBody: {
     text: responseText ? responseText : 'Here it is!',
     // The uploaded image is referenced as attachment
     attachment: responseAttachment ? [responseAttachment] : undefined
   }
 });

 // Send a last Chat message to confirm it's done
 return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
   text: 'Done, feel free to let me know if you need anything else!'
 }}}}});
});
...

Mengonfigurasi akun layanan dan mengekspor kunci pribadi

1. Mendelegasikan akun layanan default Cloud Run untuk mengelola pesan Google Chat bagi pengguna. Ikuti petunjuk dengan cakupan https://www.googleapis.com/auth/chat.messages. Untuk mengambil ID Klien akun layanan default Cloud Run, ikuti langkah-langkah berikut:
2. Klik Menu ☰ > IAM & Admin > Service Accounts

Buka IAM & Admin > Service Accounts

2. Klik akun layanan dengan nama Default compute service account.
3. Luaskan bagian Setelan lanjutan
4. Salin Client ID ke papan klip.
5. Buat dan download kunci pribadi baru untuk akun layanan default Cloud Run
6. Klik Menu ☰ > IAM & Admin > Service Accounts

Buka IAM & Admin > Service Accounts

2. Klik akun layanan dengan nama Default compute service account.
3. Pilih tab Kunci, klik Tambahkan kunci, lalu Buat kunci baru.
4. Pilih JSON, lalu klik Buat.
5. Pasangan kunci umum/pribadi baru Anda dibuat dan didownload ke komputer Anda sebagai file baru. Simpan file JSON yang didownload dan salin kontennya ke papan klip. File ini adalah satu-satunya salinan kunci ini. Untuk mengetahui informasi tentang cara menyimpan kunci Anda dengan aman, lihat Mengelola kunci akun layanan.

Memperbarui fungsi Node.js Google Cloud Run

1. Di lingkungan pengembangan lokal Anda, ubah direktori saat ini menjadi node/chat/gen-ai-apps/8-multimodal. Direktori ini berisi seluruh kode sumber dan resource.
2. Buka tab Sumber di halaman detail layanan fungsi Google Cloud Run.

Buka Cloud Run > Services

3. Klik Edit sumber.
4. Klik ➕, ketik credentials.json, lalu klik ✔️ untuk membuat file resource yang tidak ada.
5. Tempelkan isi file JSON yang didownload pada langkah sebelumnya ke dalam file credentials.json yang baru dibuat.
6. Ganti seluruh konten file index.js dengan yang ada di lingkungan pengembangan lokal Anda.
7. Buka file env.js dan tetapkan nilai model ke gemini-2.0-flash-preview-image-generation.

...
model: 'gemini-2.0-flash-preview-image-generation',
...

8. Klik Simpan dan deploy ulang.
9. Tunggu hingga deployment revisi berhasil diselesaikan.

Coba

Di ruang pesan langsung dengan aplikasi Chat di Google Chat, upload foto potret diri Anda dalam format PNG, ketik Change the background color to blue, lalu tekan enter. Aplikasi akan menjawab dengan menampilkan versi gambar dengan latar belakang biru dan pesan konfirmasi penyelesaian.

11. Pembersihan

Hapus project Google Cloud

Agar tidak menimbulkan biaya pada Akun Google Cloud Anda untuk resource yang digunakan dalam codelab ini, sebaiknya hapus project Google Cloud tersebut.

Perhatian: Penghapusan project Google Cloud akan menyebabkan hal berikut:

• Semua hal dalam project akan dihapus. Jika menggunakan project yang sudah ada untuk codelab ini, Anda akan menghapus pekerjaan lain yang dilakukan dalam project tersebut.
• Project ID kustom akan hilang. Saat membuat project ini, Anda mungkin telah membuat project ID kustom yang masih ingin Anda gunakan pada masa mendatang. Untuk mempertahankan URL yang menggunakan project ID tersebut, seperti URL di appspot.com, hapus resource yang dipilih di dalam project, alih-alih menghapus seluruh project.

Di konsol Google Cloud, ikuti langkah-langkah berikut:

1. Klik Menu ☰ > IAM & Admin > Settings.

Buka IAM & Admin > Settings

2. Klik Shut down.
3. Masukkan project ID.
4. Klik Shut down anyway.

12. Selamat

Selamat! Anda membuat aplikasi Google Chat sebagai add-on Google Workspace yang mengintegrasikan konsep AI mendasar.

Apa langkah selanjutnya?

Kami hanya menunjukkan kasus penggunaan minimalis dalam codelab ini, tetapi ada banyak area ekspansi yang mungkin ingin Anda pertimbangkan dalam aplikasi Google Chat, seperti berikut:

• Mendukung jenis media lain seperti audio dan video.
• Mengintegrasikan dengan model AI lain, termasuk model kustom, yang dihosting di platform khusus seperti Vertex AI.
• Integrasikan dengan agen, termasuk agen kustom, yang dihosting di platform khusus seperti Agentspace dan Dialogflow CX.
• Mengandalkan feedback loop dan klasifikasi untuk memantau dan meningkatkan performa.
• Publikasikan di marketplace untuk mendukung tim, organisasi, atau pengguna publik.

Pelajari lebih lanjut

Ada banyak referensi yang tersedia untuk developer seperti video YouTube, situs dokumentasi, contoh kode, dan tutorial:

• Channel YouTube Developer Google Workspace - Selamat datang, Developer!
• Situs dokumentasi developer untuk Google Chat
• Repositori GitHub untuk semua contoh Google Chat
• Pusat Developer Google Cloud
• AI Generatif di Vertex AI
• Model AI Generatif
• Penyesuaian Model AI Generatif
• Pelatihan Khusus AI Generatif