תפסיקו לתת ל-AI לכתוב HTML - יש דרך טובה יותר

אתם מבקשים מ-ChatGPT "תבנה לי דשבורד." מה שאתם מקבלים זה קיר של HTML גולמי עם סטיילים inline, נגישות שבורה, דאטא hardcoded, ואפס חיבור למערכת העיצוב שלכם. אתם מדביקים את זה באפליקציה, וחצי מזה לא מתרנדר.

עכשיו תדמיינו שה-AI יכול לייצר רק JSON מובנה - ושה-JSON הזה יכול להתייחס רק לקומפוננטות מספריית הקומפוננטות שלכם. בלי <div> soup. בלי CSS inline. בלי וקטורי XSS. רק UI נקי, מאומת וניתן לרינדור.

בדיוק מה ש- json-render עושה.

מה זה json-render?

json-render הוא פריימוורק Generative UI מ-Vercel Labs. הוא מגשר בין מודלי שפה של AI לבין קומפוננטות UI אמיתיות עם רעיון פשוט:

1. אתם מגדירים קטלוג - רשימת קומפוננטות מאושרות (Card, Button, Table, Input וכו') עם props מוגדרים.
2. ה-AI מייצר JSON spec - מבנה שטוח שמתאר אילו קומפוננטות לרנדר ואיך לחבר ביניהן.
3. הרנדרר מצייר UI אמיתי - באמצעות הקומפוננטות האמיתיות שלכם (React, Vue, Svelte, React Native, ואפילו PDF).

ה-AI יכול להשתמש רק בקומפוננטות מהקטלוג שלכם. בלי הפתעות, בלי HTML גולמי, בלי פלט לא בטוח. Guardrailed by design.

הבעיה שזה פותר

כשנותנים ל-AI לייצר HTML או JSX גולמי, מקבלים:

• פלט לא צפוי - כל תגובה נראית אחרת. אפס עקביות עם מערכת העיצוב.
• סיכוני אבטחה - HTML גולמי זה פוטנציאל להזרקת XSS. צריך לסנן הכל.
• בלי type safety - ה-AI יכול להמציא כל שם קומפוננטה או prop. שום דבר לא מאמת את הפלט לפני הרינדור.
• נעילה לפלטפורמה - פלט HTML עובד רק בווב. מה עם מובייל? PDF? אימייל?

json-render מבטל את כל הבעיות האלה על ידי הגבלת ה-AI לסכמה מוגדרת מראש. ה-JSON spec משמש כחוזה בין ה-AI לבין הרנדרר שלכם.

איך זה עובד

User Prompt
    ↓
AI Model (Claude, GPT, etc.)
    ↓
JSON Spec  ←── constrained by Catalog
    ↓
Renderer   ←── maps to real components
    ↓
Real UI (React, Vue, Native, PDF...)

שלושה מושגים שצריך להכיר:

1. Catalog (קטלוג) - מגדיר קומפוננטות זמינות וסכמות ה-props שלהן באמצעות Zod. זה מה שנותנים ל-AI כ"תפריט הקומפוננטות."
2. Registry (רגיסטרי) - ממפה רשומות בקטלוג לקומפוננטות אמיתיות (React components, native views וכו').
3. Spec (מפרט) - מבנה ה-JSON שה-AI מייצר. מפה שטוחה של מזהי אלמנטים, כל אחד עם type, props והפניות ל-children.

התקנה

# Core + React renderer
npm install @json-render/core @json-render/react

# Pre-built shadcn/ui components (36 components ready to go)
npm install @json-render/shadcn

שימוש בסיסי

הנה הסטאפ המינימלי עם קומפוננטות shadcn מובנות:

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { defineRegistry, Renderer } from "@json-render/react";
import { shadcnComponents } from "@json-render/shadcn";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";

// 1. הגדרת קטלוג (מה AI יכול להשתמש)
const catalog = defineCatalog(schema, {
  components: {
    Card: shadcnComponentDefinitions.Card,
    Button: shadcnComponentDefinitions.Button,
    Heading: shadcnComponentDefinitions.Heading,
  },
  actions: {},
});

// 2. יצירת רגיסטרי (מימושים אמיתיים)
const { registry } = defineRegistry(catalog, {
  components: {
    Card: shadcnComponents.Card,
    Button: shadcnComponents.Button,
    Heading: shadcnComponents.Heading,
  },
});

// 3. רינדור spec
function MyUI({ spec }) {
  return <Renderer spec={spec} registry={registry} />;
}

נסו בעצמכם

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

למה זה חשוב

1. Cross-Platform מהיום הראשון

אותו JSON spec מתרנדר על React, Vue, Svelte, React Native, כ-PDF, או אפילו באימייל. כתבו את הלוגיקה של ה-AI פעם אחת, רנדרו בכל מקום.

2. 36 קומפוננטות מוכנות

חבילת @json-render/shadcn מגיעה עם 36 קומפוננטות פרודקשן - Card, Table, Form inputs, Dialog, Tabs, Accordion ועוד. אפשר להתחיל לבנות מיד בלי לכתוב מימושי קומפוננטות.

3. State וביטויים

json-render תומך בניהול state מובנה עם $state, רינדור מותנה עם $cond, וביטויים דינמיים. ה-UI שה-AI מייצר יכול להיות אינטראקטיבי, לא רק סטטי.

4. רינדור פרוגרסיבי (Streaming)

הרנדרר תומך ב-streaming - בזמן שה-AI מייצר את ה-JSON spec טוקן אחרי טוקן, ה-UI מתרנדר בהדרגה. המשתמשים רואים UI נבנה בזמן אמת, לא ספינר טעינה ואז הבזק.

5. בטיחות כברירת מחדל

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

שימושים מעשיים

• צ'אטבוטים עם תגובות עשירות - במקום רק טקסט, הצ'אטבוט מרנדר כרטיסים, טבלאות, טפסים ואלמנטים אינטראקטיביים.
• דשבורדים דינמיים - משתמשים מתארים מה הם רוצים לראות, ה-AI מייצר את layout הדשבורד מספריית הקומפוננטות שלכם.
• בוני טפסים - AI מייצר טפסים מאומתים ומעוצבים מתיאורים בשפה טבעית.
• הפקת דוחות - אותו spec מתרנדר כדשבורד באתר וכ-PDF להורדה.
• תבניות אימייל - AI מייצר layouts לאימייל באמצעות קומפוננטות המותג שלכם דרך @json-render/react-email.

התחילו עכשיו

json-render הוא קוד פתוח, מ-Vercel Labs, ומוכן לשימוש היום. אם אתם בונים משהו שבו AI מייצר UI - צ'אטבוטים, דשבורדים, בוני טפסים, מחוללי דוחות - זה הפריימוורק שצריך.

GitHub Repository · npm install @json-render/core @json-render/react @json-render/shadcn