1. บทนำ
ในโค้ดแล็บนี้ คุณจะได้เรียนรู้เกี่ยวกับ Google Antigravity (ต่อไปนี้จะเรียกว่า Antigravity ในเอกสารนี้) ซึ่งเป็นแพลตฟอร์มการพัฒนาแบบเอเจนต์ที่พัฒนา IDE ไปสู่ยุคที่เอเจนต์มาเป็นอันดับแรก
Antigravity ไม่เหมือนผู้ช่วยเขียนโค้ดมาตรฐานที่เพียงแค่เติมบรรทัดให้สมบูรณ์โดยอัตโนมัติ แต่มี "ศูนย์ควบคุมภารกิจ" สำหรับจัดการเอเจนต์อัตโนมัติที่สามารถวางแผน เขียนโค้ด และแม้แต่ท่องเว็บเพื่อช่วยคุณสร้าง
Antigravity ออกแบบมาให้เป็นแพลตฟอร์ม "Agent-First" ซึ่งสมมติว่า AI ไม่ใช่แค่เครื่องมือสำหรับเขียนโค้ด แต่เป็นผู้ดำเนินการแบบอัตโนมัติที่สามารถวางแผน ดำเนินการ ตรวจสอบ และทำซ้ำงานด้านวิศวกรรมที่ซับซ้อนโดยมีการแทรกแซงจากมนุษย์น้อยที่สุด
สิ่งที่คุณจะได้เรียนรู้
- การติดตั้งและกำหนดค่า Antigravity
- สำรวจแนวคิดหลักของ Antigravity เช่น Agent Manager, Editor, Browser และอื่นๆ
- การสำรวจ Use Case บางอย่างด้วย Antigravity
สิ่งที่คุณต้องมี
ปัจจุบัน Antigravity พร้อมให้บริการในเวอร์ชันตัวอย่างสำหรับบัญชี Gmail ส่วนตัว โดยจะมีโควต้าฟรีสำหรับใช้โมเดลชั้นนำ
คุณต้องติดตั้ง Antigravity ในระบบของคุณ ผลิตภัณฑ์นี้พร้อมให้บริการใน Mac, Windows และ Linux บางรุ่น นอกจากเครื่องของคุณเองแล้ว คุณจะต้องมีสิ่งต่อไปนี้ด้วย
- เว็บเบราว์เซอร์ Chrome
- บัญชี Gmail (บัญชี Gmail ส่วนตัว)
Codelab นี้ออกแบบมาสำหรับผู้ใช้และนักพัฒนาซอฟต์แวร์ทุกระดับ (รวมถึงผู้เริ่มต้น)
2. การติดตั้ง
เราจะเริ่มด้วยการติดตั้ง Antigravity ปัจจุบันผลิตภัณฑ์นี้พร้อมให้ทดลองใช้แล้ว และคุณสามารถใช้บัญชี Gmail ส่วนตัวเพื่อเริ่มต้นใช้งานได้
ไปที่หน้าดาวน์โหลด แล้วคลิกเวอร์ชันระบบปฏิบัติการที่เหมาะสมกับกรณีของคุณ เปิดตัวโปรแกรมติดตั้งแอปพลิเคชันและติดตั้งแอปพลิเคชันในเครื่อง เมื่อติดตั้งเสร็จแล้ว ให้เปิดแอปพลิเคชัน Antigravity คุณควรเห็นหน้าจอคล้ายกับหน้าจอด้านล่าง

โปรดคลิกถัดไปทุกครั้ง ขั้นตอนสำคัญมีดังนี้
Choose setup flow:ซึ่งจะแสดงตัวเลือกให้คุณนำเข้าจากการตั้งค่า VS Code หรือ Cursor ที่มีอยู่ เราจะเริ่มต้นใหม่Choose an Editor theme type.เราจะใช้ธีมมืด แต่คุณเลือกได้ตามต้องการHow do you want to use Antigravity agent:

มาดูรายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้กัน และโปรดทราบว่าการตั้งค่านี้ไม่ได้ตายตัวและเปลี่ยนแปลงได้ทุกเมื่อ แม้ในขณะที่คุณโต้ตอบกับเอเจนต์ก็ตาม
ก่อนที่จะเจาะลึกตัวเลือกต่างๆ เรามาดูพร็อพเพอร์ตี้ 2 รายการที่เฉพาะเจาะจงที่นี่ (ซึ่งคุณเห็นทางด้านขวาของกล่องโต้ตอบ)
นโยบายการดำเนินการที่จุดสิ้นสุด
ซึ่งเป็นการให้สิทธิ์ Agent ในการเรียกใช้คำสั่ง (แอปพลิเคชัน/เครื่องมือ) ในเทอร์มินัล มี 3 ตัวเลือกที่นี่
Off: ไม่เรียกใช้คำสั่งเทอร์มินัลโดยอัตโนมัติ (ยกเว้นคำสั่งในรายการที่อนุญาตที่กำหนดค่าได้)Auto: เอเจนต์จะตัดสินใจว่าจะดำเนินการคำสั่งเทอร์มินัลที่ระบุโดยอัตโนมัติหรือไม่ หากจำเป็นต้องขอสิทธิ์จากคุณ ระบบจะตัดสินใจและขอสิทธิ์จากคุณTurbo: เรียกใช้คำสั่งเทอร์มินัลโดยอัตโนมัติเสมอ (ยกเว้นคำสั่งในรายการปฏิเสธที่กำหนดค่าได้)
นโยบายการรีวิว
ขณะที่เอเจนต์ทำงาน ก็จะสร้างอาร์ติแฟกต์ต่างๆ (แผนงาน แผนการติดตั้งใช้งาน ฯลฯ) นโยบายการตรวจสอบได้รับการตั้งค่าเพื่อให้คุณกำหนดได้ว่าใครเป็นผู้ตัดสินว่าจำเป็นต้องตรวจสอบหรือไม่ หากคุณต้องการตรวจสอบเสมอ หรือให้ตัวแทนตัดสินใจในเรื่องนี้ ดังนั้น คุณจึงมี 3 ตัวเลือกในส่วนนี้เช่นกัน
Always Proceed: ตัวแทนไม่เคยขอรีวิวAgent Decides: ตัวแทนจะตัดสินใจว่าจะขอรับการตรวจสอบเมื่อใดRequest Review: ตัวแทนจะขอรีวิวเสมอ
เมื่อเข้าใจเรื่องนี้แล้ว ตัวเลือกทั้ง 4 ก็เป็นเพียงค่าที่กำหนดไว้ล่วงหน้าสำหรับการดำเนินการในเทอร์มินัลและนโยบายการตรวจสอบสำหรับ 3 ตัวเลือก และตัวเลือกที่ 4 ที่เราสามารถควบคุมได้อย่างสมบูรณ์ เรามีตัวเลือก 4 อย่างนี้เพื่อให้คุณเลือกได้ว่าจะให้อำนาจเอเจนต์มากน้อยเพียงใดในการรันคำสั่งในเทอร์มินัลและรับการตรวจสอบอาร์ติแฟกต์ก่อนที่จะดำเนินการต่อกับงาน
โดยมี 4 ตัวเลือกดังนี้
- การพัฒนาที่ขับเคลื่อนด้วยเอเจนต์
- การพัฒนาโดยมี Agent ช่วย
- การพัฒนาที่อิงตามรีวิว
- การกำหนดค่าที่กำหนดเอง
ตัวเลือกการพัฒนาที่ได้รับความช่วยเหลือจากเอเจนต์เป็นตัวเลือกที่สมดุลและแนะนำ เนื่องจากช่วยให้เอเจนต์ตัดสินใจและกลับมาขออนุมัติจากผู้ใช้ได้
ดังนั้น ให้เลือกตัวเลือกที่คุณต้องการ และในตอนนี้เราขอแนะนำให้ใช้วิธีที่แนะนำ
Configure your Editor: เลือกค่ากำหนดSign in to Google: ดังที่กล่าวไว้ก่อนหน้านี้ Antigravity พร้อมให้บริการในโหมดตัวอย่างและฟรีหากคุณมีบัญชี Gmail ส่วนตัว ดังนั้นโปรดลงชื่อเข้าใช้ด้วยบัญชีของคุณตอนนี้ โปรดตรวจสอบว่าคุณอนุญาตให้สร้างโปรไฟล์ Chrome ใหม่สำหรับสิ่งนี้ ซึ่งจะเปิดเบราว์เซอร์เพื่อให้คุณลงชื่อเข้าใช้ได้ เมื่อการตรวจสอบสิทธิ์สำเร็จ คุณจะเห็นข้อความที่คล้ายกับข้อความด้านล่าง และระบบจะนำคุณกลับไปที่แอปพลิเคชัน Antigravity ปล่อยให้เป็นไปตามธรรมชาติTerms of Use: คุณสามารถตัดสินใจว่าจะเลือกใช้หรือไม่ จากนั้นคลิกถัดไป
ซึ่งจะนำคุณไปสู่ช่วงเวลาแห่งความจริงที่ Antigravity จะรอทำงานร่วมกับคุณ เราพร้อมที่จะเริ่มต้นแล้ว
3. ผู้จัดการตัวแทน
Antigravity แยกจากพื้นฐานของ Visual Studio Code (VS Code) แบบโอเพนซอร์ส แต่เปลี่ยนประสบการณ์ของผู้ใช้อย่างสิ้นเชิงเพื่อจัดลำดับความสำคัญของการจัดการเอเจนต์มากกว่าการแก้ไขข้อความ อินเทอร์เฟซแบ่งออกเป็น 2 หน้าต่างหลักที่แตกต่างกัน ได้แก่ Editor และ Agent Manager การแยกความกังวลนี้สะท้อนถึงความแตกต่างระหว่างการมีส่วนร่วมของแต่ละบุคคลและการจัดการด้านวิศวกรรม
Agent Manager: ศูนย์ควบคุม
เมื่อเปิดตัว Antigravity โดยปกติแล้วผู้ใช้จะไม่เห็นโครงสร้างไฟล์ แต่จะเห็น Agent Manager ดังที่แสดงด้านล่าง

อินเทอร์เฟซนี้ทำหน้าที่เป็นแดชบอร์ดMission Control โดยออกแบบมาเพื่อการจัดการระดับสูง ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์สามารถสร้าง ตรวจสอบ และโต้ตอบกับเอเจนต์หลายตัวที่ทำงานแบบไม่พร้อมกันในพื้นที่ทำงานหรือภารกิจต่างๆ
ในมุมมองนี้ นักพัฒนาแอปจะทำหน้าที่เป็นสถาปนิก โดยกำหนดวัตถุประสงค์ระดับสูง ตัวอย่างเช่น
- ปรับโครงสร้างโมดูลการตรวจสอบสิทธิ์
- อัปเดตแผนผังทรัพยากร Dependency
- สร้างชุดทดสอบสำหรับ Billing API
ดังที่แผนภาพด้านบนระบุ คำขอแต่ละรายการเหล่านี้จะสร้างอินสแตนซ์ของเอเจนต์เฉพาะ UI จะแสดงภาพของสตรีมงานแบบคู่ขนานเหล่านี้ โดยแสดงสถานะของตัวแทนแต่ละราย Artifact ที่ตัวแทนสร้างขึ้น (แผน ผลลัพธ์ ความแตกต่าง) และคำขอที่รอการอนุมัติจากเจ้าหน้าที่
สถาปัตยกรรมนี้ช่วยแก้ข้อจำกัดที่สำคัญของ IDE รุ่นก่อนๆ ซึ่งมีลักษณะคล้ายแชทบอทมากกว่า โดยเป็นแบบเชิงเส้นและซิงโครนัส ในอินเทอร์เฟซแชทแบบเดิม นักพัฒนาซอฟต์แวร์ต้องรอให้ AI สร้างโค้ดเสร็จก่อนจึงจะถามคำถามถัดไปได้ ในมุมมองผู้จัดการของ Antigravity นักพัฒนาแอปสามารถส่งเอเจนต์ 5 คนไปทำงานกับข้อบกพร่อง 5 อย่างพร้อมกัน ซึ่งจะช่วยเพิ่มปริมาณงานได้อย่างมีประสิทธิภาพ
หากคลิกถัดไปด้านบน คุณจะมีตัวเลือกในการเปิด Workspace

