Как добавить 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 или новее. Включите флаг WebMCP в chrome://flags. Используйте расширение Model Context Tool Inspector, чтобы протестировать инструменты без ИИ-агента.

WebMCP — это будущее агентного веб-серфинга. Начните внедрять его сейчас, чтобы быть готовым, когда браузеры включат его по умолчанию.

Источник: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp