ผสานรวมแนวคิดพื้นฐานของ AI ในแอป Google Chat

1. ก่อนเริ่มต้น

แอป Google Chat ที่มี AI คืออะไร

แอป Google Chat ที่มี AI จะทำสิ่งต่อไปนี้

• นำบริการและแหล่งข้อมูลของคุณมาไว้ใน Google Chat ซึ่งจะช่วยให้ผู้ใช้ได้รับข้อมูลและดำเนินการได้โดยไม่ต้องออกจากการสนทนา
• ผสานรวมกับโมเดล Generative AI เพื่อสร้าง ค้นหา และแก้ไขข้อมูล เช่น ข้อความหรือรูปภาพ
• สนับสนุนประสบการณ์การใช้งานแบบเอเจนต์โดยใช้แนวคิด AI แบบสนทนาเพื่อการโต้ตอบที่ใช้งานได้จริง เป็นธรรมชาติ ซับซ้อน และมีประโยชน์มากขึ้น

เหตุผลที่ควรผสานรวมแอป Google Chat กับ AI

กรณีการใช้งานทั่วไปจะอยู่ในหมวดหมู่ต่อไปนี้

• การสร้างและการแก้ไขเนื้อหา สร้างข้อความทางการตลาด สร้างโพสต์โซเชียลมีเดีย สร้างรูปภาพที่สมจริง แต่งเพลง หรือช่วยในการสร้างเนื้อหาวิดีโอ
• การค้นหาและวิเคราะห์ข้อมูล ดึงข้อมูลเชิงลึกที่สำคัญจากฐานความรู้แบบไม่มีโครงสร้าง สรุปข้อความยาวๆ จัดประเภทเนื้อหา หรือแปลภาษาด้วยความแม่นยำและความเร็วที่เพิ่มขึ้น
• การสนทนา สนทนาอย่างเป็นธรรมชาติ ให้ข้อมูล และมีประสิทธิภาพเหมือนที่คุณคุยกับผู้ช่วย
• การทำงานอัตโนมัติ ดำเนินการในนามของผู้ใช้ เช่น สร้างกิจกรรมใหม่ในปฏิทิน ส่งเอกสาร หรือจัดการตั๋วในระบบภายนอก

ความสามารถในการผสานรวมความสามารถเหล่านี้โดยตรงภายในอินเทอร์เฟซที่คุ้นเคยของ Google Chat เป็นโอกาสอันยิ่งใหญ่สำหรับทุกคนที่ต้องการปรับปรุงประสบการณ์และประสิทธิภาพการทำงานของผู้ใช้

ข้อกำหนดเบื้องต้น

• ความรู้พื้นฐานเกี่ยวกับ Google Cloud และ Node.js
• ความรู้พื้นฐานเกี่ยวกับแอป Google Chat ซึ่งรวมถึงข้อความ การ์ด การตรวจสอบสิทธิ์ API และปลายทาง HTTP

สิ่งที่คุณจะสร้าง

ในโค้ดแล็บนี้ คุณจะได้สร้างแอป Google Chat แบบมินิมอล 8 แอปที่ผสานรวมแนวคิดพื้นฐานของ AI เพื่อแสดงให้เห็นว่าแนวคิดเหล่านี้สามารถนำไปใช้ในแอปพลิเคชันในโลกแห่งความเป็นจริงได้อย่างไร โดยทั้งหมดสร้างขึ้นเป็นส่วนเสริมของ Google Workspace และใช้สถาปัตยกรรม HTTP ดังนี้

โดยมีวิธีการดังนี้

1. ผู้ใช้ส่งข้อความใน Google Chat ไปยังแอป Chat ไม่ว่าจะเป็นข้อความส่วนตัวหรือในพื้นที่ทำงานของ Chat
2. ระบบจะส่งคำขอ HTTP ไปยังเว็บเซิร์ฟเวอร์ที่ทำงานเป็นฟังก์ชัน Node.js Google Cloud Run ซึ่งมีตรรกะของแอป Chat
3. ไม่บังคับ: ตรรกะของแอป Chat สามารถผสานรวมกับบริการของ Google Workspace (เช่น ปฏิทินและชีต), บริการอื่นๆ ของ Google (เช่น Maps, YouTube และ Vertex AI) หรือบริการอื่นๆ บนเว็บ (เช่น ระบบการจัดการโปรเจ็กต์หรือเครื่องมือออกตั๋ว)
4. เว็บเซิร์ฟเวอร์จะส่งการตอบกลับ HTTP กลับไปยังบริการแอป Chat ใน Chat
5. ระบบจะส่งคำตอบให้ผู้ใช้
6. แอป Chat สามารถเรียกใช้ Chat API เพื่อโพสต์ข้อความแบบไม่พร้อมกันหรือดำเนินการอื่นๆ ได้ (ไม่บังคับ)

ฟังก์ชัน Node.js Google Cloud Run ของแอป Google Chat แต่ละแอปจะมีไฟล์ต้นฉบับเวอร์ชันของตัวเองต่อไปนี้เพื่อดำเนินการที่จำเป็นในขั้นตอนที่ #3 และ #6 ด้านบน

• package.json: ไฟล์ Manifest ส่วนกลางที่ทำหน้าที่เป็นพิมพ์เขียวสำหรับโปรเจ็กต์ Node.js ใช้เพื่อกำหนดข้อมูลเมตา การอ้างอิง และสคริปต์
• env.js: สคริปต์ที่ตั้งค่าคงที่ที่จำเป็นสำหรับการดำเนินการ คุณควรแก้ไขตามสภาพแวดล้อมและการกำหนดค่า
• index.js: สคริปต์หลักที่จัดการตรรกะสำหรับเหตุการณ์การโต้ตอบของ Google Chat ในโค้ดแล็บนี้จะมีการติดตั้งใช้งานเฉพาะประเภทเหตุการณ์ข้อความ แต่ในแอปพลิเคชันในชีวิตจริงมักจะมีประเภทอื่นๆ ด้วย เช่น การคลิกการ์ด คำสั่ง Slash และกล่องโต้ตอบ

แอปพรอมต์

แอปนี้ใช้โมเดล Gemini เพื่อสนทนากับผู้ใช้ในภาษาธรรมชาติโดยใช้คำตอบที่เป็นข้อความธรรมดาและกระชับ

แอป Format

แอปนี้สร้างขึ้นบน Prompt app โดยเพิ่มการรองรับคำตอบที่เป็นข้อความริชเท็กซ์ซึ่งเป็นไปตามรูปแบบข้อความของข้อความ Google Chat ที่เฉพาะเจาะจง

แอปภาคพื้นดิน

แอปนี้สร้างขึ้นบนพื้นฐานของ Format app โดยเพิ่มการรองรับเครื่องมือ Google Search และแสดงแหล่งข้อมูลในข้อความคำตอบด้วยการ์ด

