Como configurar sua experiência de chat de autoatendimento como agente de ponta a ponta - Amazon Connect
O que é streaming de mensagens com IA?Status de habilitaçãoCriar widget de comunicaçãoTeste a experiência de streaming

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Como configurar sua experiência de chat de autoatendimento como agente de ponta a ponta

nota

Os agentes de IA de orquestração exigem que o streaming de bate-papo seja ativado para contatos de bate-papo. Sem o streaming de bate-papo ativado, algumas mensagens não serão renderizadas. Consulte Ative o streaming de mensagens para bate-papo com tecnologia de IA.

O que é streaming de mensagens com IA?

O AI Message Streaming é um recurso do Amazon Connect que permite a exibição progressiva das respostas dos agentes de IA durante as interações de bate-papo. Em vez de esperar que a IA gere uma resposta completa antes de mostrar qualquer coisa ao cliente, o streaming exibe o texto à medida que ele é gerado, criando uma experiência de conversação mais natural.

Como funciona

Com as respostas padrão do chat, os clientes esperam enquanto a IA gera toda a resposta e, em seguida, a mensagem completa aparece de uma só vez. Com o AI Message Streaming, os clientes veem um crescente balão de texto em que as palavras aparecem progressivamente à medida que a IA as gera, semelhante a ver alguém digitar em tempo real.

nota

Documentação oficial: Para obter a referência técnica completa, consulteAtive o streaming de mensagens para bate-papo com tecnologia de IA.

Benefícios da exibição progressiva de texto

O AI Message Streaming oferece vários benefícios importantes para a experiência do cliente:

  • Tempo de espera percebido reduzido - os clientes veem a atividade imediata em vez de olhar fixamente para um botão giratório de carregamento

  • Fluxo de conversação mais natural - o texto progressivo imita a digitação humana, criando uma interação mais envolvente

  • Melhor engajamento - os clientes podem começar a ler a resposta enquanto ela ainda está sendo gerada

  • Mensagens de atendimento — os agentes de IA podem fornecer mensagens provisórias como “Um momento enquanto eu reviso sua conta” durante o processamento

Chat padrão versus bate-papo de streaming

A tabela a seguir compara a experiência do cliente entre o bate-papo padrão e o bate-papo por streaming:

Aspecto Chat padrão Chat de streaming
Exibição de resposta A mensagem completa aparece de uma só vez O texto aparece progressivamente (bolha crescente)
Experiência do cliente Aguarde a resposta completa com o indicador de carregamento Veja as palavras aparecerem em tempo real
Tempo de espera percebido Mais tempo (aguardando uma resposta completa) Mais curto (feedback visual imediato)
Sensação de conversa Transacional Natural, como conversar com uma pessoa
Mensagens de atendimento Indisponível A IA pode enviar atualizações de status provisórias
Tratamento do tempo limite do Lex Sujeito aos limites de tempo limite do Lex Elimina as limitações de tempo limite do Lex

Status de habilitação

A disponibilidade do AI Message Streaming depende de quando sua instância do Amazon Connect foi criada e de como ela está configurada.

Ativação automática para novas instâncias

As instâncias do Amazon Connect criadas após dezembro de 2025 têm o AI Message Streaming ativado por padrão. O atributo de MESSAGE_STREAMING instância é definido automaticamente true para essas instâncias, portanto, nenhuma configuração adicional é necessária.

Importante

Se você estiver usando uma AWS conta com uma instância do Amazon Connect criada antes de dezembro de 2025, talvez seja necessário habilitar manualmente o AI Message Streaming. Siga as instruções na documentação Ativar streaming de mensagens para bate-papo com tecnologia de IA para verificar o MESSAGE_STREAMING atributo da sua instância e habilitá-lo, se necessário.

Permissões do Amazon Lex Bot

O AI Message Streaming requer lex:RecognizeMessageAsync permissão para funcionar corretamente. Essa permissão permite que o Amazon Connect invoque a API de reconhecimento assíncrono de mensagens que permite o streaming de respostas.

Para novas associações de bots Lex: quando você associa um novo bot do Amazon Lex à sua instância do Amazon Connect, a lex:RecognizeMessageAsync permissão necessária é incluída automaticamente na política baseada em recursos do bot. Nenhuma configuração adicional é necessária.

Importante

Se você tiver um bot do Amazon Lex associado à sua instância do Amazon Connect antes da ativação do AI Message Streaming, talvez seja necessário atualizar a política baseada em recursos do bot para incluir a lex:RecognizeMessageAsync permissão.

Para atualizar sua política existente do Lex bot:

  1. Navegue até o console do Amazon Lex

  2. Selecione seu bot e acesse Política baseada em recursos

  3. Adicione a lex:RecognizeMessageAsync ação à declaração de política que concede acesso ao Amazon Connect

  4. Salve a política atualizada

Para obter instruções detalhadas, consulte a seção de permissões do bot Lex na AWS documentação.

Criar widget de comunicação

O Amazon Connect Communications Widget é uma interface de bate-papo incorporável que você pode adicionar a qualquer site. Nesta seção, você criará e configurará um widget para testar o AI Message Streaming. Você pode pular esta seção se planeja usar seu próprio widget de chat com o cliente.

  1. No console do Amazon Connect, navegue até sua instância

  2. Clique em Canais no menu de navegação à esquerda

  3. Clique em Widget de comunicações

  4. Você verá a página de gerenciamento do Widget de Comunicação

nota

O que é o widget de comunicação? O widget de comunicação é a solução de out-of-the-box bate-papo do Amazon Connect. Ele fornece uma interface de bate-papo totalmente funcional que você pode incorporar em sites usando um simples JavaScript trecho. O widget lida com toda a complexidade de estabelecer conexões, gerenciar sessões e exibir mensagens.

Etapa 2: criar um novo widget

  1. Clique em Adicionar widget para criar um novo widget de comunicação

  2. Insira os detalhes a seguir:

    • Nome: AI-Streaming-Demo-Widget

    • Descrição: Widget for testing AI Message Streaming

  3. Em Opções de comunicação, verifique se a opção Adicionar bate-papo está selecionada.

  4. Selecione Self Service Test Flow como seu fluxo de contato do Chat

  5. Clique em Salvar e continue para prosseguir para a página de configuração

Seleção de fluxo de contato

Certifique-se de selecionar um fluxo de contato que:

  • Tem as configurações básicas definidas (cria sessão de IA, registro, etc.)

  • Rotas para seu bot Lex com integração com o AI Agent

  • Tem tratamento adequado de erros para desconexões

Se você ainda não criou um fluxo de contato, preencha primeiro a seção Criando o fluxo.

Etapa 3: personalizar a aparência do widget

Personalize a aparência do seu widget de bate-papo para combinar com sua marca e selecione Salvar e continuar.

Etapa 4: Configurar domínios permitidos

O widget de comunicação só carrega em sites que são explicitamente permitidos. Esse recurso de segurança impede o uso não autorizado do seu widget.

  1. Role para baixo até Domínios permitidos

  2. Clique em Adicionar domínio e adicione o seguinte domínio para testar o localhost:

    • http://localhost

  3. Selecione Não em segurança

  4. Se você planeja implantar em um site de produção posteriormente, adicione esses domínios também e certifique-se de configurar a segurança (por exemplo,https://www.example.com)

Etapa 5: salvar e obter o código do widget

  1. Clique em Salvar e continuar para salvar a configuração do widget

  2. Após a criação, você verá a página de detalhes do widget com seu código de incorporação

  3. Importante: copie e salve os seguintes valores do trecho de código incorporado:

    • URI do cliente - O URL para o arquivo do widget JavaScript

    • ID do widget - Um identificador exclusivo para seu widget

    • ID do trecho - Uma string de configuração codificada em Base64

Etapa 6: Configurar o ambiente de teste local

Para testar o widget localmente, você criará um arquivo HTML simples que carrega o widget de comunicação.

  1. Crie uma nova pasta no seu computador para teste (por exemplo,ai-streaming-test)

  2. Baixe a imagem de fundo da página de demonstração e salve-a como background.jpg em sua pasta de teste

  3. Crie um novo arquivo chamado index.html em sua pasta de teste com o seguinte conteúdo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            background-image: url("background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
    <title>AI Message Streaming Demo</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
      (function(w, d, x, id){
        s=d.createElement('script');
        s.src='REPLACE_WITH_CLIENT_URI';
        s.async=1;
        s.id=id;
        d.getElementsByTagName('head')[0].appendChild(s);
        w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
      })(window, document, 'amazon_connect', 'REPLACE_WITH_WIDGET_ID');
      amazon_connect('styles', {
        iconType: 'CHAT',
        openChat: { color: '#ffffff', backgroundColor: '#ff9200' },
        closeChat: { color: '#ffffff', backgroundColor: '#ff9200'}
      });
      amazon_connect('snippetId', 'REPLACE_WITH_SNIPPET_ID');
      amazon_connect('supportedMessagingContentTypes', [
        'text/plain',
        'text/markdown',
        'application/vnd.amazonaws.connect.message.interactive',
        'application/vnd.amazonaws.connect.message.interactive.response'
      ]);
      amazon_connect('customStyles', {
        global: { frameWidth: '500px', frameHeight: '900px'}
      });
    </script>
</body>
</html>

Etapa 7: Substituir valores de espaço reservado

Substitua os valores do espaço reservado no arquivo HTML pelos valores reais do widget:

Placeholder Substituir por Exemplo
REPLACE_WITH_CLIENT_URI Seu URI de cliente a partir da Etapa 5 https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js
REPLACE_WITH_WIDGET_ID Seu ID do widget a partir da Etapa 5 amazon_connect_widget_abc123
REPLACE_WITH_SNIPPET_ID Seu Snippet ID da Etapa 5 QVFJREFIaWJYbG...(sequência longa de Base64)

Etapa 8: Iniciar um servidor Web local

Para testar o widget, você precisa servir o arquivo HTML a partir de um servidor web local. Aqui estão várias opções:

Opção A: Python (se instalado)

python -m http.server 8001
Opção B: Node.js (se instalado)

npx http-server -p 8001
Opção C: Extensão de servidor VS Code Live

  • Instale a extensão “Live Server” no VS Code

  • Clique com o botão direito do mouse index.html e selecione “Abrir com o Live Server”

Depois de iniciar o servidor, abra seu navegador e navegue até: http://localhost:8001

Você deve ver a página de demonstração com um botão de bate-papo laranja no canto inferior direito.

Teste a experiência de streaming

Agora que seu widget está carregado, é hora de testar o AI Message Streaming e observar a exibição progressiva de texto em ação.

O que procurar: streaming versus não streaming

Entender a diferença entre respostas de streaming e não streaming ajuda você a verificar se o AI Message Streaming está funcionando:

Comportamento Sem streaming (padrão) Streaming (streaming de mensagens AI)
Exibição inicial Indicador de carregamento ou pontos de digitação O texto começa a aparecer imediatamente
Aparência do texto A mensagem completa aparece de uma só vez As palavras aparecem progressivamente (bolha crescente)
Tempo de resposta Espere até que a IA termine de gerar Veja a resposta à medida que ela está sendo gerada
Efeito visual “Pop” do texto completo Texto suave e fluído, como ver alguém digitar