Meu agente agora grava o vídeo do que construiu

Hoje boa parte do meu desenvolvimento acontece no celular. Abro o T3 Code, escrevo o que quero, e um agente - Claude Code ou Codex - começa a trabalhar num devbox na Railway. Eu vou fazer outra coisa. Quando ele termina, o T3 avisa no celular: "Done".

O "Done" diz o que mudou. Não mostra. E quando o trabalho é interface, o que importa é o que aparece na tela.

Este post é sobre o projeto que fez esse vídeo: o agentic-media-kit, open source, que deixa o agente mostrar o próprio trabalho.

O loop que roda no celular

O T3 Code é um app open source do Theo para conversar com agentes de código. Não é mais um modelo, é a interface: threads, diffs, um preview do app e a notificação quando o agente termina. É o meu controle remoto. Os agentes rodam num serviço sempre ligado na Railway, com os meus repositórios clonados. O notebook pode ficar fechado.

Para backend, esse loop funciona muito bem. Os testes passam, o diff é legível na tela do celular, eu aprovo ou peço ajuste. Para interface, ele quebrava sempre no mesmo ponto: toda feature terminava com "grava um vídeo rápido pra eu ver".

O agente até conseguia gravar. O que ele não tinha era um jeito de entregar esse vídeo para uma pessoa num celular. O arquivo ficava num diretório de um servidor que eu não ia abrir.

E havia um segundo pedido escondido no primeiro. Se a feature ficou boa, ela merece um post. A mesma gravação que serve para eu validar a tela serve para um Reel.

Capturar, montar, publicar

O kit faz isso em três etapas, e cada uma é uma pasta do repositório:

• Capturar. O agent-browser abre o app rodando numa viewport de celular, tira screenshots e grava em WebM um fluxo roteirizado. O agente olha as imagens antes de seguir. Isso já é validação: uma prova melhor do que "compilou".
• Montar. Um template em Remotion com props tipadas em zod gera o Reel em 9:16, o post de feed em 4:5, o quadrado e a capa. As capturas entram num mockup de celular com uma legenda por etapa, e o texto fica dentro das áreas seguras do Instagram, onde o nome de usuário e os botões não cobrem nada. O agente troca textos, cores e etapas via --props, sem editar código.
• Publicar. Um viewer em Express num único arquivo, sem JavaScript no cliente e sem banco: o bucket é o banco, e um projeto é só um prefixo. O vídeo toca a partir de URLs pré-assinadas do bucket S3 e nunca passa pela aplicação. Uma segunda URL força o download, que é o que permite salvar no celular e postar. Pessoas entram com senha. Agentes fazem upload com um bearer token.

No terminal do devbox, o caminho inteiro é este:

scripts/capture-flow.sh http://localhost:3000 apps/studio/public/captures mobile
npx remotion render Tour-Reel out/tour.mp4 --props=./tour.json
scripts/webm-to-mp4.sh out/tour.mp4 out/tour-ig.mp4
scripts/upload.sh meu-app out/tour-ig.mp4 out/cover.png
# -> https://<viewer>/p/meu-app

Mas eu não digito isso. O kit vem com uma skill do Claude Code que roda o pipeline. Do T3, no celular, escrevo "faz um Reel do novo onboarding", e alguns minutos depois a resposta é um link. Abro, assisto, toco em Baixar.

O T3 também tem preview próprio com ferramentas de gravação, e o kit documenta esse caminho como alternativa de captura. A divisão que tenho usado: explorar no preview do T3, vendo ao vivo, e depois congelar o fluxo num script capture-flow.sh, que roda sem tela no devbox e pode ser regravado a cada mudança de interface.

O vídeo de lançamento foi feito pelo kit

Não fazia sentido anunciar uma ferramenta de vídeo com um vídeo editado à mão. O lançamento passou pelo mesmo pipeline que o kit entrega para o agente. Um script gravou o viewer público numa viewport de iPhone 14: a galeria, o toque no projeto, o Reel tocando, a rolagem até o botão de download. Uma composição em Remotion montou quatro cenas: o gancho, um terminal renderizado em React repassando os comandos reais, a gravação do viewer dentro de um celular e o convite final. O resultado foi normalizado e publicado no viewer de demonstração.

É recursivo de propósito: a imagem dentro do celular, no vídeo, é o viewer tocando uma versão anterior desse mesmo Reel.

O que quebrou no caminho

A parte mais útil de construir isso foram os erros, porque nenhum deles aparece como erro.

• Capa em branco que "renderizou com sucesso". No Remotion, uma imagem estática renderiza o frame 0, e no frame 0 toda animação com spring() ainda vale zero. O título existe, só está invisível. A correção foi um hook useEnter() que devolve o estado final quando a composição é estática. A regra que ficou: o agente sempre abre a imagem gerada antes de dizer que terminou.
• A Railway ignorou o railway.json. O bloco de deploy, com healthcheck e política de restart, não foi aplicado, e o serviço subiu sem healthcheck nenhum. Configurei direto no serviço: /healthz.
• railway redeploy não redeploya o que você acha. Ele reexecuta o snapshot do deploy anterior e não pega as configurações novas. O comando certo é railway redeploy --from-source.
• O H.264 do Remotion sai em yuvj420p. É o formato de faixa completa, que a maioria dos players aceita mas nem todo upload aceita. O kit reencoda para yuv420p com faststart, que põe os metadados no início do arquivo para o preview começar antes de o download terminar.
• Segurança num repositório público. Preferi tornar o erro impossível a contar com cuidado. O repositório não tem nenhuma credencial da Railway. Não há ambientes de pull request, então um PR de fora não sobe nada com acesso a segredos. A galeria de demonstração é pública e somente leitura (PUBLIC_READ), mas escrever exige o token. E tudo o que está num bucket público é público, então captura com dado privado nunca vai para lá.

Para quem serve

Para quem roda agentes longe da própria máquina e quer ver a interface, não um resumo dela. E, principalmente, para fundador de SaaS que entrega sozinho ou com um time pequeno: cada feature vira evidência e conteúdo com o mesmo esforço. As mesmas imagens que provam que a tela funciona servem para um PR. Faça o upload para um projeto pr-123 e coloque o link na descrição.

Duas ressalvas honestas. O Remotion tem licença própria: é gratuito para indivíduos e times pequenos, mas empresas acima do limite precisam de licença comercial. E captura de app real pode conter dado real. Por isso o viewer pede senha por padrão, e o modo público é uma escolha explícita.

Experimente

O código é MIT. Ele renderiza de primeira, com uma interface de demonstração gerada, então dá para ver o resultado antes de apontar para o seu app:

git clone https://github.com/rwspatin/agentic-media-kit && cd agentic-media-kit
npm install
cd apps/studio && npx remotion render Tour-Reel out/tour.mp4

Repositório, guias de captura, specs do Instagram e deploy na Railway: https://github.com/rwspatin/agentic-media-kit. A demo pública está em media-viewer-production-dfcc.up.railway.app/p/launch.

Se usar, me conte onde quebrou. Issues e PRs são bem-vindos, e o feedback de quem tem um loop parecido com o meu é o que mais me interessa.

• Renan