AI UX Interface Playground
Exploring AI-native interface patterns: streaming text, confidence indicators, tool-call visualizations, and reasoning traces — rendered in a custom React playground.
Goal
Identify and prototype the UI patterns that make AI-powered interfaces feel fast, transparent, and trustworthy — going beyond the standard chat bubble.
Context
Most AI interfaces default to a chat metaphor: user sends message, model streams text back. This experiment asks: what other interaction patterns emerge when you expose more of what the model is doing? Inspired by extended thinking traces, tool-call visibility, and token-probability displays seen in research interfaces, this playground implements four experimental UI patterns using the Anthropic API's streaming capabilities.
Implementation notes
Built against the Anthropic Messages API with streaming enabled. Four UI patterns implemented: (1) Streaming typewriter with adjustable speed — simulates different token rates. (2) Confidence heatmap — colors tokens by estimated certainty (currently simulated, not from real logprobs). (3) Tool-call trace — renders each tool invocation as an expandable card showing input/output JSON. (4) Thinking stage indicator — shows 'reading', 'reasoning', 'writing' phases based on SSE event timing. All patterns are composable via a playground config panel.
Result
The tool-call trace pattern proved most valuable for debugging agentic workflows. The streaming typewriter revealed that perceived latency drops significantly when even a single token appears within 300ms of submission. The confidence heatmap is experimental and not based on real model data — labeled clearly as a prototype.
What worked
- SSE streaming from the Anthropic API is reliable and well-documented
- The tool-call trace component reduced debugging time noticeably in multi-step agent tests
- Framer Motion AnimatePresence handled streaming token appends without layout jank
- The config panel made it easy to compare patterns side-by-side
What failed
- The confidence heatmap is not based on real logprob data — Anthropic API does not expose per-token probabilities publicly
- Thinking stage detection based on SSE timing is a heuristic, not a protocol feature
- Rendering 1000+ streaming tokens caused noticeable React re-render overhead without virtualization
Next iteration
Implement proper token virtualization for long streams. Investigate whether extended thinking traces (available on Claude models with thinking mode) can power the stage indicator more reliably.