WebMCP

Alexandra Klepper
Alexandra Klepper
GitHub Bluesky

เผยแพร่เมื่อ: 18 พฤษภาคม 2026

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

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

เหตุใดจึงควรเลือกใช้ WebMCP

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

วิธีนี้มีความน่าเชื่อถือมากกว่าการทำงาน ซึ่งอาจมีหลายขั้นตอนและแต่ละขั้นตอนอาจตีความได้หลายแบบโดย Agent

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

WebMCP รองรับการดำเนินการต่อไปนี้

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

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

กรณีการใช้งาน

คุณสามารถใช้ WebMCP บนเว็บได้หลายวิธี เช่น

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

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

ในทางปฏิบัติ เครื่องมือของคุณสามารถทำงานต่อไปนี้ให้เสร็จสมบูรณ์ได้

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

ไม่มีกรณีการใช้งานที่คุณต้องการใช่ไหม หรือคุณมีไอเดียที่อยากแชร์เกี่ยวกับ WebMCP ไหม เข้าร่วมโปรแกรมทดลองใช้ก่อนเปิดตัว และแชร์ความคิดเห็น

เริ่มต้นใช้งาน

WebMCP พร้อมใช้งานเป็น Chrome Flag สำหรับการพัฒนาในเครื่อง และจะพร้อมใช้งาน ในช่วงทดลองใช้จากต้นทางใน Chrome 149

วิธีเปิดใช้ WebMCP ในเครื่อง

  1. เปิด Chrome แล้วไปที่ chrome://flags/#enable-webmcp-testing
  2. ตั้งค่าแฟล็กเป็นเปิดใช้
  3. รีสตาร์ท Chrome เพื่อใช้การเปลี่ยนแปลง

ใช้ WebMCP API

คุณสามารถใช้ API 2 รายการต่อไปนี้เพื่อตั้งค่าเครื่องมือเว็บไซต์

  • Imperative API: กำหนดเครื่องมือประเภทต่างๆ ด้วย JavaScript มาตรฐาน เช่น อินพุตแบบฟอร์ม เครื่องมือนำทาง การจัดการสถานะ หรือฟังก์ชันอื่นๆ
  • Declarative API: เพิ่มคำอธิบายประกอบลงในแบบฟอร์ม HTML มาตรฐาน เพื่อสร้างเครื่องมือ WebMCP

ข้อจำกัด

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

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

สาธิต

ตัวอย่างการสาธิตที่ครอบคลุมการใช้งานทั้งแบบ Imperative และ Declarative มีดังนี้

นอกจากนี้ คุณยังตรวจสอบและสำรวจซอร์สโค้ดของการสาธิตได้ใน GitHub

จำลองการแชทของ Agent ด้วยส่วนขยาย Inspector

ติดตั้งส่วนขยาย Model Context Tool Inspector เพื่อทดลองใช้ Agent และดูว่าเครื่องมือ WebMCP ทำงานอย่างไรในการสาธิตแบบสดหรือในแอปพลิเคชันของคุณเอง คุณสามารถป้อนพรอมต์ภาษาธรรมชาติเพื่อดูว่า Agent โต้ตอบกับเครื่องมือ WebMCP ได้อย่างถูกต้องหรือไม่

ส่วนขยายนี้ช่วยให้คุณทำสิ่งต่อไปนี้ได้

  • ดูว่ามีการลงทะเบียนเครื่องมือใดบ้างในหน้าเว็บโดยการตรวจสอบ API navigator.modelContext
  • เรียกเครื่องมือและเรียกใช้ฟังก์ชันด้วยตนเอง
  • ตรวจสอบว่าสคีมา JSON กำหนดไว้อย่างถูกต้องและเบราว์เซอร์สามารถแยกวิเคราะห์ข้อมูลตามที่เครื่องมือคาดไว้ได้
  • ดูเอาต์พุตที่มีโครงสร้างหรือข้อความแสดงข้อผิดพลาดที่เครื่องมือส่งคืนเพื่อให้แน่ใจว่าเขียนไว้อย่างชัดเจนและจัดรูปแบบอย่างถูกต้อง เพื่อให้ Agent เข้าใจได้

พูดคุยกับ Agent โดยใช้ภาษาธรรมชาติเพื่อดูว่า Agent สามารถระบุและเรียกใช้เครื่องมือ WebMCP ที่เหมาะสมได้อย่างถูกต้องหรือไม่ ระบบจะส่งพรอมต์ของคุณไปยังโมเดล gemini-3-flash-preview โดยค่าเริ่มต้น

มีส่วนร่วมและแชร์ความคิดเห็น

WebMCP อยู่ระหว่างการพูดคุยอย่างจริงจังและอาจมีการเปลี่ยนแปลงในอนาคต หากคุณลองใช้ API เหล่านี้แล้วมีความคิดเห็น โปรดแจ้งให้เราทราบ