Base: como os agentes usam um site hoje|INEMA.CLUB-PRO

Aula 4 · 15 min

MCP e WebMCP numa figura: servidor × página, quem chama quem

Os dois nomes parecem a mesma coisa e não são. MCP liga um agente a um servidor seu, fora do navegador, e é estável. WebMCP deixa a própria página declarar ferramentas para o agente que está no navegador, e é rascunho. Nesta aula você separa os dois numa figura e roda a detecção de recurso que mantém o site funcionando sem a API.

Começar a aula
Robô humanoide industrial sentado diante de um monitor com navegador, com cabos indo para um rack de servidor ao fundo.

Nesta aula você vai

  1. 1MCP: o agente chama o seu servidor (revisão 2026-07-28)
  2. 2WebMCP: a página declara ferramentas no navegador
  3. 3Detecção de recurso: sem a API, nada quebra
  4. 4Qual curso da formação ensina cada lado

Objetivo: situar MCP (servidor) e WebMCP (página) numa figura e ver a detecção de recurso com fallback rodando.

01Dois caminhos até a mesma ação

Clique em cada bloco.

Clique em cada bloco do diagrama para ver o que ele faz.

MCP: o agente vai até o seu servidor. WebMCP: a página aberta oferece ferramentas ao agente do navegador. O HTML segura os dois.

02Lado a lado

O que muda entre os dois, em quatro perguntas.

1. Onde roda?

MCP: num processo seu (na máquina do agente por stdio, ou num endereço HTTP). WebMCP: dentro da aba aberta, no JavaScript da página.

03Detecção de recurso com fallback

O único JavaScript de WebMCP deste curso: ver se a API existe e, sem ela, deixar o formulário como está. Registrar ferramentas de verdade é o curso 2. O detectar.mjs abre a página sem a API e com um stub vazio (não é a API nem o polyfill), só para mostrar os dois ramos.

Arquivo · kit/site/deteccao.js
// deteccao.js — detecção de recurso do WebMCP com fallback (kit do curso 0, Formação WebMCP).
// Spec usada: WebMCP, Draft Community Group Report de 16/10/2026 (document.modelContext).
// É rascunho de Community Group, não padrão: no Chrome só com origin trial (149–156) ou flag local.
// Sem a API, nada muda: o formulário acima continua sendo o caminho para pessoas e agentes.
(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 · os dois ramos
cd ~/projetos/formacao-webmcp-base-v72/kit
node detectar.mjs depois; echo "saída: $?"
Exemplo do repositório
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

Nos dois ramos o botão "Agendar" continua lá: o fallback não depende da API. Com a API presente, a página registraria as ferramentas; sem ela, segue igual para todo mundo.

04Prática

Os dois ramos e a detecção na sua cópia.

E1 · Os dois ramos

5 min

Rode o bloco "os dois ramos" e leia o deteccao.js linha a linha.

Pronto quando: node detectar.mjs depois → linha sem API · WebMCP ausente, linha com stub · WebMCP presente, as duas com botão Agendar: sim, e saída: 0.

E2 · Detecção na sua cópia

10 min

Copie kit/site/deteccao.js para /tmp/oficina/ e inclua <script src="deteccao.js"></script> no fim do body da cópia consertada na aula 3.

Pronto quando: node detectar.mjs /tmp/oficina/antes.html → as duas linhas com botão Agendar: sim e saída: 0.

E3 · O mapa do seu serviço

10 min

Escreva três linhas: que ação do seu site um agente pediria; se ela vive num serviço com API (candidata a MCP, curso 1) ou só na página (candidata a WebMCP, curso 2); e qual formulário é o fallback.

Pronto quando: o arquivo com as três linhas existe e cada ação tem um formulário de fallback nomeado.

05Teste da aula

Pergunta 1 de 4

Onde roda a ferramenta num servidor MCP?competência

06Em três frases

MCP é servidorO agente chama um processo seu; estável, revisão 2026-07-28.
WebMCP é páginadocument.modelContext, rascunho de 16/10/2026, só com origin trial ou flag.
Detecte e caia no HTMLSem a API, o formulário continua sendo o caminho.

Para ir além

MCP: versionamento (revisão atual 2026-07-28)WebMCP: repositório da spec e READMECurso 1 da formação: servidor MCP do seu serviçoCurso 2 da formação: WebMCP no seu site
Aula anteriorPróxima aula