1. Giriş ve Temel Problem

Yapay zeka agent'ları günümüzde kod yazma, dosya düzenleme ve karmaşık iş akışlarını yönetme konusunda oldukça yetenekli hale gelse de, kullanıcı etkileşimi söz konusu olduğunda hâlâ metin tabanlı sohbet pencerelerine (chatbox) sıkışmış durumdadır. Bir agent kullanıcılardan onay almak, çoklu veri girişi toplamak veya bir ayar menüsü sunmak istediğinde yapılandırılmış arayüz elemanlarına ihtiyaç duyar. Terminale ham metinler veya JSON blokları yazdırarak form doldurtmaya çalışmak hem kullanıcı deneyimini baltalamakta hem de hatalara davetiye çıkarmaktadır.

DynamicAgent2UI, bu problemi kökten çözmek amacıyla geliştirildi. Model Context Protocol (MCP) standartlarını kullanan bu proje, yapay zeka modelleri ile işletim sistemi katmanında çalışan esnek, çerçevesiz ve şeffaf bir Electron/Next.js tuvali arasında iki yönlü, gerçek zamanlı bir köprü kuruyor.

2. Mimari Yapı ve Veri Akışı

Sistem temel olarak üç ana katmanın bir araya gelmesiyle çalışır:

1. AI Agent (Orkestratör): Claude Desktop, Cline veya Gemini altyapılı bir istemci.
2. MCP Sunucusu (mcp-server.js): Vanilla Node.js ile yazılmış, agent ile arayüz katmanını bağlayan bağımsız sunucu.
3. Masaüstü Arayüz Katmanı (Next.js & Electron): İşletim sisteminin yerel UI komponentlerini ekrana basan ve kullanıcı etkileşimlerini dinleyen katman.

Çalışma Döngüsü:

1. Agent, bir kullanıcı etkileşimine veya form girişine ihtiyaç duyduğunda show_dialog ya da show_form araçlarını çağırır.
2. MCP Sunucusu, gelen yapılandırılmış parametreleri Next.js API katmanına (/api/sync) POST eder ve asenkron döngüyü askıya alarak (blocking) beklemeye geçer.
3. Arka planda sürekli API'yi poll eden veya BroadcastChannel kullanan Electron penceresi, yeni bir istek geldiğini algılar ve milisaniyeler içinde ilgili formu ekrana basar.
4. Kullanıcı ekrandaki butona tıkladığında veya formu doldurup onayladığında, üretilen veri paketi (payload) senkronizasyon katmanına iletilir; MCP sunucusunun blokajı kalkar ve bu veri arayüz aracının cevabı olarak doğrudan agent'ın bağlamına (context) geri beslenir.

3. Çözülen Kritik Teknik Zorluklar

Projenin geliştirilme sürecinde karşılaşılan ve masaüstü/web hibrit mimarilerinde sıkça görülen bazı derin teknik problemler yenilikçi yaklaşımlarla çözülmüştür:

3.1. Görünmez Tıklama Engelleme (Invisible Click Blocker) Sorunu

Electron ile çerçevesiz (frameless) ve tamamen şeffaf bir katman üzerinde yüzen (floating) pencereler tasarlanırken karşılaşılan en büyük bug, dialoğun ekranda kapladığı görünmez sınır kutusunun (bounding box), alt katmandaki diğer işletim sistemi uygulamalarına (tarayıcı, IDE vb.) tıklanmasını engellemesidir.

Çözüm: Dialoğu sarmalayan ana container elemanına bir ResizeObserver yerleştirilmiştir. Arayüzün boyutu dinamik olarak değiştikçe (örneğin bir form alanı açıldığında veya daraldığında), değişen net genişlik ve yükseklik değerleri drop-shadow (gölge) payları da eklenerek IPC kanalı üzerinden Electron ana sürecine (main process) iletilir. Electron penceresi anlık olarak tam olarak arayüzün geometrik boyutuna küçültüldüğü için, ekrandaki boş şeffaf alanlara yapılan tıklamalar alt katmandaki uygulamalara pürüzsüzce geçer.

3.2. Zod Şeması Tekilleştirme (Deduplication) Hatası

MacDialog, WindowsDialog ve AndroidDialog bileşenleri benzer parametre şemalarını paylaştığı için ilk prototiplerde tek bir Zod şeması (DialogPropsSchema) üzerinden türetilmiştir. Ancak Zod-to-JSON-Schema derleyicisi, LLM'in anlayacağı tool şemalarını üretirken optimizasyon adına bu yapıları tek bir referansa (örneğin sadece $defs.AndroidDialog) indirgemiştir. Bu durum, model MacDialog veya WindowsDialog üretmek istediğinde JSON parser'ın $defs eksikliğinden dolayı unknown-component doğrulaması fırlatmasına neden olmuştur.

Çözüm: Şema tanımları doğrudan bir nesne yerine makeDialogSchema() adında bir fabrika (factory) fonksiyonuna dönüştürülmüştür. Bu sayede her platform tanımı için bellek üzerinde tamamen izole, klonlanmış şema örnekleri (instances) oluşturulmuş ve derleyicinin her platform için eksiksiz, bağımsız ve hatasız şemalar üretmesi garanti altına alınmıştır.

3.3. Arka Plan Sızması ve Okunabilirlik (Opacity & Bleed) Sorunu

Modern arayüz trendlerindeki cam efekti (glassmorphic) ve yarı şeffaf yapılar, kullanıcının masaüstü duvar kağıdı çok koyu, çok parlak veya karmaşık olduğunda form elemanlarının, inputların ve metinlerin okunabilirliğini kritik derecede düşürmektedir.

Çözüm: Projede saf Tailwind şeffaflık sınıfları yerine platform bazlı tam doygun ve opak renk token'ları tercih edilmiştir (macOS için saf beyaz, Windows 11 Fluent teması için koyu modda #1e1e1e vb.). Bu sayede arka plan görsel gürültüsünün form elemanlarına sızması (bleed) engellenmiş ve her koşulda yüksek okunabilirlik seviyesi korunmuştur.

4. Sonuç ve Gelecek Vizyonu

DynamicAgent2UI; Next.js, Electron, Tailwind CSS, Zod ve Model Context Protocol gibi modern teknolojileri bir araya getirerek yapay zeka agent'larının işletim sistemiyle olan etkileşimini bir üst seviyeye taşıyor. Projenin sunduğu akıllı otomatik başlatma (auto-start) mekanizması sayesinde kullanıcının hiçbir CLI komutu çalıştırmasına gerek kalmadan, sadece agent'ın tetiklemesiyle tüm Next.js ve Electron süreçleri ayağa kalkabilmektedir.

Bu mimari, gelecekte agent'ların sadece metin üreten sistemler değil; bizimle birlikte masaüstümüzde yaşayan, gerektiğinde dinamik araçlar inşa edip önümüze koyabilen gerçek asistanlara dönüşmesinin önünü açıyor.