Descubra o passo a passo exato do que acontece nos bastidores desde o momento em que você faz uma pergunta em linguagem natural até o clique no botão que o Web MCP gera para levar você ao lugar certo.
Para entender o conceito em 30 segundos sem termos técnicos
Você chega ao restaurante e diz: "Quero comer algo com massa e queijo artesanal". Você não precisa saber a receita secreta nem entrar na cozinha para procurar as panelas.
O garçom entende o seu gosto e consulta o Cardápio Padronizado (MCP). Ele não inventa um prato imaginário: ele seleciona exatamente o código oficial PRATO #42: Fettuccine Alfredo.
A cozinha confere seu pedido, checa se você tem autorização, prepara a mesa exata e entrega o prato na sua frente com uma plaquinha iluminada. Você só precisa saborear!
Assista a informação viajar através de cada camada do Web MCP ou clique nos nós para inspecionar os dados reais trafegados.
Texto livre digitado no Chat ou comando recebido da Extensão Chrome Canary.
O frontend captura o prompt do usuário e anexa o perfil ativo (aluno logado).
Payload estruturado { query: 'Onde vejo meus certificados?', role: 'student' }.
// 1. Mensagem enviada pelo usuário
{
"query": "Onde vejo meus certificados?",
"user": "Guilherme Rodovalho",
"role": "student",
"source": "ChatWidget"
}Nenhum HTML cru da página é enviado para a IA neste momento, poupando 95% de tokens!
Escolha uma situação real abaixo e clique para ver cada fase se acendendo em tempo real.
Entrada livre por texto ou voz via Chat / Plugin WebMCP
Tudo começa com uma pergunta livre feita pelo usuário no chat da aplicação ou pela extensão WebMCP.
{
"userMessage": "Onde vejo meus certificados?",
"userRole": "student",
"student": "Guilherme Rodovalho",
"activeCourse": "React Avançado (72%)"
}| Passo | Quem Executa? | O que Acontece? | Garantia de Engenharia |
|---|---|---|---|
| 1. Pergunta | Usuário Humano | Digita o que procura em linguagem natural no chat ou plugin. | Zero necessidade de decorar menus ou URLs. |
| 2. Descoberta | Contrato Semantic DOM | Atributos data-mcp-* e formulários revelam a estrutura da tela. | Não vaza código HTML pesado para a IA (economiza 95% de tokens). |
| 3. Raciocínio | LLM (Gemini / Nano / OpenAI) | Interpreta o significado e aciona a ferramenta correspondente via Tool Call. | A IA não cria links arbitrários (Zero Alucinação). |
| 4. Segurança | Servidor MCP (RBAC Gatekeeper) | Valida se o usuário tem o papel de acesso exigido para aquela ação. | Alunos nunca acessam telas proibidas de administrador. |
| 5. Roteamento | Registry Determinístico | O resourceId é convertido na rota interna exata do Next.js. | Blindado contra injeções de script ou links externos suspeitos. |
| 6. Ação Visual | DOM Highlighter & Navegador | O botão aciona a transição de tela e aplica brilho pulsante no elemento certo. | O usuário encontra o recurso em menos de 1 segundo. |
| 7. Telemetria | Event Bus de Observabilidade | Grava latência, intenção, modelo e resultado para auditoria contínua. | 100% observável com gráficos e logs em tempo real. |
No Modo Manual, a IA monta o card com a rota segura e aguarda seu clique para navegar. No Modo Auto-Pilot (Piloto Automático), se a ação for autorizada, o próprio agente executa o clique e a transição automaticamente por você após 800 milissegundos!
O plugin oficial do Chrome Canary lê a API nativa document.modelContext e lista todos os 21 recursos da nossa aplicação em uma tabela lateral. Ele permite que desenvolvedores inspecionem os schemas JSON e executem as ferramentas de navegação manualmente ou com Gemini.
Não. O MCP implementa marcadores de segurança como readOnlyHint e gates de permissão estritos. Apenas ações de navegação segura e leitura de contexto são liberadas autonomamente; alterações cadastrais exigem interação explícita do usuário.
O sistema possui um Registro Seguro Fechado (Safe Route Registry). Qualquer saída que não corresponda estritamente a um ID pré-registrado na aplicação é descartada pelo servidor MCP, impedindo erros 404 e tentativas de injeção de links maliciosos.
Abra o chat flutuante no canto inferior direito ou navegue pelo Dashboard da plataforma.