Çalışma Yaklaşımı
AI Elements, mevcut bir Next.js uygulamasına amaca özel sohbet bileşenleri eklemesi için ajana yol gösterir. Konuşma görünümlerini, mesaj içeriğini, araç gösterimlerini ve istem girişlerini kapsar. Bileşenler kendi deponuzda yer aldığı için arayüz, ürünün stil ve etkileşim gereksinimlerine uyarlanabilir.
Kaynak, bu bileşenleri AI SDK ve shadcn/ui kurallarıyla ilişkilendirir. Örnekler, asistan yanıtını iç yapısı kapalı tek bir bileşen olarak ele almak yerine metin parçaları çevresinde temel mesaj bileşenlerini birleştirir. Böylece skill, model entegrasyonu zaten mevcutken sıradaki iş kullanıcılara okumak ve yanıt vermek için tutarlı bir arayüz sunmak olduğunda yararlı olur.
Beklenen Çıktılar
- Projenin yapılandırılmış bileşen dizinine eklenen, seçilmiş bileşen kaynak dosyaları.
- Temel mesaj ve yanıt bileşenlerinden oluşturulmuş bir React konuşma görünümü.
- Projeye özgü stiller ve henüz çözülmemiş entegrasyon sorunlarının açıklaması.
Brifden İncelemeye
- 01Mevcut uygulamayı kontrol edin
Paket çalıştırma aracını, Next.js kurulumunu, AI SDK bağımlılıklarını ve shadcn yapılandırmasını inceleyin. Bileşen eklemeden önce içe aktarma takma adlarını ve genel stilleri doğrulayın.
- 02Gerekli arayüz parçalarını ekleyin
Projenin paket çalıştırma aracını desteklenen bileşen yükleyicisiyle kullanın. Konuşmanın ihtiyaç duyduğu parçaları seçin ve depoya eklenen dosyaları inceleyin.
- 03Bağlayın ve özelleştirin
Kaynak örnekteki gibi her mesajın rolünü Message ile eşleyin, MessageContent bileşenini bunun içine yerleştirin ve metin parçalarını MessageResponse ile işleyin. Araç sonuçları, yalnızca metne yönelik bu örnekle görüntülenecekleri varsayılmadan, kendilerine uygun ve desteklenen bir gösterimle sunulmalıdır. Yerel Tailwind sınıflarını düzenleyin ve ortaya çıkan konuşma durumlarını inceleyin.