Telegram, Gemini ve Google Stitch ile AI Destekli UI Tasarım Asistanı 🎨🖼️

Genel Bakış

Bu iş akışı, Telegram üzerinden doğal dil kullanarak Google Gemini'nin yapay zeka yeteneklerini ve Google Stitch (MCP) platformunun tasarım yönetimi özelliklerini bir araya getirerek, UI tasarım projelerini sohbet tabanlı bir arayüzle yönetmenizi ve yeni ekranlar oluşturmanızı sağlar. Amacı, tasarım sürecini daha etkileşimli ve hızlı hale getirmektir.

Gereksinimler

• n8n Hesabı: İş akışını barındırmak ve çalıştırmak için bir n8n Cloud veya kendi kendine barındırılan n8n kurulumu.
• Telegram Bot: Telegram'da bir bot oluşturulmuş ve API token'ı alınmış olmalı. (BotFather üzerinden oluşturulur).
• Google Gemini API Anahtarı: Google AI Studio'dan veya Google Cloud Platform'dan bir Gemini API anahtarı edinilmiş olmalı.
• Google Stitch (MCP) Erişimi: Google Stitch platformuna erişiminiz ve gerekli kimlik bilgileriniz (API anahtarı veya servis hesabı) olmalı. Bu iş akışı mcpClientTool node'unu kullanır, bu da Stitch API'sine erişim için uygun kimlik doğrulama ayarlarının yapılmasını gerektirir.

Kurulum Adımları

1. n8n İş Akışını İçe Aktarma: Bu iş akışı JSON'unu n8n arayüzünüze içe aktarın.
2. Telegram Tetikleyiciyi Yapılandırma:
   • Telegram Trigger node'una tıklayın.
   • 'Credential' alanında yeni bir Telegram Bot API credential'ı oluşturun.
   • BotFather'dan aldığınız Telegram Bot Token'ı buraya yapıştırın.
   • Webhook URL'sini n8n kurulumunuzun URL'si ile güncelleyin (genellikle otomatik olarak doldurulur).
3. Google Gemini Credential'ını Yapılandırma:
   • LM Chat Google Gemini node'una tıklayın.
   • 'Credential' alanında yeni bir Google Gemini API credential'ı oluşturun.
   • Google AI Studio'dan aldığınız Gemini API anahtarınızı buraya girin.
4. Google Stitch (MCP) Credential'ını Yapılandırma:
   • MCP Client Tool node'una tıklayın.
   • 'Credential' alanında Google Stitch (MCP) için uygun kimlik bilgilerini ayarlayın. Bu genellikle bir API anahtarı, OAuth 2.0 veya servis hesabı anahtarı olabilir. Stitch platformunun gerektirdiği kimlik doğrulama yöntemine göre yapılandırın.
5. İş Akışını Aktive Etme: Tüm credential'lar doğru bir şekilde ayarlandıktan sonra, n8n arayüzünün sağ üst köşesindeki 'Activate' (Aktif Et) düğmesine tıklayarak iş akışını etkinleştirin.

Kullanım Senaryoları

• Senaryo 1: Yeni Tasarım Projesi Oluşturma: Telegram botunuza "Yeni bir proje oluştur: Mobil Uygulama Ana Sayfası" gibi bir mesaj göndererek yeni bir tasarım projesi başlatabilirsiniz.
• Senaryo 2: UI Ekranı Oluşturma: "Mobil uygulama için bir giriş ekranı tasarla: Kullanıcı adı, şifre alanları ve 'Giriş Yap' butonu içersin, modern ve minimalist bir tarzda olsun." gibi detaylı bir açıklama ile doğrudan bir UI ekranı oluşturabilirsiniz. Gemini AI bu açıklamayı yorumlayacak ve Stitch aracılığıyla ekranı oluşturmaya çalışacaktır.
• Senaryo 3: Mevcut Projeleri Listeleme: "Projelerimi listele" komutuyla mevcut tasarım projelerinizi görüntüleyebilirsiniz.
• Senaryo 4: Belirli Bir Ekranı Getirme: "'Mobil Uygulama Ana Sayfası' projesindeki 'Giriş Ekranı'nı getir" gibi bir komutla belirli bir ekranın detaylarını alabilirsiniz.

İpuçları ve Öneriler

• Detaylı Komutlar: Gemini AI'dan en iyi sonuçları almak için UI ekranı oluştururken mümkün olduğunca detaylı ve spesifik açıklamalar kullanın (renk paleti, düzen, öğeler, stil vb.).
• Bellek Kullanımı: Memory Buffer Window node'u, sohbet geçmişini koruyarak daha bağlamsal yanıtlar almanızı sağlar. Bu, uzun süreli tasarım konuşmaları için faydalıdır.
• Hata Yönetimi: If node'u, belirli koşullara göre farklı yollar izlemenizi sağlar. Hata durumlarını veya beklenmedik girdileri yönetmek için ek If veya Try/Catch blokları eklemeyi düşünebilirsiniz.
• Perplexity Tool: Perplexity Tool node'u, Gemini'nin bilgi tabanını genişletmek için harici bilgi kaynaklarına erişim sağlayabilir. Tasarım trendleri veya belirli UI/UX prensipleri hakkında bilgi almak için kullanılabilir.
• Kod Node'u: Code node'u, karmaşık veri dönüşümleri veya özel mantık uygulamak için kullanılabilir. Örneğin, Gemini'den gelen çıktıyı Stitch API'sinin beklediği formata dönüştürmek için.
• Test ve Yineleme: İlk denemelerde mükemmel sonuçlar beklemeyin. Farklı komutlar ve açıklamalarla denemeler yaparak AI'ın yeteneklerini ve sınırlarını keşfedin.