Arrastas um retângulo na tela, dizes o que queres lá dentro, e quando olhas para trás o desenho já está feito por um agente de IA enquanto continuas a falar.
Foi esta a premissa que levou a equipa do James Daniel Whitford, da Ritza, a construir o Agent Draw — uma ferramenta que coloca um agente de IA a desenhar numa tela partilhada enquanto apresentas. O projeto nasceu de uma experiência com o 2draw (um jogo estilo Drawful) e rapidamente evoluiu para algo mais interessante: e se o agente fosse um participante ativo que desenha por ti?
O código é open-source (MIT) e há uma demo live para experimentares.
Vou explicar como funciona o Agent Draw, o que é o TLDraw, que modelos de IA funcionam melhor para desenho, e como a equipa resolveu os desafios técnicos de áudio, fila de desenhos e performance.
O que é o TLDraw?
O TLDraw é um SDK de tela infinita para React. Não é apenas um editor de desenho — é uma plataforma onde qualquer coisa que um utilizador faz com o rato, um agente pode fazer em código: criar formas, movê-las, desenhar setas entre elas.
O TLDraw já publica um Agent Starter Kit oficial que desenha e organiza formas através de um painel de chat, suportado por um Cloudflare Worker. O Agent Draw foi construído em cima desse kit.
Qualidade do desenho: nem todos os modelos são iguais
A equipa testou vários modelos com os mesmos dois pedidos: desenhar um diagrama de decisão e desenhar uma pessoa a jogar críquete.
- Claude Opus 4.8 — desempenho impressionante. O diagrama de decisão saiu limpo com primitivas (retângulos, losangos, setas). O críquete foi desenhado com a caneta, com uma cena completa e dinâmica.
- Claude Haiku 4.5 — igualmente bom no diagrama, mas para o críquete ficou-se pelas primitivas. Uma composição mais simples e estática com etiquetas de texto em vez de um sketch.
- Gemini 2.5 Flash Lite — desistiu cedo em ambos os pedidos. Resultados pobres.
A conclusão é clara: modelos mais capazes produzem composições mais ambiciosas e melhor colocação na tela.
Como foi feito: a arquitetura
O Agent Draw é composto por várias peças que funcionam em conjunto:
1. Captura da região
Criaram uma ferramenta personalizada no TLDraw chamada AreaCaptureTool. É uma máquina de estados com três fases: idle → pointing → dragging. Quando o utilizador levanta o rato, as coordenadas do retângulo arrastado são guardadas em coordenadas da página (não do ecrã), para funcionarem corretamente com zoom e pan.
2. Gravação de áudio
Quando a captura começa, o microfone é ativado através de um AreaRecorder — uma camada fina sobre o MediaRecorder do browser. Nada de transcrição ou agente aqui, apenas start() e stop().
3. Transcrição com Mistral Voxtral
O áudio gravado é enviado para uma rota /transcribe no Cloudflare Worker. Essa rota reencaminha o áudio para o modelo Voxtral da Mistral e devolve o texto. A chave de API do servidor cobre todos os visitantes da demo, mas podes usar a tua própria chave se quiseres.
4. Fila de desenhos (FIFO)
Esta foi a peça mais importante. Se arrastares um segundo retângulo enquanto o primeiro ainda está a ser desenhado, os pedidos não se atropelam. O sistema usa uma fila FIFO com um consumidor único — um atom do TLDraw que processa uma sessão de cada vez, movendo cada uma por transcribing → drawing.
Uma versão anterior tentava fazer stream do áudio ao vivo enquanto falavas, mas era instável e o valor era difuso. A versão final é discreta: capturas separadas que se enfileiram.
5. Agente recursivo
Em vez de uma chamada única (agent.request), usaram agent.prompt, que faz o modelo continuar a desenhar até não ter mais nada a acrescentar. Isto garante que o desenho fica completo numa só interação, sem shapes a meio.
6. Otimizações de performance
O starter kit inclui ações como setMyView (mover a câmara) e review (verificar sobreposições). Para o caso de uso do Agent Draw, estas ações estavam a custar uma viagem redonda ao LLM cada uma, sem melhorar o resultado. Removê-las da lista de ações do modo working reduziu o número de chamadas ao modelo para metade.
7. Prompt especializado
Sem instruções específicas, o modelo tende a escrever na tela o texto que ouviu, como um bloco de parágrafos. A equipa escreveu uma secção no system prompt que força o modelo a:
- Escolher a forma visual que melhor encaixa no pedido
- Desenhar imediatamente — sem pedir clarificações, sem parar para pensar
- Em vez de transcrever a frase, criar diagramas legendados com palavras-chave
- Construir o resultado completo numa só ronda
Considerações finais
O Agent Draw é um exemplo fantástico de como os agentes de IA podem sair da caixa de chat e interagir com interfaces visuais em tempo real. A arquitetura é surpreendentemente simples: uma ferramenta que captura um retângulo, um gravador de áudio, uma rota de transcrição, uma fila, uma chamada ao agente, e um prompt bem escrito.
Tudo o resto — a tela, o agente, o sistema de ações, o backend de streaming — veio do starter kit.
Se quiseres explorar o código, o repositório está em github.com/ritza-co/tldraw-agent-draw-demo. E se tiveres um projeto não-comercial, o TLDraw oferece uma licença gratuita (hobby).
Comentários (0)
Nenhum comentário ainda. Seja o primeiro!
Deixar comentário