AI Pro Shop Assistant
Um 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, elaborei o plano de implementação e a arquitetura de frontend antes de escrever uma linha de código, e então construí o widget do zero — UI, camada de integração e empacotamento para embed — trabalhando 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.
AI Pro Shop Assistant
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.
- CSS Modules com escopo via Vite — nomes de classe com hash impediram colisões de estilo entre o widget e os sites host, garantindo renderização correta independentemente do tema
- Entrega por script tag — o widget é empacotado como bundle autocontido, 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
- Entrega por script tag — bundle autocontido sem dependência do framework, toolchain ou reset CSS do site host
- CSS Modules + Vite — escopo com hash isolou os estilos do widget de qualquer tema host sem o overhead do Shadow DOM
- Entrega em sprints fixos com time internacional distribuído em diferentes fusos horários