Frontend Integration Rules — ML Junction docs

Hide an unavailable metric key instead of substituting zero.. Render pricing=null as "price unavailable", never "$0".. Render quantization="unknown" as undisclosed precision.. Use route_id as the table key and status-history target.. Use stats.rank for leaderboard order; do not invent a rank for models without stats.. Insert missing graph buckets only for visual continuity.. Convert UTC timestamps to the user locale in the presentation layer.. Build modality and parameter controls from route capabilities.. Show API error.message first, then support_code for support workflows.. Treat warnings as structured objects; show continuation expiry/fallback warnings without exposing the token or opaque reasoning fields.. Store reasoning_details on the assistant turn that produced them and keep continuation tokens scoped to one conversation branch.. Use skeletons during catalog and graph loading; keep prior data visible during background refresh.

const response = await fetch('/v1/models', {
  headers: { Accept: 'application/json' },
});

if (!response.ok) {
  const body = await response.json().catch(() => null);
  throw new Error(body?.error?.message ?? `Model request failed (${response.status})`);
}

const { data: models } = await response.json();
const rankedModels = models
  .filter((model) => model.stats?.rank != null)
  .sort((a, b) => a.stats.rank - b.stats.rank);

function toRouteView(route) {
  return {
    id: route.route_id,
    uptime: route.stats?.uptime_30d ?? null,
    p95Latency: route.stats?.latency_p95_ms ?? null,
    throughput: route.stats?.throughput_tps ?? null,
    inputPrice: route.pricing?.input_per_mtok ?? null,
    precision:
      route.quantization === 'unknown'
        ? 'Undisclosed'
        : route.quantization.toUpperCase(),
    modalities: route.capabilities?.modalities?.input ?? ['text'],
    supportedParams: route.capabilities?.supported_params ?? [],
  };
}

Canonical URL: https://mljunction.com/docs/frontend-integration