AI Pro Shop Assistant
Un chatbot de IA embebible para campos de golf — construido con React y Vite y entregado como widget via script tag, en producción para más de 800 clientes de Noteefy.
- React
- Vite
- TypeScript
Noteefy es una plataforma de gestión de ingresos para más de 800 campos de golf en todo el mundo — automatizando listas de espera, reduciendo no-shows y capturando demanda de reservas. El AI Pro Shop Assistant es un chatbot embebible que los operadores de campos añaden a sus sitios web mediante una script tag, dando a los golfistas acceso 24/7 a reservas de horarios, inscripción en lista de espera y preguntas frecuentes — sin intervención del personal de la tienda.
Me incorporé al proyecto con un plazo ya definido, elaboré el plan de implementación y la arquitectura de frontend antes de escribir una línea de código, y luego construí el widget desde cero — UI, capa de integración y empaquetado para embed — trabajando en ciclos de sprint con un equipo internacional distribuido.
La interfaz del AI Pro Shop Assistant — los golfistas hacen preguntas y reservan horarios directamente en el chat.
Las Restricciones
El widget se ejecuta dentro de cualquier sitio web de campo de golf sin control sobre el CSS o el entorno JavaScript del host. Cientos de sitios diferentes, cada uno con su propio tema y hoja de estilos, podían romper el mismo widget de formas silenciosas y distintas.
La entrega tenía plazo fijo desde el primer día. Antes de iniciar la implementación, el equipo requirió una propuesta de arquitectura de frontend — cubriendo estructura de componentes, estrategia de estilos, mecanismo de embed y enfoque de integración — que elaboré y presenté para alinear al equipo en el plan.
La integración contra el backend propio de Noteefy — que gestiona el motor de conversación con IA y conecta con los sistemas de tee sheet — añadió overhead de coordinación entre zonas horarias a lo largo del sprint.
AI Pro Shop Assistant
Construí el widget completo con React y Vite, usando Material UI como sistema de componentes para la interfaz de chat y los elementos de UI.
- CSS Modules con alcance via Vite — nombres de clase con hash previnieron colisiones de estilos entre el widget y los sitios host, garantizando una renderización correcta independientemente del tema
- Entrega por script tag — el widget se empaqueta como bundle autocontenido, inyectado via snippet JavaScript que los clientes añaden al
<head>de su sitio; sin suposiciones sobre el framework o toolchain del host - Integración con la API de Noteefy — el widget se comunica con el backend de Noteefy para respuestas con IA, disponibilidad de horarios en tiempo real e inscripción en lista de espera
El asistente está en producción en la red de campos de golf clientes de Noteefy.
El widget embebido y en producción en el sitio web de un cliente de Noteefy.
Tecnologías
- React — UI y arquitectura de componentes del widget
- Vite — bundler; habilitó el alcance de CSS Modules para aislamiento de estilos entre entornos host
- Material UI — biblioteca de componentes para la interfaz de chat y elementos de UI
- CSS Modules — nombres de clase con alcance previniendo colisiones con los temas de los sitios host
Aspectos Técnicos Destacados
- Entrega por script tag — bundle autocontenido sin dependencia del framework, toolchain o reset CSS del sitio host
- CSS Modules + Vite — alcance con hash aisló los estilos del widget de cualquier tema host sin el overhead de Shadow DOM
- Entrega en sprints fijos con equipo internacional distribuido en diferentes zonas horarias