WebMCP Eğitimi: Chrome’un Yeni Standardıyla Aracıya Hazır Web Siteleri Oluşturma

Şu anda yapay zeka ajanları webi, yabancı bir menüyü okuyan bir turist gibi geziyor: piksellere kısarak bakıyor, butonların ne işe yaradığını tahmin ediyor ve sayfa tam tıklarken düzenini değiştirmezse şanslı sayılıyor. Google ve Microsoft bu sorunun düzgünce çözülmeye değer olduğuna karar verdi.

Şubat 2026’da, Chrome 146, sitelerin ajanlara tam olarak ne yapabileceklerini ve bunu nasıl yapacaklarını söylemesine olanak tanıyan, önerilen bir web standardı olan WebMCP’nin erken önizlemesini yayınladı. 

Ekran kazıma yok. 

DOM’u tersine mühendislik yok.

Bu eğitimde, WebMCP’nin gerçekte ne olduğunu, ortamınızı nasıl kuracağınızı ve ardından hem HTML tabanlı hem de JavaScript tabanlı yaklaşımlarla çalışan entegrasyonlar oluşturmayı adım adım göstermek istiyorum. 

Ayrıca ajan çağrılarını ele almak için güvenlik ipuçlarını ve her şeyi Chrome’un hata ayıklama araçlarıyla nasıl test edeceğinizi de ele alacağım.

WebMCP Nedir?

WebMCP (Web Model Context Protocol), web sitelerinin yeteneklerini yapay zeka ajanlarının doğrudan çağırabildiği yapılandırılmış araçlar olarak bildirmesine olanak tanıyan yeni bir tarayıcı standardıdır. Bir yapay zekayı görsel bir arayüzü “okumaya” ve tıklamaya zorlamak yerine, WebMCP web sayfasını temiz, istemci taraflı bir API’ye dönüştürür.

Bir ajanın bugün bir seyahat sitesinde uçuş rezervasyonu yapmaya çalıştığında ne olduğuna bakalım. Kalkış şehrini hangi alanın beklediğini çözmesi, tarih biçiminin AA/GG mi yoksa YYYY-AA-GG mi olduğunu tahmin etmesi, arama düğmesini bulması ve sayfanın daha önce hiç görmediği bir düzene yeniden yüklenmemesini umması gerekir. Bunun yerine site, kalkış, varış, tarihler ve yolcu sayısı için tiplenmiş parametrelere sahip searchFlights adlı bir araç yayımlayabilseydi, tüm bu tahminler ortadan kalkardı.

WebMCP bunu mümkün kılıyor. Bir site, navigator.modelContext adlı bir tarayıcı API’si aracılığıyla araçları kaydeder; her araç bir ad, doğal dilde bir açıklama ve girdileri ile çıktıları için bir JSON şemasıyla gelir. Ajan bu araçları keşfeder, şemayla eşleşen parametreler gönderir ve karşılığında yapılandırılmış veri alır.

Google ve Microsoft’taki mühendisler, taslağı W3C Web Makine Öğrenimi topluluk grubunda birlikte hazırladılar. Mimari tamamen istemci taraflıdır; bu da araç yürütmeyi ayrı bir arka uç sunucusunun üstlendiği tipik MCP kurulumlarından ayrılır. Standart MCP, ajanları JSON-RPC üzerinden arka uç sunuculara bağlarken WebMCP her şeyi tarayıcı sekmesinde tutar. 

Araçlar sayfanın JavaScript’inde çalışır; kullanıcının mevcut oturumunu paylaşırlar ve ajanların ne yapmasına izin verileceğini tarayıcı aracılar. Daha önce MCP sunucularıyla çalıştıysanız (örneğin bizim MCP Model Context Protocol eğitiminde olduğu gibi), araç kayıt kavramları tanıdık gelecektir; ancak dağıtım modeli oldukça farklıdır.

WebMCP’nin temel özellikleri ve yetenekleri

İki API mevcuttur ve farklı amaçlara hizmet eder:

• Bildirimsel API HTML açıklamalarıyla çalışır. Bir <form> öğesine toolname ve tooldescription özniteliklerini, bireysel alanlara ise isteğe bağlı toolparamdescription ekleyin; tarayıcı mevcut form yapısından bir JSON şeması üretir. Zaten iyi tasarlanmış formlara sahip sitelerin, aracı erişimine açılması için çok az değişikliğe ihtiyacı vardır.
• Emredici API size tam programatik kontrol sağlar. navigator.modelContext.registerTool() çağrısı yapar ve araç adını, açıklamasını, girdi şemasını ve bir execute geri çağrısını tanımlarsınız. Bu yol, düz bir form için fazla dinamik olan her şey içindir: çok adımlı iş akışları, API çağrıları, hesaplanmış sonuçlar ve özel doğrulama mantığı.

Her iki API de dinamik kayda izin verir; yani sayfa durumu değiştikçe araçlar görünüp kaybolabilir. Kullanıcı oturum açmadan önce yalnızca bir login aracı sunabilirsiniz. Kimlik doğrulamasından sonra hesaba özel araçlar kaydedilir.

• JSON şemaları her araçta türleri, enum’ları, zorunlu alanları ve parametre açıklamalarını belirtir. Bu yapı, ajanların parametre değerleri uydurmasını veya veriyi yanlış alanlara koymasını engeller.
• CSS sözde-sınıfları, ajan etkileşimleri sırasında görsel geri bildirim sağlar. Chrome, bir ajan tarafından doldurulmakta olan herhangi bir forma :tool-form-active ve o formun gönder düğmesine :tool-submit-active uygular. Ekranı izleyen kişi, ajanın tam olarak hangi form üzerinde çalıştığını görebilir.

Henüz yerleşik bir keşif mekanizması yok. Bir ajan, sunduğunuz araçları öğrenmeden önce sayfanızı ziyaret etmek zorunda. Chrome ekibi, önceden keşfe izin verecek bir .well-known/webmcp manifest dosyası fikrini tartıştı; ancak bu yönde herhangi bir şey belirtilmedi.

WebMCP hâlâ erken önizlemede olduğundan, özellikle Mart 2026’da provideContext ve clearContext yöntemlerinin kaldırılması da dahil olmak üzere sürümler arasında zaten evrimleştiği için, bazı pürüzler ve devam eden değişiklikler beklemelisiniz. 

Araç keşfedilebilirliği, zaten ziyaret ettiğiniz sayfalarla sınırlıdır ve prompt enjeksiyonu ile araç zincirleme yoluyla veri sızdırma gibi güvenlik endişeleri standartta kabul edilmekle birlikte henüz tam olarak çözülmemiştir. Başlamadan önce Chrome dokümantasyonundaki değişiklik günlüğünü kontrol edebilirsiniz; bu eğitim yazıldığından beri API yüzeyi değişmiş olabilir.

WebMCP Önkoşulları ve Ortam Kurulumu

Doğru ortamı kurmak birkaç dakika alır; ancak yanlış Chrome sürümü çok daha fazla zaman kaybettirir.

146.0.7672.0 veya üzeri Chrome Canary sürümü gereklidir. Chrome’un kararlı sürümü, Beta ve Dev kanalları WebMCP bayrağıyla gelmez. Chrome forumlarında birkaç geliştirici, yanlış sürümü kurup neden bayrağın eksik olduğunu merak ederek zaman harcadıklarını yazdı. Özellikle Canary sayfasından indirin.

Chrome Canary indirme sayfası

Tarayıcının ötesinde, HTML formlarına ve JavaScript olay yönetimine hakim olmanız gerekir. Hatırlatmaya ihtiyaç duyarsanız, DataCamp’in JavaScript’e Giriş kursu temelleri kapsar. 

