# Aval Cartão em que a pessoa revisa o que a IA vai fazer e segura o botão para aprovar, ou então rejeita ou edita o pedido. > Aval é um componente exclusivo do THM Componentes que pede aval humano antes de o agente de IA agir. Mostra a ação, os destinatários, um resumo do impacto em formato de diff e a confiança do agente, e só aprova quando a pessoa segura o botão por 1,2 segundo. Também permite rejeitar ou editar a instrução. - Categoria: Interfaces de IA - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/aval/ ## Como ele é Lembra a tela de confirmação de um app de banco antes de transferir. Num cartão branco de cantos arredondados, o topo mostra um ícone em degradê anil e ciano, o nome do agente, há quanto tempo pediu e uma etiqueta de risco. Abaixo vêm a ação em destaque, os destinatários em chips com iniciais e o resumo do impacto, com sinais de mais, menos e til e valores antigos riscados. Uma barra de confiança enche contando até a porcentagem. No rodapé, o botão de aprovar ganha um anel que se fecha enquanto alguém o segura; ao aprovar, a borda brilha em degradê, e ao rejeitar o cartão perde a cor. ## Você pode estar procurando isto se pediu algo assim - “pedir confirmação do usuário antes de a IA mandar o e-mail” - “botão de segurar para confirmar, tipo app de banco” - “cartão para aprovar ou rejeitar o que o agente quer fazer” - “mostrar o que vai mudar antes de a IA executar a ação” - “tela de aprovação humana no meio do fluxo do agente” - “evitar que o chatbot faça algo sem a pessoa autorizar” - “confirmar uma ação importante com barra de confiança da IA” ## Também chamado de aprovação humana, cartão de aprovação, confirmação de ação, segurar para confirmar, human in the loop, hold to confirm, approval checkpoint, tool call approval ## Quando usar - Agentes que enviam e-mails, mensagens ou propostas em nome da empresa - Assistentes que agendam, remarcam ou cancelam consultas - Ações que emitem documentos, cobranças ou alteram dados de clientes - Copilotos internos em que a equipe precisa autorizar cada passo sensível ## Quando evitar - Ações triviais e reversíveis, em que pedir aprovação a cada passo cansa a pessoa - Fluxos de alto volume, em que segurar o botão vira atrito; nesse caso, configure o tempo como zero ## Como pedir para a sua IA ```text Crie um cartão de aprovação humana antes de o agente de IA enviar e-mails no meu sistema: ação proposta, destinatários, resumo do impacto com valores antigos e novos, barra de confiança, botão de segurar para aprovar com anel de progresso, rejeitar e editar, e acessível por teclado e leitor de tela. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Aval ### Por que Aval pede para segurar o botão? Segurar por 1,2 segundo evita aprovações por engano, como um toque acidental no celular. O anel mostra o progresso e esvazia se a pessoa soltar antes. Aval aceita mouse, toque, Espaço ou Enter, e o tempo é configurável pela prop holdMs; com zero, a aprovação vira um clique simples. ### Aval funciona com leitor de tela? Sim. Quem usa tecnologia assistiva que só envia clique recebe uma confirmação em dois passos em Aval: o primeiro aciona Confirmar aprovação e o segundo aprova. A confiança é exposta como medidor com valor e nível, as decisões são anunciadas e o foco vai para o resultado depois de aprovar ou rejeitar. ### Como conecto Aval ao meu agente? Passe pelas props a ação, a descrição, o nome do agente, os destinatários, as linhas do resumo de impacto e a confiança. Aval emite approve e reject com a ação e o horário, e edit com o texto ajustado, para que o seu backend execute ou descarte o pedido. ## Componentes relacionados - [Bastidores](https://vibecode.thmtecnologia.com/componentes/bastidores/): Painel que mostra, passo a passo, o que a IA está pensando, quais ferramentas chamou e quanto tempo cada etapa levou. - [Pingue-pongue](https://vibecode.thmtecnologia.com/componentes/pingue-pongue/): Conversa com a IA em que a resposta chega aos poucos, dá para gerar outra versão, editar a pergunta e avaliar. - [Quebra-cabeça](https://vibecode.thmtecnologia.com/componentes/quebra-cabeca/): Painel que a IA monta sozinha na tela, peça por peça, com métricas, gráficos, listas, formulários e botões. - [Errata](https://vibecode.thmtecnologia.com/componentes/errata/): Mostra o que mudou entre duas versões de um código ou texto, em vermelho e verde, para aceitar ou rejeitar cada trecho. - [Baralho](https://vibecode.thmtecnologia.com/componentes/baralho/): Avisos que surgem no canto da tela, empilhados como cartas, e somem sozinhos ou com um arraste para o lado. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.