AI status

Reflects the lifecycle of an AI response — thinking, processing, done, and error. Each state has its own animation. Transitions between states use AnimatePresence.

Live demo

thinking

Trigger a state

Full lifecycle

Why it animates

Users waiting on an AI response need to know something is happening. Each state communicates a different phase — the dots say 'I am working on it', the checkmark says 'I am finished', without a single word of copy.

Usage

import { AIStatus } from '@/components/ui/AIStatus'

// Reflects the full lifecycle of an AI response
<AIStatus status="thinking" />
<AIStatus status="processing" />
<AIStatus status="done" />
<AIStatus status="error" />