Specoria
Menü
EN Ücretsiz test

İçgörülerAltyapı

WebMCP uygulamada: sepete ekleme ve stok sorgusunu ajanın çağırabileceği araçlara dönüştürmek

Stok sorgusu ve sepete ekleme WebMCP araçlarına nasıl dönüşür, sipariş ve ödeme neden müşteride kalmalı, ajanlar gelmeden Chrome'da nasıl test edilir?

Yazan 7 dk okuma
Kağıt kolaj: alçıdan bir el, taş bir kemerin ardındaki kağıt tarayıcı penceresine kağıt bir alışveriş çantası uzatıyor; çantanın üstünde mor bir kurdele var.
Net bir dil konuşan bir mağaza, asistanın her kapıyı tahmin etmeden bulmasını sağlar. İllüstrasyon: Specoria · yapay zekâ ile üretildi

Bir müşteri tarayıcısındaki asistana soruyor: "Mavi yağmurluğun M bedeni hâlâ stokta mı? Varsa sepetime bir tane ekle." Bugün ajan bu isteği ürün sayfanızı okuyarak karşılıyor: açılır listeden bedeni seçiyor, stok satırını arıyor ve "Sepete ekle" olduğunu umduğu düğmeye basıyor. WebMCP ile sayfanız aynı isteğe doğrudan yanıt verebilir: ajan varyantla birlikte check_stock aracını çağırır, yapılandırılmış bir yanıt alır, ardından add_to_cart aracını çağırır.

Bu ay başında Shopify'ın neyi yayına aldığını ve bunun diğer mağazalar için ne anlama geldiğini yazmıştık. Bu yazı onun uygulamalı devamı. WebMCP'nin bugün nerede durduğunu, bir mağazanın biri okuyan biri yazan iki küçük aracı nasıl açabileceğini, ajanla müşteri arasındaki çizginin nereden geçmesi gerektiğini ve gerçek bir ajan gelmeden önce bunu nasıl test edebileceğinizi anlatıyoruz.

WebMCP bugün nerede?

WebMCP, W3C Web Machine Learning Community Group'un hazırladığı bir taslak. Şartname, W3C standardı olmadığını ve W3C standart sürecinde de bulunmadığını açıkça yazıyor. Editörleri Microsoft ve Google'da çalışıyor; açıklama belgesi (explainer) ilk kez 13 Ağustos 2025'te yayımlandı.

Fikir basit. Sayfa, her birinin adı, doğal dilde açıklaması ve girdi şeması olan "araçlar" (tools) kaydeder. Tarayıcıdaki ajan bu araçları bulur, birini yapılandırılmış girdilerle çağırır; aracı sizin sayfa kodunuz çalıştırır ve sonucu döndürür. Açıklama belgesi bu sayfaları "sayfa içi MCP sunucuları" olarak tanımlıyor.

Destek erken ve dağınık:

  • Chrome, Chrome 149'da bir origin trial açtı (duyuru 9 Haziran 2026). Origin trial'lar süreli programlardır; Chrome Status bu denemeyi Chrome 156'ya kadar listeliyor. Yerel geliştirme için bir bayrak var: chrome://flags/#enable-webmcp-testing.
  • Topluluk grubunun uygulama takip sayfasına göre Edge 150'de bir origin trial sürüyor ve ChatGPT Desktop destekleniyor.
  • Cloudflare Browser Run, WebMCP'yi deneysel Lab oturumlarında ve Kitesurf altyapısında destekliyor. Cloudflare, Lab oturumlarının üretim işleri için kullanılmaması gerektiğini belirtiyor.
  • Firefox ve Safari takip sayfasında yalnızca standart tutumu tartışmalarına (Firefox için ayrıca bir hata kaydına) bağlantıyla yer alıyor; bir uygulama yok.

API'nin biçimi de değişti. Bugün kopyaladığınız her örnek, bizimki dahil, özellik yayına çıkmadan önce değişiklik gerektirebilir.

Bir aracı kaydetmenin iki yolu

Kağıt kolaj: alçıdan bir el taş bir eşikte kağıt bir sepet tutuyor; kapalı bir kapının yanındaki boş bir kartın üstünde tek mor kağıt anahtar duruyor.
Asistan sepeti taşıyabilir, ama son anahtar alışverişçinin elinde kalır. İllüstrasyon: Specoria · yapay zekâ ile üretildi

