PrimitivesMessageList

Message List

Scrollable transcript with an ARIA live region, empty state, loading state, and auto-scroll.

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

tsx

What is Agent UI?

A UI library for building AI agent interfaces with React.

Installation

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

bash

pnpm add @agent-ui/react

tsx

import { MessageList } from "@agent-ui/react/message-list";

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 { MessageList, MessageBubble } from "@agent-ui/react";
2 
3<MessageList isLoading={pending} className="h-96">
4  {messages.map((m) => (
5    <MessageBubble key={m.id} role={m.role}>{m.content}</MessageBubble>
6  ))}
7</MessageList>

API reference

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

API reference for this component
Name	Type	Default	Description
children	ReactNode	—	Message elements.
emptyMessage	ReactNode	"Start a conversation"	Shown when there are no children.
isLoading	boolean	false	Renders skeleton placeholders instead of messages.
autoScroll	boolean	true	Pins to the newest message when content changes.
className	string	—	Inherits every native div attribute, including id, aria-, data-, onClick, and style.

Accessibility

The list is a polite live region; streaming replies are announced without interrupting the user.

Use it with the rest of the library

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

7 lines · copy-ready