Projeto de Portfólio — Full Frontend
OmniChat .AI
Atendimento ao cliente com inteligência artificial, roteamento de intenções e integração com APIs externas em tempo real — tudo no frontend, sem backend.
Atendimento ao cliente com inteligência artificial, roteamento de intenções e integração com APIs externas em tempo real — tudo no frontend, sem backend.
A maioria dos chatbots trabalha com respostas fixas. O OmniChat funciona diferente: antes de a IA gerar qualquer resposta, um motor em JavaScript analisa a mensagem do usuário usando expressões regulares e identificação de padrões. Se encontra algo relevante — um CEP, um número de pedido, uma pergunta sobre câmbio — ele consulta a API correspondente em tempo real, injeta os dados no contexto do modelo e só então gera a resposta. O resultado é uma IA que responde com dados reais, não genéricos.
Cada mensagem passa por um analisador de Regex antes de chegar à IA. O sistema identifica CEPs, números de pedido e perguntas financeiras automaticamente.
Quando o usuário menciona um CEP, o sistema consulta a API ViaCEP em tempo real e retorna logradouro, bairro e cidade integrados na resposta da IA.
Perguntas sobre dólar ou euro acionam a AwesomeAPI, que retorna a cotação atualizada do momento. A IA inclui os valores exatos na resposta.
O sistema consulta um banco de dados local (MockDB) e retorna status, previsão de entrega e transportadora. Simula uma integração com ERP real.
A chave de API fica apenas no sessionStorage — nunca vai para o disco, nunca é transmitida para terceiros e some ao fechar o navegador.
O dropdown de perfil troca o systemInstruction do modelo em tempo real: Ecommerce, Suporte Técnico ou IA Geral — cada um muda o tom e o foco das respostas.
O painel lateral concentra a configuração do modelo: campo de API Key com armazenamento seguro, dropdown de comportamento do bot e botão de conexão com feedback visual. Tudo feito pra funcionar sem precisar tocar em código.
Os três botões de sugestão na tela inicial não são apenas decoração — cada um aciona uma integração diferente para demonstrar o roteamento em ação.
| Chip | Fluxo acionado | API / Fonte |
|---|---|---|
| "Onde está meu pedido 1234?" | Consulta ao banco de dados local com status, previsão e transportadora | MockDB interno |
| "Entregam no CEP 01001-000?" | Requisição em tempo real que retorna logradouro, bairro e cidade | ViaCEP REST API |
| "Qual a cotação do Dólar hoje?" | Requisição que retorna valores atualizados de USD e EUR | AwesomeAPI |
O projeto inclui uma página de documentação com o mesmo visual da aplicação. Ela detalha a arquitetura do roteador de intenções, como cada API é consumida e as decisões de segurança tomadas no projeto.