Şartname tek bir API tanımlıyor: buyurgan (imperative) document.modelContext.registerTool(). Bir HTML formunu araca dönüştüren bildirimsel (declarative) API ise ayrıca araştırılıyor; açıklama belgesi bunun şu an şartnamenin parçası olmadığını söylüyor. Chrome denemesinde ikisini de belgeliyor ve uyguluyor; yani bu çekinceyle ikisini de deneyebilirsiniz.

Buyurgan API. name, description, inputSchema (JSON Schema) ve bir execute fonksiyonu içeren bir nesne verirsiniz. İsteğe bağlı annotations alanı ajana aracın davranışını anlatır: readOnlyHint (yalnızca veri okur), consequentialHint (uçuş rezervasyonu ya da para transferi gibi önemli, gerçek dünyada sonucu olan ya da geri alınamayan işlem) ve untrustedContentHint (çıktıda yorumlar gibi sizin kefil olmadığınız veri var).

Bildirimsel API. Bir <form> öğesine toolname ve tooldescription, açıklama gereken alanlara toolparamdescription eklersiniz. Girdi şemasını tarayıcı formdan üretir. toolautosubmit özniteliği yoksa ajan formu doldurur, tarayıcı gönder düğmesine odaklanır ve formu kişi gönderir. Gönderim işleyicisinde e.agentInvoked isteği bir ajanın tetiklediğini söyler; preventDefault() çağrısından sonra e.respondWith() ile ajana bir sonuç döndürebilirsiniz.

Örnek: stok sorgusu ve sepete ekleme

Aşağıdakiler açıklama amaçlı bir örnektir, üretim kodu değildir. check_stock ve /api/stock gibi adlar bizim seçimimiz; mağazanıza göre uyarlayın.

Stok sorgusu (yalnızca okuma, buyurgan). Ürün sayfalarında tek bir araç kaydedin:

  • name: "check_stock"
  • description: "Bir ürün varyantının stokta olup olmadığını ve tek siparişte en fazla kaç adet alınabileceğini döndürür."
  • inputSchema: tek bir zorunlu metin alanı olan sku; açıklaması "Bu sayfada gösterilen varyant SKU'su."
  • annotations: { readOnlyHint: true }
  • execute: async ({ sku }) => { ... } önce sku değerinin bu sayfadaki bir varyanta ait olduğunu kontrol eder, mevcut stok uç noktanızı çağırır ve { sku, inStock: true, maxQuantity: 4 } gibi kısa bir yanıt döndürür.

Sepete ekleme (yazma, bildirimsel). Ürün sayfanızda zaten bir sepete ekleme formu var; onu işaretleyin:

  • <form action="/cart/add" method="post" toolname="add_to_cart" tooldescription="Seçilen varyantı müşterinin sepetine ekler. Sipariş oluşturmaz.">
  • <select name="variant" toolparamdescription="Ürünün bedeni ve rengi">
  • <input name="quantity" type="number" min="1" max="10" toolparamdescription="Adet, 1 ile 10 arası">

Sepete eklemek geri alınabilir bir işlem; bu yüzden burada toolautosubmit makul bir seçim. Gönderim işleyicisinde yeni sepet satırını ve toplamı e.respondWith() ile ajana bildirin ve aynı anda ekrandaki sepeti güncelleyin. Açıklama belgesi tam olarak bunu istiyor: müşteri ve ajan aynı sekmeyi paylaştığı için görünen sayfa, aracın yaptığını yansıtmalı.

WebMCP'nin iyi uygulama önerileri iki kural ekliyor: her araca tek iş ve iç kimlikler yerine ham girdi ("M", "mavi").

Sipariş ve ödeme müşteride kalsın

