L'approccio di lavoro
AI Elements guida un agente nell’aggiunta di componenti specifici per la chat a un’applicazione Next.js esistente. Copre viste di conversazione, contenuti dei messaggi, viste degli strumenti e input dei prompt. I componenti risiedono nel tuo repository, così l’interfaccia può rispettare i requisiti di stile e interazione del prodotto.
La fonte collega questi componenti all’AI SDK e alle convenzioni di shadcn/ui. Gli esempi assemblano componenti base dei messaggi attorno alle parti di testo, anziché trattare la risposta dell’assistente come un unico widget opaco. Lo Skill è quindi utile quando l’integrazione del modello esiste già e il passo successivo è offrire agli utenti un’interfaccia coerente per leggere e rispondere.
Risultati attesi
- I file sorgente dei componenti selezionati, aggiunti alla directory dei componenti configurata nel progetto.
- Una vista di conversazione React composta da componenti base per messaggi e risposte.
- Stili specifici del progetto e una spiegazione degli eventuali problemi di integrazione ancora irrisolti.
Dal brief alla revisione
- 01Esamina l’applicazione esistente
Controlla lo strumento di esecuzione dei pacchetti, la configurazione di Next.js, le dipendenze dell’AI SDK e la configurazione shadcn. Verifica alias di importazione e stili globali prima di aggiungere componenti.
- 02Aggiungi gli elementi necessari dell’interfaccia
Usa lo strumento di esecuzione dei pacchetti del progetto con l’installer di componenti supportato. Seleziona gli elementi necessari alla conversazione ed esamina i file aggiunti al repository.
- 03Collega e personalizza
Associa il ruolo di ogni messaggio a Message, annida MessageContent e visualizza le parti di testo con MessageResponse, come nell’esempio della fonte. I risultati degli strumenti richiedono una propria visualizzazione supportata: non va presunto che l’esempio limitato al testo li visualizzi. Adatta le classi Tailwind locali ed esamina gli stati di conversazione risultanti.