Model Context Tool Inspector Uzantısı kesinlikle zorunlu değildir; ancak yüklemeye değerdir. Geçerli sayfada kayıtlı tüm araçları listeler, bunları elle girdiğiniz parametrelerle çalıştırmanıza izin verir ve doğal dille araç çağrısını test etmek için yerleşik Gemini API desteğine sahiptir.

WebMCP deneysel bayrağını etkinleştirme

Chrome Canary kuruluysa:

1. Adres çubuğuna chrome://flags/#enable-webmcp-testing yazın.
2. “WebMCP for testing” bayrağını Enabled olarak ayarlayın.
3. Sayfanın altında Relaunch’a tıklayın.

WebMCP bayrağı vurgulanmış ve Enabled olarak ayarlanmış chrome://flags sayfası

Yeniden başlattıktan sonra, Geliştirici Araçları’nı (F12) açın, Console sekmesine gidin ve şunu çalıştırın:

console.log(navigator.modelContext);Altyapı:

navigator.modelContext nesnesini gösteren DevTools konsolu.

Çıktıda bir nesne görmeniz ( undefined yerine) API’nin mevcut olduğunu doğrular. Buradan, Model Context Tool Inspector Uzantısını kurabilir ve araç kaydının gerçek bir sayfada nasıl çalıştığını görmek için Google’ın seyahat demosunu açabilirsiniz. 

Burada, basitçe uzantıyı başlatabilirsiniz ve aşağıdakine benzer bir şey görmelisiniz:

Chrome’daki Model Context Tool Inspector uzantısı ile Google’ın Flight Search demo web sitesi ile searchFlights araçlarının kontrol edilmesi.

Gördüğünüz gibi, Model Context Tool Inspector searchFlights aracını algılar ve girdi şemasını ortaya çıkarır; bu da modelin sayfayla nasıl etkileşime geçeceğini çok daha net anlamasını sağlar.

İlk WebMCP Entegrasyonunuzu Oluşturma

İlk WebMCP entegrasyonunuzu iki şekilde oluşturabilirsiniz; ikisini de aşağıdaki bölümlerde özetledik:

Bildirimsel yaklaşım (HTML)

Bir WebMCP aracını kaydetmenin en basit yolu, sayfanızda hâlihazırda bulunan bir formu açıklamaktır. İşte WebMCP açıklamaları olmayan standart bir ürün arama formu:

<form action="/search" method="GET">
  <label for="query">Search term</label>
  <input type="text" name="query" id="query" required>

  <label for="category">Category</label>
  <select name="category" id="category">
    <option value="all">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
    <option value="clothing">Clothing</option>
  </select>

  <button type="submit">Search</button>
</form>Altyapı:

Dört öznitelik bunu bir ajan tarafından çağrılabilir araca dönüştürür. toolname ve tooldescription, <form> etiketinin kendisine eklenir. Bireysel alanlarda, etiketler bir ajan için yeterince açıklayıcı olmadığında toolparamtitle ve toolparamdescription varsayılan etiketlerin yerini alır:

<form toolname="search_products"
      tooldescription="Search the product catalog by keyword and optional category filter"
      action="/search" method="GET">

  <label for="query">Search term</label>
  <input type="text" name="query" id="query" required
         toolparamdescription="The keyword or phrase to search for in product titles and descriptions">

  <label for="category">Category</label>
  <select name="category" id="category"
          toolparamtitle="Product Category"
          toolparamdescription="Filter results to a specific product category. Use 'all' for no filter.">
    <option value="all">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
    <option value="clothing">Clothing</option>
  </select>

  <button type="submit">Search</button>
</form>Altyapı:

Tarayıcı bu özniteliklerle dahili olarak bir JSON şeması üretir. Araç adı, parametre türleri, <select> seçeneklerinden gelen enum değerleri ve HTML’deki zorunlu işaretleri ek bir yapılandırma gerektirmeden aynen taşınır.

