- OpenAI’nin duyurduğu ChatGPT Apps, geliştiricilerin kendi uygulamalarını doğrudan ChatGPT konuşmalarının içine gömmesine olanak tanıyor ve haftalık 800 milyondan fazla aktif kullanıcıyı yeni bir dağıtım kanalı olarak kullanabilmelerini sağlıyor
- ChatGPT artık yalnızca metin yanıtları vermenin ötesine geçerek UI bileşenlerini doğrudan render edebiliyor; bu sayede rezervasyon, alışveriş ve veri sorgulama gibi gerçek işler konuşma akışı içinde gerçekleştirilebiliyor
- Bu yapının merkezinde Model Context Protocol(MCP) bulunuyor; sistem, LLM’in harici araçları ve UI kaynaklarını seçmeli olarak çağırması şeklinde çalışıyor
- ChatGPT uygulamaları, arka uç (MCP sunucusu) ile ön ucu (UI bileşenleri) net biçimde ayıran bir mimariye sahip ve React tabanlı mini uygulamaları güvenli bir sandbox içinde çalıştırıyor
- MCP ve ChatGPT Apps deseni, ileride Claude gibi diğer ajanlara da genişleyecek; konuşmalı yapay zeka ile mevcut SaaS’ı birbirine bağlayan yeni bir arayüz katmanı haline geliyor
ChatGPT Apps’e genel bakış
- ChatGPT Apps, geliştiricilerin ve ürün ekiplerinin uygulamaları doğrudan ChatGPT konuşmalarının içine yerleştirmesini sağlayan bir özellik
- Kullanıcılar, konuşma sırasında otel rezervasyonu, emlak arama ve online alışveriş gibi işlemleri doğrudan ChatGPT içinde gerçekleştirebiliyor
- Haftalık 800 milyondan fazla aktif kullanıcıya sahip bir platform olarak, yeni nesil bir dağıtım kanalı olma potansiyeline sahip
ChatGPT Apps nasıl çalışır
- Tüm LLM’ler (ChatGPT, Claude, Gemini) web arama, dosya okuma, kod çalıştırma ve artifact oluşturma gibi yalnızca sınırlı araçları kullanabilir
- ChatGPT Apps, geliştiricilerin MCP araçları üzerinden LLM’e yeni araçlar sunmasına ve kullanıcıların bunları kolayca kurup kullanmasına imkan verir
- Uygulama olmadan kısa süreli konaklama rezervasyonu yapmaya çalışırsanız, yalnızca fotoğraflar ve kural bilgileri döner; gerçek rezervasyon yapılamaz
- Uygulama kurulduğunda ise isteğe uygun Airbnb konaklama listesi alınabilir ve doğrudan rezervasyon yapılabilir
Uygulamanın üç bileşeni
-
MCP sunucusu (arka uç)
- ChatGPT’nin iletişim kurduğu sunucudur; Python veya Node.js ile yazılır
- Bir API gibi çalışır ve ChatGPT’nin çağırabileceği "araçları" (fonksiyonları) tanımlar
- Örnek:
search_restaurants, book_ticket
-
Bileşenler (ön uç)
- Kullanıcının gördüğü etkileşimli UI
- Genellikle React ile geliştirilir ve ChatGPT içindeki güvenli sandbox’ta çalışır
- ChatGPT konuşmasının içinde yaşayan bir mini web uygulaması gibi düşünülebilir
-
ChatGPT (host)
- Uygulama, ChatGPT içinde gömülü bir görünümde gösterilir
- ChatGPT, kullanıcının konuşmasına ve etkinleştirilmiş uygulamalara göre uygulamayı ne zaman çağıracağına karar verir
Çalışma akışı
- Kullanıcı kısa süreli konaklama konusunda yardım istediğinde ChatGPT otomatik olarak birden fazla adım uygular:
- Uygulamanın faydalı olup olmayacağını değerlendirir
- Uygulamaya bağlanarak kullanılabilir araçları kontrol eder (ör. Book Listing, Browse Listing)
- Browse Listing aracını çağırıp en iyi 5 konaklamayı döndürür
- Kullanıcıya en iyi 5 konaklamayı sunar
- Bu iş akışı, MCP(Model Context Protocol) temelinde çalışır
- AI ajanı (ChatGPT), hedefe ulaşmaya yardımcı araçlara erişim alır ve kullanıcı isteği geldiğinde bu araçları seçmeli olarak kullanır
- Araçlar, iki sayıyı toplayan bir hesap makinesi kadar basit ya da görsel üretimi gibi karmaşık arka uç süreçleri kadar gelişmiş olabilir
Görüntüleme modları
- ChatGPT Apps üç farklı UI görüntüleme modunu destekler
-
Satır içi mod
- Uygun kullanım: listeler, kartlar, küçük görselleştirmeler
- Tüm uygulamalar için varsayılan moddur; gerektiğinde başka bir moda geçilebilir
- Örnek: ürün karuseli, restoran listesi
-
Tam ekran mod
- Uygun kullanım: haritalar, karmaşık formlar, veri yoğun dashboard’lar
- Bileşen tüm ChatGPT penceresini kaplar
- Daha fazla alan gerektiğinde veya karmaşık bir işe odaklanmak gerektiğinde kullanılır
- Örnek: etkileşimli emlak haritası, spreadsheet editörü
-
PiP(Picture-in-Picture) modu
- Uygun kullanım: kalıcı araçlar, oyunlar, gerçek zamanlı güncellemeler
- Bileşen ekranın üst kısmında küçük bir pencere olarak görünür
- Kullanıcı sohbete devam ederken görünmeye devam etmesi gereken şeyler için uygundur
- Örnek: zamanlayıcı, müzik çalar, tic-tac-toe oyunu
- Görüntüleme modları arasında geçiş planlanıyorsa UX desenleri konusunda daha fazla dikkat gerekir
Kısıtlar
-
Her turda tek bileşen
- ChatGPT, bileşen döndüren bir aracı çağırdığında o tur sona erer
- Birden fazla UI döndüren araç otomatik olarak zincirlenemez
- Örnek: "Restoran rezervasyonu yap ve bana Uber çağır" isteğinde önce restoran bileşeni gösterilir; rezervasyondan sonra takip eden bir tetikleyiciyle Uber bileşeni gösterilir
-
Bileşen durumunun kapsamı sınırlıdır
- Her bileşen örneği, yalnızca ilgili mesaj içinde yaşayan kendi durumuna sahiptir
- ChatGPT bileşenle birlikte yeni bir mesaj oluşturduğunda, varsayılan olarak boş durumlu yeni bir örnek oluşur
- Durum yönetimi için arka uçta kalıcılık ve sorgulama gerekir
-
Doğrudan DOM erişimi yok
- Bileşenler güvenli bir sandbox (iframe) içinde çalıştığı için üstteki ChatGPT sayfasına erişemez veya rastgele script çalıştıramaz
- Tüm iletişim
window.openai API’si üzerinden yapılır
-
Performans önemlidir
- Bileşen durumu her istekte AI modele gönderilir
- Büyük payload’lar yanıt hızını düşürdüğü için yalnızca gerekli olanı gönderin
Gerçek kullanım örnekleri
-
E-ticaret ve alışveriş
- Fiyat filtreleme, sepete ekleme ve ödeme (genellikle ana uygulamaya yönlendirilir) destekleyen etkileşimli ürün katalogları oluşturma
-
İş araçları
- Kullanıcıların sütunlar arasında görev sürükleyebildiği, son tarih belirleyebildiği ve durum güncelleyebildiği bir Kanban panosu oluşturma
- ChatGPT proje hakkında soruları yanıtlarken aynı anda kullanıcının aksiyon almasını sağladığı için özellikle iç araçlarda güçlüdür
-
Rezervasyon ve booking
- Müsaitlik, menü ve değerlendirmeleri gösteren bir restoran rezervasyon bileşeni oluşturma
- Kullanıcılar ChatGPT’den öneri isteyip arayüz üzerinden doğrudan rezervasyon yapabilir
-
Veri dashboard’ları
- Etkileşimli grafiklerle satış analizlerini gösterme
- "Q4 geliri nasıl?" diye sorulduğunda, belirli bölgelere veya ürünlere drill-down yapılabilen bir dashboard sunma
-
Harita ve konum
- Kafeler, emlak veya konum tabanlı aramalar için işaretçili etkileşimli haritalar gösterme
- Özellikle tam ekran modunda etkilidir
İlk uygulamanızı geliştirme rehberi (restoran arama uygulaması örneği)
-
Step 1: Bileşeni geliştirin (ön uç)
- iframe bileşeni ile ChatGPT arasındaki iletişim için
window.openai.* API’siyle etkileşime giren bir React bileşeni oluşturun
- OpenAI, API etkileşimini kolaylaştıran bir global sağlar
-
Step 2: Aracı tanımlayın (arka uç)
- MCP sunucusu, ChatGPT ile olan "sözleşmeyi" tanımlar
- Modele ne yapabildiğini ve araç çağrısı tamamlandığında hangi bileşenin gösterileceğini bildirir
-
Step 3: Kaynağı kaydedin (arka uç)
- React bileşenini HTML olarak bundle edin ve MCP sunucusunda bir kaynak olarak host edin
- ChatGPT, önceki adımdaki
outputTemplate URI’sini alır ve iframe içine yerleştirilecek kodu ister
-
Step 4: Akışı test edin
- Sunucuyu dağıttıktan sonra:
- ChatGPT’yi açın ve Developer Mode’u etkinleştirin
- Settings → Connected Apps (veya "My Apps") bölümüne gidin
- "Connect new app" seçeneğine tıklayın
- Sunucu URL’sini girin (ör.
https://my-mcp-server.com)
- OAuth olmadan bağlanın
- ChatGPT
search_restaurants aracını algıladığında, "Find me Italian food in Brooklyn" yazarak test edin
- ChatGPT aracı çağırır, veriyi getirir ve metin yerine etkileşimli bir React listesi render eder
Gelecek görünümü
- ChatGPT ilk adımı attı, ancak yakında MCP standardı MCP apps aracılığıyla aynı deseni destekleyecek
- Claude ve diğer ajanlar da konuşmalı deneyimlerin içine mini uygulamalar enjekte edebilecek
- Bu sistem mimarisini ve kullanıcılar için anlamlı deneyimlerin nasıl kurulacağını anlamak, AI ürünleri ile geleneksel SaaS uygulamaları arasında yeni bir iletişim biçiminin önünü açıyor
Henüz yorum yok.