Componentes para apps nativos de IA.

Adicione uma tela em que as pessoas vejam o assistente usar um site por elas: o ponteiro dele se move, clica e digita enquanto uma lista mostra cada etapa, com Pausar, Assumir o controle e uma aprovação antes de qualquer coisa que gaste dinheiro. Adicione um modo para ensinar uma tarefa fazendo-a uma vez e uma gravação que dê para rever e avançar.

Adicione um rastro de raciocínio ao assistente do meu app: enquanto ele trabalha, mostre um painel “Pensando…” que lista cada etapa com um indicador de carregamento, um tique quando termina e quanto tempo levou. Permita abrir o painel para ler o raciocínio, as buscas feitas e o código escrito, e recolha tudo em “Pensou por 6 s” ao terminar.

Mostre as ferramentas que o assistente usa enquanto responde como pequenos chips: um indicador girando enquanto cada uma roda, o nome e quanto tempo levou ao terminar, vermelho com o erro quando falhar, e um clique para abrir o que entrou e o que voltou. Ofereça também uma linha do tempo que se recolhe em “Usou 5 ferramentas”.

Adicione uma lista de tarefas que mostre no que o agente está trabalhando: uma linha por tarefa com o status (na fila, em andamento com um anel de progresso, com falha e um botão Tentar de novo, concluída com um tique), uma contagem curta como “12 faturas” e uma seta que abre as subetapas da tarefa.

Adicione um cartão de plano de funcionalidades: um checklist das funcionalidades em construção com uma barra de progresso (“3 de 5 prontas”). Cada funcionalidade mostra a fazer, em andamento ou pronta, abre uma descrição de uma linha e traz um selo pequeno de “Teste aprovado” ou “Teste reprovado”.

Deixe as pessoas continuarem enviando pedidos enquanto o assistente trabalha: mostre no que ele está trabalhando, com o progresso, e coloque os pedidos novos numa fila acima da caixa de prompt, onde podem ser reordenados, editados, removidos ou enviados como o próximo, com um botão para pausar a fila.

Adicione um gerador de imagens: uma caixa de prompt com opções de estilo e formato e um botão “Gerar” que cria quatro imagens por vez, cada uma mostrando o progresso enquanto se forma. Em uma imagem pronta, dá para criar variações, ampliar, salvar nos favoritos ou baixar; os lotes anteriores ficam logo abaixo.

Faça as respostas do assistente aparecerem palavra por palavra atrás de um cursor piscando, com citações numeradas que mostram o título, o site e um trecho da fonte ao passar o mouse, uma fileira de ações (copiar, refazer, gostei e não gostei) e duas ou três perguntas de continuação que dá para clicar e perguntar em seguida.

Quando o assistente responder com base nos nossos documentos, mostre os trechos que ele usou como cartões: cada um com a fonte e a página, uma nota de relevância, as palavras que batem destacadas e botões para fixar ou deixar de fora, com a resposta citando cada um pelo número.

Antes de o assistente fazer algo importante, mostre um cartão de aprovação: algumas perguntas, uma de cada vez (uma escolha, várias escolhas ou resposta curta), com Pular, Continuar e um contador “1 de 3”. Para ações arriscadas, mostre um cartão que diga exatamente o que vai acontecer, com Aprovar, Editar e Negar.

Adicione um cartão de recomendação: a opção que o assistente recomenda com um medidor de confiança (por exemplo, “82% · Alta”), os motivos com as fontes, o principal risco, o que mudaria a opinião dele, as alternativas que ele considerou com a confiança de cada uma e um botão para seguir em frente.

Adicione um assistente de voz ao meu app: um orbe brilhante que as pessoas tocam para falar, mostrando quando está escutando, pensando e falando, com legendas ao vivo, botão de mudo, toque para interromper enquanto ele fala e uma pequena barra de chamada com cronômetro e botão de encerrar.

Deixe as pessoas comentarem na prévia do meu app: um botão “Comentar” e, depois, um clique em qualquer lugar fixa um marcador com o avatar da pessoa e abre uma conversa em que outros podem responder. As conversas podem ser resolvidas (com Desfazer) e ocultadas, indicam quando há resposta nova e também aparecem em um painel lateral com as abas “Abertas” e “Resolvidas”.

Adicione uma caixa de prompt ao meu app: ela cresce conforme a pessoa digita, “@” abre uma lista de arquivos e fontes de dados para anexar como chips, “/” abre uma lista de comandos, e há botões para anexar arquivo, escolher o modelo, ditar por voz e enviar — tudo utilizável pelo teclado.

Adicione um seletor de modelo ao lado da caixa de prompt: um botão com o modelo e o esforço atuais que abre a lista de modelos, cada um com uma descrição curta, indicadores de velocidade e custo e um selo nos premium, além de um controle de esforço (Baixo, Médio, Alto, Máximo) que explica quanto cada nível consome.

Adicione ditado por voz aos campos de texto: um botão de microfone que transforma o campo numa onda sonora ao vivo com cronômetro, mostra as palavras enquanto a pessoa fala (as ainda não confirmadas em cinza) e tem botões para manter ou cancelar o que foi dito.

Quando alguém selecionar um texto no meu editor, mostre logo ao lado uma barra de IA — Melhorar, Mais curto, Mais caloroso, Corrigir ortografia e Traduzir — e depois mostre a reescrita no lugar, com as palavras antigas riscadas e as novas em verde, e botões para aceitar ou descartar.

Adicione uma paleta de comandos que abre com ⌘K: uma caixa de busca que encontra páginas, registros e ações enquanto a pessoa digita (tolerando erros de digitação), agrupa os resultados com os itens recentes primeiro, destaca as letras encontradas, executa o escolhido com Enter e mostra um estado vazio simpático com uma sugestão quando nada combina.

Quando o assistente propuser mudanças numa tabela, mostre antes de aplicar: cada célula alterada com o valor antigo riscado e o novo em verde, uma nota nas linhas que ele decidiu não mudar e botões para aceitar ou rejeitar cada célula, cada linha ou tudo, e depois Aplicar.

Adicione uma fileira de cartões de métricas ao meu painel: cada um mostra um número, a variação desde a semana passada em verde ou vermelho e um gráfico pequeno em que dá para ler o valor de cada dia passando o mouse. Abaixo, adicione um cartão de insight que passa pelo que os números significam, cada um com um próximo passo sugerido.

Adicione uma tabela de clientes: com busca, colunas ordenáveis (nome, etiquetas, volume mensal, último pedido e força do relacionamento em quatro barras), caixas de seleção nas linhas e uma barra de ações em massa que aparece quando há linhas selecionadas. No celular, a primeira coluna fica fixa enquanto o resto rola.

Adicione uma tabela de pedidos ao vivo com chips de status acima (Todos, Novo, Em andamento, Enviado, Problema), cada um com sua contagem, filtrando as linhas ao clicar. Pedidos novos aparecem no topo e as linhas que mudam de status se movem suavemente; inclua uma caixa de busca, um botão para pausar as atualizações ao vivo e a opção de agrupar as linhas por status.

Mostre as mudanças de código feitas pelo agente como um diff revisável: arquivo por arquivo, linhas removidas em vermelho e adicionadas em verde com as palavras alteradas destacadas, código sem mudança recolhido, uma caixa “Visto” por arquivo, comentários em qualquer linha alterada e uma opção para alternar entre a visão unificada e a lado a lado.

Adicione um visualizador de logs ao vivo ao admin do meu app: as linhas chegam com horário, nível e origem; cada nível tem um botão para mostrar ou ocultar, com contagem; uma caixa de busca destaca o que combina; ele acompanha a linha mais nova até eu rolar para cima (e então mostra um botão “linhas novas”); e eu posso pausar, abrir os detalhes de uma linha e copiar linhas.

Adicione um construtor de automações: um fluxo em um canvas pontilhado que começa com um gatilho, se divide em condições de sim/não e executa ações, com um + em cada conexão para adicionar uma etapa a partir de um menu, etapas que podem ser renomeadas ou excluídas, arrastar e zoom, e um botão “Testar” que destaca cada etapa enquanto ela roda.

Adicione um quadro kanban com uma coluna para cada etapa, cartões que dá para arrastar entre colunas com mouse ou dedo ou mover pelo teclado (Espaço para pegar, setas para mover, Espaço para soltar), uma contagem e um limite em cada coluna e um “Adicionar cartão” rápido no fim de cada uma.

Mostre quem mais está no documento agora: uma pilha de avatares com um ponto de ativo ou ausente, o cursor de cada pessoa com o nome na cor dela, o que cada um está selecionando ou digitando, um aviso quando alguém entra ou sai e um jeito de seguir alguém clicando no avatar.

