Voltar ao portfolio
web/ 2026Destaque

FGN AtendimentoZap

4.9
Vue.js 3TypeScriptTailwind CSSSupabaseN8NEvolution APIGoogle GeminiChatGPTGrokPostgreSQL
Project screenshot
Ampliar
Diferencial Técnico

Sistema completo de atendimento inteligente via WhatsApp com IA generativa (Google Gemini, ChatGPT, Groq, DeepSeek), transferência transparente para atendente humano sem expor números pessoais, painel administrativo em Vue.js 3 com dashboard analítico em tempo real, e arquitetura 100% serverless usando Supabase com Row Level Security para isolamento de dados por cliente.

S
Situação/ O Problema

Pequenos escritórios e empresas de serviço recebem leads pelo WhatsApp mas não conseguem oferecer atendimento rápido fora do horário comercial. Mensagens ficam sem resposta por horas, potenciais clientes desistem, e quando o atendente finalmente responde, precisa usar seu número pessoal — expondo dados privados e misturando conversas profissionais com pessoais. Além disso, não há registro centralizado das conversas, impossibilitando análise de métricas e acompanhamento de leads.

T
Tarefa/ O Desafio

Criar uma solução completa de atendimento via WhatsApp que funcionasse 24/7 com inteligência artificial, transferisse automaticamente para um atendente humano quando necessário de forma transparente (sem revelar o número pessoal do atendente ao cliente), salvasse todo o histórico de conversas em banco de dados com segurança, e oferecesse um painel administrativo com dashboard, visualização de conversas e gestão de usuários — tudo hospedável em infraestrutura de baixo custo.

A
Ação/ A Solução

Desenvolvi uma arquitetura integrada com quatro componentes principais. O motor de IA utiliza Google Gemini com contexto personalizado por cliente, respondendo dúvidas sobre serviços, qualificando leads e identificando automaticamente quando transferir para atendimento humano através de um sistema de marcadores inteligentes. A camada de orquestração usa N8N com dois workflows: o primeiro gerencia o fluxo completo de atendimento (IA → transferência → notificação) e o segundo roteia as respostas do atendente de volta ao cliente pelo número do site, garantindo total transparência. O backend utiliza Supabase com PostgreSQL, autenticação nativa, Row Level Security para controle de acesso granular e API REST automática. O painel administrativo foi construído em Vue.js 3 com TypeScript, Pinia para state management, e Chart.js para gráficos analíticos — gerando arquivos estáticos que rodam em qualquer hospedagem compartilhada com cPanel.

R
Resultado/ O Impacto

Sistema de atendimento profissional operando 24/7 com resposta em menos de 2 segundos via IA, transferência inteligente para atendente humano com notificação formatada contendo resumo da conversa, roteamento transparente que mantém o número pessoal do atendente invisível ao cliente, painel administrativo com dashboard em tempo real exibindo métricas de conversas, tempo médio de resposta e distribuição por status, histórico completo de mensagens com identificação visual de remetente (cliente, IA, atendente), gestão de usuários com três perfis de acesso (administrador, atendente, visualizador), e custo operacional muito baixo.

FGN AtendimentoZap - Portfolio FGNDev - FGNDev