WebMCP deklaratywne w praktyce: 5 formularzy, które musisz oznaczyć już dziś

Wzór do skopiowania: „Jeśli [formularz wykonuje konkretną akcję], oznacz go jako toolname="[nazwa_akcji]" i tooldescription="[co robi + jakie dane są potrzebne]", bo [agent AI nie musi zgadywać celu formularza]. W praktyce sprawdź [unikalna nazwa, opis, pola name, wymagane pola, brak autosubmit przy ryzykownych akcjach]."

Klient pyta agenta: „Znajdź w tym sklepie granatowe buty barefoot w rozmiarze 28 i zapisz mnie na powiadomienie o promocji". Bez WebMCP agent widzi pola i przyciski. Z WebMCP formularz wyszukiwarki i newslettera mówią mu wprost: „to jest wyszukiwanie produktów" i „to jest zapis do newslettera".

Key takeaways

• WebMCP jest nadal draftem i early preview, ale oznaczanie formularzy jest tanie, odwracalne i zgodne z kierunkiem standardu.
• Deklaratywna wersja nie wymaga JavaScript. Dodajesz atrybuty do istniejącego <form>.
• Najważniejsze atrybuty to toolname i tooldescription; dla pól używaj normalnego name, required, type, min, max, pattern i opcjonalnie toolparamdescription.
• Zacznij od 5 formularzy: wyszukiwarka, newsletter, kontakt, rezerwacja, wycena.
• W Audit AI checkpoint WebMCP declarative sprawdza obecność toolname i tooldescription, więc ten fix łatwo zweryfikować.

Dlaczego to ważne w 2026

Chrome Developers opisuje WebMCP jako early preview, którego celem jest danie stronom uporządkowanego sposobu wystawiania narzędzi dla agentów. Oficjalny draft WebMCP w Web Machine Learning Community Group mówi o narzędziach dla agentów i zawiera sekcję o declarative WebMCP. To jeszcze nie jest stabilny standard dostępny wszędzie, ale kierunek jest jasny: agent ma dostać opis akcji, a nie zgadywać po DOM-ie i zrzutach ekranu.

Chrome opisuje dwa podejścia. Deklaratywne API jest dla standardowych akcji zapisanych w formularzach HTML. Imperatywne API jest dla dynamicznych akcji przez JavaScript, na przykład koszyka zależnego od stanu aplikacji. Ten artykuł dotyczy pierwszej ścieżki, bo jest najprostsza dla właściciela małej firmy.

Nie musisz dziś przepisywać sklepu na nowy framework. Jeśli masz dostęp do szablonu formularza w WordPressie, Shoperze, Shopify, PrestaShop albo zwykłym HTML, często wystarczy dopisać 2-4 atrybuty. To nie da gwarancji, że każdy agent od razu wykona akcję. Da za to lepszy opis formularzy, który można audytować już teraz.

Czym WebMCP różni się od zwykłego formularza

Zwykły formularz mówi przeglądarce: „wyślij te pola pod ten adres".

Formularz z WebMCP mówi dodatkowo agentowi: „to narzędzie służy do wyszukiwania produktów", „to pole jest adresem e-mail", „to pole opisuje termin rezerwacji", „ta akcja wymaga wiadomości od klienta".

Różnica to kilka dodatkowych atrybutów. Dla człowieka strona wygląda tak samo. Dla agenta formularz ma nazwę, opis i sens.

Krok po kroku: 5 formularzy do oznaczenia

Pięć formularzy poniżej to lista startowa. Większość małych sklepów i stron usługowych ma je wszystkie. Każdy z nich ma własną logikę zgód i ryzyka — kolejność w sekcji odpowiada kolejności wdrożenia.

1. 01
   Wyszukiwarka produktów
   Słabo

   Formularz ma tylko `q`, a przycisk „Szukaj” jest jasny wyłącznie dla człowieka.

   Lepiej

   Formularz nazywa się `search_products`, opis mówi, że można szukać po nazwie, kategorii albo SKU, a pole ma `toolparamdescription`.

   form · search_productsKopiuj

   <form
   action="/search"
   method="get"
   toolname="search_products"
   tooldescription="Search products in the catalog by name, category, SKU or customer query.">
   <label for="search-query">Szukaj w sklepie</label>
   <input
     id="search-query"
     name="q"
     type="search"
     required
     autocomplete="off"
     toolparamdescription="Product name, category, SKU or natural language search phrase.">
   <button type="submit">Szukaj</button>
   </form>

   Dla sklepu z obuwiem agent może podać „buty barefoot dziecko rozmiar 28". Dla sklepu z kosmetykami: „krem SPF 50 do skóry wrażliwej". Nie musi zgadywać, że q oznacza zapytanie produktowe.

   Dla usług lokalnych wyszukiwarka też ma sens. Klinika stomatologiczna może mieć search_services, a salon beauty search_treatments.

2. 02
   Newsletter i powiadomienia
   Słabo

   Formularz newslettera ma tylko `email`, a opis na stronie brzmi „Bądź na bieżąco”.

   Lepiej

   Agent widzi, że formularz zapisuje użytkownika do newslettera albo powiadomień o promocjach.

   form · subscribe_newsletterKopiuj

   <form
   action="/newsletter"
   method="post"
   toolname="subscribe_newsletter"
   tooldescription="Subscribe the user to email updates about new products, promotions and guides. Requires email consent.">
   <label for="newsletter-email">Adres e-mail</label>
   <input
     id="newsletter-email"
     name="email"
     type="email"
     required
     autocomplete="email"
     toolparamdescription="Customer email address for newsletter subscription.">
   <label>
     <input name="marketing_consent" type="checkbox" required>
     Zgadzam się na otrzymywanie wiadomości marketingowych.
   </label>
   <button type="submit">Zapisz mnie</button>
   </form>

   Nie dodawaj tutaj toolautosubmit.

   Newsletter wymaga zgody. Agent może przygotować formularz, ale użytkownik powinien widzieć zgodę i świadomie ją potwierdzić.

   Dla sklepu z suplementami opis powinien być ostrożniejszy: „Subscribe to product availability and educational updates", nie „Subscribe to medical advice". Mała zmiana, duże znaczenie.

3. 03
   Formularz kontaktowy
   Słabo

   Kontakt jest opisany jako „Napisz do nas”, a pola mają nazwy `name`, `email`, `msg`.

   Lepiej

   Formularz mówi, że wysyła wiadomość do obsługi klienta i wymienia wymagane dane.

   form · send_contact_messageKopiuj

   <form
   action="/kontakt"
   method="post"
   toolname="send_contact_message"
   tooldescription="Send a customer support message. Required fields: customer name, email address and message.">
   <label for="contact-name">Imię</label>
   <input
     id="contact-name"
     name="customer_name"
     type="text"
     required
     toolparamdescription="Customer name used for the reply.">
   
   <label for="contact-email">E-mail</label>
   <input
     id="contact-email"
     name="email"
     type="email"
     required
     autocomplete="email"
     toolparamdescription="Email address where the customer should receive the reply.">
   
   <label for="contact-message">Wiadomość</label>
   <textarea
   id="contact-message"
   name="message"
   required
   minlength="20"
   toolparamdescription="Customer message with question, order number or issue description."
   ></textarea>
   
   <button type="submit">Wyślij wiadomość</button>
   </form>

   Dla sklepu z meblami agent może wpisać pytanie o czas dostawy narożnika. Dla biura rachunkowego może przygotować zapytanie o obsługę jednoosobowej działalności. Dobre tooldescription nie musi być długie. Ma powiedzieć, do czego formularz służy.

4. 04
   Rezerwacja terminu
   Słabo

   Formularz rezerwacji ma pola `date`, `time`, `service`, ale agent nie wie, czy to wstępna prośba, czy wiążąca rezerwacja.

   Lepiej

   Opis mówi, że formularz służy do prośby o termin, a pola mają jasne ograniczenia.

   form · request_appointmentKopiuj

   <form
   action="/rezerwacja"
   method="post"
   toolname="request_appointment"
   tooldescription="Request an appointment for a selected service, preferred date and preferred time. Staff confirms the appointment by email or phone.">
   <label for="service">Usługa</label>
   <select
     id="service"
     name="service"
     required
     toolparamdescription="Service the customer wants to book.">
     <option value="consultation">Konsultacja</option>
     <option value="cleaning">Oczyszczanie twarzy</option>
     <option value="physiotherapy">Fizjoterapia 60 minut</option>
   </select>
   
   <label for="appointment-date">Preferowana data</label>
   <input
     id="appointment-date"
     name="preferred_date"
     type="date"
     required
     toolparamdescription="Preferred appointment date in YYYY-MM-DD format.">
   
   <label for="appointment-time">Preferowana godzina</label>
   <input
     id="appointment-time"
     name="preferred_time"
     type="time"
     required
     toolparamdescription="Preferred appointment time.">
   
   <label for="appointment-email">E-mail</label>
   <input
     id="appointment-email"
     name="email"
     type="email"
     required
     toolparamdescription="Email address for appointment confirmation.">
   
   <button type="submit">Poproś o termin</button>
   </form>

   Jeśli rezerwacja jest natychmiastowa i płatna, nie używaj autosubmit. Jeśli to tylko zapytanie o wolny termin, nadal lepiej zostawić użytkownikowi potwierdzenie. WebMCP nie zwalnia z logiki zgód, płatności i RODO.

5. 05
   Formularz wyceny
   Słabo

   Formularz „Poproś o wycenę” ma jedno pole tekstowe i żadnego kontekstu.

   Lepiej

   Agent wie, jakie dane są potrzebne do wstępnej wyceny, a formularz używa pól z nazwami.

   form · request_quoteKopiuj

   <form
   action="/wycena"
   method="post"
   toolname="request_quote"
   tooldescription="Request a quote for a product, service or project. Required fields: customer email, service type, budget range and project description.">
   <label for="quote-email">E-mail</label>
   <input
     id="quote-email"
     name="email"
     type="email"
     required
     toolparamdescription="Customer email address for the quote response.">
   
   <label for="quote-type">Typ wyceny</label>
   <select
   id="quote-type"
   name="quote_type"
   required
   toolparamdescription="Type of quote request."
   >
   <option value="product">Produkt na zamówienie</option>
   <option value="service">Usługa</option>
   <option value="implementation">Wdrożenie lub projekt</option>
   </select>
   
   <label for="budget">Budżet</label>
   <select
   id="budget"
   name="budget_range"
   toolparamdescription="Approximate budget range in PLN."
   >
   <option value="under_1000">Do 1000 zł</option>
   <option value="1000_5000">1000-5000 zł</option>
   <option value="over_5000">Powyżej 5000 zł</option>
   </select>
   
   <label for="quote-description">Opis</label>
   <textarea
   id="quote-description"
   name="project_description"
   required
   minlength="30"
   toolparamdescription="Short description of the product, service, quantity, deadline or business need."
   ></textarea>
   
   <button type="submit">Poproś o wycenę</button>
   </form>

   Dla firmy remontowej to może być wycena malowania 70 m². Dla sklepu z meblami: zapytanie o stół na wymiar. Dla Audit AI: wycena wdrożenia poprawek po audycie.

Tabela: które formularze oznaczyć najpierw

Jeśli masz tylko 20 minut, zacznij od wyszukiwarki i kontaktu. Jeśli prowadzisz salon, gabinet albo serwis, rezerwacja będzie ważniejsza niż newsletter. Jeśli sprzedajesz produkty na zamówienie, formularz wyceny ma większy sens niż ogólny kontakt.

Gotowe zasady nazewnictwa

toolname powinien być stabilny, krótki i pisany bez spacji. Najbezpieczniej używać snake_case:

search_products
subscribe_newsletter
send_contact_message
request_appointment
request_quote

Nie używaj nazw typu:

form1
kontakt
nowy-formularz-2026
superLeadMagnet

tooldescription powinien mieć jedno konkretne zdanie. Dobre zdanie odpowiada na 3 pytania: co robi formularz, dla kogo lub czego, jakie dane są wymagane.

Checklista do wdrożenia

17 punktów do interaktywnego odhaczenia. Klikaj — to lista do pracy, nie do czytania.

Mini-plan na 7 dni

Tydzień, jedna kartka tekstu, pół godziny dziennie. Każdy krok kończy się efektem widocznym tego samego dnia.

1. 1Dzień

   Znajdź wszystkie formularze i wpisz je do tabeli: URL, cel, pola, właściciel biznesowy.

2. 2Dzień

   Oznacz wyszukiwarkę produktów lub usług.

3. 3Dzień

   Oznacz formularz kontaktowy i popraw nazwy pól typu msg, tel1, form-email.

4. 4Dzień

   Oznacz newsletter, ale bez toolautosubmit, i sprawdź zgodę marketingową.

5. 5Dzień

   Oznacz rezerwację albo formularz wyceny, zależnie od tego, który daje więcej zapytań.

6. 6Dzień

   Sprawdź formularze na telefonie i w kodzie HTML strony po wdrożeniu.

7. 7Dzień

   Uruchom audyt na auditai.cc, sprawdź checkpoint WebMCP declarative i zapisz wynik przed/po.

Najczęstsze błędy

<div toolname="search_products" tooldescription="Search products">
<form action="/search">
  <input name="q">
</form>
</div>

<form
action="/search"
toolname="search_products"
tooldescription="Search products in the catalog by name, category or SKU.">
<input name="q">
</form>

<input id="email" type="email" required>

<input id="email" name="email" type="email" required>

<form toolname="contact" tooldescription="Contact us">

<form
toolname="send_contact_message"
tooldescription="Send a customer support message. Required fields: customer name, email address and message.">

<form toolname="subscribe_newsletter" tooldescription="Subscribe to newsletter" toolautosubmit>

Jak mierzyć efekty

Pierwszy sygnał: Audit AI wykrywa WebMCP declarative i pokazuje nazwy narzędzi.

Drugi sygnał: po zmianie HTML nadal działa dla człowieka, czyli formularz wysyła dane tak jak wcześniej.

Trzeci sygnał: opisy formularzy są zrozumiałe bez patrzenia na layout. Jeśli pokażesz komuś sam tag <form>, powinien wiedzieć, do czego służy.

Czwarty sygnał: w audycie ręcznym nie ma formularzy z toolname bez tooldescription, pól bez name i duplikatów nazw.

Piąty sygnał: gdy testujesz w środowisku wspierającym WebMCP, narzędzia pojawiają się jako osobne akcje, a nie jako nieopisane pola.

Dla kogo ta porada nie jest dobra

Nie zaczynaj od WebMCP, jeśli formularze na stronie nie działają dla zwykłych użytkowników. Najpierw napraw wysyłkę, walidację, zgody i błędy po stronie serwera.

Nie wdrażaj toolautosubmit, jeśli nie rozumiesz skutków prawnych i UX. Przy newsletterze, rezerwacji, płatności, zapisie na konsultację i danych medycznych użytkownik powinien mieć jasne potwierdzenie.

Nie traktuj WebMCP jako zamiennika dostępności. Label, aria-label, poprawne typy pól i czytelne błędy formularza nadal są potrzebne.

Nie obiecuj zarządowi „natychmiastowej sprzedaży z agentów AI". To etap przygotowania infrastruktury. Efekt biznesowy będzie zależał od adopcji przeglądarek, agentów i jakości całej strony.

FAQ

Podsumowanie

WebMCP deklaratywne to najprostszy pierwszy krok do strony gotowej na agentów. Nie wymaga przepisywania sklepu, serwera MCP ani JavaScriptu. Wystarczy zacząć od formularzy, które już zarabiają albo zbierają leady.

Oznacz wyszukiwarkę, kontakt, newsletter, rezerwację i wycenę. Potem sprawdź wynik na auditai.cc, zanim przejdziesz do trudniejszych integracji.

Źródła

Cytowane dane pochodzą z publicznych specyfikacji WebMCP, dokumentacji Chrome Developers oraz wewnętrznych referencji Audit AI: