Message

PreviousNext

Display chat messages with role-based styling and avatars.

Us
Hello! Can you help me understand how to use AI Elements in my project?
AI
Of course! AI Elements are pre-built components designed for AI interfaces. They work seamlessly with the rest of the component library.
import {
  Message,
  MessageAvatar,
  MessageContent,
} from "@/components/ai-elements/message"

export function MessageDemo() {
  return (
    <div className="space-y-4">
      <Message from="user">
        <MessageAvatar src="https://github.com/shadcn.png" name="User" />
        <MessageContent>
          Hello! Can you help me understand how to use AI Elements in my
          project?
        </MessageContent>
      </Message>

      <Message from="assistant">
        <MessageAvatar src="/avatars/shadcn.jpg" name="AI" />
        <MessageContent>
          Of course! AI Elements are pre-built components designed for AI
          interfaces. They work seamlessly with the rest of the component
          library.
        </MessageContent>
      </Message>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add message

Usage

import { Message, MessageAvatar, MessageContent } from "@/ai-elements/message"
<Message from="assistant">
  <MessageAvatar src="/avatar.jpg" name="AI" />
  <MessageContent>Hello! How can I help you today?</MessageContent>
</Message>

Examples

User Message

<Message from="user">
  <MessageAvatar src="https://github.com/shadcn.png" name="User" />
  <MessageContent>
    Can you explain how quantum computing works?
  </MessageContent>
</Message>

Flat Variant

Us
This is a message with flat variant.
AI
The flat variant provides a different visual style for messages.
import {
  Message,
  MessageAvatar,
  MessageContent,
} from "@/components/ai-elements/message"

export function MessageFlat() {
  return (
    <div className="space-y-4">
      <Message from="user">
        <MessageAvatar src="https://github.com/shadcn.png" name="User" />
        <MessageContent variant="flat">
          This is a message with flat variant.
        </MessageContent>
      </Message>

      <Message from="assistant">
        <MessageAvatar src="/avatars/shadcn.jpg" name="AI" />
        <MessageContent variant="flat">
          The flat variant provides a different visual style for messages.
        </MessageContent>
      </Message>
    </div>
  )
}

<Message from="assistant">
  <MessageAvatar src="/avatar.jpg" name="AI" />
  <MessageContent variant="flat">
    The flat variant provides a different visual style.
  </MessageContent>
</Message>

API Reference

Message

PropTypeDefaultDescription
from"user" | "assistant" | "system"-The role of the message sender
classNamestring-Additional CSS classes

MessageContent

PropTypeDefaultDescription
variant"contained" | "flat""contained"The visual style of the message
classNamestring-Additional CSS classes

MessageAvatar

PropTypeDefaultDescription
srcstring-Avatar image source
namestring-Name for fallback text
classNamestring-Additional CSS classes