ai-elements
KI-Chat-Oberflächen erstellen
Erstellen Sie moderne KI-Chat-Komponenten mit vorgefertigten, zusammensetzbaren UI-Elementen, die shadcn/ui-Muster und Vercel AI SDK-Konventionen folgen.
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". Eine Nachrichtenkomponente zum Anzeigen von KI-Antworten hinzufügen
Résultat attendu:
Die Komponente wird unter components/ai-elements/message.tsx erstellt mit Message, MessageContent und MessageResponse-Unterkomponenten. Benutzernachrichten werden anders gestaltet als Assistent-Nachrichten mit der 'from'-Prop.
Utilisation de "ai-elements". Dateianhang-Unterstützung zu meinem Chat hinzufügen
Résultat attendu:
Erstellt Komponenten zum Anzeigen von Dateianhängen mit Vorschaubildern. Unterstützt Bilder, PDFs und generische Dateien mit Download-Links. Integriert sich in den Konversationsfluss.
Utilisation de "ai-elements". Code-Block mit Syntaxhervorhebung hinzufügen
Résultat attendu:
Erstellt eine CodeBlock-Komponente mit Spracherkennung, Zeilennummern und Kopieren-in-Zwischenablage-Funktionalität. Unterstützt mehrere Programmiersprachen sofort einsatzbereit.
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
KI-Chat-Anwendungen erstellen
Erstellen Sie schnell vollständige KI-Chat-Oberflächen mit Nachrichtenblasen, Anhängen und Streaming-Antworten mit vorgefertigten Komponenten.
Entwickler-Tools erstellen
Fügen Sie Code-Ausführungsanzeigen, Terminal-Ausgaben und Tool-Ergebnispanels hinzu, um IDE-ähnliche KI-Coding-Assistenten zu erstellen.
Sprach- und Medienunterstützung hinzufügen
Integrieren Sie Spracheingabe, Audio-Wiedergabe und Multimedia-Nachrichtenverarbeitung in konversationelle KI-Oberflächen.
Essayez ces prompts
Füge eine Nachrichtenkomponente zu meiner Chat-Oberfläche mit ai-elements hinzu. Ich benötige Benutzer- und Assistent-Nachrichtenstile mit Textinhalt-Unterstützung.
Füge Dateianhang-Unterstützung zum Chat mit der ai-elements attachments-Komponente hinzu. Unterstütze Bilder und Dokumente mit Vorschaubildern.
Füge eine Streaming-Antwortanzeige zu meinem KI-Chat mit ai-elements hinzu. Einschließlich Tipp-Indikator und progressivem Text-Rendering.
Füge eine Code-Block-Komponente mit Syntaxhervorhebung mit ai-elements hinzu. Einschließlich Kopier-Button und Sprachlabel.
Bonnes pratiques
- Verwenden Sie das Komponenten-Zusammensetzungsmuster – importieren Sie Unterkomponenten wie MessageContent separat, um die Rendering-Granularität zu steuern
- Passen Sie über die className-Prop an, anstatt Quelldateien zu ändern – erleichtert die Aktualisierung auf neuere Versionen
- Verwenden Sie den AI SDK useChat-Hook für Nachrichten-Zustandsverwaltung – Komponenten sind so konzipiert, dass sie sofort damit funktionieren
Éviter
- Direktes Ändern von Quellkomponenten-Dateien – unterbricht den Aktualisierungspfad und erschwert Updates
- Verwenden von Komponenten ohne AI SDK-Integration – für volle Funktionalität mit useChat-Hook konzipiert
- Ignorieren der shadcn/ui-Abhängigkeit – Komponenten erfordern Tailwind CSS und shadcn/ui-Konfiguration