แอป MCP

แอปนี้สร้างขึ้นบน Format app โดยเพิ่มการรองรับ Google Workspace Developer Assist Model Context Protocol (MCP)

แอปแบบหลายรอบ

แอปนี้สร้างขึ้นบน Format app โดยเพิ่มการรองรับหน่วยความจำแบบสนทนาด้วยฐานข้อมูล Google Cloud Firestore

แอปเครื่องมือที่กำหนดเอง

แอปนี้สร้างขึ้นบน Multi-turn app โดยเพิ่มการรองรับเครื่องมือที่กำหนดเองสำหรับการเรียกใช้ฟังก์ชัน ซึ่งจะเรียกใช้ Google Workspace Calendar API ตามข้อมูลที่ผู้ใช้ระบุ

แอป Stream

แอปนี้ใช้โมเดล Gemini เพื่อสร้างเรื่องสั้นตามธีมที่ผู้ใช้ระบุ Google Chat API ใช้เพื่อส่งผลลัพธ์และสถานะในข้อความเมื่อมีความคืบหน้า

แอปมัลติโมดัล

แอปนี้ใช้โมเดล Gemini เพื่อแก้ไขรูปภาพตามคำสั่งที่เป็นข้อความจากผู้ใช้ Google Chat API ใช้เพื่อดาวน์โหลดและอัปโหลดรูปภาพเป็นไฟล์แนบของข้อความ

สิ่งที่คุณจะได้เรียนรู้

• แนวคิดพื้นฐานเกี่ยวกับ AI มีความเกี่ยวข้องกับแอป Google Chat และวิธีนำไปใช้
• หากต้องการเข้าถึง Vertex AI โดยใช้ Google Gen AI SDK
• เพื่อใช้ Google Workspace API ในการพัฒนาฟีเจอร์ที่น่าสนใจและมีประสิทธิภาพ
• เพื่อใช้ประโยชน์จาก Cloud Run ในการสร้างแอป Google Chat ที่ปรับขนาดได้

สิ่งที่คุณจะต้องมี

• การทําการเริ่มต้นใช้งาน สร้างแอป Google Chat ที่ใช้ HTTP ให้เสร็จสมบูรณ์ด้วย Node.js Codelab นี้สร้างขึ้นจากโปรเจ็กต์ Google Cloud, แอป Google Chat และฟังก์ชัน Google Cloud Run ที่ได้

2. ตั้งค่า

เริ่มต้นและเข้าถึงทรัพยากร

ในส่วนนี้ คุณจะเข้าถึงและกำหนดค่าทรัพยากรต่อไปนี้จากเว็บเบราว์เซอร์ที่ต้องการ

หมายเหตุ: เราขอแนะนำให้คุณเก็บแหล่งข้อมูลเหล่านี้ไว้ใกล้มือเนื่องจากคุณจะต้องใช้แหล่งข้อมูลเหล่านี้ตลอดทั้งโค้ดแล็บนี้

การกำหนดค่า Google Chat API

เปิด Google Cloud Console ในแท็บใหม่ แล้วทำตามขั้นตอนต่อไปนี้

1. เลือกโปรเจ็กต์
2. ในช่องค้นหาของ Google Cloud ให้ค้นหา "Google Chat API" จากนั้นคลิก Google Chat API, คลิกจัดการ แล้วคลิกการกำหนดค่า

ไปที่การกำหนดค่า Google Chat API

3. ตั้งค่าชื่อแอปและคำอธิบายเป็น Gen AI App
4. คลิกบันทึก

พื้นที่ Google Chat

เปิด Google Chat ในแท็บใหม่ แล้วทำตามขั้นตอนต่อไปนี้

1. หากยังไม่ได้ดำเนินการ ให้เปิดพื้นที่ข้อความส่วนตัวด้วยแอป Chat
2. พิมพ์ Hello แล้วกด enter แอป Chat ควรตอบกลับด้วยชื่อและรูปโปรไฟล์ของคุณ

บริการฟังก์ชันของ Google Cloud Run

เปิด Google Cloud Console ในแท็บใหม่ แล้วทำตามขั้นตอนต่อไปนี้

1. เลือกโปรเจ็กต์
2. คลิกเมนู ☰ > Cloud Run > บริการ

ไปที่ Cloud Run > บริการ

3. ในรายการบริการ ให้คลิก addonchatapp แล้วเปิดแท็บแหล่งที่มา

ดาวน์โหลดซอร์สโค้ดและทรัพยากรในเครื่อง

ข้อควรระวัง: โค้ดได้รับการลดความซับซ้อนลงอย่างมากเพื่อแสดงแนวคิดในโค้ดแล็บนี้ หากเลือกที่จะนำโค้ดนี้ไปใช้ซ้ำในแอปที่ใช้งานจริง โปรดตรวจสอบว่าคุณได้จัดการข้อผิดพลาด ทดสอบอย่างละเอียด และปฏิบัติตามแนวทางปฏิบัติแนะนำ

1. ดาวน์โหลดที่เก็บ GitHub นี้

ดาวน์โหลดไฟล์ zip

2. เปิดไดเรกทอรี node/chat/gen-ai-apps ในสภาพแวดล้อมการพัฒนาในเครื่องที่ต้องการ

3. แอปพรอมต์

แอปนี้จะแจ้งให้ Gemini ใน Vertex AI สนทนากับผู้ใช้ในภาษาที่เป็นธรรมชาติโดยใช้คำตอบที่เป็นข้อความธรรมดาและกระชับ การติดตั้งใช้งานจะขึ้นอยู่กับ Gen AI SDK ของ Google สำหรับ Node.js

แนวคิดเกี่ยวกับรีวิว

ภาษาธรรมชาติ

ภาษาใดๆ ที่มนุษย์พูดหรือเขียนเพื่อการสื่อสารในชีวิตประจำวัน ซึ่งแตกต่างจากภาษาที่สร้างขึ้นหรือภาษาที่ใช้ในคอมพิวเตอร์

ฟังก์ชัน Cloud Run

ฟังก์ชัน Cloud Run เหมาะสำหรับการสร้างแบ็กเอนด์แบบ Serverless การประมวลผลข้อมูลแบบเรียลไทม์ และการสร้างแอปอัจฉริยะ ไม่ต้องจัดสรร จัดการ แพตช์ หรืออัปเดตเซิร์ฟเวอร์ โดยจะปรับขนาดโดยอัตโนมัติ มีความพร้อมใช้งานสูง และทนทานต่อข้อผิดพลาด

การเขียนพรอมต์

