WebMCP: API อัจฉริยะที่ทำให้เอเจนต์ AI ทำงานบนเว็บได้แม่นยำยิ่งขึ้น
ในยุคที่เทคโนโลยี AI เข้ามามีบทบาทสำคัญในชีวิตประจำวัน การพัฒนาเครื่องมือที่ช่วยให้เอเจนต์ AI ทำงานร่วมกับเว็บแอปพลิเคชันได้อย่างมีประสิทธิภาพและน่าเชื่อถือยิ่งขึ้นจึงเป็นสิ่งจำเป็น WebMCP (Web Machine Computation Protocol) คือมาตรฐานเว็บที่เกิดขึ้นมาเพื่อตอบโจทย์นี้ โดยมีเป้าหมายเพื่อสร้างและเปิดเผยเครื่องมือที่มีโครงสร้างสำหรับเอเจนต์ AI โดยเฉพาะ
WebMCP คืออะไร และทำงานอย่างไร?
WebMCP เป็นมาตรฐานเว็บที่ผสาน JavaScript และการอธิบายประกอบองค์ประกอบแบบฟอร์ม HTML เพื่อให้เอเจนต์ AI เข้าใจและโต้ตอบกับฟีเจอร์ต่างๆ บนหน้าเว็บได้อย่างถูกต้อง การทำงานนี้ช่วยเพิ่มประสิทธิภาพและความน่าเชื่อถือของการกระทำของเอเจนต์ AI ได้อย่างมาก
เอเจนต์ AI ที่ได้รับการพัฒนาให้มีความสามารถมากขึ้น สามารถช่วยให้ผู้ใช้ทำงานที่ซับซ้อนและต้องใช้ความรู้ทางเทคนิคให้เสร็จสมบูรณ์ได้ง่ายขึ้น WebMCP เข้ามามีบทบาทสำคัญในการเพิ่มความแม่นยำให้กับงานเหล่านี้ ทำให้การทำงานของเอเจนต์ AI มีประสิทธิภาพสูงสุด
ทำไม WebMCP ถึงสำคัญ?
WebMCP ทำหน้าที่เป็นสะพานเชื่อมระหว่างเว็บแอปพลิเคชันและเอเจนต์ AI เพื่อเพิ่มประสิทธิภาพ ความน่าเชื่อถือ และความสมบูรณ์ของการทำงาน แทนที่เอเจนต์จะต้องคอยสแกนหาองค์ประกอบต่างๆ เช่น ปุ่ม หรือฟิลด์ เพื่อทำความเข้าใจวัตถุประสงค์ขององค์ประกอบนั้นๆ เว็บไซต์ที่ใช้ WebMCP จะประกาศวัตถุประสงค์ขององค์ประกอบเหล่านั้นโดยตรง ทำให้เอเจนต์สามารถใช้งานได้อย่างถูกต้องแม่นยำ
วิธีนี้มีความน่าเชื่อถือมากกว่าการที่เอเจนต์ต้องตีความขั้นตอนการทำงานที่อาจมีความซับซ้อนและมีหลายขั้นตอนด้วยตนเอง เว็บไซต์สามารถสื่อสารวัตถุประสงค์ที่ชัดเจน เช่น "การค้นหา" หรือ "การซื้อ" ผ่านเครื่องมือที่กำหนดไว้ ทำให้ผู้ใช้มั่นใจได้ว่าระบบจะทำงานตามที่คาดหวังไว้ นอกจากนี้ยังช่วยรักษาการออกแบบที่คำนึงถึงแบรนด์และผู้ใช้เป็นหลัก
ความสามารถหลักของ WebMCP
WebMCP รองรับการดำเนินการที่สำคัญหลายประการ เพื่อให้เอเจนต์ AI ทำงานได้อย่างราบรื่น:
- การค้นพบ (Discovery): เป็นวิธีมาตรฐานที่หน้าเว็บใช้ในการลงทะเบียนเครื่องมือต่างๆ กับเอเจนต์ เช่น เครื่องมือสำหรับการชำระเงิน (checkout) หรือการกรองผลการค้นหา (filter_results)
- สคีมา JSON (JSON Schema): การกำหนดอินพุตและเอาต์พุตที่คาดหวังไว้อย่างชัดเจน ช่วยลดความผิดพลาดจากการเข้าใจผิดหรือการสร้างข้อมูลที่ผิดพลาด (hallucination)
- สถานะ (State): การมีความเข้าใจร่วมกันเกี่ยวกับบริบทของหน้าเว็บปัจจุบัน ทำให้เอเจนต์ทราบว่ามีทรัพยากรใดบ้างที่พร้อมใช้งานแบบเรียลไทม์
WebMCP นำไปใช้ประโยชน์ได้อย่างไรบ้าง?
WebMCP สามารถนำไปประยุกต์ใช้ในหลากหลายสถานการณ์ เพื่อยกระดับประสบการณ์ผู้ใช้และประสิทธิภาพการทำงาน:
- การสนับสนุนลูกค้า: ช่วยให้เอเจนต์ AI สามารถนำทางไปยังแบบฟอร์มที่ถูกต้องและกรอกข้อมูลตามที่ผู้ใช้ระบุได้อย่างรวดเร็ว สำหรับขั้นตอนการสนับสนุนที่ซับซ้อน
- การจองการเดินทาง: อำนวยความสะดวกให้เอเจนต์สามารถจองการเดินทางที่ซับซ้อน เช่น หลายเมือง หรือหลายผู้โดยสาร ได้ในไม่กี่ขั้นตอน
- การดำเนินการที่ละเอียดอ่อน: สำหรับการดำเนินการที่อาจมีความละเอียดอ่อน เช่น การซื้อ สามารถกำหนดให้ผู้ใช้ต้องโต้ตอบกับกล่องโต้ตอบเพื่อยืนยันการดำเนินการได้
การนำ WebMCP ไปใช้ในทางปฏิบัติ
เครื่องมือที่คุณสามารถสร้างขึ้นด้วย WebMCP มีดังนี้:
- การกรอกแบบฟอร์มที่มีโครงสร้าง: สร้างเครื่องมือ
submit_applicationเพื่อช่วยให้เอเจนต์สามารถจับคู่ข้อมูลที่รวบรวมจากการสนทนากับผู้ใช้ เข้ากับช่องแบบฟอร์มได้อย่างถูกต้อง เช่น การแยกแยะว่าช่องใดต้องการชื่อเต็ม หรือชื่อและนามสกุลแยกกัน - การโต้ตอบกับอินเทอร์เฟซที่เน้นมนุษย์: ออกแบบเครื่องมือ
date_pickที่ช่วยให้เลือกวันที่และเวลาที่ซับซ้อนสำหรับการจองหรือกิจกรรมต่างๆ ได้ง่ายขึ้น แม้ว่าบางฟิลด์จะออกแบบมาสำหรับผู้ใช้ที่เป็นมนุษย์โดยเฉพาะ - การแก้ไขข้อบกพร่องของแอปพลิเคชัน: สร้างเครื่องมือ
run_diagnosticsในหน้าการตั้งค่าสำหรับนักพัฒนา เพื่อให้เอเจนต์สามารถเรียกใช้การแก้ไขปัญหาที่ซ่อนอยู่หลังเมนูที่ซับซ้อนได้
การเริ่มต้นใช้งาน WebMCP
WebMCP พร้อมใช้งานเป็น Chrome Flag สำหรับการพัฒนาในเครื่อง:
- เปิด Chrome แล้วไปที่
chrome://flags/#enable-webmcp-testing - ตั้งค่า Flag เป็น Enabled
- เปิด Chrome อีกครั้งเพื่อใช้การเปลี่ยนแปลง
คุณสามารถใช้ API ได้ 2 รูปแบบเพื่อตั้งค่าเครื่องมือเว็บไซต์:
- Imperative API: กำหนดเครื่องมือต่างๆ ด้วย JavaScript มาตรฐาน เช่น อินพุตแบบฟอร์ม, เครื่องมือนำทาง, การจัดการสถานะ หรือฟังก์ชันอื่นๆ
- Declarative API: เพิ่มหมายเหตุ (annotations) ลงในแบบฟอร์ม HTML มาตรฐาน เพื่อสร้างเครื่องมือ WebMCP
ข้อจำกัดที่ควรทราบ
แม้ว่า WebMCP จะมีเป้าหมายเพื่อลดความซับซ้อนของงานต่างๆ แต่ก็มีข้อจำกัดบางประการที่ควรพิจารณา:
- ต้องมีบริบทการเรียกดู: เนื่องจาก WebMCP จัดการการเรียกใช้เครื่องมือผ่าน JavaScript จึงจำเป็นต้องเปิดแท็บเบราว์เซอร์หรือ WebView เพื่อแสดงอินเทอร์เฟซที่มองเห็นได้และบริบทของเบราว์เซอร์ การเรียกเครื่องมือในสถานะแบบไม่มีส่วนหัว (headles) จึงไม่สามารถทำได้
- ค่าใช้จ่ายที่สูงขึ้นสำหรับอินเทอร์เฟซที่ซับซ้อน: หากเว็บไซต์มีความซับซ้อนสูง อาจจำเป็นต้องปรับโครงสร้างใหม่ หรือเพิ่ม JavaScript เพื่อจัดการสถานะของแอปพลิเคชันและอินเทอร์เฟซ
- การค้นพบเครื่องมือ: ไคลเอ็นต์และเบราว์เซอร์ต้องเข้าชมเว็บไซต์โดยตรงเพื่อตรวจสอบว่าเว็บไซต์มีเครื่องมือที่สามารถเรียกใช้ได้หรือไม่
ความปลอดภัยและสิทธิ์
API ของ WebMCP ถูกควบคุมโดยข้อกำหนดเรื่องการแยกต้นทาง (Origin Isolation) และนโยบายสิทธิ์ (Permissions Policy) เพื่อให้มั่นใจในความปลอดภัย:
- WebMCP ใช้งานได้เฉพาะในเอกสารที่แยกต้นทางเท่านั้น เพื่อรักษาความสมบูรณ์ของแหล่งที่มาของเอกสาร
- หาก
document.domainเปิดใช้งาน (เช่น โดยใช้ส่วนหัว HTTPOrigin-Agent-Cluster: ?0) WebMCP API จะถูกปิดใช้งาน - ทั้งสอง API ถูกควบคุมโดยนโยบายสิทธิ์
toolsซึ่งโดยค่าเริ่มต้นจะอนุญาตให้ลงทะเบียนเครื่องมือในบริบทระดับบนสุดและบริบทที่มีต้นทางเดียวกันเท่านั้น และปิดใช้งานสำหรับ iframe แบบข้ามต้นทาง - หากต้องการอนุญาตเครื่องมือ WebMCP ใน iframe แบบข้ามต้นทาง ให้เพิ่มแอตทริบิวต์
allow="tools"ลงใน iframe
ตัวอย่างการใช้งานและเครื่องมือช่วยพัฒนา
คุณสามารถศึกษาตัวอย่างการใช้งาน WebMCP ทั้งแบบ Imperative และ Declarative API ได้ เช่น:
- WebMCP zaMaker (Imperative API)
- การสาธิตการเดินทาง (React) (Imperative API)
- การสาธิต Le Petit Bistro (Declarative API)
นอกจากนี้ คุณยังสามารถตรวจสอบและสำรวจซอร์สโค้ดของเดโมได้ใน GitHub
สำหรับนักพัฒนา เครื่องมือตรวจสอบส่วนขยาย (Contextual Tools Inspector extension) สามารถช่วยให้คุณจำลองการแชทกับเอเจนต์ และดูว่าเครื่องมือ WebMCP ทำงานอย่างไรในแอปพลิเคชันของคุณ
มีส่วนร่วมและแบ่งปันความคิดเห็น
WebMCP ยังอยู่ระหว่างการพัฒนาและอาจมีการเปลี่ยนแปลงในอนาคต หากคุณได้ลองใช้ API เหล่านี้และมีข้อเสนอแนะใดๆ ยินดีรับฟังเสมอ! คุณสามารถเข้าร่วมการหารือ, เข้าร่วมช่วงทดลองใช้, อ่านแนวทางปฏิบัติแนะนำ, หรือรายงานข้อบกพร่องของ Chromium ได้
#WebMCP #AI #ChromeDevelopers #WebDevelopment
ขอบคุณ แหล่งข้อมูล
https://developer.chrome.com/docs/ai/webmcp?hl=th