ארכיטקטורת AI Server-Driven UI: איך לשנות UI בזמן אמת ללא פריסת קוד

לפני כחצי שנה ישבתי עם אורי, יזם שמנהל מערכת לניהול נכסים בתל אביב. הוא רצה להציג לכל משתמש שמוציא דוח נכס ממשק שונה לחלוטין: למשקיע זהיר להראות גרף תשואה בולט, ולרוכש דירה ראשונה להבליט מחשבון משכנתא. הבעיה? המפתחים שלו ירקו דם. כל שינוי קטן בממשק דרש שינויי קוד, בדיקות QA וגרסה חדשה ב-GitHub.

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

מה זה בעצם AI Server-Driven UI?

בשנים האחרונות התרגלנו שגרסת האתר נקבעת מראש בזמן ה-Build. הלקוח (הדפדפן) מוריד את קובצי ה-JavaScript, ופונה לשרת רק כדי לקבל נתונים יבשים.

הגדרה · AI Server-Driven UI

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

זה עובד פשוט.

ה-LLM לא מעצב. הוא לא כותב CSS. הוא מתפקד כבמאי. הוא מקבל את בקשת המשתמש, מנתח אותה, ומחזיר רשימת הוראות: "שים למעלה כותרת מסוג X, מתחתיה מחשבון מסוג Y, ובתחתית כפתור פעולה מסוג Z".

איך השרשרת עובדת בפועל?

כדי שהמנגנון יעבוד ללא תקלות, אנחנו חייבים להפריד לחלוטין בין מוח ההחלטות (ה-LLM) לבין שכבת התצוגה (ה-Design System).

תהליך העבודה נראה כך:

1. המשתמש מבצע פעולה או שואל שאלה.
2. השרת שולח את הבקשה ל-LLM יחד עם הגדרת JSON Schema נוקשה (באמצעות Structured Outputs או Zod).
3. המודל מחזיר JSON קריא המכיל שמות של רכיבים ופרמטרים.
4. הדפדפן מחפש את השמות ב-Component Registry הפנימי שלו ומציג אותם.

אבטחה ומניעת הזיות: חוקי הברזל

טעות נפוצה של מפתחים בראשית הדרך היא לבקש מה-AI לייצר קוד HTML או JSX חופשי. זה אסון אבטחה.

קוד חופשי הוא חור אבטחה.

אם תיתנו ל-LLM פתח פתוח, אתם מזמינים מתקפות XSS, עיצובים שבורים וחוויה מרוסקת במובייל.

כדי למנוע הזיות, מגדירים Zod Schema סגור. אם המודל מנסה להחזיר רכיב שלא קיים ב-Registry, השרת דוחה את התשובה עוד לפני שהיא מגיעה למשתמש.

• הגדרת רכיבים קשיחה ומוגבלת
• תיקוף שדות נוקשה בשרת
• נטרול אפשרות להזרקת סקריפטים

דוגמה מעשית: הרכבת הצעת מחיר בלייב

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

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

{
  "components": [
    {
      "name": "PricingHeader",
      "props": { "title": "הצעת מחיר מותאמת לחנות קרמיקה", "location": "תל אביב" }
    },
    {
      "name": "FeatureList",
      "props": { "items": ["קטלוג מוצרים", "מסלקה מקומית", "חיבור למשלוחים"] }
    },
    {
      "name": "ROI_Calculator",
      "props": { "defaultAverageOrder": 250 }
    }
  ]
}

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

המשתמש מקבל בדיוק את הממשק שהוא צריך באותו רגע.

💡

ה-AI לא מחליף את מעצב ה-UI. הוא הופך למנהל במה שבוחר איזה רכיב עיצובי להעלות לבמה ומתי.

סיכום

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

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