การเขียนพรอมต์หมายถึงเทคนิคในการสร้างอินพุต (พรอมต์) เพื่อเป็นแนวทางให้โมเดล Generative AI สร้างเอาต์พุตที่ต้องการ โดยมักจะเกี่ยวข้องกับการเรียบเรียงคำถามอย่างรอบคอบ การให้บริบท การให้คำสั่ง หรือการยกตัวอย่างเพื่อให้ได้คำตอบที่เฉพาะเจาะจงและเกี่ยวข้องจากโมเดล

Vertex AI

Vertex AI มีทุกอย่างที่คุณต้องการในการสร้างและใช้ Generative AI ซึ่งรวมถึงโซลูชัน AI, การค้นหาและการสนทนา, โมเดลพื้นฐานกว่า 130 รายการ และแพลตฟอร์ม AI แบบรวม

Gemini

Gemini คือ LLM แบบหลายรูปแบบจาก Google ที่เข้าถึงได้ผ่าน Vertex AI โดยช่วยให้ผู้ใช้ปลดล็อกศักยภาพของตนเองเพื่อเสริมสร้างจินตนาการ ขยายความอยากรู้อยากเห็น และเพิ่มประสิทธิภาพการทำงาน

SDK สำหรับ Gen AI ของ Google

Google Gen AI SDK ออกแบบมาสำหรับนักพัฒนาซอฟต์แวร์เพื่อสร้างแอปพลิเคชันที่ทำงานด้วย Gemini โดยมีอินเทอร์เฟซแบบรวมที่เข้ากันได้กับทั้ง Gemini Developer API และ Vertex AI โดยมาพร้อมกับไลบรารีของไคลเอ็นต์ใน Python, Go, Node.js และ Java

ขั้นตอนการตรวจสอบ

ตรวจสอบซอร์สโค้ด

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"
},
...

เปิดใช้ Vertex AI API

1. ในคอนโซล Google Cloud ให้เปิดใช้ API ของ Vertex AI โดยทำดังนี้

เปิดใช้ Vertex AI API

2. คลิกเมนู ☰ > API และบริการ > API และบริการที่เปิดใช้ แล้วตรวจสอบว่า Vertex AI API อยู่ในรายการ

ไปที่ API และบริการ > API และบริการที่เปิดใช้

อัปเดต Function ของ Google Cloud Run Node.js

1. ในสภาพแวดล้อมการพัฒนาในเครื่อง ให้เปลี่ยนไดเรกทอรีปัจจุบันเป็น node/chat/gen-ai-apps/1-prompt ซึ่งมีซอร์สโค้ดและทรัพยากรทั้งหมด
2. เปิด env.js ในโปรแกรมแก้ไขและตั้งค่าต่อไปนี้
3. projectID: รหัสของโปรเจ็กต์ Google Cloud โดยคุณสามารถดึงข้อมูลนี้ได้จากหน้าต้อนรับของคอนโซล Google Cloud

ไปที่หน้าต้อนรับของคอนโซล Google Cloud

2. location: ภูมิภาคของบริการฟังก์ชัน Google Cloud Run โดยคุณสามารถดึงข้อมูลนี้ได้จากหน้ารายละเอียดบริการฟังก์ชัน Google Cloud Run

ไปที่ Cloud Run > บริการ

3. model: โมเดลที่จะใช้ คุณดูโมเดลทั้งหมดที่มีได้จากเอกสารประกอบของ Vertex AI โมเดลที่ตั้งค่าไว้โดยค่าเริ่มต้นคือ Flash เพื่อการดำเนินการที่รวดเร็วและราคาถูก

ไปที่เอกสารประกอบของ Vertex AI

3. ไปที่แท็บแหล่งที่มาของหน้ารายละเอียดบริการฟังก์ชัน Google Cloud Run

ไปที่ Cloud Run > บริการ

4. คลิกแก้ไขแหล่งที่มา
5. ตั้งค่าจุดแรกเข้าของฟังก์ชันเป็น gen-ai-app
6. คลิก ➕ พิมพ์ env.js แล้วคลิก ✔️ เพื่อสร้างไฟล์ต้นฉบับที่ขาดหายไป
7. แทนที่เนื้อหาทั้งหมดของไฟล์ index.js, env.js และ package.json ด้วยเนื้อหาในสภาพแวดล้อมการพัฒนาในเครื่อง
8. คลิกบันทึกและติดตั้งใช้งานอีกครั้ง
9. รอให้การติดตั้งใช้งานรีวิชันเสร็จสมบูรณ์

ลองเลย

1. ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้พิมพ์ Hello, how are you? แล้วกด enter แอปควรตอบอย่างกระชับในรูปแบบข้อความธรรมดาตามคำสั่งในพรอมต์

2. ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้พิมพ์ Bonjour comment allez-vous? แล้วกด enter แอปควรตอบเป็นภาษาฝรั่งเศสตามคำสั่งในพรอมต์

4. แอป Format

แอปนี้สร้างขึ้นบน Prompt app โดยเพิ่มการรองรับคำตอบแบบ Rich Text ที่เป็นไปตามรูปแบบข้อความของ Google Chat คำสั่งในพรอมต์ได้รับการอัปเดตพร้อมคำอธิบายโดยละเอียดเกี่ยวกับตัวเลือกต่างๆ ที่โมเดลใช้ได้

แนวคิดเกี่ยวกับรีวิว

ข้อความ Google Chat

ข้อความ Google Chat รองรับตัวเลือกการจัดรูปแบบต่างๆ เพื่อให้ข้อความชัดเจนและสื่อความหมายได้มากขึ้นโดยตรงภายในอินเทอร์เฟซ Google Chat โดยอิงตามกฎมาร์กดาวน์ที่เฉพาะเจาะจงเพื่อใช้ตัวหนา ตัวเอียง ขีดทับ สร้างไฮเปอร์ลิงก์ ฯลฯ

ขั้นตอนการตรวจสอบ

