AI States
Inline states stack to narrate each phase of an AI turn — thinking, researching, running tools and streaming the answer.
Loading demo: ai-states-real-world
Installation
npx sdaia-ui@latest add ai-states
Usage
import { AiReasoningState, AiToolState, AiGenerationState } from "sdaia-ui"1<AiToolState state="tool-running" />2<AiResearchState state="searching-sources" />3<AiGenerationState state="streaming" />
Examples
AI Reasoning State
Deep Thinking
Loading demo: ai-reasoning-state-deep-thinking
Reasoning Hidden
Loading demo: ai-reasoning-state-reasoning-hidden
Reasoning Available
Loading demo: ai-reasoning-state-reasoning-available
Reasoning Unavailable
Loading demo: ai-reasoning-state-reasoning-unavailable
AI Tool State
Tool Waiting
Loading demo: ai-tool-state-tool-waiting
Tool Running
Loading demo: ai-tool-state-tool-running
Permission Needed
Loading demo: ai-tool-state-permission-needed
Tool Failed
Loading demo: ai-tool-state-tool-failed
Tool Timed Out
Loading demo: ai-tool-state-tool-timed-out
AI Context State
Context Full
Loading demo: ai-context-state-context-full
Context Truncated
Loading demo: ai-context-state-context-truncated
Context Lost
Loading demo: ai-context-state-context-lost
Context Imported
Loading demo: ai-context-state-context-imported
Context Invalid
Loading demo: ai-context-state-context-invalid
AI Memory State
Memory Used
Loading demo: ai-memory-state-memory-used
Memory Updated
Loading demo: ai-memory-state-memory-updated
Memory Conflict
Loading demo: ai-memory-state-memory-conflict
Memory Permission Required
Loading demo: ai-memory-state-memory-permission-required
AI Model State
Model Switching
Loading demo: ai-model-state-model-switching
Model Fallback
Loading demo: ai-model-state-model-fallback
Model Overloaded
Loading demo: ai-model-state-model-overloaded
Model Unavailable
Loading demo: ai-model-state-model-unavailable
AI Generation State
Streaming
Loading demo: ai-generation-state-streaming
Paused
Loading demo: ai-generation-state-paused
Interrupted
Loading demo: ai-generation-state-interrupted
Continued
Loading demo: ai-generation-state-continued
Regenerating
Loading demo: ai-generation-state-regenerating
Comparing Versions
Loading demo: ai-generation-state-comparing-versions
AI Research State
Searching Sources
Loading demo: ai-research-state-searching-sources
Reading Sources
Loading demo: ai-research-state-reading-sources
Ranking Sources
Loading demo: ai-research-state-ranking-sources
Source Failed
Loading demo: ai-research-state-source-failed
No Sources Found
Loading demo: ai-research-state-no-sources-found
AI Multi-Agent State
Agent Started
Loading demo: ai-multi-agent-state-agent-started
Agent Waiting
Loading demo: ai-multi-agent-state-agent-waiting
Agent Handoff
Loading demo: ai-multi-agent-state-agent-handoff
Agent Conflict
Loading demo: ai-multi-agent-state-agent-conflict
Agent Complete
Loading demo: ai-multi-agent-state-agent-complete
AI Artifact State
Generating Artifact
Loading demo: ai-artifact-state-generating-artifact
Artifact Ready
Loading demo: ai-artifact-state-artifact-ready
Artifact Failed
Loading demo: ai-artifact-state-artifact-failed
Artifact Updated
Loading demo: ai-artifact-state-artifact-updated
API Reference
Prop | Type | Default | Required |
|---|---|---|---|
state | string | — | required |
label | ReactNode | — | optional |
hint | ReactNode | — | optional |
icon | string | — | optional |
onHintClick | () => void | — | optional |
dir | 'ltr' | 'rtl' | — | optional |