پرش به محتوای اصلی
پرش به محتوای مقاله

انتقال الگوهای رابط کاربری هوش مصنوعی Vercel به اکوسیستم shadcn/ui

·۲۴ مهر ۱۴۰۵۵ دقیقه مطالعه
عناصر AI ورسل منسوخ شده؛ جایگزین‌های رابط چت AI برای shadcn/ui
عناصر AI ورسل منسوخ شده؛ جایگزین‌های رابط چت AI برای shadcn/ui
اشتراک‌گذاری
واقعاً چه چیز جدید است؟

تغییر پارادایم از «کتابخانه نصب‌شدنی» به «الگوهای کپی‌شدنی» برای رابط‌های عامل‌محور؛ اکنون نمایش مراحل تفکر مدل (Reasoning) به یک مؤلفه استاندارد UI تبدیل شده است.

اگر در حال حاضر از رابط‌های چت ساده برای اپلیکیشن‌های خود استفاده می‌کنید، باید بدانید که استانداردهای طراحی در حال تغییر است. عصر جعبه‌های چت ساده به پایان رسیده و جای خود را به رابط‌های عامل‌محور (Agentic Interfaces) می‌دهد. این تغییر در سطح زیرساختی با انتقال ابزارهای رابط کاربری (UI Primitives) از Vercel به اکوسیستم shadcn/ui آغاز شده است.

طبق اعلام رسمی در مخزن پروژه، کتابخانه AI Elements متعلق به Vercel تا پایان نوامبر ۲۰۲۶ به‌طور کامل بازنشسته (Deprecated) می‌شود. برای توسعه‌دهندگان، این اتفاق بیشتر یک انتقال مالکیت است تا یک تغییر ساختاری مخرب (Breaking Change). دلیل این موضوع آن است که AI Elements در واقع به عنوان یک «رجیستری» عمل می‌کرد؛ یعنی مؤلفه‌ها مستقیماً در پروژه‌های محلی کپی می‌شدند. بنابراین، کدهای فعلی شما با رسیدن به تاریخ ۱ دسامبر متوقف نمی‌شوند و هیچ بسته‌ای وجود ندارد که دریافت به‌روزرسانی‌هایش قطع شود و باعث خرابی برنامه گردد. با این حال، Vercel پس از این ضرب‌الاجل، دیگر قطعات جدید یا اصلاحات مربوط به باگ‌ها را ارائه نخواهد کرد و مستندات آن در نهایت به منابع دیگر ارجاع داده می‌شوند. شما زمان کافی دارید و نیازی نیست همین هفته برای مهاجرت عجله کنید.

این جابجایی درست زمانی رخ می‌دهد که صنعت از چت‌باکس‌های ساده به سمت «رابط‌های عامل‌محور» حرکت می‌کند. اپلیکیشن‌های مدرن هوش مصنوعی اکنون به رابط‌های تخصصی برای نمایش مراحل استدلال (Reasoning steps)، فراخوانی ابزارها (Tool calls) و برنامه‌ریزی‌های چندعاملی (Multi-agent planning) نیاز دارند؛ قابلیت‌هایی که کتابخانه اولیه Vercel برای مقیاس‌پذیری آن‌ها طراحی نشده بود. این نیاز به زیرساخت‌های منعطف‌تر، با استانداردهای مهندسی برای تبدیل دموهای AI به عامل‌های عملیاتی که در سال ۲۰۲۶ تعریف شده‌اند، هم‌راستا است تا پایداری سیستم‌ها در محیط‌های عملیاتی تضمین شود.

همان‌طور که در تحلیل‌های قبلی ما درباره‌ی تکامل تجربه کاربری در مدل‌های استدلالی اشاره کردیم، نیاز صنعت از چت‌های خطی به نمایش فرآیندهای پیچیده تغییر کرده است. اپلیکیشن‌های مدرن اکنون به رابط‌های تخصصی برای نمایش مراحل زنجیره تفکر (Chain-of-Thought) — شبیه وقتی شاگرد ریاضی پای تخته بلند بلند فکر می‌کند تا به جواب برسد — و برنامه‌ریزی‌های چندعاملی نیاز دارند.

