สร้างเว็บไซต์และแอปพลิเคชันที่ใช้งานได้สำหรับผู้ใช้และเอเจนต์ AI ของผู้ใช้

วิธีการทำงานของ WebMCP

ใน 3 ขั้นตอนง่ายๆ เว็บไซต์ของคุณจะบอกตัวแทนอย่างชัดเจนว่าทำอะไรได้บ้าง
ขั้นตอนที่ 1

เว็บไซต์ของคุณประกาศการดำเนินการที่ตัวแทนทำได้ในฐานะเครื่องมือ WebMCP เครื่องมือแต่ละรายการมีชื่อ คำอธิบาย และ JSON Schema

// Imperative API
document.modelContext.registerTool({
  name: "bookSlot",
  title: "Book a consultation slot",
  description: "Reserve a 30-minute consultation.",
  inputSchema: {
    type: "object",
    properties: {
      date:  { type: "string", format: "date" },
      time:  { type: "string" },
      name:  { type: "string" },
      email: { type: "string", format: "email" }
    },
    required: ["date", "time", "name", "email"]
  },
  annotations: { readOnlyHint: false },
  execute: async (input, client) => {
    return await api.book(input);
  }
});
ขั้นตอนที่ 2

เบราว์เซอร์จะรวบรวมและแสดงเครื่องมือเหล่านี้ให้กับเอเจนต์ที่รับรู้ถึง WebMCP ของผู้ใช้ พร้อมกับ URL, ชื่อ และขอบเขตสิทธิ์ของต้นทางของหน้าเว็บ

เว็บไซต์จะสื่อสารกับเบราว์เซอร์ ซึ่งจะแปลให้ตัวแทน
ขั้นตอนที่ 3

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

// the agent's view
{
  "tool": "bookSlot",
  "arguments": {
    "date": "2026-07-31",
    "time": "14:00",
    "name": "Jerry Jones",
    "email": "jerry.jones@example.com"
  }
}

สร้างเครื่องมือสำหรับเอเจนต์

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

สร้างด้วย AI Agent

ใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยกับเอเจนต์การเขียนโค้ดด้วย AI ที่คุณชื่นชอบ เพื่อให้คุณเข้าถึงแนวทางปฏิบัติแนะนำสำหรับเว็บในเวิร์กโฟลว์ที่ต้องการได้
npx modern-web-guidance@latest install
ใช้คำแนะนำเกี่ยวกับเว็บสมัยใหม่เพื่อสร้างส่วนขยายได้เร็วขึ้นด้วยความช่วยเหลือจาก Agent การเขียนโค้ด

ข้อควรพิจารณาด้านความปลอดภัยสำหรับนักพัฒนาเอเจนต์

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

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

Gemini ทำงานในแอป Google เพื่อช่วยให้คุณจัดการชีวิตประจำวันได้อย่างราบรื่น

ขอแนะนำ AI Agent

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