Izgradnja veb sajtova za eru AI agenata

Ovaj tekst i video predstavlja prelazak na agentno doba weba, gde AI agenti postaju primarni korisnici sajtova umesto ljudi. Autor naglašava da sajtovi moraju biti prilagođeni mašinama kroz semantički HTML i stablo pristupačnosti kako bi AI mogao efikasno da izvršava zadatke. Ključna inovacija je WebMCP, predloženi standard koji omogućava programerima da direktno izlože strukturirane alate agentima putem JavaScript-a ili HTML formi. Na ovaj način, korisnici prelaze sa manuelnog pregledanja na delegiranje složenih procesa prirodnim jezikom unutar pretraživača. Google uvodi i nove mogućnosti u Chrome DevTools i Lighthouse za testiranje i reviziju spremnosti veb stranica za ovu automatizovanu budućnost. Sveukupni cilj je stvaranje weba koji je podjednako funkcionalan i za ljude i za veštačku inteligenciju.

1. Uvod: Kraj ere „pregledanja“ i početak „delegiranja“

Poslednjih 30 godina veb smo gradili isključivo za ljude. Fokusirali smo se na korisnički interfejs (UI), performanse, SEO i pristupačnost. Danas svedočimo tektonskoj promeni koja predstavlja najveći preokret od pojave mobilnih uređaja, a možda i od samog nastanka interneta. Dobrodošli u agentic era – eru AI agenata.

Ova promena označava prelazak sa „pregledanja“ (browsing) na „delegiranje“ (delegating). Umesto da korisnik samostalno otvara desetine tabova kako bi uporedio ponude, on AI agentu poverava visok nivo cilja. Agent preuzima težak posao, dok čovek ostaje onaj koji daje finalno odobrenje. Za developere i vlasnike biznisa ulog je jasan: ako agent ne može da razume vaš sajt, vaši korisnici gube prednost automatizacije, a vi gubite konverzije. Ključno pitanje više nije kako korisnik vidi vaš sajt, već da li je vaš sajt spreman da mu bude delegiran posao.

2. Tri oka AI agenta: Kako mašine zapravo vide vaš dizajn

AI agenti ne posmatraju vaš sajt onako kako ga mi vidimo na monitoru. Oni koriste tri nivoa percepcije kako bi konstruisali mašinski čitljivu reprezentaciju vašeg sadržaja:

• Screenshot (Vizija): Koristeći vizuelne modele, agenti prepoznaju elemente slično ljudima. Vizuelni znaci poput boje, veličine i blizine su ključni – agent će veliko crveno dugme „Ukloni“ tretirati sa većom dozom opreza nego mali link za pomoć na dnu stranice.
• DOM (Struktura): Analizom gnježđenja elemenata i atributa (ID-evi, klase), agent shvata logičku hijerarhiju. Na primer, dugme „Kupi odmah“ unutar specifičnog kontejnera proizvoda jasno signalizira na šta se akcija odnosi.
• Accessibility Tree (Semantika): Ovo je najvažniji sloj. To je API koji destiliše kompleksni DOM u čistu upotrebnu vrednost.

Iako su ovi metodi moćni, oni su spori i troše mnogo tokena jer zahtevaju stalnu sintezu signala. Upravo ovde nastaje potreba za direktnijim putem.

3. Povratak osnovama: Zašto je pristupačnost vaša nova SEO strategija

Ironija „agentske spremnosti“ je u tome što ona ne zahteva ponovno izmišljanje točka. Sve što pomaže osobama sa invaliditetom (poput čitača ekrana), direktno pomaže i AI modelima.

Da biste osigurali stabilnost, vaš layout mora biti predvidiv. Baš kao što u prodavnici očekujete da mleko uvek bude na istom mestu, agenti očekuju konzistentnost kako bi smanjili kognitivno opterećenje. Izbegavajte skrivene kontrole koje se pojavljuju samo na „hover“ i osigurajte da su ključne akcije uvek vidljive u viewport-u. Semantički HTML nije samo dobra praksa – on je temelj na kojem agenti grade razumevanje vašeg sajta.

4. WebMCP: Direktna linija komunikacije između vašeg koda i AI-a

