Membangun situs yang kompatibel dengan agen

Kasper Kulikowski

Omkar More

Situs Anda memiliki jenis pengunjung baru. Beberapa pengguna manusia beralih dari navigasi manual ke mendelegasikan perjalanan berorientasi tujuan ke agen AI. Sistem otonom tersebut dapat menafsirkan input, merencanakan, dan mengeksekusi tindakan atas nama pengguna.

Namun, banyak situs kami didesain agar terlihat indah bagi manusia, dengan status arahkan kursor yang kompleks, tata letak yang berubah, dan gerakan yang lancar. Fungsi ini tidak berfungsi untuk agen.

Cara agen melihat situs Anda

Agen tidak melihat situs Anda di monitor. Mereka beroperasi pada representasi situs Anda yang dapat dibaca mesin. Kualitas representasi ini menentukan performanya.

Agen dapat melihat situs Anda dengan 3 cara utama: screenshot, HTML mentah, dan pohon aksesibilitas.

Screenshot

Agen mengambil snapshot halaman yang dirender dan menggunakan model visi untuk mengidentifikasi elemen. Berdasarkan screenshot, agen dapat mengenali bahwa kotak penelusuran di kanan atas adalah penelusuran global, sedangkan kotak di tengah kemungkinan adalah kolom formulir. Isyarat visual dapat membantu, karena agen dapat menggunakan warna, ukuran, dan kedekatan untuk menentukan kepentingan. Tombol Hapus yang besar kemungkinan akan ditafsirkan dengan lebih hati-hati daripada link "Bantuan" yang kecil. Namun, menganalisis screenshot bisa lambat dan mahal (dalam hal token yang digunakan), sehingga lebih baik digunakan sebagai cadangan saat strukturnya membingungkan.

HTML

Agen menganalisis DOM dan membaca HTML. Browser memahami cara elemen disusun bertingkat, hierarki logis hierarki DOM, atribut seperti ID dan class yang menentukan struktur, dan string data mentah yang membentuk tulang punggung informasi situs. Hal ini membantu agen memahami hubungan antara elemen.

Jika tombol Beli Sekarang berada di dalam penampung produk, agen mengasumsikan bahwa tombol tersebut milik produk tertentu itu.

Hierarki aksesibilitas

Pohon aksesibilitas adalah API bawaan browser yang menyaring DOM menjadi apa yang paling penting: peran, nama, dan status elemen interaktif. Ini adalah ringkasan semantik halaman, yang digunakan oleh teknologi pendukung. Untuk agen AI, peta ini berfungsi sebagai peta fidelitas tinggi yang mengabaikan "noise" visual CSS untuk berfokus pada utilitas murni. Dengan menafsirkan struktur ini, agen dapat mempelajari niat fungsional setiap tombol, penggeser, dan kolom input.

Alat WebMCP

WebMCP adalah standar web yang diusulkan untuk menjembatani kesenjangan antara situs dan agen, untuk membagikan tujuan dan tugas eksplisit kepada agen. Hal ini dilakukan dengan menentukan alat, yang merupakan anotasi JavaScript atau HTML. Agen menafsirkan alat ini lebih cepat dan akurat daripada dengan pengaktifan standar.

Alat WebMCP dapat digunakan untuk dukungan pelanggan, e-commerce, penemuan, dan lainnya. Beberapa tindakan bersifat sensitif, seperti melakukan pembelian. Anda dapat menyertakan perintah untuk meminta interaksi pengguna dengan dialog konfirmasi.

Temukan kasus penggunaan WebMCP dan cara membangun alat yang efektif.

Modalitas gabungan

Mengandalkan satu input akan menciptakan kesenjangan semantik. Misalnya, di DOM, agen mungkin melihat <div> tanpa mengetahui bahwa Anda telah mengonfigurasi ini sebagai tombol fungsional dengan CSS dan JavaScript. Dengan screenshot, agen mungkin dapat mengidentifikasi lokasi tombol tersebut di layar, tetapi agen tetap tidak mengetahui tujuan atau tindakan yang dimaksudkan dari tombol tersebut.

Oleh karena itu, agen modern menggabungkan beberapa modalitas. Mereka menggunakan DOM dan pohon aksesibilitas untuk mendapatkan daftar elemen interaktif yang bersih dan terstruktur, lalu mereferensi silang hal tersebut dengan rendering visual untuk memahami tata letak, pengelompokan, dan isyarat visual.

Tugas kami adalah menyediakan sinyal bersih di semua saluran ini.

Membangun situs yang kompatibel dengan agen

Untuk membantu agen menjelajahi situs Anda, semua tindakan yang harus dilakukan oleh manusia atau agen harus tercermin dengan jelas di antarmuka situs. Berikut beberapa praktik terbaik:

• Hindari elemen hantu. Hindari overlay transparan yang menyembunyikan elemen interaktif. Analisis visual yang dilakukan oleh agen dapat menghapus node yang tercakup, meskipun node tersebut tampak transparan.
• Gunakan HTML semantik. Desain elemen yang dapat ditindaklanjuti dengan HTML semantik. Misalnya, gunakan tag <button> dan <a> pada elemen <div> dan <span> yang diubah. Agen mengenali elemen sebelumnya sebagai elemen interaktif.
  • Jika Anda tidak dapat menggunakan HTML semantik, selalu berikan elemen yang sesuai role dan tabindex. Misalnya, <div role="button">.
  • Tambahkan atribut for pada tag <label> untuk menautkannya ke input. Hal ini membantu agen AI memahami tujuan kolom dengan menunjukkan teks label yang langsung dilampirkan ke string tindakan.
• Gunakan CSS untuk isyarat visual. Tetapkan cursor: pointer di CSS, yang merupakan sinyal kuat untuk kemampuan melakukan tindakan.
• Penuhi ukuran minimum untuk analisis visual. Pastikan semua elemen interaktif yang diperlukan untuk menyelesaikan tindakan terlihat dan lebih besar dari 8 piksel persegi, agar tidak difilter dalam analisis visual model.
• Pastikan tata letak stabil. Agen yang mengambil screenshot kemungkinan akan bingung jika tata letak situs Anda terus berubah, misalnya saat tombol Tambahkan ke keranjang di halaman produk berada di lokasi yang berbeda untuk setiap kategori produk.
• Buat alat WebMCP untuk menentukan tugas dan tindakan eksplisit bagi agen yang mendukung API.

Langkah berikutnya

Semua yang kami sarankan untuk membuat situs "siap agen" juga membuat situs lebih baik bagi manusia.

Membuat situs yang kompatibel dengan agen AI adalah insentif untuk berkomitmen kembali pada prinsip-prinsip dasarnya dalam membangun situs yang terstruktur dengan baik, mudah diakses, dan semantik.

• Periksa A11y Tree Anda: Gunakan alat yang ada untuk memastikan hierarki situs Anda dapat dibaca mesin dan stabil.
• Baca tentang WebMCP, sebuah standar web yang diusulkan untuk membantu situs berinteraksi dengan agen. API tersedia untuk eksperimen dalam produksi di Chrome, dengan uji coba origin.