> ## Documentation Index
> Fetch the complete documentation index at: https://docs.perplexity.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# System Status

export const ApiStatus = () => {
  const [status, setStatus] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [lastUpdated, setLastUpdated] = useState(null);
  const fetchStatus = async () => {
    try {
      setLoading(true);
      setError(null);
      const [summaryResponse, componentsResponse] = await Promise.all([fetch('https://status.perplexity.com/summary.json'), fetch('https://status.perplexity.com/v2/components.json')]);
      if (!summaryResponse.ok || !componentsResponse.ok) {
        throw new Error('Failed to fetch status data');
      }
      const summary = await summaryResponse.json();
      const components = await componentsResponse.json();
      const apiComponent = components.components.find(comp => comp.name.toLowerCase() === 'api');
      setStatus({
        overall: summary.page.status,
        api: apiComponent ? apiComponent.status : null,
        incidents: summary.activeIncidents || [],
        maintenances: summary.activeMaintenances || []
      });
      setLastUpdated(new Date());
    } catch (err) {
      setError('Unable to load status');
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchStatus();
    const interval = setInterval(fetchStatus, 5 * 60 * 1000);
    return () => clearInterval(interval);
  }, []);
  const getStatusConfig = status => {
    const configs = {
      'OPERATIONAL': {
        text: 'Operational',
        color: '#10b981',
        bgColor: 'rgba(16, 185, 129, 0.1)',
        icon: '✓'
      },
      'DEGRADEDPERFORMANCE': {
        text: 'Degraded Performance',
        color: '#f59e0b',
        bgColor: 'rgba(245, 158, 11, 0.1)',
        icon: '⚠'
      },
      'PARTIALOUTAGE': {
        text: 'Partial Outage',
        color: '#f59e0b',
        bgColor: 'rgba(245, 158, 11, 0.1)',
        icon: '⚠'
      },
      'MAJOROUTAGE': {
        text: 'Major Outage',
        color: '#dc2626',
        bgColor: 'rgba(220, 38, 38, 0.1)',
        icon: '✗'
      },
      'UNDERMAINTENANCE': {
        text: 'Under Maintenance',
        color: '#6b7280',
        bgColor: 'rgba(107, 114, 128, 0.1)',
        icon: '🔧'
      }
    };
    return configs[status] || ({
      text: 'Unknown',
      color: '#6b7280',
      bgColor: 'rgba(107, 114, 128, 0.1)',
      icon: '?'
    });
  };
  const formatTime = date => {
    if (!date) return '';
    const now = new Date();
    const diff = Math.floor((now - date) / 1000);
    if (diff < 60) return 'Just now';
    if (diff < 3600) return `${Math.floor(diff / 60)} minutes ago`;
    return date.toLocaleTimeString();
  };
  if (loading && !status) {
    return <div className="not-prose my-6 p-6 rounded-lg border border-border bg-card">
        <div className="flex items-center gap-3">
          <div className="w-3 h-3 rounded-full bg-muted-foreground animate-pulse"></div>
          <span className="text-muted-foreground">Loading API status...</span>
        </div>
      </div>;
  }
  if (error && !status) {
    return <div className="not-prose my-6 p-6 rounded-lg border border-border bg-card">
        <div className="flex items-center gap-3">
          <span className="text-destructive">{error}</span>
          <button onClick={e => {
      e.stopPropagation();
      fetchStatus();
    }} className="text-sm text-foreground underline hover:no-underline">
            Retry
          </button>
        </div>
      </div>;
  }
  const apiConfig = status?.api ? getStatusConfig(status.api) : null;
  return <div className="not-prose my-6">
      <div className="p-6 rounded-lg border border-border bg-card" onClick={() => window.open('https://status.perplexity.com/', '_blank')}>
        <div className="flex items-start justify-between mb-4">
          <div>
            <h3 className="text-lg font-semibold text-foreground mb-1">API Status</h3>
            {lastUpdated && <p className="text-sm text-muted-foreground">
                Last updated: {formatTime(lastUpdated)}
              </p>}
          </div>
          {apiConfig && <div className="px-3 py-1 rounded-md text-sm font-medium" style={{
    color: apiConfig.color,
    backgroundColor: apiConfig.bgColor
  }}>
              {apiConfig.icon} {apiConfig.text}
            </div>}
        </div>
        {apiConfig && <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full" style={{
    backgroundColor: apiConfig.color
  }}></div>
            <span className="text-foreground">
              The Perplexity API is currently <strong>{apiConfig.text.toLowerCase()}</strong>.
            </span>
          </div>}
        {loading && status && <div className="mt-3 text-xs text-muted-foreground">Updating...</div>}
      </div>
      {status?.incidents && status.incidents.length > 0 && <div className="mt-4 p-6 rounded-lg border border-destructive/20 bg-destructive/5">
          <h4 className="text-base font-semibold text-destructive mb-3">Active Incidents</h4>
          {status.incidents.map((incident, idx) => <div key={idx} className="mb-3 last:mb-0">
              <div className="font-medium text-foreground mb-1">{incident.name}</div>
              <div className="text-sm text-muted-foreground">
                Status: {incident.status} • Impact: {incident.impact}
              </div>
              <div className="text-sm text-muted-foreground">
                Started: {new Date(incident.started).toLocaleString()}
              </div>
              {incident.url && <a href={incident.url} target="_blank" rel="noopener noreferrer" className="text-sm text-foreground underline hover:no-underline mt-1 inline-block">
                  View details →
                </a>}
            </div>)}
        </div>}
      {status?.maintenances && status.maintenances.length > 0 && <div className="mt-4 p-6 rounded-lg border border-warning/20 bg-warning/5">
          <h4 className="text-base font-semibold text-warning mb-3">Scheduled Maintenance</h4>
          {status.maintenances.map((maintenance, idx) => <div key={idx} className="mb-3 last:mb-0">
              <div className="font-medium text-foreground mb-1">{maintenance.name}</div>
              <div className="text-sm text-muted-foreground">
                Status: {maintenance.status}
              </div>
              <div className="text-sm text-muted-foreground">
                Scheduled: {new Date(maintenance.start).toLocaleString()} ({maintenance.duration} minutes)
              </div>
              {maintenance.url && <a href={maintenance.url} target="_blank" rel="noopener noreferrer" className="text-sm text-foreground underline hover:no-underline mt-1 inline-block">
                  View details →
                </a>}
            </div>)}
        </div>}
      <div className="mt-4">
        <a href="https://status.perplexity.com/" target="_blank" rel="noopener noreferrer" className="text-sm text-muted-foreground hover:text-foreground underline">
          View full status page with uptime history →
        </a>
      </div>
    </div>;
};

<ApiStatus />

## Contact & Support

If you experience any issues, please reach out through one of the following channels:

<CardGroup cols={2}>
  <Card title="Email Support" icon="mail" href="mailto:api@perplexity.ai">
    Send us an email at **[api@perplexity.ai](mailto:api@perplexity.ai)** for enterprise inquiries or bug reports.
  </Card>

  <Card title="Discord Community" icon="message-circle" href="https://discord.com/invite/perplexity-ai">
    Join our Discord community to discuss with other developers and flag bug reports.
  </Card>
</CardGroup>