คิดว่า Workspace เหมือนกับที่คุณรู้จักจาก VS Code แล้วคุณก็จะพร้อมใช้งาน เราจึงเปิดโฟลเดอร์ในเครื่องได้โดยคลิกปุ่ม แล้วเลือกโฟลเดอร์ที่จะเริ่มต้น ในกรณีของฉัน ฉันมีโฟลเดอร์ในโฟลเดอร์หน้าแรกชื่อ my-agy-projects และฉันเลือกโฟลเดอร์นั้น คุณใช้โฟลเดอร์อื่นที่แตกต่างกันโดยสิ้นเชิงได้
โปรดทราบว่าคุณสามารถข้ามขั้นตอนนี้ไปได้เลยหากต้องการ และคุณสามารถเปิด Workspace ได้ทุกเมื่อในภายหลัง
เมื่อทำขั้นตอนนี้เสร็จแล้ว คุณจะอยู่ในหน้าต่าง Agent Manager ซึ่งแสดงอยู่ด้านล่าง

คุณจะเห็นว่าแอปพลิเคชันพร้อมที่จะเริ่มการสนทนาใหม่ในโฟลเดอร์พื้นที่ทำงาน (my-agy-projects) ที่เลือกไว้ทันที โปรดทราบว่าคุณสามารถใช้ความรู้ที่มีอยู่เกี่ยวกับการทำงานกับแอปพลิเคชัน AI อื่นๆ (Cursor, Gemini CLI) และใช้ @ รวมถึงวิธีอื่นๆ เพื่อรวมบริบทเพิ่มเติมขณะพรอมต์ได้
โปรดดูทั้งเมนูแบบเลื่อนลงของ Planning และ Model Selection เมนูแบบเลื่อนลงสำหรับการเลือกโมเดลช่วยให้คุณเลือกโมเดลใดโมเดลหนึ่งที่มีอยู่ในขณะนั้นเพื่อให้เอเจนต์ใช้งานได้ รายการดังกล่าวแสดงอยู่ด้านล่าง

ในทำนองเดียวกัน เราพบว่าเอเจนต์จะอยู่ในโหมด Planning เริ่มต้น แต่เราก็เลือกใช้โหมด Fast ได้เช่นกัน

มาดูกันว่าเอกสารกล่าวถึงเรื่องนี้ว่าอย่างไร
Planning: เอเจนต์สามารถวางแผนก่อนที่จะดำเนินการ ใช้สำหรับการค้นคว้าข้อมูลเชิงลึก งานที่ซับซ้อน หรือการทำงานร่วมกัน ในโหมดนี้ Agent จะจัดระเบียบงานเป็นกลุ่มงาน สร้างอาร์ติแฟกต์ และทำตามขั้นตอนอื่นๆ เพื่อค้นคว้าอย่างละเอียด คิดทบทวน และวางแผนงานเพื่อให้ได้คุณภาพสูงสุด คุณจะเห็นเอาต์พุตที่นี่มากขึ้นFast: Agent จะทำงานโดยตรง ใช้สำหรับงานง่ายๆ ที่ทำได้เร็วขึ้น เช่น การเปลี่ยนชื่อตัวแปร การเริ่มคำสั่ง Bash 2-3 รายการ หรือการทำงานอื่นๆ ที่มีขนาดเล็กกว่าและเฉพาะเจาะจง ซึ่งจะเป็นประโยชน์ในกรณีที่ความเร็วเป็นปัจจัยสำคัญ และงานนั้นง่ายพอที่จะไม่ต้องกังวลเรื่องคุณภาพที่แย่ลง
หากคุณคุ้นเคยกับงบประมาณการคิดและคำที่คล้ายกันในเอเจนต์ ให้คิดว่านี่คือความสามารถในการควบคุมการคิดของเอเจนต์ ซึ่งจะส่งผลโดยตรงต่องบประมาณการคิด เราจะใช้ค่าเริ่มต้นในตอนนี้ แต่โปรดทราบว่าในวันที่เปิดตัว ความพร้อมใช้งานของโมเดล Gemini 3 Pro จะเป็นไปตามโควต้าที่จำกัดสำหรับทุกคน ดังนั้นคุณอาจเห็นข้อความที่เหมาะสมซึ่งระบุว่าคุณใช้โควต้าฟรีสำหรับการใช้งาน Gemini 3 จนหมดแล้ว
ตอนนี้เรามาใช้เวลาสักครู่กับ Agent Manager (หน้าต่าง) ที่นี่และทำความเข้าใจสิ่งต่างๆ เพื่อให้เห็นภาพที่ชัดเจนเกี่ยวกับองค์ประกอบพื้นฐาน วิธีไปยังส่วนต่างๆ ใน Antigravity และอื่นๆ หน้าต่าง Agent Manager จะปรากฏขึ้นดังนี้

