วิธีการเพิ่ม WebMCP ลงในแอป Next.js ของคุณ

AI agents มักจะมีปัญหาในการทำความเข้าใจเว็บแอป พวกเขาใช้วิธีการ scrape DOM และคาดเดาว่าปุ่มต่างๆ ทำหน้าที่อะไร ซึ่งนำไปสู่ข้อผิดพลาดและการเกิด hallucination

WebMCP ช่วยแก้ปัญหานี้ โดยเป็นมาตรฐาน W3C ที่เพิ่ม modelContext API เข้าไปในเบราว์เซอร์ แทนที่จะเป็นการคาดเดา แอป Next.js ของคุณจะบอกเอเจนต์ (agent) ได้อย่างชัดเจนว่ามีฟังก์ชันใดบ้างที่สามารถเรียกใช้งานได้

WebMCP vs Anthropic MCP

Anthropic MCP ทำงานบนเซิร์ฟเวอร์ โดยใช้ JSON-RPC เพื่อเชื่อมต่อกับฐานข้อมูลหรือ API และทำงานอยู่นอกเบราว์เซอร์

WebMCP ทำงานในแท็บเบราว์เซอร์ โดยจะลงทะเบียนเครื่องมือ (tools) ไว้ในเครื่อง (locally) และใช้เซสชัน (session) ที่มีอยู่ของผู้ใช้ จึงไม่จำเป็นต้องมีการทำ authentication หรือมี backend เพิ่มเติม

ทั้งสองอย่างสามารถทำงานร่วมกันได้ คุณสามารถใช้ MCP สำหรับงานฝั่ง backend และใช้ WebMCP สำหรับการโต้ตอบฝั่ง frontend

วิธีการเปิดใช้งานเครื่องมือ (tools) สองรูปแบบ:

  • HTML Forms: เพิ่ม attribute toolname และ tooldescription ลงในฟอร์มของคุณ เอเจนต์จะมองเห็นเครื่องมือและพารามิเตอร์ได้โดยไม่ต้องใช้ JavaScript เลย เหมาะสำหรับใช้ในการค้นหาและตัวกรอง (filters)

  • JavaScript: ใช้ navigator.modelContext API สำหรับตรรกะแบบไดนามิก (dynamic logic) ซึ่งเหมาะที่สุดสำหรับขั้นตอนการทำงานแบบหลายขั้นตอน (multi-step flows)

การติดตั้งใน Next.js

  1. ติดตั้ง polyfill เพื่อรองรับการทำงานบนเบราว์เซอร์: npm install @mcp-b/global @mcp-b/react-webmcp

  2. สร้าง WebMCPProvider เพื่อเริ่มต้นการทำงานของ polyfill ใน layout ของคุณ

  3. ใช้ hook useWebMCP ใน client components ของคุณ โดย hook นี้จะจัดการการลงทะเบียนเครื่องมือและการล้างข้อมูล (cleanup) ให้โดยอัตโนมัติ

ตัวอย่างการตั้งค่าเครื่องมือ:

useWebMCP({
  name: 'searchProducts',
  description: 'Search the product catalog.',
  inputSchema: z.object({
    query: z.string(),
    category: z.string().optional(),
  }),
  execute: async ({ query, category }) => {
    const res = await fetch(`/api/products?q=${query}`);
    return res.json();
  },
});

ข้อแนะนำเพิ่มเติม (Best Practices)

  • ใช้ HTTPS: WebMCP จำเป็นต้องมีการเชื่อมต่อที่ปลอดภัยเมื่อใช้งานจริง (production)
  • ควบคุมจำนวนเครื่องมือให้ไม่มากเกินไป: การมีเครื่องมือมากเกินไปจะทำให้ AI context บวมและทำให้การประมวลผล (reasoning) ช้าลง ควรใช้เครื่องมือไม่เกิน 50 รายการต่อหนึ่งหน้า
  • ให้คำอธิบายที่ชัดเจน: เอเจนต์จะอาศัยข้อความเหล่านี้ในการทำความเข้าใจว่าควรใช้เครื่องมือเมื่อใด
  • ใช้ service layer: อย่าพึ่งพา React state ภายใน tool handlers ให้ใช้ฟังก์ชันธรรมดา (plain functions) เพื่อหลีกเลี่ยงปัญหาข้อมูลไม่อัปเดต (stale data)

การทดสอบ

เปิด Chrome เวอร์ชัน 146 หรือใหม่กว่า จากนั้นเปิดใช้งาน WebMCP flag ใน chrome://flags และใช้ส่วนขยาย Model Context Tool Inspector เพื่อทดสอบเครื่องมือของคุณโดยไม่ต้องใช้ AI agent

WebMCP คืออนาคตของการท่องเว็บแบบ agentic เริ่มนำไปใช้งานตั้งแต่วันนี้ เพื่อให้คุณพร้อมเมื่อเบราว์เซอร์เปิดใช้งานฟีเจอร์นี้เป็นค่าเริ่มต้น

Source: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp