Além do DOM Scraping: Construindo 'O ÚLTIMO TERMINAL' com WebMCP

Título do Projeto: THE LAST TERMINAL — Sala de Escape WebMCP

Repositório GitHub: https://github.com/scha54/WebMCP

Demo Ao Vivo: https://webmcp-blush.vercel.app/

1. Resumo Executivo & O Problema com Agentes Web Hoje

Nos últimos anos, agentes de navegador autônomos interagiram com aplicações web principalmente através de raspagem de DOM e inspeção visual. Um fluxo de trabalho típico de navegador AI envolve tirar capturas de tela em alta resolução, alimentá-las em um Modelo de Linguagem Visual (VLM), prever coordenadas de pixel ou seletores CSS, e disparar eventos sintéticos de clique e pressionamento de tecla.

Essa abordagem sofre de falhas críticas:

• Fragilidade: Pequenas refatorações de CSS ou marcação quebram instantaneamente os fluxos de trabalho dos agentes.
• Ineficiência de Tokens: Fazer upload de várias árvores de DOM e capturas de tela em alta resolução consome dezenas de milhares de tokens de LLM por ação.
• Latência: Laços de feedback visual levam segundos por etapa.
• Ambiguidade: Os agentes devem "adivinhar" as intenções dos botões sem tipos de parâmetros de entrada formais.

WebMCP (Protocolo de Contexto de Modelo Web) é um padrão emergente de navegador que resolve isso. Em vez de forçar os agentes de IA a reverter a engenharia de UIs visuais, o WebMCP permite que aplicações web registrem diretamente ferramentas legíveis por máquina (navigator.modelContext.registerTool).

Para demonstrar essa mudança de paradigma, construímos THE LAST TERMINAL—uma sala de escape cibernética polida e baseada em navegador onde jogadores humanos e agentes de IA colaboram para resolver quebra-cabeças interconectados da instalação usando capacidades de ferramentas WebMCP compartilhadas.

2. Arquitetura do Sistema: O Princípio da Lógica de Negócios Compartilhada

O princípio arquitetônico central por trás de THE LAST TERMINAL é Lógica de Execução Unificada. A aplicação nunca duplica a lógica de negócios para interações humanas versus interações de agentes.

                 ┌──────────────────────────┐
                 │     AGENTE WEBMCP /      │
                 │     SIMULADOR DE DEMO    │
                 └────────────┬─────────────┘
                              │
                      Chamadas de Ferramentas WebMCP
                              │
                              ▼
 ┌───────────────────────────────────────────────────────────┐
 │                   THE LAST TERMINAL                       │
 │                                                           │
 │  ┌─────────────────────────────────────────────────────┐  │
 │  │                 src/lib/webmcp/                     │  │
 │  │   tools.ts · schemas.ts · registry.ts              │  │
 │  └──────────────────────────┬──────────────────────────┘  │
 │                             │                             │
 │                             ▼                             │
 │  ┌─────────────────────────────────────────────────────┐  │
 │  │                  src/lib/game/                      │  │
 │  │   gameEngine.ts · gameState.ts · puzzles.ts         │  │
 │  └─────────────┬─────────────────────────┬─────────────┘  │
 │                │                         │                │
 │                ▼                         ▼                │
 │  ┌───────────────────────────┐ ┌───────────────────────┐  │
 │  │     UI Visual Humano      │ │   Atividade do Agente  │  │
 │  │  (Mapa da Instalação & Sistemas) │ │   & Registro de Ferramentas    │  │
 │  └───────────────────────────┘ └───────────────────────┘  │
 └───────────────────────────────────────────────────────────┘

Quando um usuário humano aciona interruptores físicos na UI de Controle de Energia, o componente dispara:

restorePower(['C', 'A', 'D', 'B'], 'humano');

Quando um agente de IA invoca a ferramenta WebMCP restore_power, o contexto de execução do WebMCP roteia diretamente para a função idêntica:

restorePower(['C', 'A', 'D', 'B'], 'agente');

Ambas as invocações alteram o GameState central, disparam atualizações de UI em tempo real, emitem feedback sintetizado em Web Audio e empurram uma entrada estruturada para o Feed de Atividade do Agente.

3. Conjunto de Ferramentas WebMCP (10 Capacidades Expostas)

A aplicação expõe 10 ferramentas estruturadas representando subsistemas realistas da instalação:

Esquema JSON & Exemplo de Código: restore_power