AI Pro Shop Assistant
An embeddable AI chatbot for golf courses — built with React and Vite and delivered as a script-tag widget live across 800+ Noteefy clients.
- React
- Vite
- TypeScript
Noteefy is a revenue management platform serving 800+ golf courses worldwide — automating waitlists, reducing no-shows, and capturing booking demand. The AI Pro Shop Assistant is an embeddable chatbot that course operators add to their websites via a script tag, giving golfers 24/7 access to tee time bookings, waitlist enrollment, and course FAQs without involving pro shop staff.
I joined with a fixed deadline already set, defined the frontend architecture and implementation plan before writing a line of code, and then built the widget from scratch — UI, integration layer, and embed packaging — working in a sprint-based cycle with a distributed international team.
The AI Pro Shop Assistant interface — golfers ask questions and book tee times directly in the chat.
The Constraints
The widget runs inside any golf course website with no control over the host's CSS or JavaScript environment. Hundreds of different sites, each with its own theme and stylesheet, could silently break the same widget in different ways.
Delivery had a fixed deadline from day one. Before implementation could start, the team required a frontend architecture proposal — covering component structure, styling strategy, embed mechanism, and integration approach — which I drafted and presented to align everyone on the plan.
Integration against Noteefy's own backend — which manages the AI conversation engine and connects to tee sheet systems — added coordination overhead across time zones throughout the sprint.
AI Pro Shop Assistant
Built the complete widget using React and Vite, with Material UI providing the component system for the chat interface and UI elements.
- CSS Modules scoped via Vite — hash-based class names prevented style collisions between the widget and host sites, ensuring correct rendering regardless of the host theme
- Script-tag delivery — the widget is packaged as a self-contained bundle, injected via a JavaScript snippet clients add to their site's
<head>; no assumptions about the host's framework or toolchain - Noteefy API integration — the widget communicates with Noteefy's backend for AI-powered responses, live tee time availability, and waitlist enrollment
The assistant is live in production across Noteefy's client network of golf courses.
The widget embedded and live on a Noteefy client's website.
Technologies
- React — widget UI and component architecture
- Vite — bundler; enabled CSS Modules scoping for style isolation across host environments
- Material UI — component library for the chat interface and UI elements
- CSS Modules — scoped class names preventing style collisions with host site themes
Technical Highlights
- Script-tag delivery — fully self-contained bundle with no dependency on the host site's framework, build tools, or CSS reset
- CSS Modules + Vite — hash-based scoping isolated widget styles from any host theme without the overhead of Shadow DOM
- Fixed sprint delivery with a distributed international team across time zones