Message Item

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

npx shadcn@latest add https://registry.intface.io/message-item.json

yarn shadcn@latest add https://registry.intface.io/message-item.json

bunx --bun 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

UIMessage

required

The message object to display. Uses the standard UI message format from AI SDK with parts array.

string

Additional CSS classes to apply to the message container.

React.CSSProperties

Inline styles to apply to the message container.

React.Ref<HTMLDivElement>

Reference to the message container element.

Getting started

Components

Installation

Usage

Props

​Installation

​Usage

​Props

Installation

Usage

Props