בניית אתרים שמתאימים לסוכנים

Kasper Kulikowski

Omkar More

באתר שלך יש סוג חדש של מבקרים. חלק מהמשתמשים האנושיים עוברים מניווט ידני להאצלת משימות שקשורות ליעדים לסוכני AI. המערכות האוטונומיות האלה יכולות לפרש קלט, לתכנן ולבצע פעולות בשם המשתמש.

עם זאת, הרבה מהאתרים שלנו מעוצבים בצורה יפהפייה בשביל בני אדם, עם מצבי ריחוף מורכבים, פריסות משתנות ותנועה חלקה. הפונקציונליות הזו לא פועלת אצל נציגים.

איך נציגי התמיכה רואים את האתר שלכם

הסוכנים לא מסתכלים על האתר שלכם במסך. הן פועלות על ייצוג של האתר שניתן לקריאה על ידי מכונה. האיכות של הייצוג הזה קובעת את הביצועים של המודעות.

יש 3 דרכים עיקריות שבהן סוכנים יכולים לראות את האתר שלכם: צילומי מסך, HTML גולמי ועץ הנגישות.

צילומי מסך

הסוכן מצלם תמונה של הדף שעבר רינדור ומשתמש במודל ראייה כדי לזהות רכיבים. על סמך צילום המסך, הסוכן יכול לזהות שסרגל החיפוש בפינה השמאלית העליונה הוא חיפוש גלובלי, ושתיבה באמצע היא כנראה שדה טופס. רמזים חזותיים יכולים לעזור, כי הסוכנים יכולים להשתמש בצבע, בגודל ובמיקום כדי לקבוע את החשיבות. סביר להניח שכפתור גדול עם הכיתוב מחיקה יתפרש כפעולה שצריך לבצע בזהירות רבה יותר מאשר קישור קטן עם הכיתוב 'עזרה'. עם זאת, ניתוח צילומי מסך יכול להיות איטי ויקר (מבחינת טוקנים בשימוש), ולכן עדיף להשתמש בו כגיבוי כשהמבנה מבלבל.

HTML

הסוכן מנתח את ה-DOM וקורא את ה-HTML. הוא מבין איך הרכיבים מוטמעים, את ההיררכיה הלוגית של עץ ה-DOM, מאפיינים כמו מזהים ומחלקות שמגדירים את המבנה, ומחרוזות של נתונים גולמיים שיוצרים את עמוד השדרה של המידע באתר. כך הסוכן יכול להבין את הקשר בין הרכיבים.

אם הלחצן קנייה מיידית נמצא בתוך מאגר מוצרים, הסוכן מניח שהלחצן שייך למוצר הספציפי הזה.

עץ הנגישות

עץ הנגישות הוא API מקורי של הדפדפן שמזקק את ה-DOM למה שהכי חשוב: תפקידים, שמות ומצבים של רכיבים אינטראקטיביים. זהו סיכום סמנטי של הדף, שמשמש טכנולוגיה מסייעת. עבור סוכן AI, הוא מתפקד כמפה ברמת דיוק גבוהה שמתעלמת מה'רעש' החזותי של CSS כדי להתמקד בשימושיות טהורה. הסוכן יכול ללמוד את הכוונה הפונקציונלית של כל מתג, פס הזזה ושדה להזנת קלט על ידי ניתוח העץ הזה.

כלי WebMCP

WebMCP הוא תקן אינטרנט מוצע שמגשר על הפער בין אתרים לסוכנים, כדי לשתף עם הסוכנים מטרות ומשימות מפורשות. כדי לעשות את זה, מגדירים כלים, שהם הערות ב-JavaScript או ב-HTML. הסוכנים מפרשים את הכלים האלה מהר יותר ובצורה מדויקת יותר מאשר בהפעלה רגילה.

אפשר להשתמש בכלי WebMCP לתמיכת לקוחות, למסחר אלקטרוני, לגילוי ועוד. יש פעולות רגישות, כמו ביצוע רכישה. אפשר לכלול פקודה לבקשת אינטראקציה של המשתמש עם תיבת דו-שיח לאישור.

תרחישים לדוגמה לשימוש ב-WebMCP והסבר על בניית כלים יעילים

שילוב של אמצעים

הסתמכות על קלט יחיד יוצרת פער סמנטי. לדוגמה, ב-DOM, סוכן יכול לראות <div> בלי לדעת שבעצם הגדרתם את זה כלחצן פונקציונלי עם CSS ו-JavaScript. בצילומי מסך, יכול להיות שנציג יזהה את המיקום של הלחצן במסך, אבל הוא עדיין לא ידע מה היעד שאליו הלחצן אמור להוביל או איזו פעולה הוא אמור להפעיל.

לכן, סוכנים מודרניים משלבים כמה אופנים. הם משתמשים ב-DOM ובעץ הנגישות כדי לקבל רשימה נקייה ומובנית של רכיבים אינטראקטיביים, ואז משווים אותה עם עיבוד חזותי כדי להבין את הפריסה, הקיבוץ והרמזים החזותיים.

התפקיד שלנו הוא לספק אותות נקיים בכל הערוצים האלה.

בניית אתרים שמתאימים לסוכנים

כדי לעזור לנציגים להתמצא באתר, כל הפעולות שאדם או נציג צריכים לבצע צריכות להופיע בבירור בממשק האתר. ריכזנו כאן כמה שיטות מומלצות:

• הימנעו מאלמנטים שקופים. אל תיצרו שכבות שקופות שמסתירות אלמנטים אינטראקטיביים. יכול להיות שהניתוח החזותי שהסוכן מבצע יפסול צמתים שמכוסים, גם אם הצומת נראה שקוף.
• שימוש ב-HTML סמנטי. עיצוב רכיבים שניתן לבצע בהם פעולות באמצעות HTML סמנטי. לדוגמה, אפשר להשתמש בתגי <button> ו-<a> במקום ברכיבים <div> ו-<span> שעברו שינוי. הסוכנים מזהים את הקודם כרכיבים אינטראקטיביים.
  • אם אי אפשר להשתמש ב-HTML סמנטי, תמיד צריך לספק את הרכיב עם התגים המתאימים role ו-tabindex. לדוגמה, <div role="button">.
  • מוסיפים את המאפיין for לתגי <label> כדי לקשר אותם לקלט. כך סוכן ה-AI מבין את המטרה של השדה, כי מצוין בו טקסט התווית שמצורף ישירות למחרוזת הפעולה.
• שימוש ב-CSS לרמזים חזותיים. הגדרת cursor: pointer ב-CSS, שהוא אות חזק לביצוע פעולה.
• הקפידו על הגודל המינימלי לניתוח חזותי. כדי למנוע מצב שבו המודל יסנן את הרכיבים האינטראקטיביים שנדרשים להשלמת פעולה בניתוח החזותי, צריך לוודא שהם גלויים וגדולים מ-8 פיקסלים מרובעים.
• מוודאים שהפריסה יציבה. סביר להניח שסוכנים שמצלמים צילומי מסך יתבלבלו אם פריסת האתר שלכם משתנה כל הזמן, למשל אם הלחצן הוספה לעגלת הקניות בדף המוצר נמצא במיקום שונה בכל קטגוריית מוצרים.
• יצירת כלים של WebMCP כדי להגדיר משימות ופעולות מפורשות לסוכנים שתומכים ב-API.

השלבים הבאים

כל ההמלצות שלנו להכנת אתר לשימוש על ידי סוכנים גם משפרות את האתרים עבור בני אדם.

הפיכת אתרים לידידותיים לסוכני AI היא תמריץ להתחייבות מחדש לעקרונות הבסיסיים של בניית אתרים נגישים, סמנטיים ומובנים היטב.

• בודקים את עץ הנגישות: משתמשים בכלים קיימים כדי לוודא שההיררכיה של האתר ניתנת לקריאה על ידי מכונה ויציבה.
• מידע נוסף על WebMCP, תקן אינטרנט מוצע שמטרתו לעזור לאתרים לקיים אינטראקציה עם סוכנים. ממשקי ה-API זמינים לניסויים בסביבת ייצור ב-Chrome, עם גרסת מקור לניסיון.