วิธีใช้ทักษะของเอเจนต์ AI (ด้วย Antigravity CLI และทักษะของเอเจนต์สำหรับ Firebase)

1. บทนำ

ในห้องทดลองนี้ คุณจะได้เรียนรู้วิธีสร้างทักษะ Agent เพื่อให้ AI Agent เข้าถึงความรู้และเวิร์กโฟลว์ที่กำหนดเองได้ คุณจะสร้างเป็นทักษะในพื้นที่ที่เข้าถึงได้จาก Antigravity CLI

สิ่งที่คุณต้องทำ

• สร้างทักษะของ Agent สำหรับสิ่งที่คุณชื่นชอบ
• ใช้ Antigravity CLI เพื่อค้นหาทักษะ
• ติดตั้ง Agent Skills อย่างเป็นทางการสำหรับ Firebase และใช้เพื่อสร้างและติดตั้งใช้งานแอป

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

• วิธีจัดโครงสร้างทักษะ
• วิธีเขียนไฟล์ SKILL.md
• วิธีใช้ทักษะในเครื่องกับ Antigravity CLI

2. การตั้งค่าโปรเจ็กต์

1. หากยังไม่มีบัญชี Google คุณต้องสร้างบัญชี Google
   • ใช้บัญชีส่วนตัวแทนบัญชีงานหรือบัญชีโรงเรียน บัญชีงานและบัญชีโรงเรียนอาจมีข้อจำกัดที่ทำให้คุณเปิดใช้ API ที่จำเป็นสำหรับแล็บนี้ไม่ได้
2. ลงชื่อเข้าใช้คอนโซล Google Cloud
3. เปิดใช้การเรียกเก็บเงินใน Cloud Console
   • การทำ Lab นี้ให้เสร็จสมบูรณ์ควรมีค่าใช้จ่ายน้อยกว่า $1 USD ในทรัพยากรระบบคลาวด์
   • คุณสามารถทำตามขั้นตอนที่ส่วนท้ายของแล็บนี้เพื่อลบทรัพยากรเพื่อหลีกเลี่ยงการเรียกเก็บเงินเพิ่มเติม
   • ผู้ใช้ใหม่มีสิทธิ์ทดลองใช้ฟรีมูลค่า $300 USD
4. สร้างโปรเจ็กต์ใหม่หรือเลือกใช้โปรเจ็กต์ที่มีอยู่ซ้ำ
   • หากเห็นข้อผิดพลาดเกี่ยวกับโควต้าโปรเจ็กต์ ให้ใช้โปรเจ็กต์ที่มีอยู่ซ้ำหรือลบโปรเจ็กต์ที่มีอยู่เพื่อสร้างโปรเจ็กต์ใหม่

3. เปิดโปรแกรมแก้ไข Cloud Shell

1. คลิกลิงก์นี้เพื่อไปยังโปรแกรมแก้ไข Cloud Shell โดยตรง
2. หากระบบแจ้งให้ให้สิทธิ์ในวันนี้ ให้คลิกให้สิทธิ์เพื่อดำเนินการต่อ
3. หากเทอร์มินัลไม่ปรากฏที่ด้านล่างของหน้าจอ ให้เปิดโดยทำดังนี้
   • คลิกดู
   • คลิก Terminal
4. ในเทอร์มินัล ให้ตั้งค่าโปรเจ็กต์ด้วยคำสั่งนี้
   • รูปแบบ:

     gcloud config set project [PROJECT_ID]
     

   • ตัวอย่าง

     gcloud config set project lab-project-id-example
     

   • หากจำรหัสโปรเจ็กต์ไม่ได้ ให้ทำดังนี้
     • คุณแสดงรหัสโปรเจ็กต์ทั้งหมดได้โดยใช้คำสั่งต่อไปนี้

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
5. คุณควรเห็นข้อความต่อไปนี้

   Updated property [core/project].
   

   หากเห็น WARNING และระบบขอให้คุณ Do you want to continue (Y/n)? แสดงว่าคุณอาจป้อนรหัสโปรเจ็กต์ไม่ถูกต้อง กด n กด Enter แล้วลองเรียกใช้คำสั่ง gcloud config set project อีกครั้ง

