Deep-Dive de Engenharia de Software

Arquitetura Técnica do Web MCP & AI Navigation Layer

Análise rigorosa de engenharia: contratos de semântica no DOM, especificação Model Context Protocol (MCP), orquestração multi-provedor (Gemini 3.6 / Gemini Nano local), controle de acesso RBAC e roteamento determinístico imune a alucinações.

Economia de Tokens

-95.8%

1.8k vs 42k tokens por requisição

Latência Média

~240ms

Function Calling direto sem parsing de HTML

Taxa de Alucinação

0.00%

Safe Route Registry determinístico

Segurança (RBAC)

Zero Trust

Separação estrita: Intenção da IA vs Autorização

Camadas de Engenharia do Sistema

Como a Pilha Tecnológica se Conecta

Ao contrário de abordagens tradicionais que usam visão computacional pesada ou injetam 50 páginas de HTML no prompt da IA, o Web MCP atua como um protocolo de abstração de barramento entre o DOM do navegador e qualquer agente inteligente.

Camada de Ingestão de Prompt (Client UI & Extensions)

Frontend

Captura o prompt do usuário via texto ou voz, anexa o contexto da sessão ativa (identificador do aluno, curso atual, progresso) e delega a orquestração para o AIService.

React 19, ChatWidget, Chrome Canary WebMCP Extension Hook

Scanner Semântico do DOM (Semantic Tree Builder)

DOM Parser

Varre o DOM em tempo de execução via querySelectorAll. Extrai exclusivamente recursos, identificadores, descrições e ações permitidas. Descarta 100% de tags visuais, estilos inline e scripts.

src/lib/mcp-dom/scanner.ts, data-mcp-* attributes, <form toolname='...'>

Servidor Web MCP Local & Remoto (JSON-RPC 2.0)

Protocol Engine

Expõe catálogo padronizado de ferramentas (tools/list, tools/call) e recursos (resources/list). Suporta clientes in-process de browser e clientes externos via Server-Sent Events (SSE).

src/lib/mcp/server.ts, /api/mcp, document.modelContext

Orquestrador de IA & Provedores Plugáveis

AI Reasoning

Recebe o prompt + os schemas JSON das ferramentas MCP. O LLM realiza Function Calling estrito com tipagem rigorosa, emitindo a intenção estruturada sem inventar URLs.

Gemini 3.6 Flash, Gemini Nano (window.ai.languageModel), MockAIProvider

Guardião de Permissões RBAC (Security Gatekeeper)

Zero Trust Security

Recebe a chamada emitida pela IA e valida se o perfil do usuário (student, teacher, admin) tem direito de executar a ação. Bloqueia tentativas ilegítimas antes de qualquer alteração de estado.

src/lib/mcp/permissions/, Zod validation, Role-Based Access Control

Safe Route Registry (Roteador Determinístico)

Safe Execution

Whitelist fechada mapeando resourceId para URLs internas. Sanitiza parâmetros dinâmicos e rejeita qualquer URL que não pertença ao catálogo aprovado da aplicação.

src/lib/navigation/registry.ts, Next.js App Router, encodeURIComponent

Realce Visual no DOM & Barramento de Telemetria

Observability

Rola a página suavemente até o elemento encontrado, aplica o anel pulsante azul neon e despacha métricas completas de latência, modelo e sucesso para auditoria.

highlighter.ts, .mcp-highlight-pulse, src/lib/observability/telemetry.ts

Diagrama de Sequência Textual (Execução em Tempo Real)

Trajeto cronológico dos pacotes de dados desde a entrada do usuário até o DOM

[User] ──(1. Pergunta em Linguagem Natural)──> [ChatWidget]
  │
  ├──(2. Extrai estado do aluno & anexa ao prompt)──> [AIService]
  │
  ├──(3. Consulta ferramentas oficiais disponíveis)──> [MCPServer]
  │        │
  │        └──(Scan do DOM: data-mcp-*)──> [SemanticTree: 21 recursos catalogados]
  │
  ├──(4. Envia payload leve + schemas JSON)──> [Gemini 3.6 Flash / Nano]
  │        │
  │        └──(Raciocínio & Function Calling)──> { tool: "navigate_to_resource", args: { resourceId: "certificates" } }
  │
  ├──(5. Interceptação de Segurança Mandatória)──> [Guardião RBAC]
  │        │
  │        ├── Aprovado (role="student" tem acesso) ──> [Safe Route Registry]
  │        │                                                   │
  │        │                                                   └──> router.push("/dashboard/certificates")
  │        │                                                   └──> highlightMCPResource("certificates") [.mcp-highlight-pulse]
  │        │
  │        └── Negado (role="student" em admin_panel) ─> Bloqueio Imediato 403 Forbidden
  │                                                            └──> Renderiza Banner Vermelho de Alerta
  │
  └──(6. Auditoria de Observabilidade)──> [Telemetry Bus: emit("ai.navigation.executed", latency: 240ms)]

Explore mais ferramentas de engenharia do projeto

Veja a telemetria ao vivo ou inspecione a árvore semântica do DOM em tempo real.

Telemetria em Tempo Real Fluxograma Interativo