Bunu test etmek için, yerel makinenizde herhangi bir metin düzenleyiciyle basit bir .html dosyası oluşturun, yukarıdaki kodu yapıştırın ve Chrome’da file:///{your_document_path.html} kullanarak açın; uzantının yerel dosyayla çalışması için ayrıca uzantı ayarlarını açıp Ayrıntılar’a giderek dosya URL’lerine erişimi etkinleştirmeniz gerekir; aşağıdaki ekran görüntüsünde gösterildiği gibi.

Uzantının yerel dosyalara erişmesine izin verme.

Aksi halde tarayıcınız yerel HTML dosyanızla etkileşime giremez. Bu tamamlandıktan sonra dosyayı Chrome ile açar ve WebMCP uzantısını kontrol ederseniz, aşağıdaki ekran görüntüsüne benzer bir şey görmelisiniz. 

Açıklamalar eklendikten sonra search_products aracı için oluşturulan şemayı gösteren uzantı.

Peki bir ajan bu aracı çağırdığında gerçekte ne olur? 

Chrome formu odaklar, alanları ajanın sağladığı değerlerle doldurur ve orada durur. Kullanıcının yine de Gönder’e tıklaması gerekir. Bu varsayılan, tasarım gereğidir; çünkü işlemden önce insanın onaylaması gerekir.

toolautosubmit özniteliğini form etiketine eklemek bu onay adımını kaldırır. Arama sorguları gibi salt-okunur işlemler için mantıklıdır. Veriyi değiştiren, satın alım tetikleyen veya hesap ayarlarını değiştiren her şey için bunu eklemeyin.

Gönderimi yakalamanın ve yapılandırılmış bir sonucu ajana geri göndermenin bir yolu da vardır. submit olayındaki respondWith() yöntemi bir söz (promise) alır ve ne ile çözümlerseniz, aracın çıktısı o olur:

<form toolname="search_products"
      tooldescription="Search the product catalog"
      toolautosubmit
      action="/search">
  <input type="text" name="query" required>
  <button type="submit">Search</button>
</form>

<script>
  document.querySelector("form").addEventListener("submit", (e) => {
    e.preventDefault();

    const query = new FormData(e.target).get("query");

    if (!query || query.trim().length === 0) {
      if (e.agentInvoked) {
        e.respondWith(Promise.resolve({
          error: "Search query cannot be empty. Please provide a keyword."
        }));
      }
      return;
    }

    const results = performSearch(query);

    if (e.agentInvoked) {
      e.respondWith(Promise.resolve({
        content: [{ type: "text", text: JSON.stringify(results) }]
      }));
    }
  });
</script>Altyapı:

submit olayındaki bu agentInvoked boolean’ı, gönderim bir ajan tarafından tetiklendiğinde true, normal bir insan tıklamasında false olur. Bunu, ajana özel yanıt biçimlendirmesi ile normal form işlemeniz arasında dallanmak için kullanabilirsiniz.

Bir alanda toolparamdescription yoksa tarayıcı açıklamayı ilişkili <label> öğesinden, o da yoksa aria-description özniteliğinden alır. Bu nedenle erişilebilir işaretleme, fazladan iş olmadan zaten makul parametre açıklamaları sağlar.

Mevcut bir tuhaflık: bir grup <input type="radio"> öğesi için toolparamdescription, grubun ilk radyo düğmesine eklenmelidir ve tüm parametreye uygulanır.

Emredici yaklaşım (JavaScript)

Formlar geniş bir alanı kapsar; ancak bazı araçların uygulama durumuyla çalışması, API çağrıları yapması veya geleneksel bir form gönderimine uymayan hesaplanmış sonuçlar döndürmesi gerekir. İşte yapılacaklar listesine öğe ekleyen basit bir araç:

window.navigator.modelContext.registerTool({
  name: "addTodo",
  description: "Add a new item to the user's to-do list. Use when the user asks to create, add, or remember a task.",
  inputSchema: {
    type: "object",
    properties: {
      text: {
        type: "string",
        description: "The task description"
      },
      priority: {
        type: "string",
        enum: ["low", "medium", "high"],
        description: "Task priority level. Default to 'medium' if not specified by the user."
      }
    },
    required: ["text"]
  },
  execute: ({ text, priority = "medium" }) => {
    const newItem = { id: Date.now(), text, priority, done: false };
    todoApp.addItem(newItem);
    todoApp.renderList();

    return {
      content: [{
        type: "text",
        text: Added task: "${text}" with ${priority} priority. The to-do list now has ${todoApp.getCount()} items.
      }]
    };
  }
});Altyapı:

execute geri çağrısı, ajanın gönderdiği (inputSchema ile eşleşmesi gereken) parametreleri alır, uygulama mantığınızı çalıştırır ve bir content dizisi döndürür. 

Önemli bir ayrıntı: Döndürmeden önce UI’yi güncelleyin. 

Ajanlar bazen bir araç çağrısından sonra sayfanın nasıl göründüğünü kontrol ederek işlemin başarılı olup olmadığını doğrular; bu nedenle UI henüz değişmemişse, çağrının başarısız olduğunu varsayabilirler. Sayfa durumu geliştikçe araçları kaydedip kayıttan çıkarabilirsiniz:

function onUserLogin(user) {
  navigator.modelContext.registerTool({
    name: "viewOrderHistory",
    description: "Show the user's past orders with dates and totals",
    inputSchema: {
      type: "object",
      properties: {
        limit: {
          type: "number",
          description: "Maximum number of orders to return. Defaults to 10."
        }
      }
    },
    execute: async ({ limit = 10 }) => {
      const orders = await fetchOrders(user.id, limit);
      return {
        content: [{ type: "text", text: JSON.stringify(orders) }]
      };
    }
  });
}

function onUserLogout() {
  navigator.modelContext.unregisterTool("viewOrderHistory");
}Altyapı:

Daha gerçekçi bir senaryo: masa uygunluğunu kontrol eden bir restoran rezervasyon sayfası. Bu örnek, Chrome dokümantasyonunun önerdiği kod içi doğrulamayı da gösterir; çünkü şema kısıtları ajanlar için faydalıdır fakat hepsi tarafından zorunlu tutulmaz.

navigator.modelContext.registerTool({
  name: "checkAvailability",
  description: "Check table availability for a given date and party size at this restaurant. Returns available time slots.",
  inputSchema: {
    type: "object",
    properties: {
      date: {
        type: "string",
        description: "The desired reservation date in YYYY-MM-DD format"
      },
      partySize: {
        type: "number",
        description: "Number of guests, between 1 and 12"
      }
    },
    required: ["date", "partySize"]
  },
  execute: async ({ date, partySize }) => {
    if (partySize < 1 || partySize > 12) {
      return {
        content: [{
          type: "text",
          text: "Party size must be between 1 and 12. For larger groups, please call the restaurant directly at (555) 123-4567."
        }]
      };
    }

    const parsedDate = new Date(date);
    if (isNaN(parsedDate.getTime()) || parsedDate < new Date()) {
      return {
        content: [{
          type: "text",
          text: "Please provide a valid future date in YYYY-MM-DD format."
        }]
      };
    }

    const slots = await api.getAvailableSlots(date, partySize);
    renderAvailabilityCalendar(date, slots);

    return {
      content: [{
        type: "text",
        text: JSON.stringify({
          date,
          partySize,
          availableSlots: slots.map(s => s.time),
          message: slots.length > 0
            ? Found ${slots.length} available time slots.
            : "No availability for this date. Try a different date or smaller party."
        })
      }]
    };
  }
});Altyapı:

Chrome dokümantasyonundan öne çıkarmaya değer birkaç nokta: Mümkün olduğunda ham kullanıcı girdisini kabul edin. Biri “11:00’den 15:00’e” derse, aracınız bu dizeleri doğrudan almalı; bunları gece yarısından dakika gibi bir dahili formata dönüştürmesini ajandan istememelisiniz. 

Sadece şemada değil, kodda doğrulayın; çünkü şema zorlaması ajanlar arasında değişir. Ve ajanlar işlemin gerçekleştiğini doğrulamak için sayfaya bakabileceğinden, yalnızca UI güncellendikten sonra döndürün.

İstemci taraflı bir WebMCP uygulamasını tamamlayacak sunucu tarafı MCP araçları için, FastMCP ile MCP sunucuları oluşturma rehberimiz kurulumu ayrıntılı olarak ele alır.

WebMCP’de Ajan Çağrısını ve Güvenliği Ele Alma

WebMCP taslağı, bir insanın ekranı izlediğini varsayar. Google ve Microsoft’taki yazarlar, bunu otonom çalışmadan ziyade işbirlikçi iş akışları etrafında tasarladılar. Aşağıdaki mekanizmalar bu felsefeyi yansıtır.

Yapay zekâ ile insan kullanıcıları ayırt etme

SubmitEvent arayüzünde agentInvoked adlı yeni bir boolean özelliği bulunur. Bir ajan form gönderimini tetiklediğinde değer true’dur. Bir kişi normal şekilde Gönder’e tıkladığında false’tur.

document.querySelector("form").addEventListener("submit", (e) => {
  if (e.agentInvoked) {
    console.log("AI agent submitted the form");
    if (!isWithinAgentRateLimit()) {
      e.preventDefault();
      e.respondWith(Promise.resolve({
        error: "Too many requests. Please wait before trying again."
      }));
      return;
    }
  }
});Altyapı:

Form gönderimlerinin ötesinde, ajan etkinliğini izleyen iki pencere düzeyi olay vardır. toolactivated, bir ajan bir aracı çağırdıktan ve Chrome ilgili form alanlarını önceden doldurduktan sonra tetiklenir. toolcancel ise kullanıcı işlemi iptal eder veya formu sıfırlarsa tetiklenir. 

Hiçbiri iptal edilebilir değildir; ancak her ikisi de hangi aracın dahil olduğunu bilmeniz için bir toolName özelliği taşır.

window.addEventListener("toolactivated", ({ toolName }) => {
  showAgentActivityBanner(toolName);
});

window.addEventListener("toolcancel", ({ toolName }) => {
  hideAgentActivityBanner();
});Altyapı:

İnsanın döngüde olduğu izinleri dayatmak

Bildirimsel araçlarda varsayılan davranış, ajan alanları doldurduktan sonra insanın Gönder’e tıklamak zorunda olmasıdır. Gerçek sonuçları olan her şey için bu varsayılanın yerinde kalması gerekir.

toolautosubmit özniteliği bu adımı kaldırır. Salt-okunur veya düşük riskli araçlar için uygundur: arama sorguları, uygunluk sorgulamaları, durum kontrolleri. 

Oluşturan, değiştiren veya silen her işlem, elle tıklama gerektirmelidir.

Ajan etkileşim durumunu CSS sözde-sınıflarıyla stillendirebilirsiniz:

form:tool-form-active {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
  font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">1rem;
  border-radius: 8px;
}

form:tool-form-active::before {
  content: "AI agent is filling this form";
  display: block;
  font-size: 0.875rem;
  color: #2563eb;
  font-weight: 600;
  font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">0.5rem;
}Altyapı:

:tool-form-active stili uygulanmış, mavi kenarlık ve "AI agent is filling this form" etiketini gösteren bir form.

Emredici araçlar farklı bir zorluk sunar. Form ve gönder düğmesi yoktur; bu nedenle, ajan aracı çağırdığında yürütme anında başlar. 

İnsan onayı olmadan gerçekleşmemesi gereken her işlem için onayı doğrudan aracın içine yerleştirmeniz gerekir:

navigator.modelContext.registerTool({
  name: "deleteAccount",
  description: "Permanently delete the user's account and all associated data. Cannot be undone.",
  inputSchema: {
    type: "object",
    properties: {
      confirmPhrase: {
        type: "string",
        description: "The user must type 'DELETE MY ACCOUNT' to confirm."
      }
    },
    required: ["confirmPhrase"]
  },
  execute: ({ confirmPhrase }) => {
    if (confirmPhrase !== "DELETE MY ACCOUNT") {
      return {
        content: [{
          type: "text",
          text: "Confirmation phrase does not match. Ask the user to confirm explicitly."
        }]
      };
    }

    return new Promise((resolve) => {
      showConfirmationModal("Are you sure?", {
        onConfirm: async () => {
          await api.deleteAccount();
          resolve({ content: [{ type: "text", text: "Account deleted." }] });
        },
        onCancel: () => {
          resolve({ content: [{ type: "text", text: "Deletion cancelled by user." }] });
        }
      });
    });
  }
});Altyapı:

MCP ekosistemi genelinde model aynıdır: ajan niyeti ifade eder, insan yürütmeyi onaylar. Bunun Chrome dışındaki farklı MCP uygulamalarında nasıl çalıştığına dair daha geniş bir bakış için, en iyi MCP sunucuları ve istemcileri genel bakışımıza göz atın.

WebMCP Uygulamanızı Test Etme

İlk WebMCP entegrasyonunuzu çalışır hale getirdikten sonra test etme zamanı. 

Chrome DevTools ajan simülatörünü kullanma

Model Context Tool Inspector Uzantısını kurduktan sonra, simgesindeki küçük bir rozet mevcut sayfanın kaç araç kaydettiğini gösterir. Açılır pencereyi açmak, her aracı adı, açıklaması ve girdi şemasıyla gösterir. Kaydettiğiniz bir araç burada görünmüyorsa kayıt doğru çalışmamış demektir.

Şemaları genişletilmiş olarak birden fazla kayıtlı aracı gösteren uzantı paneli.

Ajan simülatörünü denemek için, Google’ın Flight Search demo web sitesine dönelim. Artık bu uygulamayı elle veya doğal dil kullanarak nasıl çalıştıracağınızı test edebiliriz. 

Manuel yürütme yaklaşımı

Manuel yürütme, ajan testinin belirlenemezlik unsurunu ortadan kaldırır. Uzantı panelindeki açılır menüden bir araç seçin, "Input Arguments" alanına bir JSON nesnesi yazın ve "Execute Tool"a tıklayın. Uzantı, sağladığınız parametreleri kullanarak aracı doğrudan çağırır.

searchFlights aracı seçili, JSON parametreleri doldurulmuş ve Execute Tool düğmesi görünen uzantı.

Bu, sorunları yalıtmak için değerlidir. Bir araç elle yazılmış parametrelerle doğru çalışıp ajan çağırdığında başarısız oluyorsa, sorunun execute işlevinde değil, araç açıklamanızda veya şemanızda olduğunu bilirsiniz. Örneğin, Google’ın seyahat demosunu kullanarak:

{
  "origin": "LON",
  "destination": "NYC",
  "tripType": "round-trip",
  "outboundDate": "2026-06-10",
  "inboundDate": "2026-06-17",
  "passengers": 2
}Altyapı:

Manuel araç yürütmesinden sonra arama sonuçlarını gösteren seyahat demo sayfası.

Doğal dil testi

Doğal dil testi Gemini API’sini kullanır. AI Studio’dan bir anahtarı uzantının ayarlarına yapıştırın, ardından şu türde bir istem yazın 

Search for round-trip flights from London to New York leaving June 10th, returning June 17th, for 2 passengers.Altyapı:

Uzantı bu istemi, araç tanımlarınızla birlikte Gemini 2.5 Flash’a gönderir ve model hangi aracın çağrılacağına ve hangi parametrelerin geçirileceğine karar verir.

Doğal dil giriş alanında bir istem yazılmış ve aşağıda ajanın araç çağrısı yanıtı görülen uzantı.

Ajan yanlış aracı seçerse veya parametreleri hatalı eşlerse, muhtemelen araç açıklamalarınızın daha spesifik olması gerekir. İyi açıklamalar, aracın ne yaptığını olumlu terimlerle açıklar (“uçuş uygunluğunu kontrol etmek için bunu kullanın”), ne için kullanılmaması gerektiğini değil.

Pratik bir test sıralaması:

1. Sayfa yüklendikten sonra araçların uzantıda göründüğünü doğrulayın.
2. Her aracı doğru parametrelerle elle çalıştırın. execute mantığının çalıştığını ve UI’nin beklendiği gibi güncellendiğini doğrulayın.
3. Hatalı parametrelerle çalıştırın. Doğrulamanızın hataları yakaladığını ve iletilerin ajanın kendi kendini düzeltmesi için yeterince net olduğunu kontrol edin.
4. Doğal dille test edin. Ajanın doğru aracı seçip kullanıcının sözlerini şema parametrelerine doğru eşleyip eşlemediğine bakın.
5. Köşe durumlarını test edin: kimliği doğrulanmamış kullanıcılar, devre dışı formlar, API kesintisi ve hızlı tekrarlanan çağrılar.

Özellikle Google ekosistemi içindeki MCP araçları bağlamı için, Google MCP Sunucuları eğitimi ilgili birkaç kalıbı kapsar. Chrome’un ötesindeki protokol manzarasına daha geniş bir bakış için bkz. Top Remote MCP Servers.

Sonuç

WebMCP, web sitelerine yapay zeka ajanlarıyla doğrudan bir iletişim kanalı sunar. Ajanların bir sayfada tahmin yürüterek gezinmesi yerine, site yapılandırılmış araç tanımları yayımlar ve ajan bunları tiplenmiş parametrelerle çağırır. Bildirimsel API, birkaç HTML özniteliğiyle mevcut formları ajan tarafından çağrılabilir araçlara dönüştürür. Emredici API ise daha karmaşık olan her şeyi kapsar. Güvenlik modeli, önemli eylemlerde kontrolün insanda kalmasını sağlar.

Taslak hâlâ erken aşamada, yalnızca Chrome Canary’de bir bayrak arkasında mevcut ve üretim kullanımı için uygun değil. Ancak hem Google hem de Microsoft’un bunu birlikte yazıyor olması ve W3C’nin yönetişim sağlaması, bunun istikrarlı bir web standardı olma yolunun gerçek olduğunu gösteriyor. API ile şimdi zaman geçirmek, kararlı sürüm geldiğinde araç tasarım kalıplarını ve güvenlik mekanizmalarını zaten anlamış olacağınız anlamına gelir.

Şimdiden hazırlanmaya başlamak istiyorsanız, mevcut sitelerinizdeki formları denetleyin ve hangilerinin ajan erişiminden en çok fayda göreceğini belirleyin. Arama formları ve uygunluk denetleyicileri düşük riskli başlangıç noktalarıdır. Bunlarda bildirimsel API ile rahat ettikten sonra, özel mantık gerektiren iş akışları için emredici araçlara geçin. 

Konuyu keşfetmeye devam etmek için şunları öneririm:

• MCP Model Context Protocol eğitimi — WebMCP’nin arkasındaki temel kavramlar için.
• FastMCP ile MCP Sunucuları Oluşturma — istemci taraflı WebMCP’yi tamamlayan sunucu tarafı MCP araçları için.
• Google MCP Sunucuları eğitimi — Google’a özgü entegrasyon kalıpları için.
• Top Remote MCP Servers ve Top MCP Servers and Clients — daha geniş ekosistem için.