En önemli tasarım kararı, hangi araçları kaydetmeyeceğiniz.

  • Hiçbir araç kendi başına sipariş vermesin ya da ödeme almasın. "Sepete ekle" ve "ödemeye geç" adımında durun. Bir gün sipariş aracı eklerseniz consequentialHint: true işaretleyin ve son adımı, kişinin ürünleri ve toplamı onayladığı sayfanızda bırakın. Açıklama belgesinin kendi örneklerinden biri de böyle: baskı siparişi aracı müşteriyi güvenli ödeme sayfasına götürüyor, siparişi müşteri kendisi tamamlıyor. Shopify'ın ödeme araçları da aynı kuralı izliyor; nasıl olduğunu önceki yazımızda anlattık.
  • İşaretleri kilit saymayın. Şartname, ajanların bir sitenin araçları hakkında söylediklerine tek başına güvenemeyeceğini yazıyor; açıklama belgesi de aracın kullanıcıdan onay istemesinin bir yolunu hâlâ açık soru olarak listeliyor. İşaretler bir sinyaldir; güvenceyi ödeme sayfanız vermeli.
  • Doğrulamayı yalnızca şemaya bırakmayın. Açıklama belgesinin önerisi "kodda sıkı, şemada gevşek doğrula": girdiyi, yetkiyi ve ön koşulları execute içinde kontrol edin, ajanın anlayıp düzeltebileceği net bir hata döndürün. Araç müşterinin oturumuyla çalıştığı için sunucunuz, bir insandan gelen isteğe uyguladığı kontrollerin aynısını uygulamalı.
  • Hızı sınırlayın. Sepet ve stok uç noktalarını insanlar için kullandığınız hız sınırlarının arkasına koyun; sepete yazma işlemlerine oturum başına bir üst sınır ekleyin. Sınıra takılınca açıklama belgesi, bilgilendirici bir hata döndürmeyi ya da ajandan işi sayfada bitirmesini kullanıcıya söylemesini istemeyi öneriyor.
  • Talimat değil veri döndürün. Araç yorumlar gibi sizin yazmadığınız metin döndürüyorsa untrustedContentHint işaretleyin. Chrome'un güvenlik rehberi bu işareti dolaylı istem enjeksiyonuna (prompt injection) karşı önerir ve kısa çıktı ister: araç sonucu başına yaklaşık 1.500, açıklama başına 500 karakter.

Nasıl test edilir?

  1. Bayrağı açın. Yerel geliştirme için chrome://flags/#enable-webmcp-testing; canlı alan adınızda denemek için origin trial'a kaydolun.
  2. DevTools'ta Application, WebMCP bölmesini açın. Bölme araçları ajanın gördüğü haliyle listeler, her çağrıyı girdisi ve çıktısıyla kaydeder ve Run tool ile bir aracı elle çalıştırmanıza izin verir. Şema ihlalleri çıktı bölmesinde görünür.
  3. Araçları konsoldan çağırın. document.modelContext.executeTool() ile mantığı hiçbir model devreye girmeden test edin.
  4. Bir modelle deneyin. Chrome'un Model Context Tool Inspector eklentisi, doğal dildeki istemleri araçlarınızı çağırabilen bir modele gönderir. Chrome'un listelediği hata türlerine bakın: yanlış araç, doğru araçlar yanlış sırada ya da doğru araç yanlış girdiyle (tişört yerine ayakkabı).
  5. Sınırları bilerek zorlayın: bilinmeyen bir SKU, 50 adet, tükenmiş bir varyant, birkaç saniyede tekrarlanan çağrılar. Her biri net bir hata döndürmeli ve sepeti değiştirmemeli.
  6. Sayfa yolunu çalışır tutun. Ajanların çoğu bugün hâlâ okuyup tıklıyor. Bir araç, bir işi yapmanın tek yolu olmamalı.

Sonuç

WebMCP, ajanlara sayfanızın zaten yaptığı işi düğme tahmin etmeden yapmanın bir yolunu veriyor. Çoğu mağaza için mantıklı ilk adım küçük: yalnızca okuyan bir stok aracı ve bir sepete ekleme aracı, Chrome'un origin trial'ında test edilmiş; sipariş ve ödeme ise kesin olarak ödeme sayfanızda. Bu, deneme aşamasında bir taslak; o yüzden onu bağımlılık olarak değil, kaldırabileceğiniz bir deney olarak kurun.

Specoria'nın ajan simülatörü, ziyaret ettiği sayfalarda kayıtlı WebMCP araçlarını listeler ve güvenlik notları ekler; araçları çağırmaz. Mağazanız araç açsa da açmasa da ajanların nerede durduğunu adım adım gösterir. Ücretsiz hazırlık testi ile başlayabilirsiniz.

Kaynaklar