A Chrome extension that adds AI-powered analysis to every chart in Percona Monitoring and Management (PMM) dashboards.
Click the AI button on any panel to get an instant explanation of what the metric measures, whether anything looks abnormal, and what to do about it — powered by OpenAI GPT-4o Vision.
- One-click analysis — an AI button appears on every PMM dashboard panel
- Chart screenshot — captures the visible panel and sends it to GPT-4o Vision for visual analysis
- PromQL-aware — intercepts the real executed queries (with substituted variables) and includes them in the prompt so the AI understands the exact metric and database type
- Data table — optionally reads the Inspect → Data table and appends actual metric values to the prompt
- Time range context — includes the current dashboard time range in every analysis
- Database-aware — automatically identifies MySQL, PostgreSQL, MongoDB, ProxySQL, Redis/Valkey, and OS-level metrics from metric name prefixes
- Smart deduplication — collapses redundant data frames to minimize token usage and cost
- Debug mode — preview the exact prompt and screenshot before sending to OpenAI
- Configurable — toggle data table inclusion, adjust max response tokens, enable/disable per session
-
Clone or download this repository:
git clone https://github.com/percona/pmm-chart-ai-explainer.git
-
Open Chrome and navigate to
chrome://extensions -
Enable Developer mode (toggle in the top-right corner)
-
Click Load unpacked and select the
extension/subfolder inside the cloned repository -
The extension icon will appear in the Chrome toolbar
Note: The extension matches any URL so it works on any PMM instance — cloud-hosted, self-managed, or accessed via a VPN.
-
Click the extension icon in the Chrome toolbar to open the popup
-
Enter your OpenAI API key (starts with
sk-) and click Save -
Navigate to any PMM dashboard — each chart will now show an AI button in its header
Your API key is stored locally in Chrome's
syncstorage and is only ever sent toapi.openai.com— never to any other server.
- Open a PMM dashboard
- Click the AI button on any chart panel
- Wait a few seconds while the extension:
- Opens the Grafana Inspect panel to capture the real PromQL queries
- Takes a screenshot of the panel
- Sends everything to GPT-4o
- A modal appears with the AI analysis
Every response includes:
| Section | When shown |
|---|---|
| What this metric measures | Always — with description, value interpretation, and normal range |
| Anomalies & observations | Always |
| What it means | Only if anomalies found |
| Recommended action | Only if anomalies found |
| Related PMM dashboards & panels | Always — even when everything looks healthy |
Enable Debug Mode in the popup to preview the full prompt and screenshot without spending API tokens. You can then click Send to OpenAI to trigger the call manually.
The debug view also shows the full data table when Include Data Table is enabled:
| Setting | Description |
|---|---|
| Plugin enabled | Show/hide AI buttons on all PMM dashboards |
| OpenAI API Key | Your sk-... key from platform.openai.com |
| Include Data Table | Read actual metric values from Inspect → Data and include them in the prompt |
| Debug Mode | Show the prompt + screenshot instead of calling OpenAI |
| Max tokens | GPT-4o response length limit (200–16 000, default 800) |
User clicks AI button
│
▼
content.js opens Grafana Inspect → Data tab
│ (Grafana executes real queries; interceptor.js captures PromQL)
│ (content.js reads the Data table if "Include Data" is on)
▼
content.js captures panel bounding rect + dashboard time range
│
▼
background.js takes a tab screenshot → crops to panel bounds (OffscreenCanvas)
│
▼
background.js builds a prompt:
Panel name + time range
+ PromQL queries (with expanded variables)
+ Database type inferred from metric prefixes
+ Data table values (optional)
│
▼
background.js calls OpenAI GPT-4o Vision API
│
▼
content.js renders the response in a modal overlay
| File | World | Role |
|---|---|---|
interceptor.js |
MAIN (page context) |
Wraps window.fetch to intercept /api/ds/query calls; forwards query expressions and time range via postMessage |
content.js |
ISOLATED |
Injects AI buttons; orchestrates Inspect drawer navigation; reads data table; shows modal UI |
background.js |
Service Worker | Takes screenshots; crops images; builds prompts; calls OpenAI API |
popup.html/js |
Extension popup | Settings UI |
styles.css |
Injected CSS | Modal and button styles |
- Chrome 116+ (Manifest V3 with
world: "MAIN"support) - PMM 2.x or 3.x — learn more at docs.percona.com/pmm and percona.com/pmm
- OpenAI API key with access to
gpt-4o
The extension is designed around the principle that your data never leaves your control.
Your own API key — by design. The extension uses your personal OpenAI API key rather than a shared backend service. This means:
- No usage data, queries, or screenshots pass through any intermediary server
- You have full visibility into what is sent via your OpenAI usage dashboard
- The key is stored locally in
chrome.storage.sync(your Chrome profile only) and is sent exclusively tohttps://api.openai.com
Cost. Each analysis call uses GPT-4o with a screenshot + prompt. A typical request costs around $0.01. A dollar's worth of credits is enough to explore most of your PMM dashboards comfortably.
What is and isn't sent.
| Sent to OpenAI | Never sent anywhere |
|---|---|
| Cropped screenshot of the clicked panel | Full page screenshots |
| PromQL queries for that panel | Dashboard names or URLs |
| Metric values from the data table (if enabled) | PMM credentials or session cookies |
| Dashboard time range | Any other browser data |
The extension has no analytics, no telemetry, and no backend of its own.
- 🌐 Website: percona.com/pmm
- 📖 Documentation: docs.percona.com/pmm
- 💬 Community Forum: forums.percona.com
- 🐛 PMM Issue Tracker: github.com/percona/pmm
Contributions are welcome! Please read CONTRIBUTING.md before submitting a pull request.
MIT © Percona