4. สร้างทักษะที่กำหนดเอง

ทักษะของเอเจนต์คือไดเรกทอรีที่มีไฟล์ SKILL.md อย่างน้อย 1 ไฟล์ซึ่งมีคำสั่งและความรู้สำหรับ AI Agent ในส่วนนี้ คุณจะสร้างทักษะที่สอน Antigravity CLI เกี่ยวกับสิ่งที่คุณชื่นชอบ

1. สร้างไดเรกทอรีสำหรับ Lab นี้แล้วไปที่ไดเรกทอรีดังกล่าว

   mkdir ~/agent-skills-lab && cd ~/agent-skills-lab
   

2. สร้างไดเรกทอรีสำหรับทักษะของโปรเจ็กต์

   mkdir -p ~/agent-skills-lab/.agents/skills/my-favorite-things
   

3. สร้างและเปิดไฟล์ SKILL.md ใหม่สำหรับทักษะของคุณ

   cloudshell edit ~/agent-skills-lab/.agents/skills/my-favorite-things/SKILL.md
   

   คำสั่ง cloudshell edit จะเปิดไฟล์ SKILL.md ในเครื่องมือแก้ไขเหนือเทอร์มินัล
4. เพิ่มเนื้อหาต่อไปนี้ลงในไฟล์ SKILL.md

   ---
   name: my-favorite-things
   description: Provides personal information about my favorite color, food, and programming language. Use this skill when the user asks questions about my personal preferences or favorite things.
   ---
   
   # Knowledge
   
   - **Favorite Color:** Blue
   - **Favorite Food:** Pizza
   - **Favorite Programming Language:** Python
   
   If asked about one of my favorite things, please respond with the information provided above.
   

คุณสร้างทักษะแรกได้แล้วด้วยไฟล์ SKILL.md เพียงไฟล์เดียว ถึงเวลาใช้ทักษะนี้ใน Antigravity CLI แล้ว

5. ใช้ทักษะจาก Antigravity CLI

ตอนนี้คุณสร้างทักษะเรียบร้อยแล้ว Antigravity CLI จะค้นพบทักษะนี้ได้เนื่องจากอยู่ในไดเรกทอรี .agents/skills

1. เริ่ม Antigravity CLI

   agy
   

หมายเหตุ: Antigravity CLI จะได้รับการติดตั้งไว้ล่วงหน้าใน Cloud Shell

1. ตรวจสอบสิทธิ์ด้วย Antigravity CLI: ต้องมีการตรวจสอบสิทธิ์ในระหว่างการเริ่มต้นครั้งแรก เลือก OAuth (กด Enter)
2. คลิกลิงก์ (หากคลิกไม่ได้ ให้ไฮไลต์ URL ใน Cloud Shell เพื่อคัดลอก จากนั้นวางลงในเบราว์เซอร์)
3. ลงชื่อเข้าใช้บัญชี Google
4. คัดลอกโค้ด
5. วางโค้ดลงในเทอร์มินัล Cloud Shell Editor
6. กด Enter
7. กด Enter เพื่อยอมรับการตั้งค่าเริ่มต้นบางอย่าง
8. ให้ Antigravity CLI แสดงรายการทักษะที่พร้อมใช้งานในบริบทของตัวเอง

   /skills
   

   คุณควรเห็น my-favorite-things ในรายการทักษะที่พร้อมใช้งาน
9. กด ESC เพื่อออกจากมุมมองทักษะ
10. ถาม Antigravity CLI เกี่ยวกับสีโปรดของคุณ

    What is my favorite color?
    

    Antigravity CLI ควรใช้ทักษะ my-favorite-things เพื่อตอบคำถามของคุณ หากได้รับข้อความแจ้ง ให้อนุญาต Antigravity CLI ให้ใช้ทักษะ

เอาต์พุตควรแสดงว่า Antigravity CLI ใช้ทักษะของคุณและตอบกลับด้วยข้อความ เช่น "สีน้ำเงิน" หรือ "สีโปรดของฉันคือสีน้ำเงิน"

คุณทำได้แล้ว คุณสร้างทักษะและทดสอบโดยใช้ Antigravity CLI เรียบร้อยแล้ว

เมื่อพร้อมสิ้นสุดเซสชัน ให้พิมพ์ /exit แล้วกด Enter เพื่อออกจาก Antigravity CLI

6. (ไม่บังคับ) สร้างและติดตั้งใช้งานแอปพลิเคชันใน Firebase Hosting

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

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

ตอนนี้ใช้ทักษะของ Agent สำหรับ Firebase เพื่อสร้างเว็บแอปพลิเคชัน "สิ่งที่ต้องทำ" พร้อมการตรวจสอบสิทธิ์ผู้ใช้และฐานข้อมูล แล้วติดตั้งใช้งานในโฮสติ้งของ Firebase

สร้างโปรเจ็กต์

1. หากยังอยู่ใน Antigravity CLI ให้พิมพ์ /exit เพื่อออก
2. สร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์และไปที่ไดเรกทอรีนั้น

   mkdir ~/todo-app && cd ~/todo-app
   

3. เข้าสู่ระบบ Firebase โดยใช้บัญชี Google ใช้แฟล็ก --no-localhost เนื่องจากคุณอยู่ใน Cloud Shell

   firebase login --no-localhost
   

   1. โต้ตอบกับข้อความแจ้งของ CLI
      • เมื่อระบบถาม Enable Gemini in Firebase features? ให้พิมพ์ Y (สำหรับ "ใช่") แล้วกด Enter
      • เมื่อระบบถาม Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? ให้พิมพ์ Y (สำหรับ "ใช่") แล้วกด Enter
   2. ให้สิทธิ์ในเบราว์เซอร์
      • คุณจะเห็น URL ในเทอร์มินัล คลิกลิงก์ (หากคลิกไม่ได้ ให้ไฮไลต์ URL ใน Cloud Shell เพื่อคัดลอก แล้ววางลงในเบราว์เซอร์) เพื่อเปิดหน้าเข้าสู่ระบบในแท็บเบราว์เซอร์ใหม่
      • ขั้นตอนที่ 1 จาก 3 (ยืนยันคำสั่ง): คลิกใช่ ฉันเพิ่งเรียกใช้คำสั่งนี้
      • ขั้นตอนที่ 2 จาก 3 (ยืนยันรหัสเซสชัน): ตรวจสอบว่ารหัสเซสชันตรงกับที่แสดงในเทอร์มินัล แล้วคลิกใช่ นี่คือรหัสเซสชันของฉัน
      • ขั้นตอนที่ 3 จาก 3 (คัดลอกรหัส): คลิกคัดลอกเพื่อคัดลอกรหัสการให้สิทธิ์ไปยังคลิปบอร์ด
   3. เข้าสู่ระบบให้เสร็จสมบูรณ์
      • กลับไปที่เทอร์มินัล Cloud Shell แล้ววางรหัสการให้สิทธิ์ที่พรอมต์ ? Enter authorization code:
      • กด Enter
   คุณควรเห็นข้อความว่าดำเนินการสำเร็จแล้ว: ✔ Success! Logged in as

เคล็ดลับ: เมื่อวางรหัสการให้สิทธิ์ลงใน Cloud Shell ให้มองหากล่องโต้ตอบของ Chrome ที่ขอสิทธิ์ในคลิปบอร์ดและตรวจสอบว่าได้เปิดใช้แล้ว คุณใช้ Ctrl+Shift+V (Windows) หรือ CMD+Shift+V (Mac) เพื่อวางโค้ดลงในเทอร์มินัลได้

ติดตั้งทักษะเอเจนต์สำหรับ Firebase

ตอนนี้คุณได้สร้างไดเรกทอรีโปรเจ็กต์แล้ว คุณควรติดตั้งทักษะของเอเจนต์สำหรับ Firebase ภายในไดเรกทอรีนั้น

คุณติดตั้งทักษะเอเจนต์สำหรับ Firebase ได้ด้วย CLI ของทักษะในเทอร์มินัล โดยทำดังนี้

