Frontends com Vibecoding · Capítulo 28 de 35 · 16 min
Supervisionar o modelo que opera o computador
Quando o modelo opera programas, você define permissões, exige evidências e acompanha o custo por requisição, inclusive a mudança de tarifa em contexto longo.
Este capítulo faz parte do curso gratuito Frontends com Vibecoding.
O GPT-6 Astra leva cerca de 40 minutos para concluir um trabalho no computador, contra 75 minutos do modelo anterior da mesma empresa. São 47% menos tempo de relógio, e é o relógio que fecha ou não a conta de um projeto.
Quem contrata ou constrói tela precisa saber o que essa troca resolve, quanto ela custa por trabalho concluído e qual degrau de preço estoura o orçamento sem avisar.
Ao fim, você define que permissão dar a um agente que clica e digita no computador, em que ambiente ele roda e que prova exigir de cada tarefa. Tempo de leitura: cerca de 16 minutos, e a ficha de autorização, mais dez.
Uso de computador é a capacidade de o modelo enxergar a tela, clicar e digitar, como um estagiário sentado no seu lugar. Isso mudou o ciclo de produção. Antes você pedia, recebia texto, colava no programa, testava e voltava a pedir. Agora ele abre o programa, executa, confere o resultado na tela e devolve pronto para revisão.
A conferência visual saiu da sua mesa e entrou na execução. Essa é a mudança que altera prazo, e não a nota de nenhum teste.
Ver como texto
O ciclo de produção antes e depois do uso de computador. Antes, o ciclo passava por você: pedia, recebia texto, colava no programa, testava e voltava a pedir. Agora o modelo abre o programa, executa, confere o resultado na tela e devolve pronto, e você entra só para revisar.
No teste OSWorld 2.0, que mede serviços comuns de área de trabalho, o Astra acerta 72,6% contra 65,7% do modelo anterior da mesma empresa. O ganho de acerto é de sete pontos, e sozinho ele não justificaria a troca.
O número que decide o projeto é o tempo por trabalho concluído. Um ganho pequeno de acerto some diante de um serviço que termina pela metade do tempo, porque é o relógio que você paga.
Subiu duas vezes e meia o preço por token, para US$ 10 de entrada e US$ 50 de saída por milhão. O pedido que reaproveita cache, o trecho já enviado antes, paga US$ 1 por milhão, e os modos Batch e Flex cobram metade da tarifa.
A conta por trabalho concluído caiu mesmo assim, porque o Astra gasta cerca de um terço dos tokens do anterior para chegar ao mesmo lugar. Na medição da Artificial Analysis, um serviço de código sai por cerca de US$ 4,72 nele, contra US$ 9,18 no Claude Fable 5.1. Compare trabalho terminado, e o preço de tabela vira ruído.
Ver como texto
Custo de duas requisições. Entrada: 271 mil · saída: 20 mil: US$ 3,71 na tarifa Standard, sem cache; Entrada: 273 mil · saída: 20 mil: US$ 6,96 com tarifa de contexto longo; O que muda: A tarifa da requisição atual inteira. Cálculo ilustrativo; pedidos passados não mudam.
Na tarifa Standard do GPT-6 Astra consultada em 26 de outubro de 2026, pedidos com mais de 272 mil tokens de entrada usam o dobro das tarifas de entrada e cache e 1,5 vez a tarifa de saída, para a requisição inteira. A saída passa de US$ 50 para US$ 75 por milhão de tokens nesse caso.
Isso não refatura requisições anteriores. O histórico reenviado faz parte da entrada do pedido atual e pode levá-lo à faixa de contexto longo. Acompanhe o uso por requisição e estabeleça um limite de custo compatível com a tarefa; compactar ou selecionar o contexto antes do envio é uma alternativa. Confira modelo, modalidade de processamento e tabela vigente antes de estimar o lote.
A receita econômica que vários operadores publicaram na mesma semana cabe em uma linha: o modelo caro planeja e revisa, e um modelo barato executa. Guarde o esforço máximo para o passo que decide.
Quem manteve o modelo caro como orquestrador, isto é, como o que distribui os passos, relatou queimar 80% da cota de cinco horas num único trabalho. O que limitou a primeira semana foi a cota, não a capacidade do modelo.
Ver como texto
A receita econômica: o modelo caro planeja, um modelo barato executa os passos e o modelo caro revisa. Quem manteve o modelo caro como orquestrador relatou queimar 80% da cota de cinco horas num único trabalho.
Duas falhas medidas por avaliadores independentes valem o seu tempo. O modelo completa o que não viu: pedidos de reconstrução a partir de foto voltaram com detalhes que o original não tinha.
A segunda é o gosto padrão. Sem direção de arte no pedido, ele repete a mesma paleta em projetos sem relação entre si. Nomeie a paleta e confira contra a fonte antes de publicar.
Trocar de modelo também não conserta segurança. A Veracode comparou dois anos de código gerado e achou melhora na sintaxe e na taxa de compilação, sem melhora na segurança. A revisão do que o modelo escreve continua sendo sua.
Digitação em sistema antigo, sem integração, é o caso típico. Numa clínica que lança convênios à mão, o modelo abre o programa, digita os registros novos e devolve a lista do que ficou pendente. Comece com conta separada, dez registros de teste e limite de tempo, e meça o custo desses dez antes de soltar os duzentos.
Escolha um trabalho que você repete, rode-o cinco vezes no modelo que já usa e anote custo, tempo e número de correções. Repita as mesmas cinco rodadas no modelo mais barato e compare o custo por serviço terminado, não o preço por milhão. Defina um limite de custo e acompanhe o tamanho de cada requisição antes de ampliar o volume.
Guia prático: o agente que navega e grava a tela de verdade
Vídeo de lançamento, demonstração de produto e tutorial pedem a tela real do site, e não uma imitação desenhada. O curso de edição estudado em 07/10/2026 resolve isso com um agente que abre o navegador sem janela, segue um roteiro de ações escrito em JSON (esperar, rolar, mover o cursor, clicar, digitar, aguardar um texto, marcar um instante) e grava. Os padrões medidos no gravador: janela de 1600 por 1000, escala 2, saída com 2400 px de largura, 30 quadros por segundo e um arquivo de marcas com o segundo exato de cada ação.
Três detalhes separam a gravação boa da borrada. Escala 1 sai sem nitidez quando o vídeo é ampliado. O navegador sem janela não desenha o mouse, então o roteiro injeta um cursor que afunda no clique, para quem assiste ver onde a ação acontece. E a gravação contínua de uma página pesada dá pulos de até 1 segundo quando a máquina está ocupada: nesse caso, a saída é tirar um print da página inteira em escala 2 e animar a rolagem depois, na edição.
Quando a tela não pode ser gravada, porque mostra conta, cliente ou valor, o material recria a interface em HTML fiel à real, com e-mail, telefone e valores borrados ou trocados por marcador. A regra que vale para os dois caminhos: o agente grava e recria, mas não faz login, não publica e não mostra dado sensível sem borrar.
Grave a página [ENDEREÇO PÚBLICO] para a demonstração do [PRODUTO].
Janela de 1600 por 1000, escala 2, tema [claro ou escuro].
Roteiro, nesta ordem, com uma marca nomeada em cada passo:
1. Espere 1,5 s com a página parada no topo.
2. Role até a seção [NOME DA SEÇÃO] em 2 s.
3. Leve o cursor até o botão [TEXTO DO BOTÃO] e clique.
4. Espere o texto [TEXTO QUE CONFIRMA] aparecer.
Mostre o cursor. Grave 2 s a mais no fim de cada passo.
Se a gravação pular, faça também o print da página inteira em escala 2.
Proibido: fazer login, preencher dado real, enviar formulário, publicar.
Entregue o vídeo, o arquivo de marcas e o print, sem editar nada.Supervisionar o agente que grava a tela
Cinco passos para a primeira demonstração gravada por agente, sem surpresa na conta nem no vídeo.
Passo 1: Escreva o roteiro antes de soltar o agente
Liste as ações na ordem, com tempo de espera e o texto que confirma cada passo. O roteiro é o que você aprova; o agente só executa.
Deu certo quando: Cada passo tem ação, alvo visível e marca nomeada.
Erro comum: Pedir "grave o site funcionando" e receber dois minutos de cursor perdido.
Passo 2: Escolha a página certa para gravar
Grave só endereço público ou ambiente de teste com dados fictícios. Tela com cliente, conta ou valor vira recriação em HTML com os campos borrados ou trocados por marcador.
Deu certo quando: Nada na gravação identifica cliente, conta ou valor real.
Erro comum: Gravar o painel logado "só para o teste" e esquecer o e-mail de um cliente no canto da tela.
Passo 3: Prefira página inteira em página pesada
Se o site tem vídeo de fundo, 3D ou muitas imagens, peça o print da página inteira em escala 2 e anime a rolagem na edição. O resultado é liso mesmo com a máquina ocupada.
Deu certo quando: A rolagem no vídeo final não tem pulos.
Erro comum: Insistir na gravação contínua e aceitar um vídeo que engasga a cada seção.
Passo 4: Grave mais e corte pelas marcas
Folga de dois segundos no fim de cada passo custa pouco. O arquivo de marcas diz onde cada ação começa, e o corte acontece na edição, sem regravar.
Deu certo quando: Você acha o início de cada passo pelo arquivo de marcas, sem assistir tudo.
Erro comum: Gravar no tempo exato e descobrir que o clique ficou cortado.
Passo 5: Assista antes de usar
Veja a gravação inteira em tamanho real, não em miniatura. Confira cursor visível, texto legível e nenhuma janela, aviso ou dado que não estava no roteiro.
Deu certo quando: A gravação mostra só o que o roteiro pediu.
Erro comum: Aprovar pela primeira imagem e publicar um aviso de cookie cobrindo o botão principal.
No fim você tem: Uma demonstração gravada da página real, com roteiro aprovado, marcas para cortar e nenhum dado sensível na tela.
Analista de marketing de uma software house de gestão para pet shops em Campinas
Software por assinatura, vídeo de demonstração
Dor
O vídeo do produto era gravado à mão no painel de um cliente real, com o cursor tremendo e nomes de tutores à mostra. Cada versão nova do sistema pedia uma regravação inteira.
Solução
Ela criou uma conta de demonstração com dados fictícios e escreveu o roteiro de seis passos com marcas. O agente gravou em escala 2 com cursor visível; a tela de agenda, pesada, saiu como print de página inteira com rolagem animada.
Resultado do exemplo
O vídeo passou a ser refeito a cada versão rodando o mesmo roteiro, e nenhum dado de cliente apareceu mais na demonstração.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
O estado em outubro de 2026
Os três fornecedores documentam o uso de computador como recurso de primeira linha. A Anthropic publicou um conjunto de 17 ferramentas, de captura de tela a clique e zoom, com data de 01/08/2026 no nome. O Google pede que cada ação do Gemini venha com o motivo e oferece varredura da tela contra instruções escondidas. A OpenAI recomenda começar num navegador ou computador isolado.