Kako bi interakcija bila brža i pouzdanija, uvodi se WebMCP (Web Model Context Protocol). Dok standardni MCP služi za komunikaciju sa backend infrastrukturom i radi nezavisno, WebMCP je dizajniran specifično za veb pretraživače.

Glavne prednosti WebMCP-a su:

• Session-awareness: Agent koji koristi WebMCP nasleđuje stanje prijavljenog korisnika (kolačiće i sigurnosni kontekst).
• Shortcut (Prečica): Umesto da agent mukotrpno analizira screenshot-ove i DOM kako bi „pogodio“ gde da klikne, WebMCP mu omogućava da direktno pozove „alate“ koje ste vi definisali. To drastično smanjuje potrošnju tokena i mogućnost greške.
• Tab-bound priroda: Za razliku od perzistentnog MCP-a, WebMCP je vezan za aktivnu karticu i efemeran je – postoji samo dok je korisnik na vašoj stranici.

5. Programerski vodič: Imperativni vs. Deklarativni pristup

WebMCP vam omogućava da izložite funkcije vašeg sajta agentu na dva načina:

1. Imperativni pristup (JavaScript): Koristi se API navigator.modelContext.registerTool.
2. Ključno je definisati precizan input schema gde se određuju parametri koje agent treba da pošalje.
3. Deklarativni pristup (HTML): Idealno za forme. Dodavanjem atributa tool-name i tool-description direktno u HTML, vaša forma postaje alat.
   • **tool-autosubmit**: Ovaj atribut omogućava agentu da automatski podnese formu nakon što je popuni.
   • **agentInvoked**: Specijalno svojstvo događaja koje vašem kodu javlja da je formu pokrenuo agent, što je neprocenjivo za debagovanje i analitiku.

6. Higijena koda za agente: Najbolje prakse

Kvalitet vaših opisa direktno utiče na to koliko će agent biti uspešan.

• Jasnoća opsega: Razlikujte inicijaciju od izvršenja. „Start Event Creation“ sugeriše prelazak na formu, dok „Create Event“ znači trenutnu akciju.
• Smanjenje kognitivnog opterećenja: Ne tražite od agenta da vrši proračune. Nemojte zahtevati od modela da računa minute od ponoći; neka alat prihvati sirovi unos (npr. „11 do 15h“), a vi tu logiku obradite u svom kodu.
• Deskriptivne greške: Ako validacija ne uspe, vratite poruku poput: „Ime proizvoda mora biti kraće od 100 karaktera“. To omogućava modelu da se samoispravi.
• Atomični alati: Svaki alat treba da ima jednu odgovornost kako bi se mogli lako kombinovati u kompleksne tokove.

7. Vaš novi arsenal: Lighthouse i DevTools za AI eru

Sa dolaskom Chrome-a 150+, developeri dobijaju specijalizovane alate za testiranje nelinearnog ponašanja AI agenata:

• Lighthouse audit: Nova revizija za „agentic readiness“ koja proverava vizuelnu spremnost, semantiku i WebMCP integraciju.
• Chrome DevTools: Sada možete pratiti pozive alata u realnom vremenu, videti koliko puta je određeni alat pozvan (invocation counter) i vršiti inspekciju inputa i outputa koji se razmenjuju između modela i vašeg sajta.

8. Zaključak: Budućnost je već ovde

Agentski veb nije teorija, već realnost koju lideri industrije već testiraju:

• MakeMyTrip omogućava agentima da odgovore na nijansirana pitanja poput „da li je ovaj hotel pogodan za kućne ljubimce?“.
• Nykaa testira tokove gde agent automatski primenjuje dostupne kupone pre plaćanja.
• Policybazaar koristi WebMCP za poređenje kvota osiguranja putem prirodnog jezika.
• Gadgets Now i redBus omogućavaju kompleksno filtriranje proizvoda i karata bez ijednog ručnog klika korisnika.

Šta možete uraditi odmah? Aktivirajte WebMCP podršku putem Chrome Flags i prijavite se za Origin Trial koji dolazi uskoro. Eksperimentisanje danas osigurava da vaš biznis ne postane nevidljiv sutra.

Da li je vaš sajt spreman da pruži agentu mapu i prave alate, ili ćete dozvoliti da vaše konverzije nestanu u eri delegiranja?