npx skills add firebase/agent-skills

ในระหว่างการติดตั้ง ระบบจะแจ้งให้คุณเลือกทักษะที่จะติดตั้ง ใช้ปุ่มลูกศรเพื่อไปยังส่วนต่างๆ ของรายการ และใช้แป้นเว้นวรรคเพื่อเลือกทักษะเหล่านี้

• firebase-auth-basics
• firebase-basics
• firebase-firestore
• firebase-hosting-basics
• firebase-security-rules-auditor

สำหรับพรอมต์ต่อๆ ไป คุณสามารถยอมรับค่าเริ่มต้นได้อย่างปลอดภัยโดยกด Enter

คำสั่งนี้จะดาวน์โหลดและติดตั้งทักษะต่างๆ รวมถึง firebase-basics และ firebase-hosting-basics ทำให้พร้อมใช้งานใน Antigravity CLI ควบคู่ไปกับทักษะ my-favorite-things

ดูข้อมูลเพิ่มเติมเกี่ยวกับทักษะเอเจนต์สำหรับ Firebase ได้ที่ทักษะที่พร้อมใช้งาน

สร้างและติดตั้งใช้งานเว็บแอปพื้นฐาน

1. เปิดใช้ API ที่จำเป็นสำหรับโปรเจ็กต์

   gcloud services enable \
     cloudresourcemanager.googleapis.com \
     firebase.googleapis.com
   

2. เปิดใช้ Firebase ในโปรเจ็กต์ Google Cloud ปัจจุบันโดยทำดังนี้

   firebase projects:addfirebase ${GOOGLE_CLOUD_PROJECT}
   

3. เริ่ม Antigravity CLI

   agy
   

4. ขอให้ Antigravity CLI สร้างindex.htmlพื้นฐานโดยทำดังนี้

   Generate an index.html file with the content "Hello Firebase Hosting" and
   deploy the application to Firebase Hosting using the current Google Cloud
   Project.
   

   Antigravity CLI จะขอสิทธิ์ขณะสร้างและติดตั้งใช้งานแอปพลิเคชัน กด Enter เพื่ออนุญาตให้ทำเช่นนั้น คุณอาจต้องพิมพ์ "อนุมัติ" แล้วกด Enter Antigravity CLI ควรใช้ทักษะของเอเจนต์สำหรับ Firebase เพื่อสร้างและติดตั้งใช้งานเว็บไซต์ แนะนำตัวแทนพร้อมกับการอนุมัติตามความจำเป็น

เมื่อติดตั้งใช้งานเสร็จแล้ว ควรมี URL สำหรับเว็บแอปของคุณ ใช้ ctrl+click (Windows/Linux) หรือ cmd+click (Mac) เพื่อเปิดลิงก์ในเทอร์มินัล Cloud Shell Editor ไปที่ URL ของแอปที่ติดตั้งใช้งาน

เพิ่มการตรวจสอบสิทธิ์ Firebase

1. เริ่ม Antigravity CLI หากยังไม่ได้เริ่ม

   agy
   

   Antigravity CLI อาจถามคำถาม เช่น "คุณเชื่อถือโฟลเดอร์นี้ไหม" กด Enter เพื่อยอมรับค่าเริ่มต้น
2. ตอนนี้ ให้ขอให้ Antigravity CLI เพิ่มการลงชื่อเข้าใช้ด้วย Google โดยทำดังนี้

   Generate HTML, CSS, and Javascript for a single page application.
   It should use Google Sign-in with Firebase Authentication.
   A user should be able to sign in with their Google Account.
   Deploy when you are done and give the URL to me.
   

   Antigravity CLI อาจขอสร้างหรืออัปเดตไฟล์ เช่น index.html, style.css และ script.js อนุญาตให้ดำเนินการดังกล่าวได้ Antigravity CLI อาจขอให้คุณดำเนินการบางอย่างในคอนโซล Firebase CLI สามารถทำสิ่งเหล่านี้ได้เกือบทั้งหมดหากคุณขอให้ลอง แต่คุณอาจต้องทำตามขั้นตอนด้วยตนเอง (เช่น การเปิดใช้ Google OAuth) หากอินสแตนซ์ Cloud Shell มี Firebase CLI เวอร์ชันเก่ากว่าติดตั้งอยู่

