E1 · Both branches
5 minRun the "os dois ramos" block and read deteccao.js line by line.
Done when: node detectar.mjs depois → line sem API · WebMCP ausente, line com stub · WebMCP presente, both with botão Agendar: sim, and saída: 0.
Lesson 4 · 15 min
MCP and WebMCP in one picture: server × page, who calls whom
The two names look like the same thing, but they are not. MCP connects an agent to a server of yours, outside the browser, and it is stable. WebMCP lets the page itself declare tools for the agent running in the browser, and it is a draft. In this lesson you separate the two in one picture and run the feature detection that keeps the site working without the API.
Start the lesson
In this lesson you will
- 1MCP: the agent calls your server (revision 2026-07-28)
- 2WebMCP: the page declares tools in the browser
- 3Feature detection: without the API, nothing breaks
- 4Which course in the program teaches each side
Goal: place MCP (server) and WebMCP (page) in one picture and see feature detection with fallback running.
01Two paths to the same action
Click each block.
Click each block in the diagram to see what it does.
MCP: the agent goes to your server. WebMCP: the open page offers tools to the browser's agent. The HTML holds up both.
02Side by side
What changes between the two, in four questions.
1. Where does it run?
MCP: in a process of yours (on the agent's machine over stdio, or at an HTTP address). WebMCP: inside the open tab, in the page's JavaScript.
2. Who calls?
MCP: the client (the agent) calls the server. WebMCP: the browser's agent reads the list with getTools and runs the tool; the function that runs is the page's.
3. Is it ready?
MCP: stable, revision 2026-07-28 (tutorials with SSE and initialize are from old revisions). WebMCP: a draft that has already been renamed once (from navigator to document, accepted on 05/19/2026). Lesson 5.
Seal
WebMCP: experimental as of 10/19/2026 (origin trial Chrome 149–156, Edge 150).
4. What should you prepare today?
HTML that the agent reads (lesson 3) works for both. If you have a service with an API, the MCP server is the stable step. The page with WebMCP comes in as a lab, always with detection and fallback.
03Feature detection with fallback
The only WebMCP JavaScript in this course: check whether the API exists and, without it, leave the form as it is. Registering real tools is course 2. The detectar.mjs opens the page without the API and with an empty stub (it is not the API or the polyfill), just to show the two branches.
File · kit/site/deteccao.js
// deteccao.js — WebMCP feature detection with fallback (course 0 kit, WebMCP Program).
// Spec used: WebMCP, Draft Community Group Report from 2026-10-16 (document.modelContext).
// It is a Community Group draft, not a standard: in Chrome only with an origin trial (149–156) or a local flag.
// Without the API, nothing changes: the form above is still the path for people and agents.
(function () {
const caminho = "modelContext" in document
? "WebMCP presente: aqui a página registraria as ferramentas (curso 2 da formação)"
: "WebMCP ausente: o site segue pelo formulário, igual para todos";
document.documentElement.dataset.webmcp = "modelContext" in document ? "sim" : "nao";
console.log(caminho);
})();Terminal · the two branches
cd ~/projetos/formacao-webmcp-base-v72/kit node detectar.mjs depois; echo "saída: $?"
Example from the repository
sem API · WebMCP ausente: o site segue pelo formulário, igual para todos · botão Agendar: sim com stub · WebMCP presente: aqui a página registraria as ferramentas (curso 2 da formação) · botão Agendar: sim saída: 0
In both branches the "Agendar" button is still there: the fallback doesn't depend on the API. With the API present, the page would register the tools; without it, the page works the same for everyone.
sem API · (a página não faz detecção) · botão Agendar: não com stub · (a página não faz detecção) · botão Agendar: não saída: 1
Running the same test on antes.html: the page does no detection at all and has no named button. WebMCP code without "modelContext" in document breaks in a browser that doesn't have the API, which today is almost every browser.
04Practice
Both branches and detection in your copy.
E2 · Detection in your copy
10 minCopy kit/site/deteccao.js to /tmp/oficina/ and add <script src="deteccao.js"></script> at the end of the body of the copy you fixed in lesson 3.
Done when: node detectar.mjs /tmp/oficina/antes.html → both lines with botão Agendar: sim and saída: 0.
E3 · Your service map
10 minWrite three lines: which action on your site an agent would ask for; whether it lives in a service with an API (a candidate for MCP, course 1) or only on the page (a candidate for WebMCP, course 2); and which form is the fallback.
Done when: the file with the three lines exists and each action has a named fallback form.
05Lesson quiz
Question 1 of 4
Where does the tool run in an MCP server?skill
Correct
MCP connects the agent (client) to a server of your own, outside the browser. A tool in the page's JavaScript is WebMCP.Not this one
MCP connects the agent (client) to a server of your own, outside the browser. A tool in the page's JavaScript is WebMCP.Review: Two paths to the same actionQuestion 2 of 4
What is the WebMCP surface in the October 16, 2026 draft?skill
Correct
The change from navigator to document was accepted on May 19, 2026 (PR #177). Older material with navigator.modelContext is out of date.Not this one
The change from navigator to document was accepted on May 19, 2026 (PR #177). Older material with navigator.modelContext is out of date.Review: Side by sideQuestion 3 of 4
What is the "modelContext" in document detection for?
Correct
Without the API, the code doesn't run the WebMCP branch and the form stays the way in. Nothing is hidden; the fallback is the site itself.Not this one
Without the API, the code doesn't run the WebMCP branch and the form stays the way in. Nothing is hidden; the fallback is the site itself.Review: Feature detection with fallbackQuestion 4 of 4
Is the detectar.mjs stub the WebMCP polyfill?
Correct
The stub doesn't register or run anything. The (unofficial) polyfill and the real API are for course 2.Not this one
The stub doesn't register or run anything. The (unofficial) polyfill and the real API are for course 2.Review: Feature detection with fallbackQuiz complete
You got {a} of {n} right. Get them all right and the lesson is marked as done.Pick an answer. The explanation shows up after you try.
06In three sentences
MCP is a serverThe agent calls a process of your own; stable, revision 2026-07-28.
WebMCP is a pagedocument.modelContext, October 16, 2026 draft, only with an origin trial or a flag.
Detect and fall back to HTMLWithout the API, the form is still the way in.