AI chat UI components for React
The pieces of an AI chat: the composer people type into, answers that stream in without the layout jumping, citations, a thinking state while the model works, a model picker and the actions under a message.
Every component is one .tsx file with no dependencies, light and dark mode built in.
10 React components – 3 free.
- AI Answer – Streamed answer with source cards, citation chips that preview their source, copy, regenerate, feedback and follow-ups
- Chat Composer – Prompt composer with model picker, voice input, app connections and approval request
- Cited Answer – An AI answer wired to its sources – point at a citation to light up its sentence and source, click to unfold the quoted passage with the matching words marked
- Comment Thread – One comment with replies – an assistant reports what it did, folds open details and answers @mentions
- Comments Panel – Comment feed with filters, runnable /edit commands, resolve and a composer
- Message Actions – The quiet bar under an AI message – copy turns into a check, regenerate spins and unfolds a version switcher, thumbs pop and ask why, read aloud becomes a tiny equalizer
- Model Picker – The model menu of an AI chat – point at a model and its speed, quality and cost bars fill, switch on extended thinking and its effort unfolds, while the tray rolls the first-token time and price
- Thinking Loader – A small working pill for AI replies – an eight-ray spinner and a shimmering label that rolls through phases and settles on a check
- Thinking State – AI working panel with a live timer, searched sources and thinking steps that appear one by one
- Writing Assistant – AI chat card with a soft gradient glow, suggestions, streaming replies and live voice dictation