WebMCP: ce este si cum il implementezi pe site in 2026

WebMCP este standardul prin care un site le spune agentilor AI ce actiuni pot face pe pagina, de exemplu sa caute un produs sau sa trimita o cerere de oferta, fara sa ghiceasca pe ce buton sa apese.

La sfarsitul lui septembrie 2026 functioneaza in Chrome prin origin trial, ChatGPT il foloseste in browserul integrat, iar Shopify l-a activat deja pe toate magazinele, inclusiv la checkout.

Aproape tot ce gasesti in romana despre WebMCP e scris in februarie: vorbeste de navigator.modelContext si de un program de acces anticipat. Intre timp s-a schimbat mult. Aici gasesti starea reala, codul care merge azi si verificarile de securitate pe care eu nu le-as sari.

Ce este WebMCP, pe scurt

Azi, un agent AI care deschide un site il trateaza ca un om grabit: citeste HTML-ul, se uita la un screenshot si incearca sa ghiceasca ce buton sa apese. Merge, dar e lent si greseste des.

Cu WebMCP, site-ul ii spune agentului ce poate face. Fiecare actiune devine un tool cu trei elemente:

• Un nume, de exemplu cerere_oferta
• O descriere in limbaj natural, care ii explica agentului cand sa il foloseasca
• O schema a parametrilor, adica ce date sunt necesare si in ce format

Agentul citeste lista de tool-uri, il alege pe cel potrivit si il apeleaza cu parametrii corecti. Site-ul executa actiunea cu aceeasi logica pe care o foloseste pentru client, in aceeasi sesiune si cu acelasi login.

Unde este WebMCP in septembrie 2026

Daca te-ai documentat acum cateva luni, ai de actualizat destule lucruri. Iata ce am verificat in sursele oficiale:

• Specificatia: este un draft al Web Machine Learning Community Group din W3C, actualizat pe 26 septembrie 2026. Editorii sunt de la Microsoft si Google.
• Chrome: WebMCP este in origin trial incepand cu Chrome 149. Pentru teste locale activezi flag-ul chrome://flags/#enable-webmcp-testing.
• ChatGPT: din 25 august 2026, "site tools" din ChatGPT sunt implementarea WebMCP. Browserul integrat din aplicatia desktop, ChatGPT Work si Codex descopera si folosesc tool-urile site-urilor care le expun.
• Shopify: din 5 august 2026 toate magazinele Liquid expun tool-uri pentru catalog, cos si comenzi. Din 28 septembrie 2026 si checkout-ul are tool-urile lui.

Detaliul care strica multe tutoriale: API-ul sta acum pe document.modelContext, nu pe navigator.modelContext. Daca iei un exemplu din februarie, probabil nu merge.

Ce inseamna asta pentru un magazin online din Romania

Daca vinzi pe Shopify, agentul gaseste tool-uri ca search_catalog, get_product, update_cart si proceed_to_checkout. La checkout apar get_checkout, update_checkout si complete_checkout, care trimite comanda doar dupa confirmarea cumparatorului.

Nu trebuie sa instalezi nimic. Exista insa limite clare: nu merge pe checkout B2B, nici pe checkout-uri integrate, iar agentul nu poate introduce un card nou.

Pentru un magazin romanesc, munca reala e in fisele de produs, in politica de retur si in costurile de livrare scrise clar. Daca un agent nu gaseste cat costa curierul sau in cate zile ajunge coletul, alege alt magazin.

WebMCP vs MCP: care e diferenta

Numele seamana, dar lucreaza pe niveluri diferite. MCP conecteaza agentii la servere, baze de date si aplicatii interne. WebMCP ii conecteaza la pagina deschisa in browser.

• Unde ruleaza: MCP ruleaza pe server sau pe desktop, mereu pornit. WebMCP ruleaza in tab-ul browserului.
• Cat traieste: MCP e persistent. WebMCP exista doar cat pagina e deschisa: inchizi tab-ul, agentul pierde tool-urile.
• Sesiune si login: la MCP gestionezi separat autentificarea. La WebMCP agentul lucreaza in sesiunea deja deschisa de utilizator.
• Cum se scrie: MCP foloseste JSON-RPC si SDK-uri in mai multe limbaje. WebMCP foloseste JavaScript sau atribute HTML.

Regula mea: MCP pentru logica de business si procesele din spate, WebMCP pentru actiunile pe care clientul le face pe site. De multe ori ai nevoie de amandoua. Cum construiesc agentii care lucreaza in spatele site-ului explic pe pagina despre agenti AI pentru firme.

Cum functioneaza WebMCP: API declarativ si API imperativ

Ai doua moduri de a crea un tool si le poti folosi pe amandoua pe acelasi site.

API declarativ: atribute HTML pe formulare

E cea mai rapida cale pentru formulare simple: contact, cerere de oferta, cautare interna, abonare la newsletter.

<form toolname="cerere_oferta"
      tooldescription="Trimite o cerere de oferta pentru un site sau un magazin online"
      action="/api/oferta" method="post">
  <label>Nume
    <input name="nume" required
           toolparamdescription="Numele complet al clientului">
  </label>
  <label>Email
    <input name="email" type="email" required
           toolparamdescription="Adresa de email pentru raspuns">
  </label>
  <button type="submit">Trimite</button>
</form>

Atributele sunt toolname, tooldescription, toolparamdescription pe campuri si toolautosubmit, care trimite formularul cand agentul apeleaza tool-ul.

Fara toolautosubmit, agentul completeaza campurile si clientul apasa butonul. Pentru o cerere de oferta asta prefer: omul vede ce se trimite in numele lui.

In handler-ul de submit afli daca formularul a fost trimis de un agent cu event.agentInvoked si ii intorci un rezultat cu event.respondWith().

API imperativ: tool-uri in JavaScript

Pentru configuratoare, filtre in mai multi pasi sau calculul costului de livrare ai nevoie de JavaScript. Un exemplu cu un tool care estimeaza livrarea pentru un judet:

if ('modelContext' in document) {
  const controller = new AbortController();

  await document.modelContext.registerTool({
    name: 'estimeaza_livrare',
    description: 'Estimeaza costul si termenul de livrare pentru un judet din Romania',
    inputSchema: {
      type: 'object',
      properties: {
        judet: { type: 'string', description: 'Judetul de livrare, de exemplu Cluj' }
      },
      required: ['judet']
    },
    annotations: { readOnlyHint: true },
    execute: async ({ judet }) => {
      const res = await fetch('/api/livrare?judet=' + encodeURIComponent(judet));
      return await res.json();
    }
  }, { signal: controller.signal });

  // ca sa scoti tool-ul: controller.abort();
}

Endpoint-ul /api/livrare e al tau: acolo poti chema tarifele curierului cu care lucrezi, fie ca e Fan Courier, Sameday sau altul.

Nu exista o metoda unregisterTool(): tool-ul se scoate cu AbortSignal. Intr-un site Next.js sau React il leg de ciclul de viata al componentei.

Cum implementezi WebMCP pe site, pas cu pas

1. Alege doua sau trei actiuni care aduc valoare: cautare produse, cerere de oferta, estimare livrare. Nu expune tot.
2. Activeaza flag-ul chrome://flags/#enable-webmcp-testing ca sa lucrezi local.
3. Porneste de la formularele existente cu API-ul declarativ.
4. Treci la API-ul imperativ doar unde formularul nu ajunge.
5. Seteaza adnotarile de securitate pe fiecare tool.
6. Testeaza cu extensia Model Context Tool Inspector, care arata tool-urile inregistrate si te lasa sa le apelezi manual.
7. Inscrie site-ul in origin trial si adauga token-ul, altfel vizitatorii cu Chrome stabil nu vad tool-urile.

Daca folosesti agenti AI care scriu cod pentru tine, tine-i izolati cat fac modificarile. Am explicat cum in ghidul despre Docker Sandbox pentru Claude Code si Codex.

Securitate WebMCP: patru lucruri de nesarit

Un tool WebMCP e o usa deschisa unui program care interpreteaza text. Atacurile de tip prompt injection impotriva agentilor sunt documentate si repetabile, asa ca tratez fiecare tool ca pe un endpoint public.

• readOnlyHint: marchez ca doar citire tool-urile care nu schimba nimic.
• consequentialHint: il pun pe true la tot ce trimite comenzi, plati sau date personale, ca browserul si agentul sa ceara confirmare.
• untrustedContentHint: il folosesc cand tool-ul intoarce continut scris de utilizatori, cum sunt recenziile.
• exposedTo: limiteaza tool-ul la originile in care ai incredere.

Mai sunt doua cerinte tehnice: WebMCP merge doar in documente cu origin isolation si cere permissions policy tools, care pentru iframe-uri de pe alte origini se da cu allow="tools".

Si un aspect de GDPR: daca un agent trimite prin formularul tau nume, email sau CNP, datele sunt tot ale clientului tau. Informarea si temeiul legal raman obligatiile tale, iar in caz de problema ANSPDCP nu intreaba daca a completat un om sau un agent.

Trei mituri despre WebMCP

• "Iti trebuie un fisier webmcp.json in root": in draftul specificatiei si in documentatia Chrome tool-urile le inregistreaza pagina, cu JavaScript sau atribute HTML. Manifestul din /.well-known/ e o conventie a comunitatii, nu un standard.
• "E o chestie Google": specificatia e scrisa de Microsoft si Google, iar ChatGPT o foloseste deja.
• "Te urca in Google": nu am gasit nimic care sa lege WebMCP de pozitiile organice. Ajuta agentii sa duca la capat actiuni, nu ajuta la ranking.

Are nevoie firma mea de WebMCP acum?

• Magazin pe Shopify: e deja activ. Lucreaza pe titluri, variante, retur si livrare scrise clar.
• WordPress si WooCommerce: in directorul oficial exista pluginuri WebMCP facute de terti. Inainte sa le instalez verific ce expun si cine le intretine.
• Site sau aplicatie web la comanda: aici WebMCP aduce cel mai mult, pentru ca alegi tu actiunile. Eu as incepe cu formularul de cerere de oferta.
• Site de prezentare fara formulare: deocamdata nu ai nevoie de el.

Daca vrei ca agentii AI sa lucreze si in spatele site-ului, pe comenzi, facturi sau emailuri, vezi cum abordez automatizarile AI. Pentru un asistent care raspunde clientilor pe site ai pagina despre chatbot AI. Pentru cazul tau concret, scrie-mi din pagina de contact.