โปรดดูแผนภาพด้านบนพร้อมหมายเลข
Inbox: ถือว่านี่เป็นวิธีติดตามการสนทนาทั้งหมดในที่เดียว เมื่อคุณส่งเอเจนต์ไปทำงานแล้ว งานเหล่านั้นจะปรากฏในกล่องจดหมาย และคุณสามารถคลิกกล่องจดหมายเพื่อดูรายการการสนทนาทั้งหมดที่กำลังดำเนินอยู่ การแตะการสนทนาใดๆ จะนำคุณไปยังข้อความทั้งหมดที่มีการแลกเปลี่ยน สถานะของงาน สิ่งที่เอเจนต์สร้างขึ้น หรือแม้กระทั่งหากระบบกำลังรอการอนุมัติจากคุณในงาน ซึ่งเป็นวิธีที่ยอดเยี่ยมในการกลับมาทำงานที่ทำค้างไว้ในภายหลัง ฟีเจอร์ที่มีประโยชน์มากStart Conversation: คลิกที่นี่เพื่อเริ่มการสนทนาใหม่ ซึ่งจะนำคุณไปยังช่องป้อนข้อมูลที่ระบุว่าAsk anythingโดยตรงWorkspaces: เราได้พูดถึงพื้นที่ทำงานและคุณสามารถทำงานในพื้นที่ทำงานใดก็ได้ที่ต้องการ คุณเพิ่มพื้นที่ทำงานได้ทุกเมื่อและเลือกพื้นที่ทำงานใดก็ได้ขณะเริ่มการสนทนาPlayground: วิธีนี้เป็นวิธีที่ยอดเยี่ยมในการเริ่มการสนทนากับตัวแทน และหากต้องการเปลี่ยนการสนทนานั้นเป็นพื้นที่ทำงานที่คุณควบคุมไฟล์ได้เข้มงวดมากขึ้น ฯลฯ ให้คิดว่านี่เป็นพื้นที่ทดลองEditor View: ตอนนี้เราอยู่ในมุมมองผู้จัดการตัวแทน คุณเปลี่ยนไปใช้มุมมองเอดิเตอร์ได้ทุกเมื่อหากต้องการ ซึ่งจะแสดงโฟลเดอร์พื้นที่ทำงานและไฟล์ที่สร้างขึ้น คุณสามารถแก้ไขไฟล์ได้โดยตรง หรือแม้แต่ให้คำแนะนำแบบอินไลน์ คำสั่งในเครื่องมือแก้ไข เพื่อให้เอเจนต์ดำเนินการบางอย่างหรือเปลี่ยนแปลงตามคำแนะนำ/วิธีการที่แก้ไขแล้ว เราจะกล่าวถึงมุมมองโปรแกรมแก้ไขอย่างละเอียดในส่วนถัดไปBrowser: สุดท้ายนี้ เรามาถึงหนึ่งในความแตกต่างที่ชัดเจนซึ่งทำให้ Antigravity มีประสิทธิภาพอย่างมาก นั่นคือการผสานรวมอย่างใกล้ชิดกับเบราว์เซอร์ Chrome มาเริ่มตั้งค่าเบราว์เซอร์ในส่วนถัดไปกัน
4. การตั้งค่าเบราว์เซอร์ Antigravity
ตามเอกสารประกอบ เมื่อเอเจนต์ต้องการโต้ตอบกับเบราว์เซอร์ เอเจนต์จะเรียกใช้เอเจนต์ย่อยของเบราว์เซอร์เพื่อจัดการงานที่กำลังทำอยู่ Subagent ของเบราว์เซอร์จะเรียกใช้โมเดลที่เชี่ยวชาญในการทำงานในหน้าที่เปิดภายในเบราว์เซอร์ที่ Antigravity จัดการ ซึ่งแตกต่างจากโมเดลที่คุณเลือกสำหรับ Agent หลัก
ตัวแทนย่อยนี้มีสิทธิ์เข้าถึงเครื่องมือต่างๆ ที่จำเป็นต่อการควบคุมเบราว์เซอร์ของคุณ ซึ่งรวมถึงการคลิก การเลื่อน การพิมพ์ การอ่านบันทึกคอนโซล และอื่นๆ นอกจากนี้ยังอ่านหน้าเว็บที่เปิดอยู่ผ่านการจับภาพ DOM, ภาพหน้าจอ หรือการแยกวิเคราะห์มาร์กดาวน์ รวมถึงถ่ายวิดีโอได้ด้วย
ซึ่งหมายความว่าเราต้องเปิดตัวและติดตั้งส่วนขยายเบราว์เซอร์ Antigravity มาเริ่มกันเลยด้วยการเริ่มการสนทนาใน Playground และทำตามขั้นตอน
เลือก Playground แล้วมอบหมายงานต่อไปนี้ go to antigravity.google ให้ตัวแทนตามที่แสดงด้านล่าง

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

ซึ่งจะเปิดเบราว์เซอร์และแสดงข้อความให้ติดตั้งส่วนขยายดังที่แสดงด้านล่าง

จากนั้นระบบจะนำคุณไปยังส่วนขยาย Chrome ที่คุณติดตั้งได้

เมื่อติดตั้งส่วนขยายเรียบร้อยแล้ว Antigravity Agent จะเริ่มทำงานและระบุว่าต้องการให้คุณอนุญาตสิทธิ์ในการทำงาน คุณควรเห็นกิจกรรมบางอย่างในหน้าต่างเบราว์เซอร์ที่เปิดอยู่

เปลี่ยนกลับไปที่มุมมอง Agent Manager แล้วคุณจะเห็นสิ่งต่อไปนี้

ซึ่งเป็นสิ่งที่เราคาดหวังไว้เนื่องจากเราขอให้ Agent ไปที่เว็บไซต์ antigravity.google ให้สิทธิ์ดังกล่าว แล้วคุณจะเห็นว่าระบบนำทางไปยังเว็บไซต์อย่างปลอดภัย ดังที่แสดงด้านล่าง

การตรวจสอบอาร์ติแฟกต์
ตอนนี้ก็ถึงส่วนที่น่าสนใจแล้ว เมื่อตัวแทนทำงานเสร็จแล้ว คุณควรจะเห็นงานทั้งหมดของตัวแทน ซึ่งจะนำไปสู่การสร้างอาร์ติแฟกต์ ซึ่งเป็นรากฐานที่คุณใช้สร้างความน่าเชื่อถือในแง่ของงานที่คุณวางแผนจะทำ สิ่งที่คุณทำไปแล้ว และวิธีที่คุณยืนยันงานดังกล่าว
อาร์ติแฟกต์ช่วยแก้ปัญหา"ช่องว่างด้านความน่าเชื่อถือ" เมื่อตัวแทนกล่าวว่า "ฉันแก้ไขข้อบกพร่องแล้ว" ก่อนหน้านี้นักพัฒนาแอปจะต้องอ่านโค้ดเพื่อยืนยัน ใน Antigravity เอเจนต์จะสร้างอาร์ติแฟกต์เพื่อพิสูจน์
Antigravity มุ่งเน้นการสร้างอาร์ติแฟกต์ที่สำคัญตามงาน ซึ่งอาจมีตั้งแต่แผนงานไปจนถึงแผนการติดตั้งใช้งาน และสุดท้ายคือแผนการแนะนำ (พร้อมการยืนยัน) ในแผนเหล่านี้ คุณควรพิจารณาสิ่งต่างๆ เช่น
Task Lists & Plans: ก่อนเขียนโค้ด เอเจนต์จะสร้างแผนที่มีโครงสร้าง ผู้ใช้สามารถตรวจสอบ แก้ไข และอนุมัติแผนนี้ได้Code Diffs: มุมมอง Diff ที่ได้มาตรฐานซึ่งแสดงบรรทัดที่จะเปลี่ยนแปลงอย่างชัดเจนScreenshots: เอเจนต์จะบันทึกสถานะของ UI ก่อนและหลังการเปลี่ยนแปลงBrowser Recordings: สำหรับการโต้ตอบแบบไดนามิก (เช่น "คลิกปุ่มเข้าสู่ระบบ รอวงกลมหมุน ยืนยันว่าแดชบอร์ดโหลดแล้ว") เอเจนต์จะบันทึกวิดีโอเซสชันของตัวเอง นักพัฒนาแอปสามารถดูวิดีโอนี้เพื่อยืนยันว่าตรงตามข้อกำหนดด้านฟังก์ชันการทำงานโดยไม่ต้องเรียกใช้แอปด้วยตนเองTest Results: บันทึกที่มีโครงสร้างของการทดสอบที่ผ่าน/ไม่ผ่านซึ่งสร้างและดำเนินการโดยตัวแทน
ที่ด้านขวาบน ถัดจาก "ตรวจสอบการเปลี่ยนแปลงในมุมมอง Agent Manager" คุณควรเห็นปุ่มเพื่อเปิด/ปิดอาร์ติแฟกต์ หรือหากเปิดอยู่ คุณจะเห็นรายการอาร์ติแฟกต์ที่สร้างขึ้น

คุณควรเห็นมุมมองอาร์ติแฟกต์ดังที่แสดงด้านล่าง ในกรณีนี้ เราได้สั่งให้ Agent ไปที่หน้า antigravity.google จึงมีการจับภาพหน้าจอ สร้างวิดีโอของหน้าดังกล่าว ฯลฯ

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

การคลิกการสนทนาดังกล่าวจะแสดงรายละเอียดต่อไปนี้

คุณสามารถสนทนาต่อจากตรงนี้ได้ด้วย
6. The Editor
ตัวแก้ไขยังคงความคุ้นเคยของ VS Code ไว้ เพื่อให้มั่นใจว่านักพัฒนาแอปที่มีประสบการณ์จะยังคงใช้ฟีเจอร์ต่างๆ ได้อย่างเคย ซึ่งรวมถึง File Explorer มาตรฐาน การไฮไลต์ไวยากรณ์ และระบบนิเวศของส่วนขยาย
คุณคลิกปุ่มเปิดเอดิเตอร์ที่ด้านขวาบนใน Agent Manager เพื่อไปที่เอดิเตอร์ได้

โดยเอดิเตอร์จะได้รับการเสริมด้วย "การรับรู้ของเอเจนต์"
Inline Command: เอดิเตอร์รองรับการเขียนโค้ดแบบ Vibe Coding และคำสั่งในบรรทัด ซึ่งผู้ใช้สามารถไฮไลต์โค้ดและสั่งให้เอเจนต์"Make this more efficient"หรือ"Add comments explaining this logic"ได้Agent Side Panel: ใช้แผงทางด้านขวาของเครื่องมือแก้ไขเพื่อทำงานกับเอเจนต์โดยตรง คุณเริ่มการสนทนาใหม่จากที่นี่หรือให้คำสั่งเพื่อเปลี่ยนโค้ดได้
เมื่อเราพิจารณา Use Case บางอย่างที่เกี่ยวข้องกับการพัฒนาเว็บ ซึ่งเอเจนต์สร้างไฟล์โค้ดหลายไฟล์ เราจะดูตัวแก้ไขเพื่อดูไฟล์ ทำการเปลี่ยนแปลง และโต้ตอบกับเอเจนต์ได้โดยตรงจากที่นี่
7. การสลับระหว่างเอดิเตอร์กับตัวจัดการเอเจนต์
โปรดทราบว่า Antigravity มีความเห็นว่าทั้ง Editor และ Agent Manager ควรเป็นหน้าต่างแยกกันและมีความจำเป็นอย่างชัดเจนสำหรับทั้ง 2 อย่าง คุณมีตัวเลือกในการสลับจากเครื่องมือหนึ่งไปยังอีกเครื่องมือหนึ่งได้ ไม่ว่าจะผ่านปุ่มเปิด Agent Manager ที่ด้านขวาบนเมื่ออยู่ในเครื่องมือแก้ไข หรือโดยคลิกปุ่มเปิดเครื่องมือแก้ไขที่ด้านขวาบนเมื่ออยู่ใน Agent Manager
หรือคุณจะใช้แป้นพิมพ์ลัด Cmd + E เพื่อสลับระหว่าง 2 โหมดก็ได้
8. กรณีการใช้งาน
เมื่อเข้าใจข้อมูลเบื้องต้นเกี่ยวกับผลิตภัณฑ์แล้ว มาดูตัวอย่างการใช้งานกันเพื่อดูการทำงานจริง โปรดทราบว่า Antigravity เป็นแพลตฟอร์มที่เน้นตัวแทนเป็นอันดับแรก ซึ่งหมายความว่าในกรณีส่วนใหญ่ เราเพียงแค่ให้คำสั่งแก่เอเจนต์ จากนั้นเอเจนต์จะดำเนินการด้วยตนเอง ทำงาน ขอสิทธิ์หากจำเป็น สร้างอาร์ติแฟกต์ แล้วแจ้งให้เราทราบหากงานเสร็จสิ้น ด้วยเหตุนี้ เราจึงไม่สามารถสร้างเอาต์พุตทุกรายการของการสนทนาของเอเจนต์ในกรณีการใช้งานแต่ละกรณีต่อไปนี้ เราจะแชร์วิธีการและภาพหน้าจอที่จำเป็นบางส่วนของผลลัพธ์ที่คาดไว้ แต่ผลลัพธ์ของคุณอาจแตกต่างกันเล็กน้อย
กรณีการใช้งานที่เราจะกล่าวถึงมีตั้งแต่การทำให้งานบางอย่างเป็นแบบอัตโนมัติด้วยเว็บไซต์ภายนอก ไปจนถึงการสร้างและยืนยันกรณีทดสอบหน่วยสำหรับโปรเจ็กต์ ไปจนถึงการพัฒนาเว็บไซต์แบบเต็ม ไปกันเลย
ไฮไลต์ข่าว
นี่เป็น Use Case ที่เรียบง่าย แต่สามารถเป็นพื้นฐานที่คุณใช้เว็บเบราว์เซอร์เพื่อเข้าชมเว็บไซต์ ดึงข้อมูล ดำเนินการบางอย่าง แล้วส่งคืนข้อมูลไปยังผู้ใช้ได้
ในกรณีนี้ เราจะไปที่เว็บไซต์ Google News และดึงข้อมูลบางอย่างจากที่นั่น แต่คุณสามารถทดลองกับเว็บไซต์ที่เลือกได้อย่างง่ายดายและดูผลลัพธ์
ตรวจสอบว่าคุณอยู่ใน Agent Manager และได้เลือก Playground ดังที่แสดงด้านล่าง

จากนั้นให้คำสั่งต่อไปนี้

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

เมื่อดำเนินการเสร็จแล้ว คุณควรเห็นการสร้างอาร์ติแฟกต์ด้วย ดังที่แสดงด้านล่าง

ตัวอย่างการดำเนินการโดยเอเจนต์แสดงอยู่ด้านล่าง

โปรดสังเกตว่าทางด้านซ้าย เรามีกระบวนการคิด คุณยังเลื่อนดูจุดต่างๆ และดูการเล่นซ้ำและข้อมูลอื่นๆ ได้ด้วย
สิ่งที่ควรลอง
- เมื่อเข้าใจแล้ว ให้เลือกเว็บไซต์ที่พร้อมใช้งานและเว็บไซต์ที่คุณต้องการให้เอเจนต์ไปรับ/สรุปข้อมูลบางอย่าง ลองพิจารณาเว็บไซต์ที่คุณทราบว่ามีแดชบอร์ดและแผนภูมิ แล้วขอให้เลือกค่า 2-3 ค่า
- ลองใช้พรอมต์ต่อไปนี้
Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.
สร้างเว็บไซต์แบบไดนามิกด้วย Python + Flask
ตอนนี้เรามาสร้างเว็บแอปพลิเคชันที่สมบูรณ์กัน เว็บแอปพลิเคชันที่เราจะสร้างคือเว็บไซต์ที่ให้ข้อมูลเกี่ยวกับกิจกรรมทางเทคนิค 1 วัน ซึ่งมีการพูดคุยตลอดทั้งวันโดยวิทยากรหลายคน
โปรดตรวจสอบอีกครั้งว่าคุณอยู่ใน Agent Manager และได้เลือก Playground แล้ว
ป้อนพรอมต์ต่อไปนี้
I would like to generate a website that is a 1-day technical conference informational site.
The website should have the following functionality:
1. A home page that shows the current date, location, schedule and time table.
2. The 1-day event is a list of 8 talks in total.
3. Each talk has 1 or 2 max. speakers.
4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
5. Each speaker has a First Name, Last Name and LinkedIn url.
6. Allow for users to search by category, speaker, title.
7. Give a lunch break of 60 minutes.
8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript.
10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes.
11. Launch the web application for me to review.
คุณเริ่มการสนทนาได้โดยใช้พรอมต์ด้านบน
เมื่อเอเจนต์ทำงานตามที่ได้รับมอบหมาย ก็จะสร้างอาร์ติแฟกต์ต่อไปนี้
- อาร์ติแฟกต์ของงาน
- อาร์ติแฟกต์การใช้งาน
- อาร์ติแฟกต์คำแนะนำแบบทีละขั้น
อาร์ติแฟกต์ของงานที่ระบุไว้ด้านล่างเป็นลำดับงานเริ่มต้นที่เอเจนต์ถอดรหัสว่าควรทำตามงานที่ได้รับ ภาพหน้าจอตัวอย่างจากการดำเนินการแสดงอยู่ด้านล่าง

จากนั้นคลิกอาร์ติแฟกต์แผนการติดตั้งใช้งาน ตัวอย่างภาพหน้าจอแสดงอยู่ด้านล่าง

และสุดท้าย คุณจะมีอาร์ติแฟกต์คำแนะนำแบบทีละขั้นตอน ซึ่งจะประกอบด้วยทุกสิ่งที่เอเจนต์ทำดังที่แสดงด้านล่าง

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

หากฉันเปลี่ยนไปใช้เครื่องมือแก้ไข โปรดสังเกตในหน้าจอว่ามีโฟลเดอร์ที่สร้างแอปพลิเคชัน Python Flask นอกจากนี้ คุณจะเห็นว่ามีการติดแท็ก Agent mode ไว้ทางด้านขวา และคุณสามารถสนทนาต่อได้ที่นั่นด้วย

สมมติว่าเราต้องการเพิ่มการบรรยายในกิจกรรม เราสามารถอยู่ในแผงเอดิเตอร์และแผงตัวแทน แล้วให้คำสั่ง เช่น Add two more talks to the schedule
ซึ่งจะส่งผลให้เอเจนต์วิเคราะห์ข้อกำหนด อัปเดตงาน แผนการติดตั้งใช้งาน แล้วจึงตรวจสอบฟังก์ชันการทำงานที่อัปเดตด้วย ตัวอย่างการสนทนาแสดงอยู่ด้านล่าง

คุณเปลี่ยนกลับไปใช้ Agent Manager ได้หากต้องการ กระบวนการนี้จะช่วยให้คุณเข้าใจกระบวนการเปลี่ยนจากผู้จัดการตัวแทนเป็นผู้แก้ไข ทำการเปลี่ยนแปลงตามนั้น และอื่นๆ
หมายเหตุ: ขณะดำเนินการนี้ เอเจนต์พยายามเริ่มเซิร์ฟเวอร์ Flask ในพอร์ต 5000 ซึ่งกำลังใช้งานอยู่ในเครื่องปัจจุบัน โดยจะพยายามใช้พอร์ตที่ว่างถัดไปเรื่อยๆ จนกว่าจะตัดสินใจใช้พอร์ต 8080 และเริ่มเซิร์ฟเวอร์ได้
สิ่งที่ควรลอง
- เพิ่มฟังก์ชันการทำงานเพิ่มเติมที่ต้องการลงในแอปพลิเคชัน ระบุรายละเอียดให้เอเจนต์และสังเกตวิธีที่เอเจนต์ทำงานโดยการแก้ไขรายการงานก่อน จากนั้นจึงแก้ไขแผนการใช้งานและอื่นๆ
- ขอให้ Agent สร้าง README หรือเอกสารประกอบเพิ่มเติมสำหรับแอปพลิเคชัน
สร้างแอปเพิ่มประสิทธิภาพการทำงานอย่างง่าย
ตอนนี้เราจะสร้างเว็บแอปพลิเคชันตัวจับเวลา Pomodoro อย่างง่าย
ตรวจสอบว่าคุณอยู่ใน Agent Manager และได้เลือก Playground แล้ว ป้อนพรอมต์ต่อไปนี้
Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.
สังเกตวิธีสร้างรายการงาน แผนการติดตั้งใช้งาน แล้วดำเนินการตามนั้น โปรดสังเกตขั้นตอนการทำงานต่อไป อาจมีบางสถานการณ์ที่ระบบจะแจ้งให้คุณตรวจสอบ ตัวอย่างการเรียกใช้แสดงอยู่ด้านล่าง

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

เราเพิ่มรูปภาพตัวจับเวลาสวยๆ ลงในแอปพลิเคชันได้ไหม สิ่งที่เราต้องทำคือออกคำสั่งติดตามผลตามที่ระบุไว้ด้านล่าง
Add an image to the application that displays a timer.
ซึ่งส่งผลให้ตัวแทนเพิ่มงานใหม่ลงในอาร์ติแฟกต์งาน

จากนั้นก็สร้างรูปภาพขณะที่ทำงาน

ในที่สุดแอปก็มีรูปภาพตามที่เราขอ

สิ่งที่ควรลอง
- โปรดสังเกตว่าพื้นหลังของไอคอนนาฬิกาทรายในแอปพลิเคชันไม่โปร่งใส ลองบอกตัวแทนให้ดำเนินการดังกล่าวอย่างโปร่งใส
- ลองใช้แอปพลิเคชันที่คุณต้องการสร้างในรูปแบบต่างๆ ลองใช้สไตล์ รูปภาพ ขอให้เปลี่ยนแปลง ฯลฯ
สร้างการทดสอบหน่วย, สตับจำลอง และตรวจสอบการทดสอบ
Use Case สุดท้ายที่เราจะลองใช้ที่นี่คือการสร้างการทดสอบหน่วยสำหรับไฟล์โค้ดที่เฉพาะเจาะจงที่เรามี และให้ Agent ดำเนินการทดสอบและตรวจสอบด้วย
เราจะใช้พื้นที่ทำงานที่มีไฟล์ Python ไฟล์เดียวตามที่แสดงด้านล่าง
from typing import Dict
# --- Custom Exceptions ---
class InventoryShortageError(Exception):
"""Raised when there is not enough item stock."""
pass
class PaymentFailedError(Exception):
"""Raised when the payment gateway rejects the transaction."""
pass
class InvalidOrderError(Exception):
"""Raised when the order violates business rules."""
pass
# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
def get_stock(self, product_id: str) -> int:
"""Connects to DB to check stock."""
raise NotImplementedError("Real connection required")
def decrement_stock(self, product_id: str, quantity: int):
"""Connects to DB to reduce stock."""
raise NotImplementedError("Real connection required")
class PaymentGateway:
def charge(self, amount: float, currency: str) -> bool:
"""Connects to Stripe/PayPal."""
raise NotImplementedError("Real connection required")
# --- Main Business Logic ---
class Order:
def __init__(self,
inventory_service: InventoryService,
payment_gateway: PaymentGateway,
customer_email: str,
is_vip: bool = False):
self.inventory = inventory_service
self.payment = payment_gateway
self.customer_email = customer_email
self.is_vip = is_vip
self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
self.is_paid = False
self.status = "DRAFT"
def add_item(self, product_id: str, price: float, quantity: int = 1):
"""Adds items to the cart. Rejects invalid prices or quantities."""
if price < 0:
raise ValueError("Price cannot be negative")
if quantity <= 0:
raise ValueError("Quantity must be greater than zero")
if product_id in self.items:
self.items[product_id]['qty'] += quantity
else:
self.items[product_id] = {'price': price, 'qty': quantity}
def remove_item(self, product_id: str):
"""Removes an item entirely from the cart."""
if product_id in self.items:
del self.items[product_id]
@property
def total_price(self) -> float:
"""Calculates raw total before discounts."""
return sum(item['price'] * item['qty'] for item in self.items.values())
def apply_discount(self) -> float:
"""
Applies business logic:
1. VIPs get flat 20% off.
2. Regulars get 10% off if total > 100.
3. No discount otherwise.
"""
total = self.total_price
if self.is_vip:
return round(total * 0.8, 2)
elif total > 100:
return round(total * 0.9, 2)
return round(total, 2)
def checkout(self):
"""
Orchestrates the checkout process:
1. Validates cart is not empty.
2. Checks stock for all items.
3. Calculates final price.
4. Charges payment.
5. Updates inventory.
"""
if not self.items:
raise InvalidOrderError("Cannot checkout an empty cart")
# 1. Check Inventory Logic
for product_id, data in self.items.items():
available_stock = self.inventory.get_stock(product_id)
if available_stock < data['qty']:
raise InventoryShortageError(f"Not enough stock for {product_id}")
# 2. Calculate Final Price
final_amount = self.apply_discount()
# 3. Process Payment
try:
success = self.payment.charge(final_amount, "USD")
if not success:
raise PaymentFailedError("Transaction declined by gateway")
except Exception as e:
# Catching generic network errors from the gateway
raise PaymentFailedError(f"Payment gateway error: {str(e)}")
# 4. Decrement Stock (Only occurs if payment succeeded)
for product_id, data in self.items.items():
self.inventory.decrement_stock(product_id, data['qty'])
self.is_paid = True
self.status = "COMPLETED"
return {"status": "success", "charged_amount": final_amount}
ตรวจสอบว่าคุณมีไฟล์ Python ข้างต้นในโฟลเดอร์ในเครื่อง และโหลดไฟล์ดังกล่าวเป็นพื้นที่ทำงานใน Antigravity
นี่คือบริการคำสั่งซื้ออย่างง่ายที่มีฟังก์ชันการทำงานหลักต่อไปนี้ในฟังก์ชัน checkout
- ตรวจสอบว่ารถเข็นไม่ว่างเปล่า
- ตรวจสอบสินค้าคงคลังของสินค้าทั้งหมด
- คำนวณราคาสุดท้าย
- การชำระเงิน
- อัปเดตพื้นที่โฆษณา
เราจะมอบหมายงานให้ Agent สร้างกรณีทดสอบหน่วย จัดเตรียมการติดตั้งใช้งานจำลอง และทำการทดสอบเพื่อให้มั่นใจว่าการทดสอบจะสำเร็จ
เราจะเปิดโฟลเดอร์พื้นที่ทำงานที่เฉพาะเจาะจง และคุณจะเห็นว่าตอนนี้เราใช้สัญลักษณ์ @ เพื่ออ้างอิงไฟล์ได้แล้ว ตัวอย่างเช่น เราอาจทำสิ่งต่อไปนี้

ซึ่งจะแสดงพร้อมคำอธิบายเกี่ยวกับไฟล์นี้

เราขอให้สร้างภาพที่ดีขึ้นได้ผ่านพรอมต์
Can you visually show this class for better understanding

ขั้นตอนถัดไปคือการสร้าง Unit Test และขอให้ Agent ทดสอบ ฉันป้อนพรอมต์ต่อไปนี้
generate unit tests for this module and test it out with mock implementations.
โดยสร้างอาร์ติแฟกต์งานต่อไปนี้และดำเนินการตามงาน

นอกจากนี้ คุณยังดูรายละเอียดของการทดสอบที่ดำเนินการได้ด้วย

ไฟล์ที่สร้างขึ้นไฟล์หนึ่งคือไฟล์ทดสอบด้วย ภาพหน้าจอของส่วนนี้แสดงอยู่ด้านล่าง

สิ่งที่ควรลอง
ลองใช้โค้ดของคุณเองและดูว่าคุณสามารถขอให้ Agent ทำอะไรได้บ้าง ตั้งแต่การเพิ่มฟังก์ชันการทำงานไปจนถึงการปรับโครงสร้างโค้ดบางส่วน
9. ขอแสดงความยินดี
ยินดีด้วย คุณติดตั้งและเข้าใจวิธีใช้ Antigravity ซึ่งเป็นแพลตฟอร์มการพัฒนาที่เน้นเอเจนต์เป็นอันดับแรกเรียบร้อยแล้ว Use Case ต่างๆ ที่เราได้ลองใช้จะช่วยให้คุณนำข้อกำหนดของคุณเองไปใช้และสำรวจว่า Antigravity จะทำงานร่วมกับคุณเพื่อดำเนินการให้เสร็จสมบูรณ์ได้อย่างไร
เอกสารอ้างอิง
- เว็บไซต์อย่างเป็นทางการ : https://antigravity.google/
- เอกสารประกอบ: https://antigravity.google/docs
- กรณีการใช้งาน : https://antigravity.google/use-cases
- ดาวน์โหลด : https://antigravity.google/download
- ช่อง YouTube สำหรับ Google Antigravity : https://www.youtube.com/@googleantigravity