Skip to content
codexa

Dashboards · React

API monitoring

Latency, error rates, uptime and service health for an API platform, in a dark on-call layout.

Use this templateRemix
API monitoring starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A dark monitoring dashboard for an engineering team on call: p50 and p95 latency over the last 12 hours, error budget left per service, service health with latest deploys, and an incident timeline. Services and metrics live in src/dashboard.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/dash-api-monitor

Explorer 13

src/dashboard.ts
src/dashboard.ts
import type { Dashboard } from "./types"; /** Everything this dashboard shows. Edit freely. */export const dashboard: Dashboard = {  "brand": "Tidewatch",  "user": {    "name": "Ines Kowalski",    "role": "SRE, on call"  },  "nav": [    {      "label": "Overview",      "icon": "chart",      "href": "#overview"    },    {      "label": "Latency",      "icon": "bolt",      "href": "#trends"    },    {      "label": "Error budget",      "icon": "shield",      "href": "#breakdown"    },    {      "label": "Services",      "icon": "code",      "href": "#table"    },    {      "label": "Incidents",      "icon": "clock",      "href": "#activity"    }  ],  "title": "Production health",  "subtitle": "All regions · updated 15:02 UTC",  "ranges": [    {      "label": "6h",      "points": 6    },    {      "label": "12h",      "points": 12    }  ],  "kpis": [    {      "label": "Uptime (30 days)",      "value": "99.97%",      "delta": "0.02 pts",      "up": true    },    {      "label": "p95 latency",      "value": "184 ms",      "delta": "12 ms",      "up": false,      "upIsGood": false    },    {      "label": "Error rate",      "value": "0.21%",      "delta": "0.04 pts",      "up": true,      "upIsGood": false    },    {      "label": "Requests / min",      "value": "12.4k",      "delta": "8%",      "up": true    }  ],  "chart": {    "title": "Latency in ms, last 12 hours",    "type": "line",    "labels": [      "04:00",      "05:00",      "06:00",      "07:00",      "08:00",      "09:00",      "10:00",      "11:00",      "12:00",      "13:00",      "14:00",      "15:00"    ],    "series": [      {        "name": "p95",        "values": [          168,          162,          158,          171,          192,          214,          236,          201,          188,          179,          196,          184        ]      },      {        "name": "p50",        "values": [          62,          60,          58,          63,          71,          78,          84,          74,          69,          66,          72,          68        ]      }    ]  },  "side": {    "title": "Error budget left (30 days)",    "items": [      {        "label": "auth-service",        "value": "94%",        "pct": 94      },      {        "label": "api-gateway",        "value": "82%",        "pct": 82      },      {        "label": "billing-api",        "value": "61%",        "pct": 61      },      {        "label": "search",        "value": "47%",        "pct": 47      },      {        "label": "webhooks-worker",        "value": "28%",        "pct": 28      }    ]  },  "table": {    "title": "Services",    "columns": [      "Service",      "Region",      "p95",      "Error rate",      "Status",      "Last deploy"    ],    "statusColumn": 4,    "tones": {      "Healthy": "good",      "Degraded": "warn",      "Down": "bad",      "Deploying": "accent"    },    "rows": [      [        "api-gateway",        "eu-west-1",        "142 ms",        "0.08%",        "Healthy",        "2 h ago"      ],      [        "auth-service",        "eu-west-1",        "96 ms",        "0.02%",        "Healthy",        "1 day ago"      ],      [        "billing-api",        "us-east-1",        "312 ms",        "0.64%",        "Degraded",        "35 min ago"      ],      [        "search",        "us-east-1",        "228 ms",        "0.31%",        "Healthy",        "4 h ago"      ],      [        "webhooks-worker",        "eu-west-1",        "1,840 ms",        "2.10%",        "Degraded",        "3 days ago"      ],      [        "notifications",        "eu-west-1",        "118 ms",        "0.05%",        "Healthy",        "6 h ago"      ],      [        "media-resizer",        "us-west-2",        "264 ms",        "0.12%",        "Deploying",        "Now"      ]    ]  },  "feed": {    "title": "Incidents",    "items": [      {        "text": "media-resizer v2.14.0 rollout started (canary at 10%)",        "time": "14:58 UTC"      },      {        "text": "billing-api: p95 above 300 ms since deploy 4f2a91c, rollback prepared",        "time": "14:31 UTC"      },      {        "text": "webhooks-worker: retry queue at 8,200 jobs, scaling to 6 workers",        "time": "12:05 UTC"      },      {        "text": "Resolved: 10:00 latency spike from a cache node restart in eu-west-1",        "time": "10:48 UTC"      }    ]  }};

Remix

Remix this template

Describe what to change and the agent starts from API monitoring's files. The box is already started for you: finish “Start from API monitoring and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

Keep browsing

All templates

Build on API monitoring

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Use this templateAll templates