AI Pro Shop Assistant
SiteUm chatbot de IA incorporável para campos de golf, construído com React e Vite e entregue como widget via script tag, em produção para mais de 800 clientes da Noteefy.
- React
- Vite
- TypeScript
Noteefy é uma plataforma de gestão de receita para mais de 800 campos de golf ao redor do mundo, automatizando listas de espera, reduzindo no-shows e capturando demanda de reservas. O AI Pro Shop Assistant é um chatbot incorporável que os operadores de campos adicionam aos seus sites via script tag, oferecendo aos golfistas acesso 24/7 a reservas de horários, inscrição em lista de espera e perguntas frequentes, sem envolver a equipe da loja.
Entrei no projeto com um prazo já definido e elaborei o plano de implementação e a arquitetura de frontend antes de escrever uma linha de código. Depois construí o widget do zero: UI, camada de integração e empacotamento para embed, tudo em ciclos de sprint com um time internacional distribuído.
A interface do AI Pro Shop Assistant: golfistas fazem perguntas e reservam horários diretamente no chat.
As Restrições
O widget roda dentro de qualquer site de campo de golf sem controle sobre o CSS ou o ambiente JavaScript do host. Centenas de sites diferentes, cada um com seu próprio tema e folha de estilos, podiam quebrar o mesmo widget de formas silenciosas e distintas.
A entrega tinha prazo fixo desde o primeiro dia. Antes de iniciar a implementação, o time exigiu uma proposta de arquitetura de frontend cobrindo estrutura de componentes, estratégia de estilos, mecanismo de embed e abordagem de integração, que elaborei e apresentei para alinhar o time no plano.
A integração com o backend próprio da Noteefy, que gerencia o motor de conversação com IA e conecta com os sistemas de tee sheet, adicionou overhead de coordenação entre fusos horários ao longo do sprint.
A Construção
Construí o widget completo com React e Vite, usando Material UI como sistema de componentes para a interface de chat e os elementos de UI.
O isolamento de estilos veio de CSS Modules com escopo via Vite: nomes de classe com hash impediram colisões entre o widget e os sites host, então a renderização se mantinha correta independentemente do tema. A entrega seguiu a mesma lógica autocontida. O widget é empacotado como bundle, injetado via snippet JavaScript que os clientes adicionam ao <head> do site, sem suposições sobre o framework ou toolchain do host.
- Integração com a API da Noteefy: o widget se comunica com o backend da Noteefy para respostas com IA, disponibilidade de horários em tempo real e inscrição em lista de espera
O assistente está em produção na rede de campos de golf clientes da Noteefy.
O widget incorporado e em produção no site de um cliente da Noteefy.
Tecnologias
- React: UI e arquitetura de componentes do widget
- Vite: bundler; habilitou o escopo de CSS Modules para isolamento de estilos entre ambientes host
- Material UI: biblioteca de componentes para a interface de chat e elementos de UI
- CSS Modules: nomes de classe com escopo impedindo colisões com os temas dos sites host
Destaques Técnicos
CSS Modules com escopo via Vite isolou os estilos do widget de qualquer tema host sem trazer o overhead do Shadow DOM, e o bundle resultante ficou sem dependência do framework, toolchain ou reset CSS do site host. A entrega rodou em sprints fixos com um time internacional distribuído em diferentes fusos horários.