The MessageItem component renders individual messages in a chat interface. It provides role-based styling (user vs assistant), markdown content rendering, and interactive copy functionality with smooth hover states.

​
Installation

Install the MessageItem component using the shadcn CLI: 
pnpm dlx shadcn@latest add https://registry.intface.io/message-item.json

​
Usage

import { MessageItem } from "@/components/chat/message-item";

export default function Chat() {
  const message = {
    id: "1",
    role: "assistant",
    parts: [
      {
        type: "text",
        text: "Hello! How can I help you today?"
      }
    ]
  };

  return (
    <MessageItem 
      message={message}
      className="mb-4"
    />
  );
}

​
Props

​
message
UIMessage
required
The message object to display. Uses the standard UI message format from AI SDK with parts array.
​
className
string
Additional CSS classes to apply to the message container.
​
style
React.CSSProperties
Inline styles to apply to the message container.
​
ref
React.Ref<HTMLDivElement>
Reference to the message container element.