Shadify: توصیف رابط کاربری با زبان ساده، تحویل کد ریاکت
ریاکت
هوش مصنوعی
فرانتاندخلاصهٔ کاملتر
Shadify یه پروژهٔ متنباز از تیم CopilotKit ـه با یه ایدهٔ روشن: رابط کاربریت رو به انگلیسی ساده توصیف کن، یه صفحهٔ زنده و تعاملی با shadcn/ui تحویل بگیر و بعد همون رو بهشکل کد تمیز ریاکت خروجی بده.
نکتهای که تو معرفی پروژه روش تأکید شده اینه که مدل کد رابط رو از صفر نمیسازه، بلکه از کامپوننتهای واقعی shadcn ترکیب میسازه — کارت، چارت، فرم، منو و لیاوت. نتیجهش اینه که هر صفحهٔ تولیدشده دسترسپذیر و تمیزه و دقیقاً از همون کامپوننتهایی استفاده میکنه که خودت هم تو پروژهت نصب میکردی.
لایهٔ ارتباطی کار با CopilotKit انجام میشه که UI ساختاریافته رو بهصورت بلادرنگ از ایجنت به مرورگر استریم میکنه. مهمتر از اون، اسکیمای کامل کامپوننتها رو بهعنوان کانتکست به ایجنت پاس میده، پس مدل دقیقاً میدونه چه چیزهایی رو مجازه بسازه — همین قید باعث میشه خروجی توهمی نداشته باشه.
مغز متفکر پشت صحنه LangGraph ـه که استدلال، استفاده از ابزار و حافظهٔ گفتوگو بین نوبتها رو به عهده داره. از ابزارها هم جستوجوی وب و استخراج محتوای سایت از طریق Tavily در دسترس ایجنته، یعنی میتونه برای ساختن صفحه به منابع بیرونی هم سر بزنه.
معماریش سه سرویس تو یه مونوریپوی pnpm ـه: رابط کاربری با ریاکت و Vite، یه runtime با Hono و CopilotKit که پیامها رو به ایجنت مسیردهی میکنه، و خود ایجنت با FastAPI و LangGraph. برای اجرای لوکال بعد از نصب وابستگیها فقط باید کلیدهای OpenAI و Tavily رو تو فایلهای env دو سرویس بذاری.
برای استقرار هم هر سه سرویس از یه فایل render.yaml روی Render بالا میآن و به گفتهٔ سازندهها، Render آدرس سرویسها رو خودکار به هم وصل میکنه. کد پروژه با لایسنس MIT منتشر شده.
نکات کلیدی:
- تبدیل توصیف متنی به صفحهٔ زندهٔ shadcn/ui با امکان خروجیگرفتن کد ریاکت
- ترکیب از کامپوننتهای واقعی shadcn بهجای تولید کد آزاد و غیرقابلاتکا
- پاسدادن اسکیمای کامپوننتها به ایجنت بهعنوان کانتکست توسط CopilotKit
- ایجنت مبتنی بر LangGraph با جستوجوی وب و حافظهٔ گفتوگو
- سه سرویس در یه مونوریپوی pnpm و انتشار با لایسنس MIT
