Back to Prompt LibraryActivate OptiDev Cloud - Click the "OptiDev Cloud" button in your project
Create a Grafana Cloud Service Account - Go to Grafana Cloud > Administration > Service Accounts > Create
Add secrets - Go to OptiDev Cloud > Secrets and add:
-
-
-
Dashboards & Feeds
Grafana Cloud Dashboard
Build a custom TV dashboard displaying metrics from your Grafana Cloud Prometheus data
Guide
Grafana Cloud Dashboard
Build a custom TV-optimized dashboard that queries your Grafana Cloud Prometheus data source and visualizes the metrics.
Note: Grafana Cloud doesn't support iframe embedding, so we build a custom dashboard using their API.
Prerequisites
-
GRAFANA_API_TOKEN - Your service account token-
GRAFANA_STACK_URL - Your Grafana stack URL (e.g., https://your-stack.grafana.net)-
GRAFANA_DATASOURCE_ID - Your Prometheus data source ID (find in Grafana > Data Sources)API Reference
Query Prometheus metrics via Grafana Cloud:
``
GET {GRAFANA_STACK_URL}/api/datasources/proxy/{DATASOURCE_ID}/api/v1/query
Authorization: Bearer {GRAFANA_API_TOKEN}
Docs: https://grafana.com/docs/grafana-cloud/developer-resources/api-reference/http-api/
Customize Your Queries
Replace the example PromQL queries in the final prompt with your own metrics.
Final Prompt
### Purpose
I need to build a custom dashboard for TV display that shows metrics from my Grafana Cloud Prometheus data source.
### Requirements
Build a dashboard that queries Grafana Cloud and visualizes the results.
**API Setup**
- Base URL: Use `GRAFANA_STACK_URL` from secrets
- Auth: Bearer token using `GRAFANA_API_TOKEN` from secrets
- Endpoint: `/api/datasources/proxy/{GRAFANA_DATASOURCE_ID}/api/v1/query`
- Query param: `query` = PromQL query string
**Metrics to Display** (customize these PromQL queries for your data)
- CPU Usage: `avg(rate(container_cpu_usage_seconds_total[5m])) * 100`
- Memory Usage: `avg(container_memory_usage_bytes) / 1024 / 1024 / 1024`
- Request Rate: `sum(rate(http_requests_total[5m]))`
- Error Rate: `sum(rate(http_requests_total{status=~"5.."}[5m]))`
**Dashboard Layout**
- Dark theme for TV display
- Large metric cards at top with current values
- Simple line charts for trends (last 1 hour)
- Auto-refresh every 60 seconds
- Show last updated timestamp
**Backend Setup**
I've activated OptiDev Cloud and added `GRAFANA_API_TOKEN`, `GRAFANA_STACK_URL`, and `GRAFANA_DATASOURCE_ID` in the project secrets.