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 สำหรับการพัฒนาในเครื่อง:

  1. เปิด Chrome แล้วไปที่ chrome://flags/#enable-webmcp-testing
  2. ตั้งค่า Flag เป็น Enabled
  3. เปิด 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 เปิดใช้งาน (เช่น โดยใช้ส่วนหัว HTTP Origin-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

WebMCP: API อัจฉริยะที่ทำให้เอเจนต์ AI ทำงานบนเว็บได้แม่นยำยิ่งขึ้นในยุคที่เทคโนโลยี AI เข้ามามีบทบาทสำคัญในชีวิตประจำวัน การพัฒนาเครื่องมือที่ช่วยให้เอเจนต์ AI ทำงานร่วมกับเว็บแอปพลิเคชันได้อย่างมีประสิทธิภาพและน่าเชื่อถือยิ่งขึ้นจึงเป็นสิ่งจำเป็น WebMCP (Web Machine Computation Protocol) คือมาตรฐานเว็บที่เกิดขึ้นมาเพื่อตอบโจทย์นี้ โดยมีเป้าหมายเพื่อสร้างและเปิดเผยเครื่องมือที่มีโครงสร้างสำหรับเอเจนต์ AI โดยเฉพาะWebMCP คืออะไร และทำงานอย่างไร?WebMCP เป็นมาตรฐานเว็บที่ผสาน JavaScript และการอธิบายประกอบองค์ประกอบแบบฟอร์ม HTML เพื่อให้เอเจนต์ AI เข้าใจและโต้ตอบกับฟีเจอร์ต่างๆ บนหน้าเว็บได้อย่างถูกต้อง การทำงานนี้ช่วยเพิ่มประสิทธิภาพและความน่าเชื่อถือของการกระทำของเอเจนต์ AI ได้อย่างมากเอเจนต์ AI ที่ได้รับการพัฒนาให้มีความสามารถมากขึ้น สามารถช่วยให้ผู้ใช้ทำงานที่ซับซ้อนและต้องใช้ความรู้ทางเทคนิคให้เสร็จสมบูรณ์ได้ง่ายขึ้น WebMCP เข้ามามีบทบาทสำคัญในการเพิ่มความแม่นยำให้กับงานเหล่านี้ ทำให้การทำงานของเอเจนต์ AI มีประสิทธิภาพสูงสุดทำไม WebMCP ถึงสำคัญ?WebMCP ทำหน้าที่เป็นสะพานเชื่อมระหว่างเว็บแอปพลิเคชันและเอเจนต์ AI เพื่อเพิ่มประสิทธิภาพ ความน่าเชื่อถือ และความสมบูรณ์ของการทำงาน แทนที่เอเจนต์จะต้องคอยสแกนหาองค์ประกอบต่างๆ เช่น ปุ่ม หรือฟิลด์ เพื่อทำความเข้าใจวัตถุประสงค์ขององค์ประกอบนั้นๆ เว็บไซต์ที่ใช้ WebMCP จะประกาศวัตถุประสงค์ขององค์ประกอบเหล่านั้นโดยตรง ทำให้เอเจนต์สามารถใช้งานได้อย่างถูกต้องแม่นยำวิธีนี้มีความน่าเชื่อถือมากกว่าการที่เอเจนต์ต้องตีความขั้นตอนการทำงานที่อาจมีความซับซ้อนและมีหลายขั้นตอนด้วยตนเอง เว็บไซต์สามารถสื่อสารวัตถุประสงค์ที่ชัดเจน เช่น "การค้นหา" หรือ "การซื้อ" ผ่านเครื่องมือที่กำหนดไว้ ทำให้ผู้ใช้มั่นใจได้ว่าระบบจะทำงานตามที่คาดหวังไว้ นอกจากนี้ยังช่วยรักษาการออกแบบที่คำนึงถึงแบรนด์และผู้ใช้เป็นหลักความสามารถหลักของ WebMCPWebMCP รองรับการดำเนินการที่สำคัญหลายประการ เพื่อให้เอเจนต์ AI ทำงานได้อย่างราบรื่น:การค้นพบ (Discovery): เป็นวิธีมาตรฐานที่หน้าเว็บใช้ในการลงทะเบียนเครื่องมือต่างๆ กับเอเจนต์ เช่น เครื่องมือสำหรับการชำระเงิน (checkout) หรือการกรองผลการค้นหา (filter_results)สคีมา JSON (JSON Schema): การกำหนดอินพุตและเอาต์พุตที่คาดหวังไว้อย่างชัดเจน ช่วยลดความผิดพลาดจากการเข้าใจผิดหรือการสร้างข้อมูลที่ผิดพลาด (hallucination)สถานะ (State): การมีความเข้าใจร่วมกันเกี่ยวกับบริบทของหน้าเว็บปัจจุบัน ทำให้เอเจนต์ทราบว่ามีทรัพยากรใดบ้างที่พร้อมใช้งานแบบเรียลไทม์WebMCP นำไปใช้ประโยชน์ได้อย่างไรบ้าง?WebMCP สามารถนำไปประยุกต์ใช้ในหลากหลายสถานการณ์ เพื่อยกระดับประสบการณ์ผู้ใช้และประสิทธิภาพการทำงาน:การสนับสนุนลูกค้า: ช่วยให้เอเจนต์ AI สามารถนำทางไปยังแบบฟอร์มที่ถูกต้องและกรอกข้อมูลตามที่ผู้ใช้ระบุได้อย่างรวดเร็ว สำหรับขั้นตอนการสนับสนุนที่ซับซ้อนการจองการเดินทาง: อำนวยความสะดวกให้เอเจนต์สามารถจองการเดินทางที่ซับซ้อน เช่น หลายเมือง หรือหลายผู้โดยสาร ได้ในไม่กี่ขั้นตอนการดำเนินการที่ละเอียดอ่อน: สำหรับการดำเนินการที่อาจมีความละเอียดอ่อน เช่น การซื้อ สามารถกำหนดให้ผู้ใช้ต้องโต้ตอบกับกล่องโต้ตอบเพื่อยืนยันการดำเนินการได้การนำ WebMCP ไปใช้ในทางปฏิบัติเครื่องมือที่คุณสามารถสร้างขึ้นด้วย WebMCP มีดังนี้:การกรอกแบบฟอร์มที่มีโครงสร้าง: สร้างเครื่องมือ submit_application เพื่อช่วยให้เอเจนต์สามารถจับคู่ข้อมูลที่รวบรวมจากการสนทนากับผู้ใช้ เข้ากับช่องแบบฟอร์มได้อย่างถูกต้อง เช่น การแยกแยะว่าช่องใดต้องการชื่อเต็ม หรือชื่อและนามสกุลแยกกันการโต้ตอบกับอินเทอร์เฟซที่เน้นมนุษย์: ออกแบบเครื่องมือ date_pick ที่ช่วยให้เลือกวันที่และเวลาที่ซับซ้อนสำหรับการจองหรือกิจกรรมต่างๆ ได้ง่ายขึ้น แม้ว่าบางฟิลด์จะออกแบบมาสำหรับผู้ใช้ที่เป็นมนุษย์โดยเฉพาะการแก้ไขข้อบกพร่องของแอปพลิเคชัน: สร้างเครื่องมือ run_diagnostics ในหน้าการตั้งค่าสำหรับนักพัฒนา เพื่อให้เอเจนต์สามารถเรียกใช้การแก้ไขปัญหาที่ซ่อนอยู่หลังเมนูที่ซับซ้อนได้การเริ่มต้นใช้งาน WebMCPWebMCP พร้อมใช้งานเป็น 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 เปิดใช้งาน (เช่น โดยใช้ส่วนหัว HTTP Origin-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 #WebDevelopmenthttps://developer.chrome.com/docs/ai/webmcp?hl=th
Shared content
DEVELOPER.CHROME.COM
WebMCP | AI on Chrome | Chrome for Developers
WebMCP มี API 2 รายการที่อนุญาตให้ตัวแทนเบราว์เซอร์ดำเนินการในนามของผู้ใช้
7 Comments 0 Shares 532 Views 0 Reviews