Як додати WebMCP до вашого додатка Next.js

ШІ-агенти часто мають труднощі з розумінням вебдодатків. Вони збирають дані з DOM і намагаються вгадати призначення кнопок. Це призводить до помилок і галюцинацій.

WebMCP вирішує цю проблему. Це стандарт W3C, який додає API modelContext до браузерів. Замість того, щоб гадати, ваш додаток Next.js чітко повідомляє агенту, які саме функції він може виконувати.

WebMCP проти Anthropic MCP

Anthropic MCP працює на сервері. Він використовує JSON-RPC для підключення до баз даних або API. Він працює поза межами браузера.

WebMCP працює у вкладці браузера. Він реєструє інструменти локально. Він використовує існуючу сесію користувача. Додаткова автентифікація або бекенд не потрібні.

Вони працюють разом. Ви можете використовувати MCP для завдань бекенду та WebMCP для взаємодії на фронтенді.

Два способи відкриття інструментів:

  • HTML-форми: додайте атрибути toolname та tooldescription до ваших форм. Агент бачить інструмент і параметри без використання JavaScript. Використовуйте це для пошуку та фільтрів.

  • JavaScript: використовуйте API navigator.modelContext для динамічної логіки. Це найкращий варіант для багатоетапних процесів.

Реалізація в Next.js

  1. Встановіть поліфіл для підтримки браузерів: npm install @mcp-b/global @mcp-b/react-webmcp

  2. Створіть WebMCPProvider, щоб ініціалізувати поліфіл у вашому layout.

  3. Використовуйте хук 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).
  • Тримайте кількість інструментів невеликою. Занадто велика кількість інструментів перевантажує контекст ШІ та уповільнює процес міркування. Намагайтеся не перевищувати 50 інструментів на сторінку.
  • Надавайте детальні описи. Агенти покладаються на ці рядки, щоб зрозуміти, коли саме потрібно використовувати інструмент.
  • Використовуйте сервісний шар. Не покладайтеся на стан React (React state) всередині обробників інструментів. Використовуйте звичайні функції, щоб уникнути застарілих даних.

Тестування

Відкрийте Chrome версії 146 або новішої. Увімкніть прапорець (flag) WebMCP у chrome://flags. Використовуйте розширення Model Context Tool Inspector, щоб протестувати ваші інструменти без ШІ-агента.

WebMCP — це майбутнє агентного вебсерфінгу. Почніть впроваджувати його вже зараз, щоб бути готовим, коли браузери увімкнуть його за замовчуванням.

Джерело: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp