Tutorial: Criando um Agente de Suporte com RAG para seu Site

Este tutorial guiará você através do processo completo de criação de um agente de suporte inteligente. Ao final, você terá um agente capaz de:

1. Aprender o conteúdo de um site de documentação.
2. Responder a perguntas de usuários com base nesse conhecimento.
3. Interagir diretamente com os usuários em qualquer página do seu site através de um Chat Widget.

Vamos combinar três componentes centrais da plataforma SipPulse AI: Base de Conhecimento (RAG), Agentes e o Chat Widget.

Pré-requisitos

• Uma conta ativa na plataforma SipPulse AI.
• A URL do site que servirá como fonte de conhecimento (ex: https://docs.sua-empresa.com).
• Acesso para editar o código HTML do site onde o widget será instalado.

Passo 1: Criar e Verificar a Base de Conhecimento

Primeiro, vamos alimentar nosso agente com o conhecimento necessário. Faremos isso importando o conteúdo do seu site de documentação para uma Base de Conhecimento.

Para um guia detalhado sobre todas as funcionalidades, consulte a documentação completa da Base de Conhecimento.

1. No menu lateral, navegue até Base de Conhecimento.
2. Clique em + Criar Tabela no canto superior direito e selecione a opção Importar Website.
3. Preencha os seguintes campos:
   • URL: Insira a URL principal do seu site de documentação. Ex: https://docs.sippulse.ai.
   • Seletores de Conteúdo: Especifique os seletores CSS que contêm o conteúdo principal que você deseja importar. Isso evita a indexação de menus, sidebars e rodapés. Um bom ponto de partida é main, article, ou #content.
   • Nome: Dê um nome claro e em snake_case. Ex: docs_website_kb.
   • Descrição: Descreva a finalidade. Ex: "Base de conhecimento contendo a documentação oficial do produto X. Usar para responder perguntas técnicas e de uso."
   • Modelo de Embedding: Para documentação técnica, text-embedding-3-large oferece a melhor precisão semântica.
4. Clique em Salvar. O processo de rastreamento e vetorização pode levar alguns minutos.

Dica de Verificação

Após a conclusão, clique na tabela criada e use a aba Consultar. Faça algumas perguntas que você espera que sejam respondidas pela documentação. Verifique se os trechos retornados são relevantes. Isso confirma que o conteúdo foi indexado corretamente antes mesmo de criar o agente.

Passo 2: Configurar e Testar o Agente

Com o conhecimento pronto e verificado, vamos criar e testar o "cérebro" do nosso suporte: o Agente.

Para um guia detalhado sobre todas as opções, consulte a documentação de Configuração de Agentes.

1. Navegue até Agentes e clique em + Criar Agente.

2.1. Perfil do Agente

• Nome: Agente de Suporte do Site
• Descrição: Agente que responde a dúvidas de usuários no site com base na documentação do produto.
• Seleção de Modelo: Escolha um modelo de LLM. Modelos como GPT-4.1 ou Claude 3.5 Haiku são excelentes para diálogo e uso de ferramentas.

2.2. Instruções do Sistema

Copie e cole o texto abaixo no campo de Instruções.

# ROLE
Você é um especialista de suporte técnico da SipPulse AI. Sua personalidade é prestativa, paciente e precisa. Seu objetivo é ajudar os usuários a resolverem suas dúvidas sobre a nossa plataforma.

# GOAL & DOMAIN
Seu único propósito é responder a perguntas com base estrita no conteúdo da documentação fornecida na sua base de conhecimento. Você deve cobrir tópicos sobre configuração, uso de ferramentas e melhores práticas da plataforma.

# TOOL GUIDANCE
- Para CADA pergunta do usuário, você **obrigatoriamente** deve primeiro usar a ferramenta de busca na base de conhecimento `docs_website_kb` para encontrar a informação mais relevante.
- Sua resposta final ao usuário deve ser baseada **exclusivamente** nos trechos retornados por essa ferramenta.

# CONSTRAINTS & GUARDRAILS
- **NUNCA** invente respostas. Se a informação não estiver na base de conhecimento, responda de forma clara e honesta: "Desculpe, não encontrei essa informação na nossa documentação. Posso tentar te ajudar com outra dúvida?".
- Não discuta preços, concorrência ou qualquer tópico fora da documentação técnica.
- Mantenha as respostas diretas e focadas na pergunta do usuário.

2.3. Habilitar Ferramentas

1. Vá para a aba Ferramentas e clique em + Nova ferramenta.
2. Selecione Base de Conhecimento (RAG) e, na ação, escolha Buscar na Base de Conhecimento.
3. No campo Base de Conhecimento, selecione a base que criamos (docs_website_kb).
4. Clique em Adicionar Ferramenta e salve o agente.

2.4. Testar o Agente no Playground

Antes de instalar no seu site, é crucial testar o comportamento do agente.

1. Na lista de Agentes, encontre o Agente de Suporte do Site e clique no ícone de Abrir Chat.
2. Faça perguntas que você espera que sejam respondidas pela documentação, como:
   • "Como configuro o webhook?"
   • "Quais são as melhores práticas para usar a API?"
3. Verifique se o agente:
   • Retorna respostas precisas e relevantes.
   • Usa a ferramenta de busca na base de conhecimento corretamente.
   • Segue as instruções de não inventar respostas.
4. Teste perguntas que não estão na documentação para garantir que ele responde corretamente com a mensagem de não encontrar informação.
5. Se necessário, volte e ajuste as instruções do sistema ou a configuração da base de conhecimento até que o agente se comporte como esperado.

Passo 3: Criar e Instalar o Chat Widget

Com o agente testado, o último passo é conectá-lo ao seu site.

Para mais detalhes, consulte o guia de Integração com Chat Widget.

1. Na lista de Agentes, encontre o Agente de Suporte do Site e clique no menu ⋮ → Publicar.
2. Localize o cartão Chat Widget e clique em + Criar.
3. Configure o widget:
   • Origens Permitidas: Insira o domínio do seu site (ex: meusite.com). Isso garante que apenas seu site possa usar o widget.
   • Mensagem de Boas-Vindas: Escreva uma saudação inicial (ex: "Olá! Como posso ajudar com a nossa documentação?").
4. Clique em Criar. A plataforma irá gerar um widgetKey único para seu agente.
5. Copie o snippet de código HTML fornecido. Ele será parecido com este:

<!-- Crie um contêiner para o widget -->
<div id="sippulse-chat-widget"></div>

<!-- Adicione o script do widget antes de fechar a tag </body> -->
<script src="https://cdn.jsdelivr.net/npm/@sippulseai/chat-widget/browser/chat-widget.latest.js" defer></script>

<!-- Inicialize o widget -->
<script type="module">
  document.addEventListener("DOMContentLoaded", () => {
    const { ChatWidget } = SipPulseChat;
    const myWidget = new ChatWidget({
      widgetKey: "<SEU_WIDGET_KEY_AQUI>", // Cole sua chave aqui
    });
    myWidget.mount("#sippulse-chat-widget");
  });
</script>

Passo 4: Testar no Site e Iterar

1. Abra o arquivo HTML da sua página web e cole o snippet de código que você copiou, substituindo <SEU_WIDGET_KEY_AQUI> pela sua chave real.
2. Salve o arquivo e abra a página no seu navegador. O ícone do chat deve aparecer no canto da tela.
3. Clique no ícone e teste o agente em um ambiente real:
   • Faça perguntas cujas respostas estão na sua documentação.
   • Verifique a precisão: O agente está usando as informações corretas?
   • Teste os limites: Faça uma pergunta que não está na documentação para ver se ele segue a instrução de não inventar respostas.

Se os resultados não forem os esperados, volte e refine os passos anteriores.

Parabéns! Você construiu e validou um agente de suporte automatizado, escalável e inteligente para atender seus clientes diretamente no seu site.