Ver como texto
Página Computer use tool da documentação da plataforma Claude. O texto diz que a ferramenta dá ao Claude controle de captura de tela, mouse e teclado de um ambiente de computador, pelo conjunto computer_toolset_20260801, com 17 ferramentas como screenshot, left_click, type e zoom, e que a aplicação executa cada chamada num ambiente controlado pelo cliente. Recomenda a ferramenta de uso do navegador para tarefas que ficam dentro de páginas web.

Ver como texto
Página Computer use da documentação de desenvolvedores da OpenAI. O texto diz que o uso de computador deixa um modelo operar interfaces de navegador ou de computador para preencher formulários, testar fluxos e concluir tarefas, e o pedido de exemplo orienta começar num navegador ou computador isolado. Uma tabela indica o ComputerToolset para capturas de tela e ações de mouse e teclado e o BrowserToolset para ler texto de página.

Ver como texto
Página Computer use da documentação da API do Gemini. O texto explica que a ferramenta permite construir agentes que controlam navegador, celular e computador vendo a tela por capturas e gerando ações de clique e teclado, e lista recursos do Gemini 4 e 3.x: suporte a vários ambientes, ações com um campo intent que explica o motivo de cada passo, políticas de segurança configuráveis e detecção opcional de injeção de instrução por varredura das capturas de tela.
| Fornecedor | Como se chama | Proteção que a página destaca |
|---|---|---|
| Anthropic | Computer use tool, conjunto de 17 ferramentas | Execução num ambiente controlado pela empresa |
| OpenAI | Computer use na Responses API | Começar em navegador ou computador isolado |
| Computer Use do Gemini | Motivo de cada ação e varredura contra instruções escondidas |
Fonte: Documentação dos três fornecedores, consultada em 24/10/2026.
Faça agora: a ficha de autorização de um agente
Passo 1: Escreva a tarefa em uma frase, com o sistema que o agente vai abrir.
Deu certo quando: Algo como "baixar as notas fiscais do mês no portal do fornecedor X".
Passo 2: Defina o ambiente: máquina virtual ou navegador separado, com conta própria do agente.
Deu certo quando: Nenhuma sessão pessoal, e-mail ou banco aberto no ambiente.
Erro comum: Usar o navegador do diretor já logado em tudo.
Passo 3: Liste o que é proibido: pagar, enviar mensagem, aceitar termo, apagar arquivo.
Deu certo quando: Uma lista de quatro ou cinco ações que exigem confirmação humana.
Passo 4: Exija prova: capturas de tela de cada passo e o motivo registrado de cada ação.
Deu certo quando: A revisão leva cinco minutos, olhando o registro.
No fim você tem: Uma ficha de uma página que o time técnico configura e a área de risco aprova.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- CursoClaude Code: do zero à prática
- Comparar o VS Code com as alternativassugerido pelo grafoApresenta o conceito “Cursor”, usado em “Supervisionar o modelo que opera o computador”.
- CursoSíntese e didática com IAsugerido pelo grafoDepois de escolher a informação essencial e desenhar hierarquia, gráficos e fluxos compreensíveis, o aluno pode aplicar esses critérios às interfaces do curso de frontend. A ponte conecta clareza da mensagem, acessibilidade e decisões de apresentação.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo9 capítulos de “Frontends com Vibecoding” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Avaliar e melhorar agentesOrçar cada tentativa e o resultado finalExaminar conexões de Orçar cada tentativa e o resultado final
- MCP e Chrome: agentes de IA no navegadorQuando ler a estrutura da página e quando usar imagemExaminar conexões de Quando ler a estrutura da página e quando usar imagem
- Agentes de IA autônomos: como delegar e acompanharQuando liberar, ampliar ou suspender o agenteExaminar conexões de Quando liberar, ampliar ou suspender o agente
- Astra profundoGovernar a esteira: gerar uma vez, reaproveitar e aprovarExaminar conexões de Governar a esteira: gerar uma vez, reaproveitar e aprovar
Terminou a leitura?
Você está aqui: capítulo 28 de 35
0 de 35 concluídos
- Próximo · Capítulo 29 de 35 · 42 minConfigurar ambiente, skills e o contêiner de contextoLer o capítulo 29 sem concluir
Marque como concluído para o capítulo contar no seu painel e no certificado.
- Anterior · Capítulo 27 de 35 · 24 minCalcular custo por tarefa e definir governançaVoltar para o capítulo 27
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
Laboratórios ao vivo deste curso
Cada laboratório monta a biblioteca real dentro da aula, com controles para você mexer e o código do exemplo para copiar. O texto de reserva descreve a demonstração para quem lê sem JavaScript. O link abre o capítulo já no ponto do laboratório.
Base UI
Prenda o foco num diálogo sem escrever o comportamento
Abra a janela Agendar visita, percorra os campos com Tab, feche com Esc e acompanhe no painel onde o foco está e para onde ele volta.
Pacote
Abrir no capítuloConstruir componentes, usar o registro e publicar o catálogo@base-ui/reactLucide e Iconify
Mantenha uma família de ícones coerente e nomeie cada botão
Mude tamanho, traço e cor da barra, veja o símbolo do Iconify acompanhar o Lucide e rode a auditoria de nomes acessíveis.
Pacote
Abrir no capítuloProjetar uma linguagem de ícones e ilustraçãolucide-react, @iconify/reactMotion
Testar os três sinais que autorizam o terceiro degrau
Reproduza a entrada em sequência, aperte o botão com mola e arraste o cartão; ajuste rigidez e amortecimento e veja o que muda.
Pacote
Abrir no capítuloProjetar movimento, assinatura e narrativas por rolagemmotionVidstack
Ver o que separa um player de um vídeo cru
Dê o play, troque a velocidade e ligue a legenda; o painel ao lado mostra o estado que o player publica e que a etiqueta crua esconde.
Pacote
Abrir no capítuloProjetar movimento, assinatura e narrativas por rolagem@vidstack/reactcmdk
Achar um destino entre quarenta digitando três letras
Abra a paleta, digite fat e escolha um item só pelo teclado; o painel embaixo conta o que o filtro deixou passar e quanto tempo levou.
Pacote
Abrir no capítuloConstruir formulários e estados de interaçãocmdknumber-flow
Animar indicadores que mudam ao vivo com formato pt-BR
Veja três indicadores fictícios rolarem a cada troca e compare com o número em texto puro. Pause, reinicie e observe o separador de milhar.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisão@number-flow/reactApache ECharts
Medir o custo de desenhar 200 mil pontos com o ECharts
Troque o tipo de gráfico e o volume de pontos, leia o tempo de desenho e alterne o eixo em zero. Mude o tema do site e veja as cores refazerem.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisãoechartsApache ECharts
Painel grande com visões coordenadas
Clique num canal para filtrar todas as visões, troque a densidade entre 6, 9 e 12 visões, alterne tema e movimento e abra a tela cheia.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisãoechartssharp e svgo
Escolher a variante certa da imagem e conferir o teto de 150 KB
Arraste a largura da tela simulada, troque a densidade entre 1x e 2x e veja qual arquivo o navegador escolhe, quanto ele pesa e se cabe no orçamento.
Pacote
Abrir no capítuloValidar desempenho, autenticação e segurançasharp, svgoReact Flow (xyflow)
Disparar um pedido e ver o orquestrador distribuir, conferir e responder
Alterne paralelo e sequencial, ligue e desligue a verificação e use a medição real; observe o tempo de parede em cada combinação.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robô@xyflow/reactGSAP, Web Workers e number-flow
Dividir mil tarefas entre trabalhadores reais e correr três ritmos de geração
Execute com um trabalhador, depois com quatro e oito, e compare o tempo; em seguida percorra a corrida e separe a espera inicial do ritmo.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robôgsap, @number-flow/reactThree.js com React Three Fiber, drei, Rapier e XR
Carregar o braço robótico, ver a física trabalhar e entrar na cena com o visor
Carregue a cena pelo botão, inicie o ciclo, mostre os ângulos das juntas, troque a câmera e a velocidade; com visor, entre em realidade virtual.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robôthree, @react-three/fiber, @react-three/drei, @react-three/rapier, @react-three/xrMotion
Ver quatro agentes em raias trocando mensagens e a revisão devolvendo um trecho
Reproduza os 60 s de modelo, percorra o tempo pelo controle e esconda as mensagens para comparar a leitura; repare no tempo de parede contra a soma.
Pacote
Abrir no capítuloEspecificar, medir e produzir as cenas da máquinamotionMediaRecorder, Canvas 2D e Long Animation Frames (plataforma)
Medir o quadro da cena e gravar seis segundos dela em vídeo
Suba as partículas, force um bloqueio de 300 ms e leia o medidor; depois grave seis segundos, veja o codec escolhido e baixe o arquivo.
Pacote
Abrir no capítuloEspecificar, medir e produzir as cenas da máquinasem pacotesigma.js, graphology com ForceAtlas2 e cosmos.gl
Ver o grafo real do curso e um grafo de milhares de nós se organizarem em aglomerados
Rode o layout no grafo real, passe o mouse pelos nós e busque uma entidade; troque para 20 mil nós e leia o medidor; depois carregue o modo massivo na placa de vídeo.
Pacote
Abrir no capítuloAnimar um grafo de conhecimento amplo em movimentosigma, graphology, graphology-layout-forceatlas2, graphology-generators, @cosmos.gl/graph
Capítulos vizinhos em Frontends com Vibecoding
- 26Comparar modelos e interpretar benchmarks
- 27Calcular custo por tarefa e definir governança
- 28Supervisionar o modelo que opera o computador
- 29Configurar ambiente, skills e o contêiner de contexto
- 30Aplicar direção de arte, UX writing e padrões de código