O bloco Gen UI (Generative UI) é uma das ferramentas mais poderosas do SendBot. Ele permite que você renderize componentes de interface customizados e interativos diretamente na conversa, indo muito além das bolhas de texto padrão. Este bloco pode ser utilizado de duas formas: Manual (configurado por você no Studio) ou Generativa (gerada dinamicamente por uma IA).

​
O que é o Gen UI?

Diferente de uma bolha de texto ou imagem, o Gen UI é um “contêiner” para componentes React. Isso significa que você pode exibir qualquer coisa, desde um calendário de agendamento até um gráfico financeiro complexo, desde que o componente esteja registrado no seu webchat.

​
Como configurar manualmente

No Studio, ao adicionar um bloco Gen UI, você encontrará dois campos principais:
  1. Nome do Componente: O identificador único do componente React que deve ser renderizado (ex: booking-calendar, sales-chart, product-card).
  2. Dados (JSON): Um objeto JSON contendo as informações que o componente precisa para funcionar. Você pode usar variáveis do SendBot aqui usando a sintaxe {{minha_variavel}}.

​
Exemplo de Configuração

  • Nome: product-card
  • Dados:

​
Cenários de Uso Manual

O uso manual é ideal para situações onde você precisa de previsibilidade e performance.

​
1. Widgets de Agendamento

Se você já tem um componente de calendário, pode forçar a exibição dele após o usuário escolher um serviço.
  • Cenário: “Perfeito, agora escolha o melhor horário no calendário abaixo.”
  • Vantagem: Determinístico e rápido, sem depender da IA para decidir o formato.

​
2. Dashboards e Gráficos

Se o seu bot faz uma consulta em uma API externa, você pode passar o resultado para um componente de gráfico.
  • Cenário: Exibir o extrato de pontos de fidelidade do usuário.
  • Vantagem: Visualização de dados rica que seria impossível com apenas texto.

​
3. Experiências Gamificadas

Exiba roletas de descontos, raspadinhas digitais ou seletores de avatar.
  • Vantagem: Aumenta o engajamento do usuário com uma interface que “vive” dentro do chat.

​
Cenários de Uso com IA (Agent AI)

Quando usado em conjunto com o bloco Agent AI, o Gen UI se torna verdadeiramente “generativo”. A IA pode decidir, com base no contexto da conversa, qual componente mostrar e quais dados preencher nele.
  • Exemplo: O usuário diz “Estou procurando uma mesa de jantar de madeira”. A IA entende a intenção e, em vez de apenas listar links, ela emite um componente product-carousel com os móveis filtrados.

​
Melhores Práticas

  • Validação de JSON: Certifique-se de que o JSON inserido é válido. O editor no Studio avisará se houver erros de sintaxe.
  • Fallbacks: Lembre-se de que o componente deve estar disponível no pacote do seu Webchat para que ele seja renderizado corretamente para o usuário final.
  • Variáveis: Use e abuse de variáveis para tornar os componentes dinâmicos com base nas respostas anteriores do usuário.