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.
## What's different
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.
## Tech
React + TypeScript + Tailwind CSS. Dark/light mode.
Zero runtime dependencies beyond React itself.
## Try it
Live demo: https://aura-ui-mocha.vercel.app
If you're building an AI product and this saves you a week of work,
it's $49: 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)