Adicione um histórico de versões: uma linha do tempo das versões salvas, agrupadas por dia, com quem fez cada uma e a versão atual marcada. Ao escolher uma versão, aparece o que mudou (ou uma comparação antes/depois da página), e “Restaurar” pede confirmação, mantém a versão atual no histórico e pode ser desfeito.

Adicione uma barra lateral ao meu app: a troca de espaço de trabalho no topo, as páginas principais com ícones e contagem de não lidos, seções que recolhem, um destaque que desliza até a linha sob o ponteiro, a pessoa conectada embaixo e um botão que recolhe tudo em uma barra de ícones com dicas.

Adicione um checklist de configuração para novos usuários: um anel de progresso com “2 de 5 concluídos”, os passos em ordem com o tempo de cada um, o próximo aberto com um botão que o faz e “Pular por agora”, uma comemoração quando tudo estiver pronto e um jeito de esconder o guia e trazê-lo de volta. Ofereça também uma versão como um pequeno botão no canto da tela.

Adicione uma página de configurações em seções (dados da loja, entrega, notificações) que marque cada campo que eu mudar, mostre uma barra com o número de alterações não salvas e os botões Salvar / Descartar, verifique os campos antes de salvar e vá até o primeiro problema, confirme quando salvar e salve também com Ctrl+S ou ⌘S.

Transforme o formulário de inscrição em um assistente passo a passo: uma barra de etapas mostrando onde estou e quais já terminei, cada etapa verificada antes de avançar com mensagens claras, Voltar sem perder nada, uma página final de revisão com links Editar para cada etapa e uma confirmação depois do envio.

Depois que alguém enviar uma planilha, mostre uma etapa para ligar as colunas aos meus campos: cada coluna com alguns valores de exemplo, o campo sugerido e o quanto a correspondência é confiável, um jeito fácil de trocar ou pular a coluna, avisos quando faltar um campo obrigatório ou duas colunas apontarem para o mesmo campo, e um botão Importar que mostra o progresso e um resumo.

Adicione envio de arquivos: uma área onde dá para arrastar arquivos, clicar para procurar ou colar imagens, uma prévia e uma barra de progresso para cada arquivo, uma mensagem clara quando um arquivo é grande demais ou do tipo errado, um botão Tentar de novo quando um envio falha, e anexos na caixa de mensagem que precisam terminar de enviar antes de a mensagem poder ser enviada.

Adicione um diálogo de permissão que aparece antes de outro app se conectar ou de o assistente fazer algo por mim: ele lista exatamente o que está sendo pedido em palavras simples, deixa desligar as partes opcionais, mostra uma prévia da ação (como o e-mail e quem vai recebê-lo), oferece “Permitir uma vez” ou “Sempre permitir” e tem a opção “Lembrar desta escolha”.

Adicione um seletor de agendamento: uma faixa com as próximas duas semanas (ou um calendário mensal) para escolher o dia, os horários livres agrupados em manhã e tarde com os ocupados em cinza, a escolha da duração da sessão, o fuso horário e um resumo com um botão Confirmar que vira uma confirmação com “Adicionar à agenda”.

Adicione uma seção de preços: três planos lado a lado com uma alternância Mensal / Anual que mostra quanto se economiza no anual, o plano mais popular em destaque, um botão Escolher em cada um que leva o plano e o preço para uma barra de checkout, e uma tabela comparando o que cada plano inclui.

Adicione notificações toast: elas se empilham num canto e se abrem ao passar o mouse, fecham sozinhas após alguns segundos (pausando enquanto o mouse está em cima), podem ser dispensadas com um deslize e vêm como sucesso, erro com Tentar de novo, carregando que vira sucesso e um aviso com Desfazer.

Adicione um sino de notificações à barra superior com a contagem de não lidas em vermelho. Ele abre uma caixa com abas Todas, Não lidas e Menções, notificações agrupadas em Hoje, Ontem e Antes, botões para agir em cada uma ali mesmo (aprovar, responder), um ponto para marcar como lida ou não lida, “Marcar todas como lidas” e novas notificações entrando deslizando quando chegam.

Crie os estados vazios das minhas listas: uma tela de primeira visita acolhedora com botões para adicionar o primeiro item ou testar com dados de exemplo, uma mensagem de “nenhum resultado” que cita a busca e oferece limpar os filtros, uma tela de erro com Tentar de novo e detalhes, e um aviso de sem conexão que mantém os últimos dados salvos à vista e tenta de novo sozinho.