پروژه Beautiful UI؛ یه مجموعه کامپوننت خوش‌ساخت برای AI Agentها
اگه تا حالا برای یه محصول مبتنی بر AI یا Agent رابط کاربری ساخته باشید، احتمالاً دیدید که کتابخونه‌های معمول UI برای یه سری از تعامل‌های جدید، چیز درست‌وحسابی‌ای ندارن؛ مثلاً نمایش فکرکردن مدل، اجرای ابزارها، گرفتن تأیید از کاربر یا نشون‌دادن روند انجام تسک‌ها.
Beautiful UI یه مجموعه از کامپوننت‌های آماده و قابل Copy/Pasteـه که دقیقاً برای همین کارها طراحی شده:
▫️ نمایش Loading و زمان سپری‌شده
▫️ نمایش مراحل Thinking، Search و Coding
▫️ استریم پاسخ همراه با منابع و پیشنهادهای بعدی
▫️ گرفتن تأیید کاربر قبل از انجام کارهای حساس
▫️ نمایش Tool Callها به‌شکل چیپ‌های جمع‌وجور
▫️ نشون‌دادن وضعیت زنده‌ی تسک‌های Agent
▫️ چت، Prompt Bar و Recommendation Card
▫️ جدول داده، Diff Table، Code Block و Sidebar
چیزی که Beautiful UI رو جالب می‌کنه اینه که فقط یه ظاهر خوشگل برای ساختن یه ChatGPT Clone دیگه نیست. بیشتر رفته سراغ تعامل‌هایی که مخصوص Agentها هستن؛ یعنی جاهایی که کاربر باید بفهمه Agent الان داره چی‌کار می‌کنه، کجا منتظر تصمیم اونه و کار تا کجا پیش رفته.
البته Beautiful UI یه Skill یا سرویس SaaS نیست و فعلاً بهتره به چشم یه مجموعه کامپوننت Copy/Paste و مرجع طراحی بهش نگاه کنید. کامپوننت یا ایده‌ای که به کارتون میاد رو برمی‌دارید و متناسب با پروژه‌ی خودتون تغییرش می‌دید.
پروژه با مجوز MIT منتشر شده و اگه روی محصولات AI، Agentها یا فرایندهای Human-in-the-loop کار می‌کنید، احتمالاً ایده‌های خیلی خوبی ازش می‌گیرید.
🔗 https://www.beautifului.dev/
#AI #AIAgents #UI #UX #Frontend #WebDesign
اگه تا حالا برای یه محصول مبتنی بر AI یا Agent رابط کاربری ساخته باشید، احتمالاً دیدید که کتابخونه‌های معمول UI برای یه سری از تعامل‌های جدید، چیز درست‌وحسابی‌ای ندارن؛ مثلاً نمایش فکرکردن مدل، اجرای ابزارها، گرفتن تأیید از کاربر یا نشون‌دادن روند انجام تسک‌ها.
Beautiful UI یه مجموعه از کامپوننت‌های آماده و قابل Copy/Pasteـه که دقیقاً برای همین کارها طراحی شده:
▫️ نمایش Loading و زمان سپری‌شده
▫️ نمایش مراحل Thinking، Search و Coding
▫️ استریم پاسخ همراه با منابع و پیشنهادهای بعدی
▫️ گرفتن تأیید کاربر قبل از انجام کارهای حساس
▫️ نمایش Tool Callها به‌شکل چیپ‌های جمع‌وجور
▫️ نشون‌دادن وضعیت زنده‌ی تسک‌های Agent
▫️ چت، Prompt Bar و Recommendation Card
▫️ جدول داده، Diff Table، Code Block و Sidebar
چیزی که Beautiful UI رو جالب می‌کنه اینه که فقط یه ظاهر خوشگل برای ساختن یه ChatGPT Clone دیگه نیست. بیشتر رفته سراغ تعامل‌هایی که مخصوص Agentها هستن؛ یعنی جاهایی که کاربر باید بفهمه Agent الان داره چی‌کار می‌کنه، کجا منتظر تصمیم اونه و کار تا کجا پیش رفته.
البته Beautiful UI یه Skill یا سرویس SaaS نیست و فعلاً بهتره به چشم یه مجموعه کامپوننت Copy/Paste و مرجع طراحی بهش نگاه کنید. کامپوننت یا ایده‌ای که به کارتون میاد رو برمی‌دارید و متناسب با پروژه‌ی خودتون تغییرش می‌دید.
پروژه با مجوز MIT منتشر شده و اگه روی محصولات AI، Agentها یا فرایندهای Human-in-the-loop کار می‌کنید، احتمالاً ایده‌های خیلی خوبی ازش می‌گیرید.
🔗 https://www.beautifului.dev/
#AI #AIAgents #UI #UX #Frontend #WebDesign
www.beautifului.dev
Beautiful UI — Crafted primitives for AI-native interfaces
A small library of extremely crafted, copy-paste components for chat agents, thinking states, human-in-the-loop approvals, and everything agents need to talk to humans beautifully.
❤13👍1