کتابخانه ngx-json-render رابط‌های کاربری آنگولار را با استریم JSON می‌سازد

تصور کنید به‌جای اینکه از هوش مصنوعی بخواهید کدی بنویسد که احتمالاً با استایل‌های سایت شما نمی‌خواند، او را به یک مدیر پروژه تبدیل کنید که فقط قطعات پیش‌ساخته را کنار هم می‌چیند. این دقیقاً همان فلسفه ngx-json-render است که در ۲۹ اوت ۲۰۲۶ منتشر شد تا شکست‌های رایج مدل‌های زبانی در تولید کدهای HTML خام برای رابط‌های کاربری را برطرف کند. ایده اصلی این است که مدل باید یک «هماهنگ‌کننده» (Coordinator) باشد، نه یک «کدنویس» (Coder). با اجبار مدل به استفاده از یک دایره لغات پیش‌تعریف‌شده از کامپوننت‌ها به‌جای تولید کد، این کتابخانه اجازه می‌دهد مدل رابط کاربری را در قالب JSON توصیف کند، در حالی که کلاینت کامپوننت‌های واقعی و تایپ‌شده را رندر می‌کند.

بسیاری از توسعه‌دهندگان تجربه تزریق کدهای تولیدشده توسط AI به ویژگی innerHTML را دارند. این کار نه‌تنها یک حفره امنیتی دائمی XSS ایجاد می‌کند، بلکه سیستم طراحی (Design System) موجود در پروژه را کاملاً نادیده می‌گیرد. علاوه بر این، چنین روشی هیچ هندلر رویدادی (Event Handler) و هیچ امنیت تایپی (Type Safety) فراهم نمی‌کند. همان‌طور که در تحلیل قبلی ما درباره‌ی ابزارهایی مثل ReclaimLLM و نحوه ثبت تعاملات توسعه‌دهندگان اشاره کردیم، صنعت اکنون به سمت قلاب‌های بومی و ساختاریافته برای ادغام AI حرکت می‌کند. هوش مصنوعی زاینده (Generative UI) گام بعدی در این تکامل است و مدل زبانی را به یک موتور چیدمان پویا تبدیل می‌کند؛ رویکردی که تغییر بنیادین در کنترل رابط کاربری از برنامه‌نویس به مدل را به دنبال دارد.

معماری رابط کاربری محدودشده (Constrained UI)

طبق مستندات این پروژه، معماری این سامانه برای حفظ کنترل بر سه رکن متمایز استوار است. نخست، کاتالوگ (Catalog) است که به‌عنوان دایره لغات مدل عمل می‌کند. این بخش با استفاده از Zod (یک کتابخانه اعتبارسنجی طرح‌واره) تعریف می‌کند که هر کامپوننت دقیقاً چه پراپ‌هایی (Props) می‌پذیرد و توصیفاتی ارائه می‌دهد تا مدل زبانی بداند چه زمانی باید از یک المان خاص استفاده کند.

برای مثال، یک کامپوننت Card در کاتالوگ ممکن است یک title را به‌عنوان یک رشته اختیاری و یک اسلات default تعریف کند، در حالی که یک کامپوننت Button ممکن است به یک رشته label نیاز داشته باشد و یک رویداد 'press' را توصیف کند. کاتالوگ همچنین اکشن‌های موجود را تعریف می‌کند؛ مثلاً یک اکشن refresh با یک شیء پارامتر که توسط Zod اعتبارسنجی شده است. این کاتالوگ از طریق متد catalog.prompt() به یک سیستم پرامپت یا از طریق catalog.jsonSchema() به یک JSON Schema برای خروجی‌های ساختاریافته و فراخوانی ابزارها (Tool Calls) تبدیل می‌شود. در این نقطه، درک این موضوع حیاتی است که صرفاً داشتن یک JSON معتبر برای موفقیت مدل‌های AI کافی نیست و کیفیت خروجی باید با معیارهای کاربردی‌تری سنجیده شود.

دوم، مشخصات (Spec) است که به‌صورت یک نقشه تخت (Flat Map) از المان‌ها طراحی شده است. برخلاف JSONهای تو در تو، یک نقشه تخت اجازه می‌دهد سیستم بخش‌های خاصی از رابط کاربری را بدون بازنویسی کل درخت، به‌روزرسانی کند. یک Spec معمولی شامل یک المان ریشه (Root)، یک شیء وضعیت (مثلاً count: 0) و یک نقشه از المان‌ها است که در آن هر ورودی، نوع، پراپ‌ها و کلیدهای فرزندان را تعریف می‌کند. این ساختار تخت برای تجربه استریمینگ (Streaming) حیاتی است.

