I integrated an AI chat panel directly into PanelControl, the internal commercial team management tool I maintain. No external libraries, no framework: a fetch call to the Gemini API with a system prompt built dynamically from live Firebase data — orders, operators, leads, bonuses — plus a static company knowledge base hardcoded in the prompt itself. All in vanilla JavaScript.
The context
PanelControl is the internal management panel used by the commercial team to track orders, leads, activations and monthly bonuses. All data lives in Firebase Realtime Database. The team asks the same repetitive questions every day: who sold the most this month? How many activations are missing to reach the bonus threshold? How does procedure X work?
The idea was to add a ✦ Ask AI button that opens a conversation panel — same glassmorphism style already present in the panel — responding with full awareness of the business context and the current month's live data.
The key technical point: an AI model knows nothing about your management panel. You have to build the context and pass it with every question in the system prompt. This article documents how that was done, including the API selection process and Gemini model versioning issues.
