WebMCP pozwala aplikacjom React na udostępnianie ustrukturyzowanych API narzędzi bezpośrednio agentom AI, zastępując zawodne scrapowanie interfejsu użytkownika (UI) niezawodnymi wywołaniami niezależnymi od UI. Funkcja ta jest dostępna w ramach origin-trial dla Chrome 149 i nowszych wersji, a można ją włączyć za pomocą chrome://flags/#enable-webmcp-testing.

Problem z uczeniem agentów klikania

Większość obecnych prób umożliwienia agentom AI interakcji ze stroną internetową opiera się na wskazówkach wizualnych. Agent analizuje DOM, zgaduje, który element jest przyciskiem, symuluje kliknięcia, przewija stronę i wypełnia pola formularzy. W momencie, gdy przycisk się przesunie, etykieta zmieni się lub układ zostanie skorygowany, skrypt przestaje działać. Podejście to jest powolne, ponieważ wymaga czekania, aż przeglądarka wyrenderuje każdy krok, a rutynowe zmiany w projekcie mogą zepsuć cały proces automatyzacji.

WebMCP zmienia model działania

WebMCP to nowy standard internetowy wprowadzony przez Google Chrome. Zamiast udostępniać warstwę wizualną do eksploracji przez agenta, strona ogłasza zestaw narzędzi — nazwane, typowane operacje, które strona może wykonać. Agent AI najpierw pyta: „jakie narzędzia są dostępne?”, na co strona odpowiada listą, np. „searchProducts” lub „checkout”. Następnie agent wywołuje narzędzie, wysyłając ładunek JSON zgodny z zadeklarowanym schematem wejściowym narzędzia, np. searchProducts(query: "jacket"). Przeglądarka przekierowuje żądanie bezpośrednio do kodu JavaScript strony, który wykonuje logikę bez udziału interfejsu użytkownika.

Wynikiem jest interakcja, która jest natychmiastowa, działa niezależnie od zmian w CSS i pozostaje funkcjonalna tak długo, jak długo definicje narzędzi pozostają stabilne.

Korzyści istotne dla programistów

  • Szybkość – Komunikacja odbywa się wewnątrz systemu przesyłania wiadomości przeglądarki, co eliminuje konieczność cyklu renderowania kliknięć i czekania na aktualizację strony.
  • Niezawodność – Narzędzia wywołują te same funkcje, których strona już używa dla własnego interfejsu, więc zmiana projektu nie psuje API.
  • Kontrola – Programiści decydują, które operacje są udostępniane, jakie parametry przyjmują i co agent może zobaczyć w odpowiedzi.
  • Niezależność od UI – Stylizacja, układ lub refaktoryzacja komponentów nie wpływają już na zdolność agenta do wywoływania funkcji.

WebMCP nie zastępuje istniejącego protokołu MCP (Message-Channel-Protocol) używanego po stronie serwera. MCP nadal zajmuje się pobieraniem dużych ilości danych i orkiestracją backendu, podczas gdy WebMCP obsługuje interakcje na żywo wewnątrz karty.

Jak programiści React mogą zacząć

Kod React może rejestrować narzędzia za pomocą imperatywnego API JavaScript lub deklaratywnego API opartego na formularzach HTML. Częstym wzorcem jest opakowanie rejestracji w niestandardowy hook:

  1. Wywołaj funkcję rejestracji z nazwą narzędzia i krótkim opisem.
  2. Dostarcz schemat wejściowy (na przykład schemat JSON opisujący wymagane pola).
  3. Dostarcz funkcję zwrotną execute, która uruchamia istniejącą logikę biznesową — często tę samą funkcję, którą wywołałoby kliknięcie przycisku.

Gdy hook zostanie uruchomiony, przeglądarka dodaje narzędzie do manifestu WebMCP strony. Agent AI, który wykryje manifest, może wtedy wywołać narzędzie bez dotykania DOM.

Ponieważ rejestracja odbywa się w momencie montowania komponentu, narzędzia mogą być przypisane do konkretnych tras lub flag funkcji (feature flags), co daje zespołom precyzyjną kontrolę nad tym, co AI może robić w środowisku produkcyjnym w porównaniu do środowiska testowego.

Uwagi i na co uważać

WebMCP jest wciąż w fazie origin trial. Działa tylko w Chrome 149+ i musi zostać włączone ręcznie za pomocą flagi.

Co dalej

Google udostępnił testy programistom, którzy chcą eksperymentować z natywnymi dla AI doświadczeniami internetowymi. Następne kroki dla zainteresowanych to:

  • Włącz flagę w Chrome i przeładuj docelową stronę.
  • Dodaj prostą rejestrację narzędzia w komponencie React i obserwuj, jak manifest pojawia się w narzędziach deweloperskich (devtools) przeglądarki.
  • Przetestuj klienta AI (na przykład lokalny skrypt przestrzegający protokołu WebMCP), aby wywołać narzędzie i zweryfikować odpowiedź.
  • Śledź stronę statusu testów, aby otrzymywać aktualizacje dotyczące stabilnego wydania.

Podsumowanie: WebMCP daje programistom React sposób na sprawienie, by ich aplikacje mogły być bezpośrednio wywoływane przez agentów AI, przekształcając elementy UI w stabilne, typowane usługi. Ta zmiana eliminuje koszmar utrzymania związanego ze scrapowaniem ekranu i otwiera drogę do prawdziwie natywnych dla AI aplikacji internetowych — pod warunkiem, że zespoły czują się komfortowo pracując w eksperymentalnym środowisku Chrome.