ชี้จุดบนเว็บแล้วให้ ChatGPT ทำต่อ: Custom annotations ทำงานกับ WebMCP อย่างไร

คำสั่งว่า “เปลี่ยนอันนี้” จะมีประโยชน์ก็ต่อเมื่อ AI รู้ว่า “อันนี้” คืออะไร และเว็บไซต์มีเครื่องมือให้เปลี่ยนได้ วิดีโอ Build custom site annotations with ChatGPT จาก OpenAI สาธิตการเชื่อมสองส่วนนี้ผ่าน custom annotations และ WebMCP

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

สารบัญ

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

Annotations ระบุจุด ส่วน tools เปิดทางให้ทำงาน

Annotations คือการชี้วัตถุหรือข้อมูลบนหน้าเว็บ แล้วขอให้ ChatGPT ช่วยจัดการกับสิ่งนั้น ความสามารถที่วิดีโอนำเสนอคือให้นักพัฒนากำหนดตัวควบคุมเฉพาะสำหรับจุดที่เลือก รวมถึงเรียก annotation จากโค้ดพร้อมคำสั่งแนะนำได้

แยกหน้าที่ออกได้เป็นสามส่วน:

• Annotation: ระบุว่าผู้ใช้กำลังหมายถึงวัตถุหรือข้อมูลส่วนไหน
• ตัวควบคุมและคำสั่งแนะนำ: แสดงทางเลือก เช่น เปลี่ยนสี เปลี่ยนเป็นสินค้าคล้ายกัน หรือค้นหาข้อมูลประกอบ
• WebMCP tools: การกระทำที่เว็บไซต์เปิดให้เอเจนต์เรียกใช้ เช่น ค้นหาแค็ตตาล็อกหรืออัปเดตข้อมูลบนหน้าเว็บ

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

เลือกเฟอร์นิเจอร์แล้วเห็นสิ่งที่แก้ได้

ตัวอย่างแรกเป็นเว็บจัดฉากห้อง ผู้บรรยายอธิบายว่า WebMCP เปิดทางให้ ChatGPT แก้ฉากผ่านเครื่องมือของเว็บไซต์ได้อยู่แล้ว ส่วน custom annotations ช่วยให้ผู้ใช้เห็นทางเลือกตรงจุดที่กำลังเลือก

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

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

เติมข้อมูลค่าใช้จ่ายจากบริบทที่เว็บไม่มี

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

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

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

สิ่งที่เว็บไซต์ต้องเตรียม และสิ่งที่คลิปยังไม่ได้ตอบ

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

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

คำถามสำหรับทีมที่อยากนำแนวคิดไปทดลอง

จากสองเดโม ทีมพัฒนาสามารถเริ่มออกแบบการทดลองโดยถามสี่ข้อ ต่อไปนี้เป็นข้อเสนอของบทความเพิ่มเติมจากเนื้อหาวิดีโอ:

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

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

ที่มา: Build custom site annotations with ChatGPT จากช่อง OpenAI เรียบเรียงจากบทถอดเสียงและภาพที่แนบกับต้นฉบับ VideoToBlog