Jak dodać WebMCP do aplikacji Next.js

Agenci AI często mają trudności ze zrozumieniem aplikacji webowych. Przeszukują DOM i próbują zgadnąć, co robią przyciski. Prowadzi to do błędów i halucynacji.

WebMCP rozwiązuje ten problem. Jest to standard W3C, który dodaje API modelContext do przeglądarek. Zamiast zgadywać, Twoja aplikacja Next.js mówi agentowi dokładnie, jakie funkcje może uruchomić.

WebMCP vs Anthropic MCP

Anthropic MCP działa na serwerze. Wykorzystuje JSON-RPC do łączenia się z bazami danych lub API. Działa poza przeglądarką.

WebMCP działa w karcie przeglądarki. Rejestruje narzędzia lokalnie. Korzysta z istniejącej sesji użytkownika. Nie wymaga dodatkowej autoryzacji ani backendu.

Działają razem. Możesz używać MCP do zadań backendowych, a WebMCP do interakcji na frontendzie.

Dwa sposoby udostępniania narzędzi:

  • HTML Forms: Dodaj atrybuty toolname i tooldescription do swoich formularzy. Agent widzi narzędzie i parametry bez użycia JavaScriptu. Używaj tego do wyszukiwania i filtrów.

  • JavaScript: Użyj API navigator.modelContext do logiki dynamicznej. Jest to najlepsze rozwiązanie dla wieloetapowych procesów.

Implementacja w Next.js

  1. Zainstaluj polyfill dla wsparcia przeglądarek: npm install @mcp-b/global @mcp-b/react-webmcp

  2. Utwórz WebMCPProvider, aby zainicjować polyfill w swoim layoucie.

  3. Użyj hooka useWebMCP w swoich komponentach klienckich. Hook ten automatycznie obsługuje rejestrację i czyszczenie narzędzi.

Przykład konfiguracji narzędzia:

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

Dobre praktyki

  • Używaj HTTPS. WebMCP wymaga bezpiecznego połączenia w środowisku produkcyjnym.
  • Utrzymuj niską liczbę narzędzi. Zbyt duża liczba narzędzi obciąża kontekst AI i spowalnia proces wnioskowania. Staraj się nie przekraczać 50 narzędzi na stronę.
  • Zapewnij bogate opisy. Agenci polegają na tych ciągach znaków, aby zrozumieć, kiedy użyć danego narzędzia.
  • Używaj warstwy usług (service layer). Nie polegaj na stanie Reacta wewnątrz handlerów narzędzi. Używaj zwykłych funkcji, aby uniknąć nieaktualnych danych.

Testowanie

Otwórz Chrome w wersji 146 lub nowszej. Włącz flagę WebMCP w chrome://flags. Użyj rozszerzenia Model Context Tool Inspector, aby przetestować narzędzia bez agenta AI.

WebMCP to przyszłość agentowego przeglądania stron internetowych. Zacznij wdrażać je już teraz, aby być gotowym, gdy przeglądarki włączą je domyślnie.

Źródło: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp