Tworzenie witryn przyjaznych dla agentów

Kasper Kulikowski

Omkar More

W Twojej witrynie pojawił się nowy typ odwiedzającego. Niektórzy użytkownicy rezygnują z ręcznej nawigacji i powierzają realizację celów agentom AI. Te autonomiczne systemy mogą interpretować dane wejściowe, planować i wykonywać działania w imieniu użytkownika.

Wiele naszych witryn jest jednak zaprojektowanych tak, aby były atrakcyjne dla użytkowników, z złożonymi stanami najechania kursorem, zmieniającymi się układami i płynnymi animacjami. W przypadku pracowników obsługi klienta ta funkcja nie działa.

Jak agenci widzą Twoją witrynę

Pracownicy nie sprawdzają Twojej witryny na monitorze. Działają one na podstawie reprezentacji Twojej witryny w formacie czytelnym dla maszyn. Jakość tej reprezentacji określa ich skuteczność.

Agenci mogą wyświetlać Twoją witrynę na 3 główne sposoby: za pomocą zrzutów ekranu, surowego kodu HTML i drzewa dostępności.

Zrzuty ekranu

Agent robi zrzut renderowanej strony i używa modelu wizyjnego do identyfikowania elementów. Na podstawie zrzutu ekranu agent może rozpoznać, że pasek wyszukiwania w prawym górnym rogu to wyszukiwanie globalne, a pole na środku to prawdopodobnie pole formularza. Wskazówki wizualne mogą być przydatne, ponieważ agenty mogą używać koloru, rozmiaru i bliskości, aby określić ważność. Duży przycisk Usuń prawdopodobnie będzie interpretowany z większą ostrożnością niż mały link „Pomoc”. Analizowanie zrzutów ekranu może być jednak powolne i kosztowne (pod względem zużytych tokenów), dlatego lepiej używać go jako kopii zapasowej, gdy struktura jest niejasna.

HTML

Agent analizuje DOM i odczytuje kod HTML. Rozumie, jak elementy są zagnieżdżone, logiczną hierarchię drzewa DOM, atrybuty takie jak identyfikatory i klasy, które definiują strukturę, oraz ciągi danych, które stanowią informacyjny szkielet witryny. Pomaga to agentowi zrozumieć relacje między elementami.

Jeśli przycisk Kup teraz znajduje się w kontenerze produktu, agent zakłada, że należy on do tego konkretnego produktu.

Drzewo ułatwień dostępu

Drzewo dostępności to natywny interfejs API przeglądarki, który wyodrębnia z DOM najważniejsze informacje: role, nazwy i stany elementów interaktywnych. Jest to podsumowanie semantyczne strony, które jest używane przez technologie wspomagające osoby z niepełnosprawnością. W przypadku agenta AI działa ona jako mapa o wysokiej wierności, która ignoruje wizualny „szum” CSS, aby skupić się na czystej użyteczności. Interpretując to drzewo, agent może poznać funkcjonalne przeznaczenie każdego przełącznika, suwaka i pola do wprowadzania danych.

Narzędzia WebMCP

WebMCP to proponowany standard internetowy, który ma wypełnić lukę między witrynami a agentami, aby udostępniać agentom wyraźne cele i zadania. W tym celu zdefiniuj narzędzia, czyli adnotacje w JavaScript lub HTML. Agenci interpretują te narzędzia szybciej i dokładniej niż w przypadku standardowego uruchamiania.

Narzędzia WebMCP mogą być używane do obsługi klienta, e-commerce, odkrywania i innych celów. Niektóre działania, np. dokonanie zakupu, są poufne. Możesz dodać polecenie, które spowoduje wyświetlenie okna potwierdzenia, w którym użytkownik będzie mógł potwierdzić operację.

Poznaj przypadki użycia WebMCP i dowiedz się, jak tworzyć skuteczne narzędzia.

Połączone metody

Ograniczanie się do pojedynczych danych wejściowych powoduje powstanie luki semantycznej. Na przykład w DOM agent może widzieć element <div>, nie wiedząc, że został on skonfigurowany jako funkcjonalny przycisk za pomocą CSS i JavaScriptu. Na podstawie zrzutów ekranu agent może określić, gdzie na ekranie znajduje się dany przycisk, ale nadal nie wie, do czego ma on prowadzić ani jakie działanie ma wywoływać.

Nowoczesne agenty łączą więc wiele modalności. Korzystają z DOM i drzewa dostępności, aby uzyskać przejrzystą, uporządkowaną listę elementów interaktywnych, a następnie porównują ją z renderowaniem wizualnym, aby zrozumieć układ, grupowanie i wskazówki wizualne.

Naszym zadaniem jest dostarczanie czystych sygnałów we wszystkich tych kanałach.

Tworzenie witryn przyjaznych dla agentów

Aby ułatwić pracownikom obsługi klienta poruszanie się po Twojej witrynie, wszystkie działania, które musi wykonać człowiek lub pracownik obsługi klienta, powinny być wyraźnie widoczne w interfejsie witryny. Oto kilka sprawdzonych metod:

• Unikaj elementów widmowych. Unikaj przezroczystych nakładek, które zasłaniają interaktywne elementy. Analiza wizualna przeprowadzana przez agenta może odrzucać węzły, które są zakryte, nawet jeśli wydają się przezroczyste.
• Używaj semantycznych znaczników HTML. Projektuj elementy interaktywne za pomocą semantycznego kodu HTML. Używaj na przykład tagów <button> i <a> zamiast zmodyfikowanych elementów <div> i <span>. Agenci rozpoznają je jako elementy interaktywne.
  • Jeśli nie możesz użyć semantycznego kodu HTML, zawsze podawaj odpowiednie atrybuty role i tabindex. Na przykład: <div role="button">.
  • Dodaj atrybut for do tagów <label>, aby połączyć je z danymi wejściowymi. Pomaga to agentowi AI zrozumieć przeznaczenie pola, wskazując tekst etykiety bezpośrednio dołączony do ciągu działania.
• Używaj arkuszy CSS do tworzenia wskazówek wizualnych. Ustaw wartość cursor: pointer w arkuszu CSS, co jest silnym sygnałem wskazującym możliwość podjęcia działania.
• Spełnienie minimalnego rozmiaru na potrzeby analizy wizualnej Upewnij się, że wszystkie interaktywne elementy wymagane do wykonania działania są widoczne i mają więcej niż 8 pikseli kwadratowych, aby uniknąć odfiltrowania w analizie wizualnej modelu.
• Zapewnij stabilny układ. Jeśli układ Twojej witryny ciągle się zmienia, np. przycisk Dodaj do koszyka na stronie produktu znajduje się w różnych miejscach w zależności od kategorii produktu, agenci wykonujący zrzuty ekranu mogą być zdezorientowani.
• Twórz narzędzia WebMCP, aby definiować wyraźne zadania i działania dla agentów obsługujących interfejs API.

Dalsze kroki

Wszystkie nasze sugestie dotyczące przystosowania witryny do obsługi przez agenty sprawiają też, że witryny są lepsze dla ludzi.

Dostosowanie witryn do agentów AI zachęca do ponownego zaangażowania się w podstawowe zasady tworzenia dobrze skonstruowanych, dostępnych i semantycznych witryn.

• Sprawdź drzewo dostępności: użyj istniejących narzędzi, aby upewnić się, że hierarchia witryny jest czytelna dla maszyn i stabilna.
• Dowiedz się więcej o WebMCP, proponowanym standardzie internetowym, który ma ułatwiać witrynom interakcje z agentami. Interfejsy API są dostępne do eksperymentowania w środowisku produkcyjnym w Chrome w ramach wersji próbnej origin.