ai-elements
بناء واجهات دردشة الذكاء الاصطناعي
إنشاء مكونات واجهة دردشة الذكاء الاصطناعي الحديثة باستخدام عناصر واجهة مستخدم مُجمَّعة مسبقًا وقابلة للتكوين تتبع أنماط shadcn/ui واصطلاحات Vercel AI SDK.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "ai-elements". Add a message component for displaying AI responses
Résultat attendu:
سيتم إنشاء المكون في components/ai-elements/message.tsx مع المكونات الفرعية Message وMessageContent وMessageResponse. يتم تصميم رسائل المستخدم بشكل مختلف عن رسائل المساعد باستخدام الخاصية 'from'.
Utilisation de "ai-elements". Add file attachment support to my chat
Résultat attendu:
ينشئ مكونات لعرض مرفقات الملفات مع صور مصغرة للمعاينة. يدعم ال��ور وملفات PDF والملفات العامة مع روابط التنزيل. يتكامل مع تدفق المحادثة.
Utilisation de "ai-elements". Add code block with syntax highlighting
Résultat attendu:
ينشئ مكون CodeBlock مع اكتشاف اللغة وأرقام الأسطر ووظيفة النسخ إلى الحافظة. يدعم لغات برمجة متعددة خارج الصندوق.
Audit de sécurité
SûrThis is a legitimate Vercel AI Elements UI component library. Static scanner flagged many findings that are false positives: markdown documentation uses backticks for code examples (not Ruby execution), and example components contain base64-encoded images which trigger C2/encryption false positives. All network access is for CDN resources. No actual security risks identified.
Facteurs de risque
⚙️ Commandes externes (2409)
📁 Accès au système de fichiers (6)
🌐 Accès réseau (57)
🔑 Variables d’environnement (9)
⚡ Contient des scripts (1)
Score de qualité
Ce que vous pouvez construire
بناء تطبيقات دردشة AI
إنشاء واجهات دردشة AI كاملة بسرعة مع فقاعات الرسائل والمرفقات والاستجابات المبثوثة باستخدام مكونات مُجمَّعة مسبقًا.
إنشاء أدوات المطورين
إضافة شاشات تنفيذ التعليمات البرمجية ومخرجات الطرفية وألواح نتائج الأدوات لإنشاء مساعدي برمجة AI يشبهون IDE.
إضافة دعم الصوت والوسائط
دمج الإدخال الصوتي وتشغيل الصوت ومعالجة الرسائل متعددة الوسائط في واجهات محادثة AI.
Essayez ces prompts
أضف مكون رسالة إلى واجهة الدردشة الخاصة بي باستخدام ai-elements. أحتاج أنماط رسائل المستخدم والمساعد مع دعم المحتوى النصي.
أضف دعم مرفقات الملفات إلى الدردشة باستخدام مكون attachments من ai-elements. ادعم الصور والمستندات مع صور مصغرة للمعاينة.
أضف عرض الاستجابة المبثوثة إلى دردشة AI الخاصة بي باستخدام ai-elements. ضمن مؤشر الكتابة وعرض النص التدريجي.
أضف مكون كتلة تعليمات برمجية مع تمييز بناء الجملة باستخدام ai-elements. ضمن زر النسخ وتسمية اللغة.
Bonnes pratiques
- استخدم نمط تكوين المكونات - استورد المكونات الفرعية مثل MessageContent بشكل منفصل للتحكم في دقة العرض
- خصص من خلال الخاصية className بدلاً من تعديل الملفات المصدرية - مما يسهل التحديث إلى الإصدارات الأحدث
- استخدم hook_useChat من AI SDK لإدارة حالة الرسالة - المكونات مصممة للعمل معه خارج الصندوق
Éviter
- تعديل ملفات المكونات المصدرية مباشرة - يقطع مسار الترقية ويجعل التحديثات صعبة
- استخدام المكونات بدون تكامل AI SDK - مصممة للعمل مع hook_useChat للحصول على الوظائف الكاملة
- تجاهل تبعية shadcn/ui - المكونات تتطلب Tailwind CSS وتكوين shadcn/ui