در اکتبر ۲۰۲۶، shadcn/ui نسخه جدیدی از AI Elements را عرضه کرد. این مجموعه یک بسته نرم‌افزاری سنتی (npm package) نیست، بلکه مجموعه‌ای از ۲۱ الگوی طراحی است که توسعه‌دهندگان از طریق shadcn CLI آن‌ها را در پروژه‌های خود کپی می‌کنند. این الگوها بلوک‌های سازنده UX عامل‌محور را به‌طور جامع پوشش می‌دهند، از جمله:

  • ورودی‌های چت و پرامپت (Chat and Prompt Input)
  • نمایش مراحل استدلال و زنجیره تفکر (Reasoning and Chain of Thought displays)
  • رابط‌های فراخوانی ابزار، برنامه‌ریزی و مدیریت زیر-عامل‌ها (Tool call, Plan, and Subagent interfaces)

هر صفحه از این الگوها نشان می‌دهد که چگونه می‌توان رابط کاربری را از بخش‌های پیام‌های AI SDK رندر کرد. در کنار این الگوها، دو مؤلفه جهانی جدید به نام‌های Trace و Code Block معرفی شده‌اند. این دو مؤلفه به‌گونه‌ای طراحی شده‌اند که در Base UI، React Aria و Radix به‌طور یکسان کار کنند و زیربنایی منعطف‌تر از نسخه‌های قبلی فراهم آورند. این رویکرد در جهت کاهش وابستگی‌های سخت‌افزاری و نرم‌افزاری است، مشابه آنچه در معماری WorldScript Studio برای حذف وابستگی حیاتی به سرویس‌های هوش مصنوعی مشاهده کردیم.

برای مهاجرت از کتابخانه Vercel، تیم shadcn تلاش کرده است تا اصطکاک را به حداقل برساند. آن‌ها نام‌های خروجی (Export names) و ویژگی‌ها (Props) را در جاهایی که الگوها بازسازی شده‌اند، یکسان نگه داشته‌اند. برای انتقال‌های پیچیده‌تر، در هر صفحه الگو یک «پرامپت مهاجرت» (Migration Prompt) اختصاصی وجود دارد که می‌توان آن را به یک عامل کدنویسی (AI Coding Agent) داد تا به‌روزرسانی کدها را به‌طور خودکار انجام دهد. با این حال، توجه داشته باشید که المان‌هایی که بازسازی نشده‌اند، تحت پوشش این سیستم نیستند و توسعه‌دهندگان باید لیست فعلی استفاده‌های خود را با لیست جدید تطبیق دهند.

علاوه بر جایگزین رسمی shadcn، گزینه‌های دیگری نیز در اواخر ۲۰۲۶ ظهور کرده‌اند که هر کدام فلسفه متفاوتی دارند:

  • prompt-kit: مجموعه‌ای رایگان با لایسنس MIT از مؤلفه‌های اولیه است که از طریق shadcn CLI نصب می‌شود. این کیت شامل ورودی پرامپت، پیام، استدلال، زنجیره تفکر، ابزار و مؤلفه‌های آپلود فایل است. همچنین بلوک‌های نمونه‌ای مانند یک اپلیکیشن چت با سایدبار تاریخچه را ارائه می‌دهد. این ابزار بر پایه Radix ساخته شده است، به این معنی که اگر در یک پروژه Base UI استفاده شود، هر دو لایه مؤلفه در پروژه حضور خواهند داشت.
  • assistant-ui: یک چارچوب چت رایگان (MIT) است که یک فضای ابری پولی اختیاری برای ذخیره رشته‌های گفتگو (Threads) دارد. برخلاف سایرین، این ابزار Runtime مخصوص به خود را برای مدیریت گفتگو فراهم می‌کند و در کنار آن مؤلفه‌های بدون استایل (Headless) و استایل‌دار ارائه می‌دهد. این چارچوب دارای آداپتورهایی برای AI SDK، LangGraph، LangChain و AG-UI است. اگر می‌خواهید مدیریت وضعیت (State) چت بر عهده Runtime باشد، این گزینه ایده‌آل است، اما اگر وضعیت شما در useChat یا یک Store سفارشی قرار دارد، از آن بگذرید.
  • HextaUI: رویکردی «صفحه‌محور» (Screen-based) دارد. در حالی که مؤلفه‌های زیربنایی آن رایگان و MIT هستند، بلوک‌های مخصوص هوش مصنوعی تحت لایسنس HextaUI Pro (با پرداخت یک‌باره) ارائه می‌شوند. این ابزار بر پایه Base UI ساخته شده و بخش‌های پیام AI SDK را بدون نیاز به وارد کردن (Import) خودِ SDK می‌خواند. این گزینه برای کسانی که به دنبال رایگان بودن کامل هستند یا Radix را ترجیح می‌دهند، مناسب نیست.
  • shadcn-chatbot-kit و قالب‌های Vercel: ابزار shadcn-chatbot-kit از Blazity مجموعه کوچک‌تری از مؤلفه‌ها را ارائه می‌دهد. در مقابل، Vercel AI Chatbot یک اپلیکیشن کامل Next.js شامل سیستم ورود (Sign-in) و پایگاه داده است که به عنوان مرجع نهایی برای دیدن نحوه اتصال تمام قطعات به یکدیگر عمل می‌کند.

در حال حاضر اکوسیستم به دو فلسفه متمایز تقسیم شده است: «قطعات» و «صفحات». شناخت تفاوت این دو می‌تواند یک هفته از زمان توسعه شما را ذخیره کند.

قطعات (Pieces) (مانند AI Elements جدید و prompt-kit) مؤلفه‌های مجزایی مانند یک پیام، ورودی پرامپت یا مؤلفه ابزار را فراهم می‌کنند. در این حالت، توسعه‌دهنده باید کل صفحه را طراحی کند و تصمیم بگیرد وقتی پاسخ با خطا مواجه شد، استریم متوقف شد، ابزاری نیاز به تایید داشت یا آپلود فایل شکست خورد، چه اتفاقی بیفتد. قطعات رایگان و بسیار منعطف هستند.

صفحات (Screens) (مانند بلوک‌های HextaUI یا قالب Vercel AI Chatbot) کل رشته چت، بخش composer، لیست فراخوانی ابزارها و صفحات تنظیمات را با تصمیمات UX از پیش گرفته شده ارائه می‌دهند. شما صرفاً داده‌ها را متصل کرده و با استفاده از توکن‌های تم خود، استایل را تغییر می‌دهید. صفحات سریع‌تر مستقر می‌شوند اما سخت‌گیرتر (Opinionated) هستند.

در بررسی عمیق‌تر قابلیت‌های HextaUI برای کسانی که مسیر «صفحه‌محور» را انتخاب می‌کنند، این بلوک‌ها لبه‌های تیز و موارد خاص (Edge Cases) پیچیده را مدیریت می‌کنند:

  • رشته چت (Chat Thread): شامل دکمه «تلاش مجدد» برای پاسخ‌های شکست‌خورده، نشانگرهای وضعیت برای پاسخ‌های متوقف شده و امکان جابجایی بین نسخه‌ها برای ویرایش‌ها و تلاش‌های مجدد است.
  • فراخوانی ابزارها (Tool Calls): تمام وضعیت‌های ابزار در AI SDK را پشتیبانی می‌کند، از جمله تاییدات همراه با دلیل «به جای این، این کار را بکن».
  • ورودی و استریم: ورودی پرامپتی که برای زبان‌های ژاپنی و چینی ایمن است، پیشرفت آپلود را نشان می‌دهد، پیام‌هایی که هنگام دریافت پاسخ تایپ می‌شوند را در صف قرار می‌دهد و پیش‌نویس‌ها را پس از بارگذاری مجدد صفحه حفظ می‌کند. استریم و Markdown به‌گونه‌ای مدیریت شده‌اند که سینتکس‌های نیمه‌تایپ‌شده هرگز به کاربر نمایش داده نشود.
  • صفحات محصول: شامل صفحات کامل برای تنظیمات، مدل‌ها، کلیدهای API، صورت‌حساب، تیم و امنیت است.

این چرخش نشان‌دهنده یک روند کلی در تجربه توسعه است: حرکت از کتابخانه‌های صلب به سمت فهرست‌های کپی-پیست (Registries). با ادغام این الگوها در shadcn/ui، صنعت در حال تبدیل رابط‌های چت هوش مصنوعی به مؤلفه‌های استاندارد UI است، نه پلاگین‌های خاص.

توسعه‌دهندگان باید مؤلفه‌های فعلی پشته (Stack) خود را ارزیابی کنند. ترکیب یک کیت مبتنی بر Radix در یک پروژه Base UI ممکن است، اما باعث افزایش حجم نهایی باندل (Bundle size) می‌شود زیرا هر دو لایه مؤلفه را ارسال می‌کند.

برای تصمیم‌گیری درباره گام بعدی:

  • اگر پروژه جدیدی را شروع می‌کنید و می‌خواهید خودتان آن را ترکیب کنید: از AI Elements در shadcn/ui استفاده کنید.
  • اگر در حال حاضر از AI Elements شرکت Vercel استفاده می‌کنید: آن‌ها را نگه دارید تا زمانی که به قابلیت جدیدی نیاز پیدا کنید، سپس الگوها را یکی‌یکی منتقل کنید.
  • اگر به یک Runtime برای مدیریت رشته‌ها، شاخه‌بندی (Branching) و ماندگاری داده‌ها نیاز دارید: از assistant-ui استفاده کنید.
  • اگر می‌خواهید صفحات چت و محصول به همراه مدیریت وضعیت‌های خطا به‌طور کامل آماده باشند: از HextaUI استفاده کنید.

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

چرا این موضوع مهم است؟

این انتقال باعث می‌شود رابط‌های پیچیده استدلالی از حالت آزمایشی خارج شده و به استانداردهای صنعتی تبدیل شوند. توسعه‌دهندگان با تکیه بر اعتبار shadcn/ui، سرعت تبدیل ایده‌های عامل‌محور به محصول واقعی را افزایش می‌دهند.

تأثیر برای ایران

برای توسعه‌دهندگان ایرانی که از Next.js و shadcn استفاده می‌کنند، این انتقال مسیر ساخت اپلیکیشن‌های AI را ساده‌تر می‌کند، زیرا نیازی به پیاده‌سازی دستی رابط‌های پیچیده استدلال نیست.

·نگاه ما
تحریریه دات‌هوش

جایگزینی کتابخانه‌های بسته با مدل‌های Registry (کپی-پیست) نشان می‌دهد که توسعه‌دهندگان دیگر نمی‌خواهند وابستگی‌های سنگین (Dependency) به پکیج‌های خارجی داشته باشند. این رویکرد اجازه می‌دهد هر شرکت استایل و منطق رابط کاربری خود را بدون محدودیت‌های نسخه-بندی تغییر دهد. در واقع، UI برای هوش مصنوعی در حال تبدیل شدن به یک «زبان مشترک» است، درست مثلما Tailwind CSS ظاهر وب را استاندارد کرد.

منابع

این گزارش با خط‌لولهٔ خودکار دات‌هوش از منابع معتبر جهانی تدوین و زیر نظر تحریریه منتشر شده است. روش کار ما

گفتگو

پنج‌شنبه‌های هوش‌محور

بسته‌ی هفتگی دات‌هوش

۵ خبر، ۲ ابزار، ۱ پرامپت در هر شماره. به‌زودی راه‌اندازی می‌شود — هر پنج‌شنبه صبح.

خبر کلیدی
ابزار کاربردی
پرامپت حرفه‌ای
تحلیل پژوهش
به‌زودی
زاویه‌ی ایرانی
به‌زودی
تمرین این هفته
به‌زودی

راهنماهای دات‌هوش

راهنماهای کاربردیِ دات‌هوش برای کار با هوش مصنوعی — از همین‌جا شروع کنید:

دات‌هوش

راهنمای فارسی هوش مصنوعی — با نگاه به ایران

اخبار روزانه، معرفی ابزارها و مدل‌ها، و آموزشِ کار با هوش مصنوعی؛ همیشه با این پرسش که از ایران چه چیزی کار می‌کند و چه چیزی نه.