‏json-render: رابط‌کاربریِ تولیدشده با AI ولی مهارشده

به گفتهٔ سازنده، json-render یه فریم‌ورکِ «رابط‌کاربریِ مولد» (Generative UI) از Vercel Labsه با این ایده: هوش مصنوعی از روی پرامپتِ زبانِ طبیعی رابط تولید می‌کنه، ولی مهارشده به کامپوننت‌هایی که تو تعریف کردی. تو نرده‌ها رو می‌ذاری، AI داخلشون می‌سازه، نه بیرونشون.

چهار ویژگیِ اصلیش اینه: مدل فقط می‌تونه از کامپوننت‌های داخلِ کاتالوگِ تو استفاده کنه؛ خروجیِ JSON هر بار با اسکیمای تو جور درمیاد؛ پاسخ به‌صورت استریمی و تدریجی رندر می‌شه؛ و یه کاتالوگِ واحد روی وب (React، Vue، Svelte، Solid) و موبایل (React Native) کار می‌کنه. علاوه‌بر این، ۳۶ کامپوننتِ آمادهٔ shadcn/ui هم همراهش میاد.

کارکردش سه‌مرحله‌ایه. اول کاتالوگ رو تعریف می‌کنی؛ یعنی می‌گی چه کامپوننت‌ها و اکشن‌هایی مجازن و propهاشون با Zod چه شکلی‌ان:

const catalog = defineCatalog(schema, {
  components: {
    Card: { props: z.object({ title: z.string() }), description: "A card container" },
    Button: { props: z.object({ label: z.string(), action: z.string() }) },
  },
  actions: {
    export_report: { description: "Export dashboard to PDF" },
  },
});

بعد پیاده‌سازیِ واقعیِ هر کامپوننت رو تو یه registry بهش وصل می‌کنی، و آخرش اون spec‌ای که AI ساخته رو با یه کامپوننتِ Renderer به‌شکلِ امن رندر می‌کنی:

function Dashboard({ spec }) {
  return <Renderer spec={spec} registry={registry} />;
}

به گفتهٔ نویسنده، «همینه»: AI فقط JSON می‌سازه و تو با خیالِ راحت رندرش می‌کنی.

نقطهٔ قوتش تنوعِ رندررهاست. جدا از React و Vue و Svelte و Solid، بسته‌هایی برای React Native، Next.js (که JSON به اپِ کاملِ با route و layout و SSR تبدیل می‌شه)، Remotion برای ویدیو، React PDF برای سند، React Email برای ایمیل، Ink برای رابطِ ترمینال، Satori برای تصویرِ SVG/PNG و حتی React Three Fiber برای صحنه‌های سه‌بعدی (با کامپوننتِ GaussianSplat) داره.

یه‌سری امکاناتِ جانبی هم داره؛ مثلاً بستهٔ directives با دایرکتیوهای آماده مثل $format، $math، $concat و $t (برای i18n)، بستهٔ codegen برای تولیدِ کد از درختِ UI، و devtools که یه پنلِ فریم‌ورک‌اگنوستیک برای دیباگه. جمع‌بندی ساده‌ست: تو محدودیت‌ها رو می‌ذاری و AI داخلشون خلاقیت می‌کنه.

نکات کلیدی:

• Generative UIِ مهارشده: AI فقط از کامپوننت‌های کاتالوگِ تو استفاده می‌کنه
• خروجیِ JSON همیشه با اسکیمای Zod مطابقه و استریمی رندر می‌شه
• یه کاتالوگ، چند هدف: React/Vue/Svelte/Solid، React Native، PDF، ویدیو، ایمیل، ترمینال، سه‌بعدی
• ۳۶ کامپوننتِ آمادهٔ shadcn/ui به‌همراه directives و devtools