Cách thêm WebMCP vào ứng dụng Next.js của bạn

Các tác nhân AI (AI agents) thường gặp khó khăn trong việc hiểu các ứng dụng web. Chúng quét DOM và đoán xem các nút bấm có chức năng gì. Điều này dẫn đến các lỗi và hiện tượng "ảo giác" (hallucinations).

WebMCP giải quyết vấn đề này. Đây là một tiêu chuẩn W3C giúp bổ sung API modelContext vào trình duyệt. Thay vì phải đoán, ứng dụng Next.js của bạn sẽ cho tác nhân AI biết chính xác những hàm mà nó có thể thực thi.

WebMCP so với Anthropic MCP

Anthropic MCP chạy trên máy chủ. Nó sử dụng JSON-RPC để kết nối với cơ sở dữ liệu hoặc các API. Nó nằm bên ngoài trình duyệt.

WebMCP chạy ngay trong tab trình duyệt. Nó đăng ký các công cụ (tools) tại chỗ. Nó sử dụng phiên làm việc (session) hiện có của người dùng. Không cần thêm xác thực hay backend nào khác.

Chúng hoạt động cùng nhau. Bạn có thể sử dụng MCP cho các tác vụ backend và WebMCP cho các tương tác frontend.

Hai cách để cung cấp các công cụ:

  • HTML Forms: Thêm các thuộc tính toolname và tooldescription vào các form của bạn. Tác nhân AI sẽ thấy được công cụ và các tham số mà không cần bất kỳ JavaScript nào. Hãy sử dụng cách này cho các chức năng tìm kiếm và bộ lọc.

  • JavaScript: Sử dụng API navigator.modelContext cho các logic động. Cách này tốt nhất cho các luồng xử lý nhiều bước.

Triển khai trong Next.js

  1. Cài đặt polyfill để hỗ trợ trình duyệt: npm install @mcp-b/global @mcp-b/react-webmcp

  2. Tạo một WebMCPProvider để khởi tạo polyfill trong layout của bạn.

  3. Sử dụng hook useWebMCP trong các client components. Hook này sẽ tự động xử lý việc đăng ký và dọn dẹp các công cụ.

Ví dụ thiết lập công cụ:

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(); }, });

Các thực hành tốt nhất (Best Practices)

  • Sử dụng HTTPS. WebMCP yêu cầu kết nối bảo mật trong môi trường production.
  • Giữ số lượng công cụ ở mức thấp. Quá nhiều công cụ sẽ làm phình to ngữ cảnh (context) của AI và làm chậm quá trình suy luận. Hãy giữ dưới 50 công cụ trên mỗi trang.
  • Cung cấp mô tả chi tiết. Các tác nhân AI dựa vào các chuỗi mô tả này để hiểu khi nào cần sử dụng một công cụ.
  • Sử dụng một lớp dịch vụ (service layer). Đừng phụ thuộc vào React state bên trong các trình xử lý công cụ. Hãy sử dụng các hàm thuần túy (plain functions) để tránh dữ liệu cũ (stale data).

Kiểm thử

Mở Chrome phiên bản 146 hoặc mới hơn. Bật flag WebMCP trong chrome://flags. Sử dụng tiện ích mở rộng Model Context Tool Inspector để kiểm tra các công cụ của bạn mà không cần tác nhân AI.

WebMCP là tương lai của việc duyệt web bằng tác nhân (agentic web browsing). Hãy bắt đầu triển khai ngay từ bây giờ để sẵn sàng khi các trình duyệt kích hoạt nó theo mặc định.

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