Model card design
Model cards are the surface area customers touch first. A good card communicates capability, cost, and constraints in three seconds. This recipe walks through the layout, the data contract, and the routing hint Meridian uses to render adaptive cards across 250+ deployed models.
1. Anchor the visual hierarchy
Lead with the model alias, then the provider chip, then the live latency badge. Cost-per-million tokens sits in the bottom-right corner so eye-scan path ends on price. Avoid stacking more than five metadata pills — readers stop parsing past four.
2. Codify the data contract
Every card consumes the same JSON shape from /v1/models. Keep the schema flat so server components can render without client hydration.
{
"alias": "azure/model-router",
"provider": "Azure",
"context_window": 200000,
"input_per_mtok": 2.50,
"output_per_mtok": 10.00,
"median_latency_ms": 840,
"supports": ["tools", "vision", "json"]
}3. Route the click target
The whole card is a single link to /playground?model={alias}. Nested buttons break keyboard nav and inflate the accessibility tree — a single anchor keeps Tab order predictable and lets the playground deep-link straight into a pre-warmed session.