เมื่อติดตั้งใช้งานเสร็จแล้ว ควรมี URL สำหรับเว็บแอปของคุณ ใช้ ctrl+click (Windows/Linux) หรือ cmd+click (Mac) เพื่อเปิดลิงก์ในเทอร์มินัล Cloud Shell Editor ไปที่ URL ของแอปที่ติดตั้งใช้งาน

หากต้องการดูการเปลี่ยนแปลงล่าสุด คุณอาจต้อง "รีเฟรชแบบเต็ม" ด้วย ctrl+shift+R (Windows/Linux) หรือ cmd+shift+R (Mac)

เพิ่ม Cloud Firestore

1. เริ่ม Antigravity CLI หากยังไม่ได้เริ่ม

   agy
   

   Antigravity CLI อาจถามคำถาม เช่น "คุณเชื่อถือโฟลเดอร์นี้ไหม" กด Enter เพื่อยอมรับค่าเริ่มต้น
2. ขอให้ Antigravity CLI เพิ่ม Firestore เพื่อบันทึกงาน

   Update the application to save tasks in Cloud Firestore for the signed-in user.
   A user should be able to add new tasks and see a list of their tasks.
   Deploy when you are done and give the URL to to me.
   

   Antigravity CLI จะอัปเดตไฟล์ อนุญาตให้ทำเช่นนั้น

เมื่อติดตั้งใช้งานเสร็จแล้ว ควรมี URL สำหรับเว็บแอปของคุณ ใช้ ctrl+click (Windows/Linux) หรือ cmd+click (Mac) เพื่อเปิดลิงก์ในเทอร์มินัล Cloud Shell Editor ไปที่ URL ของแอปที่ติดตั้งใช้งาน

หากต้องการดูการเปลี่ยนแปลงล่าสุด คุณอาจต้อง "รีเฟรชแบบเต็ม" ด้วย ctrl+shift+R (Windows/Linux) หรือ cmd+shift+R (Mac)

หากแอปพลิเคชันไม่ทำงานตามที่คาดไว้ ให้ทำงานกับ Antigravity CLI ต่อไปเพื่อให้ได้ฟังก์ชันการทำงานที่คุณต้องการ ตัวอย่าง: shell Hide the task form when the user is logged out. Update the security rules so the user can see their TODOs.

ทดลองใช้ห้องทดลองต่อไปเพื่อเพิ่มฟีเจอร์ที่คุณต้องการเห็นในแอปพลิเคชัน Firebase ใหม่

7. บทสรุป

ยินดีด้วย คุณสร้างทักษะและเรียนรู้วิธีติดตั้งทักษะเพิ่มเติมสำหรับ Antigravity CLI เรียบร้อยแล้ว

(ไม่บังคับ) ล้าง

หากต้องการล้างข้อมูล คุณสามารถลบโปรเจ็กต์ที่อยู่ในระบบคลาวด์เพื่อหลีกเลี่ยงการเรียกเก็บเงินเพิ่มเติม

หากต้องการ ให้ลบโปรเจ็กต์โดยทำดังนี้

gcloud projects delete $GOOGLE_CLOUD_PROJECT

นอกจากนี้ คุณยังลบทรัพยากรที่ไม่จำเป็นออกจากดิสก์ Cloud Shell เพื่อเพิ่มพื้นที่ว่างได้ด้วย

1. ลบไดเรกทอรีแล็บ (ซึ่งจะนำทั้งทักษะและแอปออก)

   rm -rf ~/agent-skills-lab
   

2. ลบไดเรกทอรีแอปพลิเคชัน "To Do" (หากคุณสร้างไว้ภายนอก) โดยทำดังนี้

   rm -rf ~/todo-app
   

หากต้องการรีเซ็ต Cloud Shell เป็นสถานะเริ่มต้น คุณสามารถทำตามเอกสารประกอบอย่างเป็นทางการเพื่อดูวิธีการดำเนินการอย่างปลอดภัย