Pierwsze spojrzenie na WebMCP

WebMCP to nowy szkic standardu W3C zaproponowany przez inżynierów z Google oraz Microsoft.

Najprościej powiedziałbym, że to takie ARIA, tylko że dla AI.

Za pomocą JavaScript lub atrybutów HTML dajemy agentowi AI możliwość interakcji z naszą stroną.

Standard rozwiązuje problemy z tzw. screen-scraping

Agenci AI przeglądają struktury drzewa DOM lub robią zrzut ekranu i na ich podstawie analizują, co mają klikać. To tak, jakby zakryć komuś oczy i kazać mu klikać po aplikacji.

Może kliknie dobrze, a może kliknie źle.

Takie rozwiązania nie są optymalne, chociażby z powodu „przejadania” tokenów czy pewności, czy zadziała prawidłowo. Nie ma struktury, niczego,
a koszty tokenów rosną. Każdy, kto pracuje z LLM-ami, wie, jak cenne są tokeny.

Dlatego też powstała propozycja WebMCP, gdzie wprost mówimy agentom, co nasza strona oferuje, i taki agent na wstępie wie, co może sobie zabrać bez zgadywania, bez dodatkowych tokenów. Wprost mu mówimy: tu masz przycisk, tu masz input, tylko to Cię interesuje.

WebMCP

Wypełnia lukę między frontendem a AI, dostarczając dwa standardy do komunikacji.

Imperatywne

Czyli za pomocą czystego JavaScriptu:

navigator.modelContext.registerTool(toolDefinition)
navigator.modelContext.unregisterTool(toolName)

window.navigator.modelContext.registerTool({
  name: "addTodo",
  description: "Add a new item to the todo list",
  inputSchema: {
    type: "object",
    properties: {
      text: { type: "string" }
    }
  },


  execute: ({ text }) => {
    return { content: [{ type: "text", text: `Added todo: ${text}` }] };
  }
});

Deklaratywne

API dostarcza specjalne atrybuty, które umieszcza się w HTML

<form toolname="my_tool" tooldescription="A simple declarative tool" action="/submit">
    <label for="text">text label</label>
    <input type=text name=text>

    <select name="select" required toolparamdescription="A nice description">
        <option value="Option 1">This is option 1</option>
        <option value="Option 2">This is option 2</option>
        <option value="Option 3">This is option 3</option>
    </select>

    <button type=submit>Submit</button>
</form>

Jest kilka projektów demo do obejrzenia, a ja nagrałem video jak to działa, do obejrzenia poniżej.

Aktualne ograniczenia

Obecnie, aby korzystać z propozycji, musimy mieć włączoną przeglądarkę ze stroną, na której chcemy operować. Na tę chwilę nie ma możliwości interakcji z poziomu chata.

Nie ma też możliwości sprawdzania, czy strona korzysta z narzędzi WebMCP bez wcześniejszego wejścia na nią. Ten temat jest analizowany przez inżynierów.

Czy to zastępuje standard MCP?

W żaden sposób — to całkowicie nowy standard, który działa po stronie klienta.

Krótkie porównanie

Jak uruchomić

Obecnie API działa tylko w przeglądarce Chrome (146+)

1. chrome://flags/#enable-webmcp-testing
2. Trzeba również pobrać rozszerzenie WebMCP - Model Context Tool Inspector
3. Aby to działało, mamy dwa rozwiązania:
   1. Podpinamy API klucz Gemini (domyślnie)
   2. Ja poszedłem trochę inaczej — pobrałem rozszerzenie z GitHub i za pomocą Claude zmodyfikowałem kod tak, aby w połączeniu OpenAI i lokalnego modelu (llama.cpp) korzystać bez opłat.

Demo

Nagrałem krótkie demo, gdzie pokazuję, jak działa:

Problematyka

Jednym z takich pierwszych zastosowań, jakie bym widział, to zakładanie konta np. w banku.

Użytkownik wpisuje w jakimś bocznym panelu swoje dane i od razu widzi, jak mu się wszystko wypełnia samo i przechodzi kolejne kroki. Wszystko fajnie, mówisz, a LLM robi robotę… no właśnie, LLM…

Ale kogo ten LLM? Przy takich zastosowaniach bank musiałby mieć swoją infrastrukturę i wszystko, co wpisujemy, promptuje do bankowego modelu i dane poufne wtedy są bezpieczne.

Jeśli po naszej stronie spoczywałoby podpięcie się przez API, aby korzystać z tego standardu, to ja tego nie widzę (w każdym przypadku).

Od autora

AI nie połączyło frontendu i backendu w jedno (na razie).

Frontend nie znika, dostajemy kolejne narzędzia i jedną z takich zmian może być całkowicie nowe podejście do projektowania stron, aplikacji, interfejsów, co już też Google zaprezentowało A2UI.

Jak w przypadku telefonów projektowanie było na zasadzie Mobile First, teraz będzie AI First.

Ale jak będzie? Tego nie wie nikt — takiej dynamiki zmian w IT jak w przypadku AI nie było nigdy.

Jestem na bieżąco ze standardem i będę publikował istotniejsze zmiany.

Linki

https://github.com/GoogleChromeLabs/webmcp-tools https://developer.chrome.com/blog/webmcp-mcp-usage?hl=pl https://developers.googleblog.com/introducing-a2ui-an-open-project-for-agent-driven-interfaces/
https://webmachinelearning.github.io/webmcp/