Menu
AI Product UI · Live React Patterns

AI Interface Patterns

I designed examples of how an AI interface can show progress, missing information, uncertainty, and errors.

5 working patterns Live React · TypeScript State machines Streaming render
At a glance 30-second read

What it is

I built five interface examples: a response arriving gradually, a task in progress, missing information, uncertainty, and error recovery. The examples use React and TypeScript. Some states are demonstrations rather than connections to a production service.

What I explored

I explored how to show what an AI system is doing and help people recover when it fails.

Skills and tools

  • Streaming UI architecture (token-by-token render)
  • State-machine design for AI lifecycle
  • Uncertainty & confidence surfacing
  • Failure-mode UX (low context, error recovery)
  • Working code, not mockups
React TypeScript Streaming State Machines SSE
The Brief

I focused on what people see while an AI response is arriving, when it is uncertain, and when it fails.

I gave each of five states a different treatment: responding, thinking, done, uncertain, and failed. Each treatment explains what is happening and what the person can do next.

The progress logic and gradual response display work in the demo. The confidence and error examples are not connected to a production service.

01 — Streaming Output v1.0.0 · [ STABLE ]

StreamingResponse

The primary output pattern. Text arrives character by character, and each arrival is a render event. The cursor shows the model is active. Connected to the prompt input below.

StreamingResponse [ IDLE ]
tokens: 0 / 4096
⌘ ↵ to send 0 / 4096
Design rationale Character-level streaming makes the model feel active rather than blocked. The blinking cursor is the only animation needed. The token counter shows system metadata as a UI element rather than hiding it.
02 — System States v1.0.0 · [ STABLE ]

ModelStateIndicator

Five states: idle, thinking, generating, done, error. None of them should look the same. Click advance to step through the machine.

ModelStateIndicator [ IDLE ]
Design rationale AI states are not loading spinners. Thinking, generating, done, and error each carry different meaning, so they are designed differently. The user reads the state before they read the output.
03 — Confidence Layer v0.9.0 · [ EXPERIMENTAL ]

ConfidenceAnnotation

Token-level confidence mapped to visual weight. High renders full. Medium dims. Low underlines. Uncertain goes red. Hover any word for its score.

ConfidenceAnnotation [ EXPERIMENTAL ]
high confidence
medium
low
uncertain
Design rationale Model uncertainty is signal. Showing confidence at the word level lets users scan for what the model knows versus what it guesses. Most products hide this. This exposes it.
04 — Context Meter v1.0.0 · [ STABLE ]

ContextMeter

Context window usage as a first-class UI element. Drag the slider to simulate different usage levels and watch the component respond.

ContextMeter · 200k context [ STABLE ]
Prompt
0
Completion
0
Context used
0%
Window: 200,000 tokens 0% used
Simulate usage 0%
Design rationale The context window is a finite resource. Showing it keeps users oriented: they know how much of the conversation the model can see.
05 — Error States v1.0.0 · [ STABLE ]

ErrorState

Three classes of AI failure, each with different meaning and a different design response. These are AI error states, not generic browser errors.

ErrorState [ STABLE ]
⚠
429 · Rate Limit Exceeded
Too many requests in this window. The model will resume in approximately 30 seconds. Queued requests will be processed automatically.
⚠
503 · Model Temporarily Unavailable
The model is temporarily unavailable due to high demand. This is not a problem with your request. Retry in 15–30 seconds.
✕
500 · Inference Failed
The model returned an empty or malformed completion. The request reached the model; inference is what failed. Check your prompt for adversarial patterns or try rephrasing.
Design rationale Rate limits, service unavailability, and inference failures are different problems. The interface communicates that difference instead of collapsing them into one red banner. The user needs to know what failed and what to do about it.
Component Index 5 components · v1.0.0
001
StreamingResponse
[ STABLE ]
002
ModelStateIndicator
[ STABLE ]
003
ConfidenceAnnotation
[ EXPERIMENTAL ]
004
ContextMeter
[ STABLE ]
005
ErrorState
[ STABLE ]