Construindo AetherDraw: Uma Lousa Branca Infinita Nativa de Agentes com WebMCP

Lousas brancas visuais como Excalidraw, Miro e FigJam são o playground definitivo para o pensamento humano. Sempre que preciso projetar uma arquitetura de sistema, traçar um pipeline de dados ou organizar uma sessão de brainstorming, eu imediatamente abro uma tela. O layout espacial parece natural para os humanos porque nossos cérebros processam relacionamentos e hierarquias através da disposição física.

No entanto, para agentes de IA, lousas brancas visuais sempre foram uma caixa-preta completa.

O Dilema da Tela para Agentes de IA

Hoje, se você quiser que um modelo de IA interaja com uma tela espacial, geralmente você fica preso a duas opções ruins:

A Abordagem Visual: Tirar capturas de tela, alimentá-las em um LLM multimodal e esperar que o modelo possa aproximar coordenadas de pixels. Isso leva vários segundos por etapa, consome tokens e é propenso a alucinações espaciais.
A Abordagem de Automação Frágil: Simular eventos frágeis de arrastar e soltar do mouse em elementos brutos de canvas HTML5. Uma leve mudança na rolagem da viewport, zoom ou tamanho da janela do navegador quebra toda a interação.

Quando a especificação do Protocolo de Contexto do Modelo Web (WebMCP) foi publicada, a solução se tornou óbvia. Em vez de forçar os agentes de IA a espreitar os pixels da tela de fora, o aplicativo da web pode expor sua AST interna da cena, limites geométricos e algoritmos de layout diretamente para o tempo de execução do navegador via document.modelContext.

É por isso que eu construí o AetherDraw para o Desafio WebMCP do DevPost 2026.

O que é AetherDraw?

AetherDraw é uma lousa branca infinita nativa de agentes e de código aberto. Ele pega o motor de canvas Excalidraw testado em batalha e o estende com um conjunto de 11 ferramentas tipadas por esquema organizadas em quatro camadas funcionais:

Inspeção Espacial: get_canvas_state, get_selected_elements, find_elements
Serializa a cena visual em uma AST estruturada. O agente recebe limites de elementos, rótulos e mapas de conexão em milissegundos de um único dígito.
Síntese Algorítmica: create_diagram
Aceita definições de nós e arestas de alto nível, calcula coordenadas de layout não sobrepostas via Dagre (DAG de Sugiyama), centraliza o título e ajusta automaticamente a câmera para caber na tela.
Mutações Finas: add_elements, update_elements, delete_elements, connect_elements
Realiza edições atômicas, alterações de propriedades e roteamento inteligente de setas cúbicas Bezier.
Layout & Tematização: apply_auto_layout, apply_theme, export_canvas
Reorganiza clusters bagunçados e troca paletas de cores em 7 temas curados (Clássico, Geada Nórdica, Neon Cyberpunk, Sonho Pastel, Projeto, Mínimo Escuro, Solarizado).

Co-Criação Verdadeira Bidirecional

O que torna isso empolgante é a verdadeira colaboração humano-agente:

Você esboça uma caixa com a ferramenta de caneta e escreve "Serviço de Autenticação".
O agente chama get_canvas_state, detecta sua caixa desenhada à mão, entende suas coordenadas e usa connect_elements para conectá-la ao restante da arquitetura de backend.
Uma suave seta Bezier conecta as formas em 1ms sem cortar a caixa ou perturbar seu texto.

Como Funciona o Motor de Layout e Roteamento

Em vez de fazer o modelo de IA adivinhar coordenadas (x, y), o AetherDraw descarrega o layout espacial para algoritmos de gráfico determinísticos:

DAGs Hierárquicos: O Dagre integrado calcula classificações de vértices e minimiza cruzamentos de arestas em O(|V| + |E|) tempo.
Roteamento Suave Bezier: Um motor de roteamento personalizado calcula curvas cúbicas Bezier suaves entre formas: B(t) = (1-t)^3 P0 + 3(1-t)^2 t P1 + 3(1-t) t^2 P2 + t^3 P3, t in [0, 1]
Evitação de Obstáculos: Se formas intermediárias estiverem entre a fonte e o alvo, a rota desvia para corredores externos para evitar cruzamentos de linha.
Ajuste Automático da Viewport: O ajuste matemático da câmera calcula caixas delimitadoras do diagrama e aplica um fator de zoom limitado para que o diagrama preencha a tela de forma limpa.

Telemetria Ao Vivo & Inspetor de Desenvolvedor

Para tornar o WebMCP observável, o AetherDraw inclui um Inspetor de Desenvolvedor deslizante que lista todos os esquemas de ferramentas registrados, transmite eventos de execução ao vivo e exibe temporizadores de duração de execução até o milissegundo.