WebMCP umožňuje webovým stránkám vystavit své funkce jako strukturované nástroje pro AI agenty. Ale jak to konkrétně funguje pod kapotou? Na této stránce najdete technický pohled na obě API, příklady kódu a vysvětlení životního cyklu nástroje.

Základní princip: Tool Contract

Celý WebMCP stojí na jednoduchém konceptu — Tool Contract (smlouva o nástrojích). Váš web vytvoří seznam akcí, které umí provádět, a ke každé akci přiloží:

AI agent si tento seznam přečte, vybere správný nástroj, zavolá ho se strukturovanými parametry a dostane zpět strukturovaný výsledek. Žádné hádání, žádné klikání poslepu.

Celý protokol je přístupný přes nové API prohlížeče navigator.modelContext.

Dvě cesty k implementaci

WebMCP nabízí dvě API. Nemusíte si vybírat — můžete (a často byste měli) použít obě zároveň.

Deklarativní API — dva HTML atributy a hotovo

Deklarativní API je navržené pro jednoduchost. Pokud na webu už máte standardní HTML formuláře, stačí k nim přidat dva atributy a formulář se automaticky stane nástrojem pro AI agenty. Není potřeba psát JavaScript.

Před (běžný formulář):

html

<form action="/rezervace" method="POST">
  <input name="datum" type="date">
  <input name="pocet-osob" type="number">
  <input name="jmeno" type="text">
  <button type="submit">Rezervovat</button>
</form>

Po (WebMCP-ready formulář):

html

<form action="/rezervace" method="POST"
      toolname="vytvor-rezervaci"
      tooldescription="Vytvoření rezervace stolu v restauraci. Vyžaduje datum, počet osob a jméno."
      toolautosubmit>
  <input name="datum" type="date">
  <input name="pocet-osob" type="number">
  <input name="jmeno" type="text">
  <button type="submit">Rezervovat</button>
</form>

Co se děje na pozadí:

Agent pak vidí nástroj vytvor-rezervaci se schématem, které obsahuje tři parametry: datum (typ date), pocet-osob (typ number) a jmeno (typ string).

Tři klíčové atributy:

Atribut	Povinný	Popis
toolname	Ano	Unikátní název nástroje
tooldescription	Ano	Popis v přirozeném jazyce — vysvětluje agentovi, k čemu nástroj slouží
toolautosubmit	Ne	Pokud je přítomen, formulář se odešle automaticky po vyplnění agentem. Bez něj agent vyplní pole, ale čeká na potvrzení uživatele.

Tip: Každý <input> musí mít atribut name, aby se dostal do schématu. Prvky bez name jsou tiše ignorovány — to je nejčastější chyba při implementaci.

Imperativní API — plná kontrola přes JavaScript

Pro složitější scénáře, které nelze popsat jedním formulářem, slouží imperativní API přes navigator.modelContext.registerTool(). Umožňuje registrovat nástroje s vlastní logikou, dynamickými daty a plnou kontrolou nad vstupy i výstupy.

Příklad — vyhledávání produktů:

javascript

if ("modelContext" in navigator) {
  navigator.modelContext.registerTool({
    name: "searchProducts",
    description: "Vyhledá produkty podle klíčového slova a volitelných filtrů. Vrací seznam produktů s cenami a dostupností.",
    inputSchema: {
      type: "object",
      properties: {
        query: { 
          type: "string", 
          description: "Hledaný výraz" 
        },
        category: { 
          type: "string", 
          enum: ["elektronika", "obleceni", "domacnost"],
          description: "Kategorie produktů" 
        },
        maxPrice: { 
          type: "number", 
          description: "Maximální cena v Kč" 
        }
      },
      required: ["query"]
    },
    async execute(params) {
      // Využíváte existující aplikační logiku
      const results = await searchProducts(params);
      return {
        content: [{
          type: "text",
          text: JSON.stringify(results)
        }]
      };
    }
  });
}

Klíčové metody imperativního API:

Metoda	Co dělá
registerTool()	Zaregistruje jeden nástroj. Pokud nástroj se stejným jménem existuje, přepíše ho.
unregisterTool("name")	Odebere nástroj podle jména.
provideContext()	Nahradí celou sadu nástrojů najednou. Užitečné, když se změní stav aplikace (např. po přihlášení uživatele).
clearContext()	Odebere všechny nástroje.

Důležité: Vždy kontrolujte existenci API pomocí if ("modelContext" in navigator). V prohlížečích bez podpory WebMCP objekt navigator.modelContext neexistuje. Váš web bude fungovat normálně — nástroje prostě nebudou viditelné pro agenty.

Životní cyklus WebMCP nástroje

Celý proces komunikace mezi webem a AI agentem probíhá v šesti krocích:

Důležité je, že v celém procesu funguje prohlížeč jako prostředník — agent nikdy nekomunikuje přímo s kódem stránky, ale vždy přes API prohlížeče. To zajišťuje bezpečnost a izolaci.

Human-in-the-loop — zapojení uživatele

WebMCP počítá s tím, že některé akce vyžadují potvrzení uživatele — například dokončení objednávky, platba nebo smazání dat. K tomu slouží metoda requestUserInteraction():

javascript

navigator.modelContext.registerTool({
  name: "completeOrder",
  description: "Dokončí objednávku a provede platbu.",
  readOnly: false,
  inputSchema: { /* ... */ },
  async execute(params, client) {
    // Zobrazí dialog a čeká na potvrzení uživatele
    const confirmed = await client.requestUserInteraction(
      async () => {
        return window.confirm(
          `Chcete dokončit objednávku za ${params.total} Kč?`
        );
      }
    );
    
    if (confirmed) {
      await processPayment(params);
      return { content: [{ type: "text", text: "Objednávka dokončena." }] };
    }
    return { content: [{ type: "text", text: "Objednávka zrušena uživatelem." }] };
  }
});

Tím je zajištěno, že agent nemůže provádět citlivé operace bez vědomí uživatele. Parametr readOnly: true u bezpečných nástrojů (vyhledávání, zobrazení dat) naopak říká, že potvrzení není potřeba.

Deklarativní vs. imperativní — kdy co použít?

Scénář	Doporučené API
Kontaktní formulář	Deklarativní
Vyhledávání produktů s filtry	Deklarativní
Rezervace s fixními poli	Deklarativní
Dynamické vyhledávání s live daty	Imperativní
Přidání do košíku (e-shop logika)	Imperativní
Akce závislá na stavu přihlášení	Imperativní
Složitý workflow s více kroky	Imperativní
Kombinace formuláře + custom logiky	Obojí

V praxi je nejčastější kombinace obou přístupů — deklarativní API pro jednoduché formuláře a imperativní API pro akce, které nemají vizuální reprezentaci ve formuláři.

Pozor na duplicitní názvy: Pokud máte formulář s toolname="contact" a zároveň registrujete imperativní nástroj se stejným názvem, Chrome vyhodí chybu „Duplicate tool name“. Vždy používejte odlišné názvy — například contact-form pro deklarativní a submit-contact pro imperativní variantu.

Jak si ověřit, že to funguje

Pokud máte Chrome 146+ s povoleným WebMCP flagem (chrome://flags/#enable-webmcp-testing), můžete v DevTools konzoli spustit:

javascript

// Zobrazí seznam registrovaných nástrojů
const tools = navigator.modelContextTesting.listTools();
console.log(tools);

// Sleduje změny v nástrojích v reálném čase
navigator.modelContextTesting.addEventListener("toolchange", () => {
  console.log("Nástroje aktualizovány:", 
    navigator.modelContextTesting.listTools()
  );
});

Google také nabízí rozšíření Model Context Tool Inspector v Chrome Web Store, které umožňuje prohlížet registrované nástroje a ručně je testovat.