Message

User and assistant message bubbles with streaming markdown support.

How does the PromptInput component work?

The PromptInput component is a full-featured chat input with attachments, character counting, and an agent selector. Wrap it in PromptInputProvider to share state between sub-components.

Installation

npx shadcn add https://ui.adq.ai/api/r/message

Usage

import { Message, MessageContent, MessageResponse } from "@/components/ai-elements/message";

function ConversationItem({ role, text }: { role: "user" | "assistant"; text: string }) {
  return (
    <Message from={role}>
      <MessageContent>
        <MessageResponse>{text}</MessageResponse>
      </MessageContent>
    </Message>
  );
}

Props

Prop	Type	Default	Description
`from`*	`"user" \| "assistant"`	—	Determines message alignment and styling.