ตรวจสอบซอร์สโค้ด

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}`;
...
};
...

อัปเดตฟังก์ชัน Node.js ของ Google Cloud Run

1. ในสภาพแวดล้อมการพัฒนาในเครื่อง ให้เปลี่ยนไดเรกทอรีปัจจุบันเป็น node/chat/gen-ai-apps/2-format ซึ่งมีซอร์สโค้ดและทรัพยากรทั้งหมด
2. ไปที่แท็บแหล่งที่มาของหน้ารายละเอียดบริการฟังก์ชัน Google Cloud Run

ไปที่ Cloud Run > บริการ

3. คลิกแก้ไขแหล่งที่มา
4. แทนที่เนื้อหาทั้งหมดของไฟล์ index.js ด้วยเนื้อหาในสภาพแวดล้อมการพัฒนาในเครื่อง
5. คลิกบันทึกและติดตั้งใช้งานอีกครั้ง
6. รอให้การติดตั้งใช้งานรีวิชันเสร็จสมบูรณ์

ลองเลย

1. ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้พิมพ์ Showcase all formatting options you have with one paragraph each แล้วกด enter แอปควรตอบกลับพร้อมตัวอย่างการจัดรูปแบบตามวิธีการในพรอมต์

2. ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้พิมพ์ What are Google Chat apps? What's great about them? แล้วกด enter แอปควรตอบโดยมีการจัดรูปแบบเมื่อมีประโยชน์

5. แอป Ground

แอปนี้สร้างขึ้นจาก Format app โดยเพิ่มการรองรับการอ้างอิงและการแสดงแหล่งที่มา โดยจะเรียกใช้เครื่องมือ Google Search และแนบการ์ดที่มีลิงก์ไปยังคำตอบ

ตรวจสอบแนวคิด

การต่อสายดิน

การอ้างอิงเป็นเทคนิคในการเชื่อมต่อโมเดลกับแหล่งข้อมูล โดยมักใช้ในแอปพลิเคชันเชิงปฏิบัติเพื่อปรับปรุงความถูกต้องและความเกี่ยวข้องของเนื้อหาที่สร้างขึ้นโดยอ้างอิงข้อมูลในโลกแห่งความเป็นจริง ซึ่งจะช่วยป้องกันไม่ให้โมเดลสร้างข้อมูลที่ไม่ถูกต้องตามข้อเท็จจริงหรือสร้างภาพหลอน

เครื่องมือ Google Search

เครื่องมือ Google Search ช่วยเพิ่มการอ้างอิงโดยอนุญาตให้โมเดลค้นหาข้อมูลแบบเรียลไทม์บนเว็บ เพื่อให้มั่นใจว่าคำตอบจะถูกต้องและเป็นปัจจุบัน

เฟรมเวิร์กการ์ด Google Workspace

เฟรมเวิร์กการ์ดใน Google Workspace ช่วยให้นักพัฒนาแอปสร้างอินเทอร์เฟซผู้ใช้แบบอินเทอร์แอกทีฟที่สมบูรณ์ได้ ซึ่งช่วยให้สร้างการ์ดที่เป็นระเบียบและดึงดูดสายตาได้ โดยสามารถใส่ข้อความ รูปภาพ ปุ่ม และวิดเจ็ตอื่นๆ การ์ดเหล่านี้ช่วยปรับปรุงประสบการณ์ของผู้ใช้ด้วยการให้ข้อมูลที่มีโครงสร้างและช่วยให้ดำเนินการอย่างรวดเร็วได้โดยตรงภายในบทสนทนา

ขั้นตอนการตรวจสอบ

ตรวจสอบซอร์สโค้ด

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
}}}}});
...

อัปเดตฟังก์ชัน Node.js ของ Google Cloud Run

1. ในสภาพแวดล้อมการพัฒนาในเครื่อง ให้เปลี่ยนไดเรกทอรีปัจจุบันเป็น node/chat/gen-ai-apps/3-ground ซึ่งมีซอร์สโค้ดและทรัพยากรทั้งหมด
2. ไปที่แท็บแหล่งที่มาของหน้ารายละเอียดบริการฟังก์ชัน Google Cloud Run

ไปที่ Cloud Run > บริการ

3. คลิกแก้ไขแหล่งที่มา
4. แทนที่เนื้อหาทั้งหมดของไฟล์ index.js ด้วยเนื้อหาในสภาพแวดล้อมการพัฒนาในเครื่อง
5. คลิกบันทึกและติดตั้งใช้งานอีกครั้ง
6. รอให้การติดตั้งใช้งานรีวิชันเสร็จสมบูรณ์

ลองเลย

ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้พิมพ์ What's the world population? แล้วกด enter แอปควรตอบโดยแนบลิงก์แหล่งที่มาในการ์ด

6. แอป MCP

แอปนี้สร้างขึ้นบน Format app โดยเพิ่มการรองรับเครื่องมือที่เซิร์ฟเวอร์ Model Context Protocol (MCP) ซึ่งโฮสต์จากระยะไกลมีให้ โดยจะเชื่อมต่อกับ Google Workspace Developer Assist MCP ซึ่งมีเครื่องมือสำหรับเข้าถึงและค้นหาเอกสารประกอบสำหรับนักพัฒนาแอป Google Workspace

แนวคิดเกี่ยวกับรีวิว

Model Context Protocol (MCP)

Model Context Protocol เป็นเฟรมเวิร์กโอเพนซอร์สที่ผสานรวมโมเดลกับบริการภายนอกในลักษณะที่เป็นมาตรฐาน โมเดลสามารถค้นหา ทำความเข้าใจ และโต้ตอบกับเครื่องมือต่างๆ โดยอัตโนมัติ ซึ่งจะช่วยขยายขีดความสามารถ ดำเนินการในโลกแห่งความเป็นจริง และเข้าถึงข้อมูลที่อัปเดตแล้ว

MCP TypeScript SDK

TypeScript SDK ใช้ข้อกำหนด MCP ทั้งหมด ซึ่งช่วยให้สร้างไคลเอ็นต์ MCP ที่เชื่อมต่อกับเซิร์ฟเวอร์ MCP ได้ง่ายขึ้น นอกจากนี้ ยังช่วยให้พัฒนาเซิร์ฟเวอร์ MCP ที่ให้สิทธิ์เข้าถึงทรัพยากร พรอมต์ และเครื่องมือได้ด้วย

ขั้นตอนการตรวจสอบ

ตรวจสอบซอร์สโค้ด

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"
},
...

อัปเดตฟังก์ชัน Node.js ของ Google Cloud Run

1. ในสภาพแวดล้อมการพัฒนาในเครื่อง ให้เปลี่ยนไดเรกทอรีปัจจุบันเป็น node/chat/gen-ai-apps/4-mcp ซึ่งมีซอร์สโค้ดและทรัพยากรทั้งหมด
2. ไปที่แท็บแหล่งที่มาของหน้ารายละเอียดบริการฟังก์ชัน Google Cloud Run

ไปที่ Cloud Run > บริการ

3. คลิกแก้ไขแหล่งที่มา
4. แทนที่เนื้อหาทั้งหมดของไฟล์ index.js และ package.json ด้วยเนื้อหาในสภาพแวดล้อมการพัฒนาในเครื่อง
5. คลิกบันทึกและติดตั้งใช้งานอีกครั้ง
6. รอให้การติดตั้งใช้งานรีวิชันเสร็จสมบูรณ์

ลองเลย

1. ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้พิมพ์ What can you do for me? แล้วกด enter แอปควรระบุความสามารถของแอป (เครื่องมือ MCP)

2. ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้พิมพ์ I would like to get the latest official documentation for the Google Sheets API append values แล้วกด enter แอปควรตอบกลับพร้อมเอกสารที่ขอ (โดยใช้เครื่องมือ MCP)

7. แอปแบบหลายรอบ

แอปนี้สร้างขึ้นบน Format app โดยเพิ่มการรองรับหน่วยความจำในการสนทนาด้วยการติดตามประวัติการโต้ตอบในแชท ซึ่งช่วยให้ได้รับประสบการณ์การใช้งานที่เป็นธรรมชาติ ชาญฉลาด และปรับเปลี่ยนในแบบของคุณมากขึ้น แอปใช้ฐานข้อมูล Google Cloud Firestore เริ่มต้นที่เชื่อมโยงกับโปรเจ็กต์ Google Cloud สำหรับการจัดเก็บ

ตรวจสอบแนวคิด

หลายรอบ

แนวคิดการสนทนาหลายรอบหมายถึงความสามารถของโมเดลในการรักษาบริบทและความต่อเนื่องในการแลกเปลี่ยนและการสนทนาหลายครั้ง ฟีเจอร์นี้เป็นสิ่งจำเป็นในการรองรับการสนทนาที่ซับซ้อน ฟังก์ชันการทำงานที่ซับซ้อนซึ่งขับเคลื่อนด้วย AI และประสบการณ์ของผู้ใช้ที่เป็นธรรมชาติ

Google Cloud Firestore

Google Cloud Firestore คือฐานข้อมูล NoSQL บนระบบคลาวด์ที่ยืดหยุ่นและปรับขนาดได้สำหรับการพัฒนาแอปบนอุปกรณ์เคลื่อนที่ เว็บ และเซิร์ฟเวอร์ โดยจะจัดเก็บข้อมูลในเอกสาร จัดระเบียบเป็นคอลเล็กชัน และอนุญาตให้ซิงค์แบบเรียลไทม์และรองรับการใช้งานแบบออฟไลน์

ขั้นตอนการตรวจสอบ

ตรวจสอบซอร์สโค้ด

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"
},
...

เปิดใช้ Google Cloud Firestore API

1. ในคอนโซล Google Cloud ให้เปิดใช้ Google Cloud Firestore API โดยทำดังนี้

เปิดใช้ Google Cloud Firestore API

2. คลิกเมนู ☰ > API และบริการ > API และบริการที่เปิดใช้ แล้วตรวจสอบว่า Cloud Firestore API อยู่ในรายการ

ไปที่ API และบริการ > API และบริการที่เปิดใช้

สร้างฐานข้อมูล Cloud Firestore

1. ในคอนโซล Google Cloud ให้คลิกเมนู ☰ > Firestore

ไปที่ Firestore

2. คลิกสร้างฐานข้อมูล Firestore
3. ปล่อยให้การกำหนดค่าเป็นค่าเริ่มต้น แล้วคลิกสร้างฐานข้อมูล

อัปเดตฟังก์ชัน Node.js ของ Google Cloud Run

1. ในสภาพแวดล้อมการพัฒนาในเครื่อง ให้เปลี่ยนไดเรกทอรีปัจจุบันเป็น node/chat/gen-ai-apps/5-multi-turn ซึ่งมีซอร์สโค้ดและทรัพยากรทั้งหมด
2. ไปที่แท็บแหล่งที่มาของหน้ารายละเอียดบริการฟังก์ชัน Google Cloud Run

ไปที่ Cloud Run > บริการ

3. คลิกแก้ไขแหล่งที่มา
4. แทนที่เนื้อหาทั้งหมดของไฟล์ index.js และ package.json ด้วยเนื้อหาในสภาพแวดล้อมการพัฒนาในเครื่อง
5. คลิกบันทึกและติดตั้งใช้งานอีกครั้ง
6. รอให้การติดตั้งใช้งานรีวิชันเสร็จสมบูรณ์

ลองเลย

1. ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้พิมพ์ Can you speak with the English from the 80's for now on? แล้วกด enter แอปควรตอบสนองในเชิงบวก

2. ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้พิมพ์ Define what Google Chat apps are in one sentence แล้วกด enter แอปควรตอบกลับเป็นภาษาอังกฤษในยุค 80 ต่อไป

หมายเหตุ: แอปพลิเคชันนี้มุ่งเน้นที่การสาธิตการโต้ตอบแบบหลายรอบ และไม่มีฟีเจอร์การจัดการประวัติการแชท เช่น การนำข้อมูลออกหรือการแก้ไข เนื่องจากฟีเจอร์เหล่านี้ไม่ได้เป็นส่วนสำคัญของแนวคิดหลัก

หากต้องการปรับประวัติการแชทที่โมเดลใช้ คุณสามารถแก้ไขเอกสารที่เกี่ยวข้องของผู้ใช้ได้โดยตรงภายในคอลเล็กชันแชทในฐานข้อมูล Google Cloud Firestore (ค่าเริ่มต้น)

หากต้องการล้างประวัติของผู้ใช้ ให้ทำตามขั้นตอนต่อไปนี้

1. ในคอนโซล Google Cloud ให้คลิกเมนู ☰ > Firestore

ไปที่ Firestore

2. คลิก (ค่าเริ่มต้น) ในรายการฐานข้อมูล
3. เลือกแชทในคอลเล็กชัน แล้วเลือกเอกสารที่มีรหัสผู้ใช้
4. คลิกจุด 3 จุดข้างรหัสเอกสาร แล้วคลิกลบเอกสาร
5. คลิกลบในกล่องโต้ตอบการยืนยัน

8. แอปเครื่องมือที่กำหนดเอง

แอปนี้สร้างขึ้นจาก Multi-turn app โดยเพิ่มการรองรับเครื่องมือที่กำหนดเองสำหรับการเรียกใช้ฟังก์ชัน ซึ่งอาศัย Google Workspace Calendar API เพื่อดึงข้อมูลกิจกรรมถัดไปจากปฏิทินสาธารณะ โมเดลจะจัดการการโต้ตอบของผู้ใช้ทั้งหมด รวมถึงการรับอินพุตและการส่งเอาต์พุตจากเครื่องมือ อย่างไรก็ตาม แอปพลิเคชันยังคงมีหน้าที่รับผิดชอบในการเรียก API ที่จำเป็นและให้ผลลัพธ์แก่โมเดลเมื่อมีการร้องขอ แอปใช้คีย์ Google API เนื่องจากไม่จำเป็นต้องใช้ข้อมูลเข้าสู่ระบบของผู้ใช้เพื่อดึงข้อมูลปฏิทินสาธารณะ

แนวคิดเกี่ยวกับรีวิว

การเรียกใช้ฟังก์ชัน

การเรียกใช้ฟังก์ชันช่วยให้โมเดลตรวจจับได้เมื่อเครื่องมือหรือ API ภายนอกสามารถตอบสนองคำขอของผู้ใช้ได้ จากนั้นโมเดลจะระบุพารามิเตอร์ที่จำเป็นในการเรียกใช้เครื่องมือดังกล่าว ซึ่งจะผสานรวมฟังก์ชันการทำงานภายนอกเข้ากับการตอบกลับ

Google Workspace API

Google Workspace API ช่วยให้นักพัฒนาแอปผสานรวมแอปพลิเคชันของตนกับบริการต่างๆ ของ Google Workspace ได้ API เหล่านี้ช่วยให้เข้าถึงฟังก์ชันการทำงานต่างๆ ในผลิตภัณฑ์ เช่น Gmail, Chat, ปฏิทิน, ไดรฟ์, เอกสาร, ชีต และอื่นๆ ได้แบบเป็นโปรแกรม ซึ่งช่วยให้สามารถทำงานอัตโนมัติ ซิงค์ข้อมูล และสร้างเวิร์กโฟลว์ที่กำหนดเองได้

ขั้นตอนการตรวจสอบ

ตรวจสอบซอร์สโค้ด

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"
},
...

เปิดใช้ Calendar API

1. ในคอนโซล Google Cloud ให้เปิดใช้ Google Calendar API โดยทำดังนี้

เปิดใช้ Google Calendar API

2. คลิกเมนู ☰ > API และบริการ > API และบริการที่เปิดใช้ แล้วตรวจสอบว่า Google Calendar API อยู่ในรายการ

ไปที่ API และบริการ > API และบริการที่เปิดใช้

สร้างคีย์ Google API

ในคอนโซล Google Cloud ให้ทำตามขั้นตอนต่อไปนี้

1. คลิกเมนู ☰ > API และบริการ > ข้อมูลเข้าสู่ระบบ

ไปที่ API และบริการ > ข้อมูลเข้าสู่ระบบ

2. คลิก + สร้างข้อมูลเข้าสู่ระบบ แล้วเลือกคีย์ API
3. รอให้การดำเนินการเสร็จสมบูรณ์
4. ในกล่องโต้ตอบการยืนยัน ให้หาช่องข้อความคีย์ API ของคุณ แล้วคลิกคัดลอกไปยังคลิปบอร์ด

อัปเดตฟังก์ชัน Node.js ของ Google Cloud Run

1. ในสภาพแวดล้อมการพัฒนาในเครื่อง ให้เปลี่ยนไดเรกทอรีปัจจุบันเป็น node/chat/gen-ai-apps/6-custom-tool ซึ่งมีซอร์สโค้ดและทรัพยากรทั้งหมด
2. ไปที่แท็บแหล่งที่มาของหน้ารายละเอียดบริการฟังก์ชัน Google Cloud Run

ไปที่ Cloud Run > บริการ

3. คลิกแก้ไขแหล่งที่มา
4. แทนที่เนื้อหาทั้งหมดของไฟล์ index.js และ package.json ด้วยเนื้อหาในสภาพแวดล้อมการพัฒนาในเครื่อง
5. เปิดไฟล์ env.js แล้วทำดังนี้
6. เพิ่ม googleApiKey ลงในช่องที่ส่งออก

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

2. แทนที่ your-google-api-key ด้วยคีย์ API ของ Google ที่คัดลอกในขั้นตอนก่อนหน้า คุณสามารถดึงข้อมูลได้จากหน้าข้อมูลเข้าสู่ระบบของ Google Cloud โดยคลิกแสดงคีย์

ไปที่ API และบริการ > ข้อมูลเข้าสู่ระบบ

6. คลิกบันทึกและติดตั้งใช้งานอีกครั้ง
7. รอให้การติดตั้งใช้งานรีวิชันเสร็จสมบูรณ์

ลองเลย

1. ใน Google ปฏิทิน ให้ทำตามขั้นตอนต่อไปนี้
2. ในส่วนปฏิทินอื่นๆ ให้คลิก + แล้วคลิกสร้างปฏิทินใหม่
3. ตั้งค่า Name เป็น My Public Calendar
4. คลิกสร้างปฏิทิน
5. รอให้การดำเนินการเสร็จสมบูรณ์
6. ในส่วนการตั้งค่าสำหรับปฏิทินของฉัน ให้เลือกปฏิทินที่สร้างขึ้นใหม่ ปฏิทินสาธารณะของฉัน
7. ในส่วนสิทธิ์การเข้าถึงกิจกรรม ให้เลือกเปิดเผยต่อสาธารณะ แล้วคลิกตกลงในกล่องโต้ตอบคำเตือน
8. ในส่วนสิทธิ์การเข้าถึงกิจกรรม ให้เลือกดูรายละเอียดกิจกรรมทั้งหมดจากเมนูแบบเลื่อนลงข้างตัวเลือกเปิดเผยต่อสาธารณะ
9. ในส่วนใช้งานร่วมกับปฏิทิน ให้คัดลอกค่าของช่องรหัสปฏิทินไปยังคลิปบอร์ด
10. คลิกลูกศรซ้ายที่มุมซ้ายบนเพื่อออกการตั้งค่า
11. คลิกปฏิทินเพื่อสร้างกิจกรรมใหม่สำหรับวันพรุ่งนี้ พิมพ์ Important meeting เลือกปฏิทินสาธารณะของฉันจากเมนูแบบเลื่อนลง แล้วคลิกบันทึก
12. ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้พิมพ์ When is the next meeting? แล้วกด enter แอปควรร้องขอความแม่นยำเนื่องจากไม่ชัดเจนว่ากำลังอ้างอิงถึงปฏิทินใด

3. ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้วางรหัสปฏิทินที่คัดลอกไว้ก่อนหน้านี้ลงในคลิปบอร์ด แล้วกด enter แอปควรตอบกลับพร้อมรายละเอียดเกี่ยวกับกิจกรรมที่สร้างไว้ก่อนหน้านี้

9. แอปสตรีม

แอปนี้ใช้โมเดล Gemini เพื่อสร้างเรื่องราวความยาว 2 นาทีโดยอิงตามธีมที่ผู้ใช้ระบุ เนื่องจากต้องใช้เวลาในการสร้างคำตอบทั้งหมด แอปจึงเรียกใช้โมเดลในโหมดการสตรีมและใช้ Google Chat API เพื่อส่งเนื้อหาและสถานะในข้อความเมื่อมีความคืบหน้า

แนวคิดเกี่ยวกับรีวิว

Google Chat API

Google Chat API ช่วยให้นักพัฒนาแอปโต้ตอบกับ Google Chat โดยอัตโนมัติได้ ซึ่งจะช่วยให้สามารถส่งข้อความ สร้างพื้นที่ทำงาน จัดการสมาชิก และอื่นๆ เพื่อสร้างการผสานรวมและบ็อตที่กำหนดเอง

การสตรีม

การสตรีมหมายถึงกระบวนการรับข้อมูลอย่างต่อเนื่องแทนที่จะรอให้ระบบสร้างคำตอบทั้งหมด เมื่อพูดถึงการเรียกใช้โมเดล AI การสตรีมจะช่วยให้แอปพลิเคชันแสดงผลลัพธ์บางส่วนต่อผู้ใช้ได้ทันทีที่พร้อมใช้งาน ซึ่งจะช่วยปรับปรุงประสิทธิภาพที่รับรู้และประสบการณ์ของผู้ใช้ โดยเฉพาะอย่างยิ่งสำหรับงานการสร้างที่ใช้เวลานาน ซึ่งมีความเกี่ยวข้องอย่างยิ่งกับโมเดล Generative AI ที่อาจใช้เวลามากในการสร้างเอาต์พุตที่สมบูรณ์

ขั้นตอนการตรวจสอบ

ตรวจสอบซอร์สโค้ด

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"
},
...

อัปเดตฟังก์ชัน Node.js ของ Google Cloud Run

1. ในสภาพแวดล้อมการพัฒนาในเครื่อง ให้เปลี่ยนไดเรกทอรีปัจจุบันเป็น node/chat/gen-ai-apps/7-stream ซึ่งมีซอร์สโค้ดและทรัพยากรทั้งหมด
2. ไปที่แท็บแหล่งที่มาของหน้ารายละเอียดบริการฟังก์ชัน Google Cloud Run

ไปที่ Cloud Run > บริการ

3. คลิกแก้ไขแหล่งที่มา
4. แทนที่เนื้อหาทั้งหมดของไฟล์ index.js และ package.json ด้วยเนื้อหาในสภาพแวดล้อมการพัฒนาในเครื่อง
5. คลิกบันทึกและติดตั้งใช้งานอีกครั้ง
6. รอให้การติดตั้งใช้งานรีวิชันเสร็จสมบูรณ์

ลองเลย

ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้พิมพ์ turtle แล้วกด enter แอปควรตอบกลับด้วยข้อความรับทราบ เรื่องราวที่สร้างขึ้นพร้อมสถานะความคืบหน้า และข้อความยืนยันการเสร็จสิ้น

10. แอปหลายรูปแบบ

แอปนี้ใช้โมเดลเพื่อแก้ไขรูปภาพตามคำสั่งที่เป็นข้อความจากผู้ใช้ ทั้งผู้ใช้และแอปจะเพิ่มรูปภาพเป็นไฟล์แนบของข้อความ Google Chat เพื่อแลกเปลี่ยน แอปใช้ Google Chat API เพื่อดาวน์โหลดและอัปโหลดรูปภาพโดยใช้โปรแกรม

หมายเหตุ: Google Chat API ไม่รองรับการอัปโหลดไฟล์แนบด้วยการตรวจสอบสิทธิ์แอปในขณะที่เขียน

แอปจึงใช้วิธีแก้ปัญหาโดยการแอบอ้างเป็นผู้ใช้เพื่ออัปโหลดเอาต์พุตของไฟล์แนบและส่งคำตอบที่มีไฟล์แนบ ซึ่งไม่ใช่วิธีที่ดี โดยต้องเปิดใช้การมอบสิทธิ์ระดับโดเมน (DWD) สำหรับบัญชีบริการเริ่มต้นของ Cloud Run และทำให้ข้อมูลเข้าสู่ระบบพร้อมใช้งานสำหรับฟังก์ชัน Cloud Run

ดูปัญหาที่เปิดเผยต่อสาธารณะเพื่อดูสถานะล่าสุดเกี่ยวกับปัญหานี้

คำเตือน: ในการใช้แนวทางแก้ปัญหานี้ แอปจะใช้คีย์บัญชีบริการที่ส่งออกเพื่อความสะดวก เราไม่แนะนำให้ส่งออกคีย์ส่วนตัวในเวอร์ชันที่ใช้งานจริงเนื่องจากไม่ควรจัดเก็บไว้ในตำแหน่งที่ไม่ปลอดภัย เช่น การควบคุมแหล่งที่มา

ดูข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้งใช้งานบัญชีบริการที่ปลอดภัยและแนวทางปฏิบัติแนะนำได้ที่หัวข้อเลือกเวลาที่จะใช้บัญชีบริการ

แนวคิดเกี่ยวกับรีวิว

ไฟล์แนบของข้อความ Google Chat

ไฟล์แนบในข้อความ Google Chat คือไฟล์ เช่น รูปภาพหรือวิดีโอ ที่อัปโหลดไปยังข้อความ Google Chat คุณจัดการไฟล์แนบเหล่านี้ได้โดยอัตโนมัติ ซึ่งช่วยให้แอปพลิเคชันโต้ตอบกับสื่อสมบูรณ์ได้โดยตรงในการสนทนา

การมอบสิทธิ์ทั่วทั้งโดเมน (DWD)

การมอบสิทธิ์ทั่วทั้งโดเมน (DWD) ช่วยให้บัญชีบริการสามารถแอบอ้างเป็นผู้ใช้ในโดเมน Google Workspace ได้ ซึ่งช่วยให้แอปพลิเคชันดำเนินการในนามของผู้ใช้เหล่านั้นได้โดยไม่ต้องมีการให้สิทธิ์โดยตรง ซึ่งจะเป็นประโยชน์สำหรับแอปที่ต้องเข้าถึงข้อมูลผู้ใช้หรือดำเนินการ (เช่น อัปโหลดไฟล์แนบไปยัง Google Chat) ในบริบทของผู้ใช้ แม้ว่าผู้ใช้จะไม่ได้ใช้งานอยู่ก็ตาม โดยการให้สิทธิ์เข้าถึงแบบกว้างแก่บัญชีบริการในโดเมน

ขั้นตอนการตรวจสอบ

ตรวจสอบซอร์สโค้ด

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!'
 }}}}});
});
...

กำหนดค่าบัญชีบริการและส่งออกคีย์ส่วนตัว

1. มอบสิทธิ์บัญชีบริการเริ่มต้นของ Cloud Run เพื่อจัดการข้อความ Google Chat ให้กับผู้ใช้ ทำตามวิธีการโดยใช้ขอบเขต https://www.googleapis.com/auth/chat.messages หากต้องการเรียกข้อมูลรหัสไคลเอ็นต์ของบัญชีบริการเริ่มต้นของ Cloud Run ให้ทำตามขั้นตอนต่อไปนี้
2. คลิกเมนู ☰ > IAM และผู้ดูแลระบบ > บัญชีบริการ

ไปที่ IAM และผู้ดูแลระบบ > บัญชีบริการ

2. คลิกบัญชีบริการที่มีชื่อว่าบัญชีบริการ Compute เริ่มต้น
3. ขยายส่วนการตั้งค่าขั้นสูง
4. คัดลอกรหัสไคลเอ็นต์ไปยังคลิปบอร์ด
5. สร้างและดาวน์โหลดคีย์ส่วนตัวใหม่สำหรับบัญชีบริการเริ่มต้นของ Cloud Run
6. คลิกเมนู ☰ > IAM และผู้ดูแลระบบ > บัญชีบริการ

ไปที่ IAM และผู้ดูแลระบบ > บัญชีบริการ

2. คลิกบัญชีบริการที่มีชื่อว่าบัญชีบริการ Compute เริ่มต้น
3. เลือกแท็บคีย์ คลิกเพิ่มคีย์ แล้วคลิกสร้างคีย์ใหม่
4. เลือก JSON แล้วคลิกสร้าง
5. ระบบจะสร้างคู่คีย์สาธารณะ/ส่วนตัวใหม่และดาวน์โหลดลงในเครื่องของคุณเป็นไฟล์ใหม่ บันทึกไฟล์ JSON ที่ดาวน์โหลดและคัดลอกเนื้อหาไปยังคลิปบอร์ด ไฟล์นี้เป็นสำเนาเดียวของคีย์นี้ ดูข้อมูลเกี่ยวกับวิธีจัดเก็บคีย์อย่างปลอดภัยได้ที่การจัดการคีย์ของบัญชีบริการ

อัปเดตฟังก์ชัน Node.js ของ Google Cloud Run

1. ในสภาพแวดล้อมการพัฒนาในเครื่อง ให้เปลี่ยนไดเรกทอรีปัจจุบันเป็น node/chat/gen-ai-apps/8-multimodal ซึ่งมีซอร์สโค้ดและทรัพยากรทั้งหมด
2. ไปที่แท็บแหล่งที่มาของหน้ารายละเอียดบริการฟังก์ชัน Google Cloud Run

ไปที่ Cloud Run > บริการ

3. คลิกแก้ไขแหล่งที่มา
4. คลิก ➕ พิมพ์ credentials.json แล้วคลิก ✔️ เพื่อสร้างไฟล์ทรัพยากรที่ขาดหายไป
5. วางเนื้อหาของไฟล์ JSON ที่ดาวน์โหลดในขั้นตอนก่อนหน้าลงในไฟล์ credentials.json ที่สร้างขึ้นใหม่
6. แทนที่เนื้อหาทั้งหมดของไฟล์ index.js ด้วยเนื้อหาในสภาพแวดล้อมการพัฒนาในเครื่อง
7. เปิดไฟล์ env.js แล้วตั้งค่า model เป็น gemini-2.0-flash-preview-image-generation

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

8. คลิกบันทึกและติดตั้งใช้งานอีกครั้ง
9. รอให้การติดตั้งใช้งานรีวิชันเสร็จสมบูรณ์

ลองใช้

ในพื้นที่ข้อความส่วนตัวที่มีแอป Chat ใน Google Chat ให้อัปโหลดรูปภาพบุคคลของคุณเองในรูปแบบ PNG พิมพ์ Change the background color to blue แล้วกด enter แอปควรตอบกลับด้วยรูปภาพที่มีพื้นหลังสีน้ำเงินและข้อความยืนยันว่าดำเนินการเสร็จสมบูรณ์แล้ว

11. ล้างข้อมูล

ลบโปรเจ็กต์ Google Cloud

เราขอแนะนำให้คุณลบโปรเจ็กต์ Google Cloud เพื่อหลีกเลี่ยงการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ใน Codelab นี้

ข้อควรระวัง: การลบโปรเจ็กต์ Google Cloud จะส่งผลให้เกิดสิ่งต่อไปนี้

• ระบบจะลบทุกอย่างในโปรเจ็กต์ หากคุณใช้โปรเจ็กต์ที่มีอยู่สำหรับโค้ดแล็บนี้ ให้ลบงานอื่นๆ ที่คุณทำในโปรเจ็กต์
• รหัสโปรเจ็กต์ที่กำหนดเองจะหายไป เมื่อสร้างโปรเจ็กต์นี้ คุณอาจสร้างรหัสโปรเจ็กต์ที่กำหนดเองซึ่งต้องการใช้ในอนาคต หากต้องการเก็บ URL ที่ใช้รหัสโปรเจ็กต์ เช่น URL ใน appspot.com ให้ลบทรัพยากรที่เลือกภายในโปรเจ็กต์แทนการลบทั้งโปรเจ็กต์

ในคอนโซล Google Cloud ให้ทำตามขั้นตอนต่อไปนี้

1. คลิกเมนู ☰ > IAM และผู้ดูแลระบบ > การตั้งค่า

ไปที่ IAM และผู้ดูแลระบบ > การตั้งค่า

2. คลิกปิดเครื่อง
3. ป้อนรหัสโปรเจ็กต์
4. คลิกปิดเครื่องต่อไป

12. ขอแสดงความยินดี

ยินดีด้วย คุณสร้างแอป Google Chat เป็นส่วนเสริมของ Google Workspace ที่ผสานรวมแนวคิดพื้นฐานของ AI

ขั้นตอนต่อไปคืออะไร

เราจะแสดงเฉพาะกรณีการใช้งานที่เรียบง่ายใน Codelab นี้ แต่ก็มีขอบเขตการขยายอีกมากมายที่คุณอาจต้องการพิจารณาในแอป Google Chat เช่น

• รองรับสื่อประเภทอื่นๆ เช่น เสียงและวิดีโอ
• ผสานรวมกับโมเดล AI อื่นๆ รวมถึงโมเดลที่กำหนดเองซึ่งโฮสต์อยู่ในแพลตฟอร์มเฉพาะ เช่น Vertex AI
• ผสานรวมกับตัวแทน ซึ่งรวมถึงศุลกากรที่โฮสต์ในแพลตฟอร์มเฉพาะ เช่น Agentspace และ Dialogflow CX
• ใช้ลูปความคิดเห็นและการจัดประเภทเพื่อตรวจสอบและปรับปรุงประสิทธิภาพ
• เผยแพร่ในมาร์เก็ตเพลสเพื่อเพิ่มศักยภาพให้แก่ทีม องค์กร หรือผู้ใช้ทั่วไป

ดูข้อมูลเพิ่มเติม

นักพัฒนาซอฟต์แวร์สามารถใช้แหล่งข้อมูลมากมาย เช่น วิดีโอบน YouTube, เว็บไซต์เอกสารประกอบ, ตัวอย่างโค้ด และบทแนะนำ

• ช่อง YouTube ของนักพัฒนาแอป Google Workspace - ยินดีต้อนรับนักพัฒนาแอป
• เว็บไซต์เอกสารประกอบสำหรับนักพัฒนาแอปของ Google Chat
• ที่เก็บ GitHub สําหรับตัวอย่าง Google Chat ทั้งหมด
• ศูนย์นักพัฒนาแอปของ Google Cloud
• Generative AI ใน Vertex AI
• โมเดล Generative AI
• การปรับแต่งโมเดล Generative AI
• การฝึก Generative AI แบบกำหนดเอง