Yapay zeka destekli sohbet arayüzleri giderek daha karmaşık hale gelirken, geliştiriciler kullanıcı deneyimini zenginleştirmenin yeni yollarını arıyor. Model Context Protocol (MCP) standartları, sunucu tarafındaki işlevselliği doğrudan kullanıcı arayüzüyle buluşturarak bu ihtiyacı karşılıyor. Geleneksel yaklaşımlarda kullanıcılar yalnızca ham JSON çıktılarıyla karşılaşırken, MCP uygulamalarıyle etkileşimli Angular bileşenleri sayesinde doğal ve akıcı deneyimler sunmak mümkün hale geliyor. Bu özellik, hem masaüstü istemcilerinde hem de özel AI asistanlarında aynı şekilde çalışıyor.
Bu rehberde, Angular kullanarak MCP uygulamaları geliştirmenin temellerinden başlayarak, ortak kod tabanından faydalanan iki ayrı kullanıcı arayüzünün nasıl oluşturulduğunu adım adım inceleyeceğiz. Vite ve özel eklentileri sayesinde tüm Angular uygulamasını tek bir HTML dosyasına dönüştürmek mümkün oluyor. Bu sayede herhangi bir MCP uyumlu ortamda sorunsuz şekilde çalışan, bağımlılık bakımından hafif uygulamalar geliştirmeyi öğreneceksiniz.
MCP Uygulamalarında Üç Katmanlı Mimarinin Gücü
MCP uygulamaları, sunucu, köprü ve kullanıcı arayüzü olmak üzere üç temel katmandan oluşur. Bu mimari, geliştiricilere hem esneklik hem de performans avantajı sağlar:
- MCP Sunucusu: Araçları ve kaynakları kaydeder, her aracı belirli bir kullanıcı arayüzü endpoint'ine bağlar. Bu katman, arka planda çalışan iş mantığını içerir.
- Köprü (AppBridge): MCP sunucusu tarafından tanımlanan kullanıcı arayüzü kaynağını alır ve sohbet arayüzündeki sandbox edilmiş bir iframe içerisinde görüntüler. Bu köprü sayesinde farklı platformlar arasında uyumluluk sağlanır.
- Angular Arayüzü: Iframe içerisinde çalışan Angular uygulaması,
@modelcontextprotocol/ext-appskütüphanesi aracılığıyla köprüyle çift yönlü iletişim kurar. Kullanıcı etkileşimleri doğrudan sunucuya yansıtılır.
Bu mimariyi mümkün kılan en önemli adım, Vite ve vite-plugin-singlefile kullanarak tüm Angular uygulamasını tek bir HTML dosyasına dönüştürmektir. Sonuç olarak ortaya çıkan dosya, MCP uyumlu herhangi bir ortamda sorunsuz şekilde çalışan, bağımsız bir kullanıcı arayüzü haline gelir.
Proje Kurulumu: Temel Bir Angular MCP Uygulaması
Her bir araç için ayrı kullanıcı arayüzleri oluştururken, ortak mantığı merkezi bir şekilde yönetmek önemlidir. Aşağıdaki proje yapısı, hem
Yapay zeka özeti
MCP standartlarına uyumlu yapay zeka asistanlarında etkileşimli Angular arayüzleri nasıl oluşturabilirsiniz? Tüm bağımlılıkları tek bir HTML dosyasına paketlemenin püf noktalarını keşfedin.
