PrimitivesMessageBubble

Message Bubble

MessageBubble aligns user messages to the end and assistant/system messages to the start. Role styling, status dots, and optional metadata stay readable in both light and dark themes.

MessageBubble ships with a full API table, a copyable example, and accessibility notes.

tsx

You5:30:00 pm

Hello!

Assistant5:30:00 pm

Hi there! How can I help today?

Sent

System notice

Installation

Install the package once, then import MessageBubble from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { MessageBubble } from "@agent-ui/react/message-bubble";

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.

tsx

1import { MessageBubble } from "@agent-ui/react";
2 
3<MessageBubble role="user" name="You">Hello!</MessageBubble>
4<MessageBubble role="assistant" name="Assistant" status="sent">
5  How can I help?
6</MessageBubble>

API reference

Every prop MessageBubble accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
role	"user" \| "assistant" \| "system"	—	Controls alignment, color, and the screen-reader label.
children	ReactNode	—	Message content, usually text or MarkdownContent.
avatar	string	—	Avatar image URL.
name	string	—	Display name shown above the bubble.
timestamp	Date	—	Formatted time next to the name.
status	"sending" \| "sent" \| "error"	—	Delivery indicator.
className	string	—	Inherits every native div attribute, including id, aria-, data-, onClick, and style.

Accessibility

Each bubble exposes an accessible role label; status changes are announced alongside the message list live region.

Use it with the rest of the library

MessageBubble composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

6 lines · copy-ready