Die Arbeitsweise
AI Elements führt einen Agenten durch das Hinzufügen speziell für Chats entwickelter Komponenten zu einer bestehenden Next.js-Anwendung. Es behandelt Gesprächsansichten, Nachrichteninhalte, Werkzeuganzeigen und Prompt-Eingaben. Die Komponenten liegen in Ihrem Repository, sodass sich die Oberfläche an die eigenen Gestaltungs- und Interaktionsanforderungen des Produkts anpassen lässt.
Die Quelle verbindet diese Komponenten mit dem AI SDK und den Konventionen von shadcn/ui. Ihre Beispiele setzen Nachrichtenbausteine um einzelne Textteile herum zusammen, statt die Antwort des Assistenten als ein einziges, nicht weiter aufgeschlüsseltes Widget zu behandeln. Damit eignet sich der Skill besonders, wenn die Modellanbindung bereits besteht und als Nächstes eine übersichtliche Oberfläche zum Lesen und Antworten benötigt wird.
Erwartete Ergebnisse
- Ausgewählte Komponenten-Quelldateien im konfigurierten Komponentenverzeichnis des Projekts.
- Eine React-Gesprächsansicht aus Nachrichten- und Antwortbausteinen.
- Projektspezifische Gestaltung und eine Erklärung noch ungelöster Integrationsprobleme.
Vom Briefing zur Prüfung
- 01Die bestehende Anwendung prüfen
Prüfen Sie den Paket-Runner, die Next.js-Einrichtung, die AI SDK-Abhängigkeiten und die shadcn-Konfiguration. Prüfen Sie Import-Aliase und globale Styles, bevor Sie Komponenten hinzufügen.
- 02Die benötigten Oberflächenbausteine hinzufügen
Verwenden Sie den Paket-Runner des Projekts mit dem unterstützten Komponenten-Installer. Wählen Sie die für das Gespräch benötigten Bausteine und prüfen Sie die zum Repository hinzugefügten Dateien.
- 03Verbinden und anpassen
Ordnen Sie die Rolle jeder Nachricht Message zu, verschachteln Sie darin MessageContent und rendern Sie Textteile wie im Quellbeispiel mit MessageResponse. Werkzeugergebnisse benötigen eine eigene unterstützte Darstellung; aus dem reinen Textbeispiel lässt sich deren Anzeige nicht ableiten. Passen Sie lokale Tailwind-Klassen an und prüfen Sie die entstehenden Gesprächszustände.