WebMCP, React uygulamalarının yapılandırılmış araç API'lerini doğrudan yapay zeka ajanlarına sunmasına olanak tanıyarak, kırılgan UI kazıma (UI-scraping) yönteminin yerini güvenilir ve UI'dan bağımsız çağrılara bırakmasını sağlar. Bu özellik, Chrome 149 ve üzeri için bir origin-trial olarak mevcuttır ve chrome://flags/#enable-webmcp-testing üzerinden etkinleştirilebilir.

Ajanlara tıklamayı öğretmenin sorunu

Yapay zeka ajanlarının bir web sayfasıyla etkileşime girmesini sağlayan mevcut girişimlerin çoğu görsel ipuçlarına dayanır. Bir ajan DOM'u ayrıştırır, hangi öğenin bir düğme olduğunu tahmin eder, tıklamaları simüle eder, kaydırır ve form alanlarını doldurur. Bir düğme hareket ettiğinde, bir etiket değiştiğinde veya bir düzen (layout) üzerinde değişiklik yapıldığında betik başarısız olur. Bu yaklaşım yavaştır çünkü tarayıcının her adımı işlemesini (render) bekler ve rutin bir yeniden tasarım tüm bir otomasyon hattını bozabilir.

WebMCP modeli tersine çeviriyor

WebMCP, Google Chrome tarafından tanıtılan yeni bir web standardıdır. Ajanın keşfetmesi için görsel bir yüzey sunmak yerine, bir sayfa bir dizi araç (tools) —sayfanın gerçekleştirebileceği isimlendirilmiş ve tiplendirilmiş işlemler— duyurur. Bir yapay zeka ajanı önce "hangi araçlar mevcut?" diye sorar; sayfa "searchProducts" veya "checkout" gibi bir liste ile yanıt verir. Ajan daha sonra, aracın beyan edilen girdi şemasıyla eşleşen bir JSON payload göndererek bir aracı çağırır, örneğin searchProducts(query: "jacket"). Tarayıcı, isteği doğrudan sayfanın JavaScript'ine yönlendirir ve bu da herhangi bir UI müdahalesi olmadan alttaki mantığı çalıştırır.

Sonuç; anlık olan, CSS değişikliklerinden etkilenmeyen ve araç tanımları sabit kaldığı sürece işlevsel kalan bir etkileşimdir.

Geliştiriciler için önemli olan avantajlar

  • Hız – İletişim tarayıcının mesajlaşma sistemi içinde kalır; tıklamaların işlenmesi ve sayfa güncellemelerinin beklenmesi gibi gidiş-dönüş süreçlerini ortadan kaldırır.
  • Güvenilirlik – Araçlar, sitenin kendi UI'ı için halihazırda kullandığı işlevleri çağırır, bu nedenle bir yeniden tasarım API'yi bozmaz.
  • Kontrol – Hangi işlemlerin sunulacağına, hangi parametreleri kabul edeceklerine ve ajanın yanıtta ne görebileceğine geliştiriciler karar verir.
  • UI bağımsızlığı – Stil verme, düzen veya bileşen (component) refaktör işlemi artık ajanın bir özelliği çağırma yeteneğini etkilemez.

WebMCP, sunucu tarafında kullanılan mevcut MCP'nin (Message-Channel-Protocol) yerini almaz. MCP yoğun veri çekme ve arka uç orkestrasyonunu yönetmeye devam ederken, WebMCP canlı, sekme içi etkileşimleri yönetir.

React geliştiricileri nasıl başlayabilir?

React kodu, araçları ya emirsel (imperative) bir JavaScript API'si ya da bildirimsel (declarative) bir HTML form tabanlı API kullanarak kaydedebilir. Yaygın bir desen, kaydı özel bir hook içine sarmalamaktır:

  1. Aracın adını ve kısa bir açıklamasını içeren bir kayıt işlevi çağırın.
  2. Bir girdi şeması sağlayın (örneğin, gerekli alanları tanımlayan bir JSON şeması).
  3. Mevcut iş mantığını çalıştıran bir execute geri çağırma işlevi (callback) sağlayın — bu genellikle bir düğme tıklamasının tetikleyeceği işlevin aynısıdır.

Hook çalıştığında, tarayıcı aracı sayfanın WebMCP manifestine ekler. Manifesti keşfeden bir yapay zeka ajanı, DOM'a hiç dokunmadan aracı çağırabilir.

Kayıt işlemi bileşen bağlanma (mount) anında gerçekleştiği için araçlar belirli rotalara veya özellik bayraklarına (feature flags) göre sınırlandırılabilir; bu da ekiplere, yapay zekanın üretim ortamında (production) ile test ortamında neler yapabileceği üzerinde hassas bir kontrol sağlar.

Uyarılar ve dikkat edilmesi gerekenler

WebMCP hala bir origin trial aşamasındadır. Yalnızca Chrome 149+ üzerinde çalışır ve bir flag aracılığıyla manuel olarak etkinleştirilmelidir.

Sırada ne var?

Google, denemeyi yapay zeka tabanlı web deneylerini denemek isteyen geliştiricilere açtı. İlgilenenler için sonraki adımlar şunlardır:

  • Chrome'da flag'i etkinleştirin ve hedef siteyi yeniden yükleyin.
  • Bir React bileşenine basit bir araç kaydı ekleyin ve manifestin tarayıcı geliştirici araçlarında (devtools) göründüğünü izleyin.
  • Aracı çağırmak ve yanıtı doğrulamak için bir yapay zeka istemcisini (örneğin, WebMCP protokolünü takip eden yerel bir betik) test edin.
  • Kararlı sürümün yayınlanmasına ilişkin güncellemeler için denemenin durum sayfasını takip edin.

Özet: WebMCP, React geliştiricilerine uygulamalarını doğrudan yapay zeka ajanları tarafından çağrılabilir hale getirme yolu sunarak, UI öğelerini kararlı ve tiplendirilmiş servislere dönüştürür. Bu değişim, ekran kazıma (screen-scraping) bakım kabusunu ortadan kaldırır ve ekipler deneysel bir Chrome ortamında çalışmaya hazır olduğu sürece, gerçekten yapay zeka tabanlı web uygulamalarına giden yolu açar.