Message Bubble

AI chats

About

A chat message bubble that animates in with a spring entrance and styles user vs. assistant turns differently, for building AI chat and conversation threads.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Message Bubble to your project and fits it to your theme.

Code

How Message Bubble is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import MessageBubble from "@/components/ui/message-bubble";

export default function MessageBubbleDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <MessageBubble role="user" index={0}>
        How do I stream a response?
      </MessageBubble>
      <MessageBubble role="assistant" index={1}>
        Reveal it token by token with Streaming Text.
      </MessageBubble>
    </div>
  );
}