Last year I was building an AI chat interface. I needed a component that shows streaming text with a blinking cursor, one that displays tool calls in progress, and another that tracks token usage in real time.
I opened npm. Nothing.
Every UI library I found — shadcn, MUI, Chakra — was built for traditional apps. Forms, tables, dashboards. Great libraries. Wrong problem.
So I built Aura UI.
Most AI products need the same 9 things that no library provides:
- MessageBubble — chat layout with role-based styling
- StreamingIndicator — animated states (thinking / streaming / done)
- ToolCallCard — shows what the agent is doing in real time
- ParameterSlider — temperature, top-p controls with live preview
- CitationBlock — source references with hover expand
- TokenCounter — live usage with limit warnings
- CodeBlock — syntax highlight + copy, optimized for LLM output
- PromptEditor — textarea with token count + template variables
- ModelSelector — provider/model picker with context window info
Plus 10 base components (Button, Input, Modal, etc.) that match the same design language.
The streaming state machine
The part that took longest: streaming has 4 distinct states — Thinking → Streaming → Complete → Error. Each needs its own visual language. Most teams hack this with booleans. Aura UI ships it solved.
Tech
React + TypeScript + Tailwind CSS. Dark/light mode.
Zero runtime dependencies beyond React itself.
Source code included — no black box.
Get it
Live demo → https://aura-ui-mocha.vercel.app
What you get:
- 19 components (full source, not a compiled black box)
- TypeScript types + Tailwind config included
- Dark/light mode out of the box
- Free updates
Early bird: $49 → $99 after 200 seats
If this saves you a week of work on your next AI product:
→ https://payhip.com/b/z9Hjr
Happy to answer questions below — especially if there's a component
you need that's not on the list.
Top comments (0)