سوم، رندرکننده (Renderer) است که مشخصات JSON را به کامپوننت‌های واقعی آنگولار نگاشت می‌کند. این کامپوننت‌ها کلاس‌های معمولی آنگولار هستند که پراپ‌های خود را از یک بستر رندر (Render Context) تزریق‌شده می‌خوانند. آن‌ها از <jr-children /> به‌عنوان یک router-outlet برای رندر درخت مشخصات استفاده می‌کنند و از اسلات‌های نام‌گذاری‌شده مانند <jr-children slot="header" /> پشتیبانی می‌کنند.

جزئیات پیاده‌سازی

به گزارش توسعه‌دهندگان این ابزار، برای اتصال کاتالوگ به رابط کاربری از تابع defineRegistry استفاده می‌شود. این تابع نام‌های کاتالوگ را به کلاس‌های کامپوننت گره می‌زند و به‌شدت تایپ‌شده است؛ به‌طوری که ثبت کامپوننتی که در کاتالوگ تعریف نشده باشد، منجر به خطای کامپایلر می‌شود. جزئیات پیاده‌سازی شامل موارد زیر است:

• تنظیمات رجیستری: defineRegistry ورودی Card در کاتالوگ را به کلاس CardComponent نگاشت کرده و منطق TypeScript را برای اکشن‌های نام‌گذاری‌شده پیاده می‌کند.
• ذخیره‌ساز وضعیت (State Store): هر نمونه از <json-render> یک ذخیره‌ساز وضعیت دارد که از طریق JSON Pointer آدرس‌دهی می‌شود. توابع داخلی مانند setState ،pushState ،removeState و validateForm به مدل اجازه می‌دهند تا فرم‌های کاربردی را بدون نیاز به نوشتن هندلرهای سفارشی برای هر دکمه، سیم‌کشی کند.
• اعتبارسنجی اکشن‌ها: هر عملیاتی فراتر از مدیریت وضعیت داخلی، یک تابع TypeScript نام‌گذاری‌شده است. مدل فقط می‌تواند این اکشن‌ها را با نام درخواست کند و تمام پارامترها در برابر طرح‌واره Zod اعتبارسنجی می‌شوند.
• تأیید کاربر: اکشن‌ها می‌توانند یک شیء confirm تعریف کنند (مثلاً "title": "Delete this?") که باعث فعال شدن یک دیالوگ واقعی می‌شود و پیش از اجرای هندلر، منتظر ورودی کاربر می‌ماند.

منطق پیشرفته و مدیریت وضعیت

بر اساس گزارش dev.to، کتابخانه ngx-json-render قرارداد غنی‌ای را پیاده کرده است که به مدل زبانی اجازه می‌دهد منطق پیچیده برنامه را بیان کند:

• اتصالات پویا (Dynamic Bindings): مدل می‌تواند از $state برای داده‌های یک‌طرفه (مثلاً "$state": "/user/name") و از $bindState یا $bindItem برای اتصال دوطرفه در فرم‌ها استفاده کند.
• رندر شرطی: اپراتور $cond به مدل اجازه می‌دهد منطق «اگر-آنگاه-وگرنه» (if-then-else) را برای المان‌های UI تعریف کند.
• مدیریت رویدادها: مدل می‌تواند اکشن‌های TypeScript را از طریق ویژگی on اجرا کند که می‌تواند شامل دیالوگ‌های confirm و کال‌بک‌های onSuccess باشد.
• تکرارکننده‌ها (Repeaters): ویژگی repeat به مدل اجازه می‌دهد لیست‌هایی را از مسیرهای وضعیت تولید کند، مانند پیمایش روی /todos با استفاده از یک کلید id.
• تمپلیت‌ها و رؤیت‌پذیری: سیستم از تمپلیت‌ها (مثلاً "$template": "Hello, ${/user/name}") و قوانین رؤیت‌پذیری بر اساس وضعیت (مثلاً نمایش المان تنها در صورتی که /count بزرگتر یا مساوی ۵ باشد) پشتیبانی می‌کند.
• ناظران (Watchers): ویژگی watch اجازه می‌دهد رابط کاربری هنگام تغییر مسیرهای خاص در وضعیت، اکشن‌هایی را اجرا کند؛ مثلاً فراخوانی loadCities زمانی که /country به‌روزرسانی می‌شود.

مکانیسم استریمینگ

مهم‌ترین جزئیات فنی، استفاده از JSONL (JSON Lines) برای استریم است. به‌جای انتظار برای دریافت یک شیء کامل JSON، سرور وصله‌های (Patches) RFC 6902 را استریم می‌کند. هر خط یک عملیات کوچک است، مثلاً {"op":"add","path":"/elements/title","value":...}.

این یعنی رابط کاربری در حالی که مدل هنوز در حال فکر کردن است، روی صفحه شکل می‌گیرد. رندرکننده بر پایه سیگنال‌های آنگولار (Angular Signals) — با استفاده از input() ،output() ،computed و استراتژی OnPush — ساخته شده و هیچ نیازی به zone.js ندارد. چون از یک گراف محاسباتی روی یک نقشه تخت از المان‌ها استفاده می‌کند، فقط المان‌هایی که توسط یک وصله (Patch) لمس شده‌اند دوباره محاسبه می‌شوند و از افت عملکرد ناشی از رندرهای سراسری در به‌روزرسانی‌های با فرکانس بالا جلوگیری می‌شود.

در سمت کلاینت، injectUIStream درخواست POST به API را مدیریت کرده و استریم را کنترل می‌کند. به رندرکننده اعلام می‌شود که در وضعیت loading است، که به آن اجازه می‌دهد ارجاع‌های ناقص (Dangling Child References) — یعنی المان‌هایی که فرزندانی را نام می‌برند که هنوز در استریم نرسیده‌اند — را تحمل کند.

در سمت سرور، با استفاده از AI SDK و مدلی مثل claude-sonnet-5 (یا Claude 3.5 Sonnet)، پیاده‌سازی بسیار مینیمال است. سرور خروجی catalog.prompt() را به‌عنوان پیام سیستمی ارسال کرده و متن حاصل را مستقیماً به‌صورت text/plain به کلاینت استریم می‌کند.

قابلیت انتقال بین فریم‌ورک‌ها

این کتابخانه بر روی @json-render/core بنا شده است؛ همان موتوری که در رندرهای React، Vue، Solid و Svelte استفاده می‌شود. این هسته، گرامر مشخصات (Spec Grammar)، ارزیاب عبارات، ذخیره‌ساز وضعیت، توزیع‌کننده اکشن‌ها و کامپایلر استریم را فراهم می‌کند. چون گرامر مشخصات قابل انتقال است، یک توصیف JSON تولیدشده توسط LLM می‌تواند در فریم‌ورک‌های مختلف فرانت‌اند به‌طور یکسان رندر شود.

برای توسعه‌دهندگانی که می‌خواهند فوراً شروع کنند، نویسنده بسته ngx-json-render-material را ارائه کرده است. این بسته مکمل شامل کاتالوگی آماده از ۲۸ کامپوننت Angular Material است که نیاز به نوشتن کاتالوگ سفارشی برای نمونه‌سازی‌های اولیه را از بین می‌برد.

این رویکرد فرض قدیمی را که UI تولیدشده توسط AI باید استاتیک یا خطرناک باشد، تغییر می‌دهد. با تبدیل مدل زبانی به «درخواست‌کننده کامپوننت» به‌جای «نویسنده کد»، کنترل امنیت و برندینگ دوباره به دست توسعه‌دهنده می‌افتد. مدل چیدمان را پیشنهاد می‌دهد، اما کد TypeScript اجرای نهایی را مدیریت می‌کند.

آنچه این موضوع برای یک توسعه‌دهنده معمولی به معناست، چرخش به سمت «پرامپت‌نویسی کامپوننت‌محور» است. به‌جای جنگیدن با توهمات CSS، زمان خود را صرف تعریف کاتالوگی مستحکم از کامپوننت‌ها خواهید کرد که AI بتواند آن‌ها را به‌درستی ترکیب کند.

منتظر ادغام احتمالی این منطق در بسته‌های رسمی @json-render upstream باشید که می‌تواند نحوه مدیریت Generative UI را در اکوسیستم وب استانداردتر کند. این پروژه در حال حاضر آنگولار ۲۰ و بالاتر را هدف قرار داده و تحت لایسنس Apache-2.0 منتشر شده است.

گام بعدی شما

• اگر از آنگولار ۲۰ یا بالاتر استفاده می‌کنید، بسته ngx-json-render-material را برای نمونه‌سازی سریع تست کنید.
• کاتالوگ کامپوننت‌های فعلی خود را بررسی کنید و برای هر کدام یک طرح‌واره Zod تعریف کنید تا برای Generative UI آماده شوید.
• مستندات RFC 6902 را مطالعه کنید تا متوجه شوید چگونه وصله‌های JSON ساختار UI را در لحظه تغییر می‌دهند.

اما داستان سخت‌افزاری این تحول حتی شگفت‌انگیزتر است — به تحلیل ما درباره‌ی تراشه‌های Blackwell مراجعه کنید.