Skip to content
Sign in

AI Chat UI for React and Tailwind

Chat looks simple until messages stream, code blocks overflow and the thread needs to hold its scroll position. These components solve those problems for assistant interfaces: message lists, bubbles, threads and full layouts. Watch each one run, then check how it handles long replies and small screens. Install with one command, or ask your coding agent to wire it into your app and connect your own model.

Bubble
Bubble

About AI chat UI

AI chat components are the conversation itself: message bubbles for the user and the assistant, threads that keep their place while new text streams in, avatars, timestamps and the actions under each reply such as copy, retry, edit and feedback. Some are single messages, others whole layouts with a history sidebar.

Test them with real conversations, not tidy demos. Long code blocks, tables, very short and very long replies and slow streaming all expose weak layouts. Keep the view pinned to the newest message while people are at the bottom, and stop following as soon as they scroll up to read.

Frequently asked questions

Combine a scrolling message list, a composer at the bottom and a hook that streams the model's reply into the last message. The Vercel AI SDK's useChat handles the streaming state for you.

Scroll to the bottom as content grows only while people are already near it. If they scroll up, stop following and show a jump to latest button instead.

Parse the reply with a markdown renderer that handles partial input while it streams, highlight code blocks and keep tables scrollable inside the bubble.

User messages usually sit in bubbles on one side. Assistant replies are often full width without a bubble, since they contain headings, lists and code that read better with room.

Copy, regenerate and feedback are the common ones, plus edit on the user's own messages. Show them on hover on desktop and always on touch screens.

Show a small loading state in the reply's place until the first token arrives, then let the streamed text take over. Don't keep a typing indicator running beside text that's already appearing.

Mark the message list as a log so screen readers announce new replies, label who sent each message, and keep the composer reachable without scrolling past the whole history.

Explore more