WebMCP: jak tvoje stránka mluví s AI agentem přes navigator.modelContext

Shrnutí

WebMCP je experimentální Chrome API, přes které tvoje stránka vystaví AI agentovi tooly přímo in-page – bez serveru, transportu nebo SDK. Zapneš ho flagem chrome://flags/#enable-webmcp-testing v Chrome 146+. V článku si projdeme, jak flag zapnout, jak zaregistrovat první tool v console a jak ho otestovat tak, aby ho agent reálně zavolal.

Otevři DevTools na svém webu, napiš navigator.modelContext a nejspíš ti vypadne undefined. Za tím jedním slovem se schovává celý nový způsob, jak tvoje stránka mluví s AI agentem. Tady je, jak ho zapnout.

Co je WebMCP a proč ne další server

WebMCP nechá web vystavit tooly přímo agentovi přes navigator.modelContext. Žádný proces běžící na pozadí, žádný transport, žádné SDK ani konfigurace. Stránka se v prohlížeči zaregistruje jako provider toolů a samotný prohlížeč funguje jako most mezi stránkou a agentem – předá agentovi registrované tooly a zprostředkuje jejich volání. Agent je vidí přímo na živé session uživatele – tedy v kontextu, kde je uživatel přihlášený, kde má načtená data a kde už prošel celým flow.

Tím se WebMCP zásadně liší od klasického MCP serveru. Ten běží jako perzistentní proces, drží si vlastní credentials a žije nezávisle na tom, jestli má někdo otevřený prohlížeč. WebMCP tooly jsou naopak efemérní. Žijí jen tak dlouho, dokud je tab otevřený. Zavřeš záložku a tooly mizí spolu s ní. Pro agenta to znamená, že nemluví s nějakou abstraktní službou kdesi v cloudu, ale s konkrétní stránkou, kterou má uživatel zrovna před sebou.

Důsledek je ryze praktický. Autentizaci toolu nemusíš řešit zvlášť, protože dědí session uživatele. Backend deployovat nemusíš, protože tool je kus JavaScriptu na stránce. A o běh serveru se nestaráš vůbec – životnost toolu se kryje s životností tabu.

Zapni flag (a měj správný Chrome)

API je za flagem, takže ho nejdřív musíš zapnout. Postup je krátký:

1. Jdi na chrome://flags/#enable-webmcp-testing.
2. U položky „WebMCP for testing“ přepni hodnotu na Enabled.
3. Klikni na Relaunch, aby se prohlížeč restartoval.

WebMCP potřebuje Chrome 146 a novější, což v praxi znamená Canary, Dev nebo Beta kanál. Pokud flag v seznamu vůbec nevidíš, máš nejspíš starou verzi prohlížeče. Na stabilním kanálu flag ještě být nemusí, takže pokud ho hledáš marně, sáhni po některém z vývojových kanálů a zkus to znovu.

První tool v console

Tool má čtyři klíčové části. name je jeho identifikátor, description říká agentovi, k čemu tool slouží, inputSchema popisuje vstupní argumenty jako JSON Schema a execute je funkce, která tool vykoná. Návratová hodnota z execute má tvar { content: [{ type: "text", text }] } – tedy pole obsahových bloků, kterými agent dostane text zpátky.

Zaregistrovat tool zvládneš rovnou v console. Obal to ale guardem, který ověří, že běžíš v secure contextu a že API vůbec existuje:

if (window.isSecureContext && navigator.modelContext) {
  navigator.modelContext.registerTool({
    name: "addTodo",
    description: "Přidá novou položku do seznamu úkolů uživatele.",
    inputSchema: {
      type: "object",
      properties: {
        text: { type: "string", description: "Text úkolu, který se má přidat." },
        priority: { type: "string", enum: ["low", "medium", "high"], description: "Priorita úkolu." },
      },
      required: ["text"],
    },
    async execute({ text, priority = "medium" }) {
      const li = document.createElement("li");
      li.textContent = `[${priority}] ${text}`;
      document.querySelector("#todos")?.appendChild(li);
      return { content: [{ type: "text", text: `Přidán úkol „${text}“ s prioritou ${priority}.` }] };
    },
  });
}

Tool tady reálně něco udělá – přidá <li> do seznamu na stránce – a agentovi vrátí textové potvrzení. inputSchema říká, že text je povinný string a priority je enum s hodnotami low, medium a high. Když tool přestaneš potřebovat, odebereš ho přes navigator.modelContext.unregisterTool("addTodo").

Existuje i deklarativní varianta, kde tool definuješ přímo v HTML. Na <form> přidáš atributy toolname a tooldescription a prohlížeč z formuláře tool odvodí sám, bez psaní JavaScriptu:

<form toolname="addTodo" tooldescription="Přidá novou položku do seznamu úkolů uživatele.">
  <input name="text" required />
  <button type="submit">Přidat</button>
</form>

Pro jednoduché případy, kde už formulář máš, je to nejkratší cesta.

Otestuj přes Model Context Tool Inspector

Registrace toolu je hezká, ale chceš vidět, že ho agent doopravdy zavolá. Na to slouží extension Model Context Tool Inspector z Chrome Web Store. Po instalaci ti vypíše všechny tooly, které stránka zaregistrovala, včetně jejich schémat – takže hned vidíš, jestli inputSchema vypadá tak, jak jsi zamýšlel.

Tooly pak můžeš spustit dvěma způsoby. Buď ručně, kdy zadáš JSON argumenty a tool zavoláš napřímo, nebo přirozenou řečí přes Gemini, kterému prostě napíšeš, co chceš. Napíšeš „přidej úkol koupit mléko s vysokou prioritou“ a uvidíš, jak agent sám vybere tvůj addTodo, naplní argumenty a zavolá execute. V tu chvíli web reálně mluví s agentem.

Když to nejede

Nejčastější problém je, že navigator.modelContext je undefined. Projdi tenhle seznam:

• HTTP místo HTTPS. API je SecureContext-only, takže přes čisté HTTP nebude dostupné. Výjimkou je localhost, který se za secure context počítá.
• Vypnutý flag. Zkontroluj, že je chrome://flags/#enable-webmcp-testing skutečně Enabled a že jsi po přepnutí dal Relaunch.
• Stará verze Chrome. Pod 146 API nečekej.
• Headless nebo ne-tab kontext. Provider je jen normální top-level tab, ne každý běhový kontext prohlížeče.

Když registrace selže, registerTool hodí InvalidStateError. Stane se to při duplicitním názvu toolu, při nevalidním inputSchema nebo když necháš name či description prázdné. Hlídej taky kontext: providerem je jen top-level tab. Cross-origin iframe potřebuje na <iframe> atribut allow="tools", jinak svoje tooly nevystaví.

Kde to dnes dává smysl

Efemérní tooly, závislost na otevřeném tabu a přístup k živé session uživatele předurčují WebMCP hlavně pro prototypy a interní tooling. Když chceš agentovi rychle dát možnost ovládat existující webovou appku, na které je uživatel přihlášený, ušetříš si celou serverovou vrstvu i řešení autentizace.

Zároveň buď realista. Tohle je rané preview, API se mění a Origin Trial, který by umožnil reálné nasazení mimo flag, je v plánu až na Chrome 149. Do produkce tedy WebMCP zatím nepatří.

Hlavní přínos je ale jinde. Za pár minut máš tool, který agent reálně zavolá, a to bez backendu a bez nasazení. Cestou si osaháš mentální model in-page toolů – tool jako kus stránky, ne jako vzdálená služba – a naučíš se navrhovat inputSchema tak, aby ho agent správně pochopil a naplnil. To je dovednost, která ti zůstane i ve chvíli, kdy navigator.modelContext přestane vracet undefined ve stabilním Chrome.