AI Service Status Board
A working reference layout for a multi-provider AI uptime dashboard — status pills, aggregate headline, uptime and latency columns, and a refresh interaction.
This board is a simulation. It makes no network requests and is not connected to any provider's status API — every status, uptime percentage and latency figure below is generated locally to demonstrate the layout. For real incident information, use the provider's own status page (for example status.openai.com or status.anthropic.com).
What this tool does
It renders a complete multi-provider status dashboard: one row per AI service with an icon, the provider name, a 30-day uptime figure, a latency reading and a colour-coded status pill, topped by an aggregate headline that rolls the individual states up into one of three verdicts. Pressing refresh re-runs the whole board with a brief loading state, so you can see how the interaction should feel.
The data is simulated, and that matters. The page issues no network requests, so nothing here reflects the actual state of ChatGPT, Claude or any other service — the figures are generated in your browser from nothing but randomness. Treat this as an interface reference and a starting point for wiring up a real feed, never as a source of incident information. If a provider is genuinely down, this page will happily keep claiming everything is fine.
How to use it
- Read the banner across the top for the aggregate state — operational, degraded or outage — with the matching colour.
- Scan the rows below. Each shows the service, its provider, a 30-day uptime percentage and the latest latency in milliseconds.
- Click Refresh to re-run the board. The list dims while it "checks", then repopulates with new figures.
- Use it as a reference when building your own board: copy the row structure, the pill classes and the aggregate logic, then swap the data source.
- For real status, leave the page and go to the provider's official status page — the links are in the banner above.
Common use cases
-
Prototyping a status page
Start from a working layout instead of an empty file when you need an internal uptime view.
-
Teaching state aggregation
A small, readable example of rolling many component states into one headline verdict.
-
Design reviews
Show stakeholders the density and colour language of a monitoring view before committing to a build.
-
Demoing a refresh interaction
Illustrate pending, loading and settled states without standing up a backend to fake them.
Frequently asked questions
Is this showing the real status of ChatGPT, Claude and the others?
No. This board is a simulation — it makes no network requests at all. Every status, uptime percentage and latency figure is generated locally in your browser to demonstrate the layout. For real incident information always use the provider's own status page, such as status.openai.com or status.anthropic.com.
Why build a simulated board at all?
It is a reference implementation: the card layout, the colour-coded status pills, the aggregate headline and the refresh interaction are the pieces most teams rebuild from scratch. Seeing them working makes it much faster to wire the same interface to a real data source such as an RSS-to-JSON status feed or each provider's status API.
How would I connect this to real data?
Replace the services array with a fetch against your chosen source and call the same render functions with the response. Most providers publish a JSON status summary or an RSS feed. Note that calling those APIs from a static page is subject to each provider's CORS policy, so you will usually need a small server-side proxy or a scheduled job that caches the result.