Add AI Service Status to Your App

React / Next.js

import { useEffect, useState } from 'react'

const INDICATOR_COLORS = {
  none:     'text-green-600',
  minor:    'text-yellow-600',
  major:    'text-orange-600',
  critical: 'text-red-600',
  unknown:  'text-gray-500',
}

export function AIStatusBanner({ services = ['openai', 'anthropic'] }) {
  const [statuses, setStatuses] = useState({})

  useEffect(() => {
    fetch('https://prismix.dev/api/v1/statuses')
      .then(r => r.json())
      .then(data => {
        const map = {}
        for (const svc of data.services) {
          if (services.includes(svc.id)) map[svc.id] = svc
        }
        setStatuses(map)
      })
      .catch(() => {}) // silent — don't break the UI on status API failure
  }, [])

  const degraded = Object.values(statuses).filter(s => s.indicator !== 'none')
  if (!degraded.length) return null

  return (
    <div className="rounded-md border border-yellow-200 bg-yellow-50 px-4 py-3 text-sm">
      <strong>AI service notice:</strong>{' '}
      {degraded.map(s => s.name).join(', ')} may be experiencing issues.{' '}
      <a href="https://prismix.dev/status" className="underline" target="_blank" rel="noopener">
        Live status →
      </a>
    </div>
  )
}

Vue 3 (Composition API)

<script setup>
import { ref, onMounted } from 'vue'

const services = ref([])

onMounted(async () => {
  try {
    const { services: all } = await fetch('https://prismix.dev/api/v1/statuses').then(r => r.json())
    services.value = all.filter(s => ['openai', 'anthropic', 'groq'].includes(s.id))
  } catch {}
})

const degraded = computed(() => services.value.filter(s => s.indicator !== 'none'))
</script>

<template>
  <div v-if="degraded.length" class="ai-status-banner">
    AI notice: {{ degraded.map(s => s.name).join(', ') }} may be degraded.
    <a href="https://prismix.dev/status" target="_blank">Live status →</a>
  </div>
</template>

Vanilla JS

async function checkAIStatus(serviceIds = ['openai', 'anthropic']) {
  try {
    const { services } = await fetch('https://prismix.dev/api/v1/statuses').then(r => r.json())
    return services.filter(s => serviceIds.includes(s.id))
  } catch {
    return []
  }
}

// Usage
const relevant = await checkAIStatus(['openai', 'anthropic'])
const degraded = relevant.filter(s => s.indicator !== 'none')

if (degraded.length) {
  const banner = document.createElement('div')
  banner.className = 'ai-status-banner'
  banner.innerHTML = `AI notice: ${degraded.map(s => s.name).join(', ')} may be degraded.
    <a href="https://prismix.dev/status">Check status →</a>`
  document.body.prepend(banner)
}

Next.js App Router (Server Component)

// app/components/AIStatusBanner.tsx (Server Component)
async function getAIStatus() {
  try {
    const res = await fetch('https://prismix.dev/api/v1/statuses', {
      next: { revalidate: 60 },  // ISR: revalidate every 60s
    })
    const { services } = await res.json()
    return services.filter((s) => ['openai', 'anthropic'].includes(s.id))
  } catch {
    return []
  }
}

export default async function AIStatusBanner() {
  const services = await getAIStatus()
  const degraded = services.filter((s) => s.indicator !== 'none')
  if (!degraded.length) return null

  return (
    <div className="rounded border border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-900">
      ⚠️ {degraded.map((s) => s.name).join(', ')} may be experiencing issues.{' '}
      <a href="https://prismix.dev/status" className="font-medium underline">
        Live status
      </a>
    </div>
  )
}