چگونه WebMCP را به اپلیکیشن Next.js خود اضافه کنیم

عوامل هوش مصنوعی اغلب در درک اپلیکیشن‌های وب دچار مشکل می‌شوند. آن‌ها DOM را اسکرپ می‌کنند و حدس می‌زنند که دکمه‌ها چه کاری انجام می‌دهند. این امر منجر به خطا و توهم (hallucinations) می‌شود.

WebMCP این مشکل را حل می‌کند. این یک استاندارد W3C است که یک modelContext API به مرورگرها اضافه می‌کند. به جای حدس زدن، اپلیکیشن Next.js شما دقیقاً به عامل می‌گوید که چه توابعی را می‌تواند اجرا کند.

WebMCP در مقابل Anthropic MCP

Anthropic MCP روی سرور اجرا می‌شود. این پروتکل از JSON-RPC برای اتصال به پایگاه‌های داده یا APIها استفاده می‌کند و خارج از مرورگر فعالیت می‌کند.

WebMCP در تب مرورگر اجرا می‌شود. ابزارها را به‌صورت محلی ثبت می‌کند و از نشست (session) موجود کاربر استفاده می‌کند. به هیچ احراز هویت یا بک‌اند اضافی نیاز نیست.

آن‌ها با هم کار می‌کنند. شما می‌توانید از MCP برای وظایف بک‌اند و از WebMCP برای تعاملات فرانت‌اند استفاده کنید.

دو روش برای ارائه ابزارها:

  • HTML Forms: ویژگی‌های toolname و tooldescription را به فرم‌های خود اضافه کنید. عامل بدون نیاز به هیچ جاوااسکریپتی، ابزار و پارامترها را مشاهده می‌کند. از این روش برای جستجو و فیلترها استفاده کنید.

  • JavaScript: از navigator.modelContext API برای منطق‌های پویا استفاده کنید. این روش برای جریان‌های چند مرحله‌ای بهترین گزینه است.

پیاده‌سازی در Next.js

۱. پلیفیل (polyfill) را برای پشتیبانی از مرورگر نصب کنید: npm install @mcp-b/global @mcp-b/react-webmcp

۲. یک WebMCPProvider ایجاد کنید تا پلیفیل را در layout خود مقداردهی اولیه کنید.

۳. از هوک useWebMCP در کامپوننت‌های کلاینت خود استفاده کنید. این هوک ثبت و پاک‌سازی ابزارها را به‌طور خودکار مدیریت می‌کند.

نمونه تنظیم ابزار:

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

بهترین روش‌ها

  • از HTTPS استفاده کنید. WebMCP در محیط عملیاتی (production) به یک اتصال امن نیاز دارد.
  • تعداد ابزارها را کم نگه دارید. ابزارهای بسیار زیاد باعث حجیم شدن کانتکست هوش مصنوعی و کند شدن استدلال می‌شود. تعداد ابزارها در هر صفحه را زیر ۵۰ عدد نگه دارید.
  • توضیحات غنی ارائه دهید. عوامل برای درک زمان استفاده از یک ابزار، به این رشته‌ها متکی هستند.
  • از یک لایه سرویس (service layer) استفاده کنید. در داخل هندلرهای ابزار به state ری‌اکت تکیه نکنید. برای جلوگیری از داده‌های قدیمی (stale data)، از توابع ساده استفاده کنید.

تست کردن

کروم نسخه ۱۴۶ یا جدیدتر را باز کنید. پرچم (flag) WebMCP را در chrome://flags فعال کنید. از افزونه Model Context Tool Inspector برای تست ابزارهای خود بدون نیاز به یک عامل هوش مصنوعی استفاده کنید.

WebMCP آینده‌ی مرورگریِ مبتنی بر عامل (agentic web browsing) است. از همین حالا پیاده‌سازی آن را شروع کنید تا وقتی مرورگرها آن را به‌صورت پیش‌فرض فعال کردند، آماده باشید.

منبع: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp