20 linijek JS, jeden plik PHP i flaga w Chrome Canary. Tyle wystarczy żeby zarejestrować pierwsze narzędzie WebMCP.
Ten artykuł jest praktyczny — kod który działa, pułapki które napotkałem, i wyjaśnienie każdego kroku. Podstawą jest demo z poprzedniego artykułu serii.
Co potrzebujesz
- Chrome Canary (pobierz z google.com/chrome/canary)
- Strona na WordPressie (lub dowolna strona z PHP)
- 20 minut
Nie potrzebujesz: żadnego frameworka, npm, buildu, osobnego serwera.
Krok 1 — włącz flagę w Chrome Canary
Wejdź na chrome://flags i wyszukaj WebMCP. Włącz flagę Enable WebMCP for testing. Zrestartuj przeglądarkę.
Sprawdź w konsoli DevTools czy API jest dostępne:
console.log(typeof document.modelContext)
// powinno zwrócić: "object"Jeśli zwróci undefined — flaga nie jest włączona lub masz za starą wersję Canary.
Krok 2 — endpoint PHP
Stwórz plik który będzie obsługiwał wywołania narzędzia. Na WordPress najprościej wgrać go bezpośrednio do katalogu głównego lub do folderu motywu.
Ważne: nie wgrywaj do wp-content/uploads/ jeśli hosting blokuje wykonywanie PHP w tym folderze. Nie podawaj ścieżki bez wp-content jeśli plik jest zagłębiony — WordPress przechwyci request i zrobi redirect.
Minimalna wersja endpointu:
<?php
header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *');
$level = trim($_GET['level'] ?? '');
$allowed = ['uczen', 'biznes', 'oryginal', 'inzynier'];
if (!in_array($level, $allowed, true)) {
http_response_code(400);
echo json_encode(['ok' => false, 'error' => 'Nieprawidłowy poziom']);
exit;
}
// Twoje treści per poziom
$content = [
'uczen' => 'Prosta wersja dla ucznia...',
'biznes' => 'Wersja dla właściciela biznesu...',
'oryginal' => 'Oryginalny artykuł...',
'inzynier' => 'Wersja dla developera...',
];
echo json_encode([
'ok' => true,
'level' => $level,
'content' => $content[$level],
]);Przetestuj w przeglądarce — wejdź na twojadomena.pl/sciezka/plik.php?level=uczen. Powinieneś dostać JSON.
Krok 3 — rejestracja narzędzia w JS
Wklej ten kod na stronie gdzie chcesz udostępnić narzędzie. Np. w Divi przez Custom Code (tylko na tej podstronie, nie globalnie).
<script>
(function () {
'use strict';
var ENDPOINT = 'https://twojadomena.pl/sciezka/plik.php';
// Sprawdź dostępność WebMCP
// document.modelContext — Chrome 150+
// navigator.modelContext — Chrome 146-149
var ctx = document.modelContext ?? navigator.modelContext ?? null;
if (!ctx || typeof ctx.registerTool !== 'function') {
console.info('[WebMCP] Niedostępne w tej przeglądarce.');
return;
}
ctx.registerTool({
name: 'simplifyArticle',
description:
'Zwraca wersję artykułu dostosowaną do poziomu czytelnika. ' +
'Poziomy: uczen, biznes, oryginal, inzynier.',
inputSchema: {
type: 'object',
properties: {
level: {
type: 'string',
enum: ['uczen', 'biznes', 'oryginal', 'inzynier'],
description: 'Poziom czytelnika',
},
},
required: ['level'],
},
execute: async function (params) {
try {
var res = await fetch(ENDPOINT + '?level=' + encodeURIComponent(params.level));
var data = await res.json();
return data.ok
? { success: true, content: data.content }
: { success: false, error: data.error };
} catch (err) {
return { success: false, error: err.message };
}
},
});
console.info('[WebMCP] ✓ Narzędzie zarejestrowane.');
})();
</script>Krok 4 — weryfikacja
Otwórz stronę w Chrome Canary z włączoną flagą. W konsoli DevTools sprawdź:
// Powinno zwrócić tablicę z Twoim narzędziem
const tools = await document.modelContext.getTools();
console.log(tools);Jeśli widzisz swoje narzędzie z nazwą, opisem i schematem — rejestracja działa.
Wywołaj ręcznie żeby przetestować endpoint:
const tools = await document.modelContext.getTools();
const result = await tools[0].call({ level: 'uczen' });
console.log(result);Pułapki które napotkałem
Zła ścieżka URL — najczęstszy błąd. WordPress przechwytuje wszystkie requesty przez mod_rewrite i przekierowuje nieznane ścieżki na stronę główną. Jeśli Twój plik PHP jest w wp-content/themes/motyw/webmcp/plik.php — podaj dokładnie tę ścieżkę w JS, nie skróconą.
Stare API — przed Chrome 150 był navigator.modelContext, od 150 jest document.modelContext. Skrypt wyżej obsługuje oba przez ?? operator.
CORS — jeśli endpoint i strona są na tej samej domenie, CORS nie jest problemem. Jeśli testujesz lokalnie z endpointem na produkcji — dodaj Access-Control-Allow-Origin: * w nagłówkach PHP.
Cache skryptów — po zmianie JS wymuś odświeżenie przez Ctrl+Shift+R żeby mieć pewność że przeglądarka ładuje nową wersję.
Co dalej
Narzędzie jest zarejestrowane i działa. Możesz je wywołać ręcznie z konsoli lub przez agenta w Chrome który rozumie WebMCP.
Automatyczne discovery — agent sam wykrywa narzędzia na stronie bez podpowiadania — zależy od implementacji po stronie klienta. Na dziś (czerwiec 2026) Claude w Chrome wywołuje narzędzie gdy poprosisz go z nazwy. Pełne automatyczne discovery jest w trakcie implementacji wraz z upowszechnieniem standardu.
Następny artykuł: WebMCP w 2026 — stan standardu, roadmapa i kiedy wdrażać na produkcji
