React AI Message

Powered by

AI Elements

Radix UI

Chat message containers with role-based styling for user vs assistant messages in conversational AI applications. This free open source React component handles layout, avatars, and content formatting so AI chat applications look professional in Next.js projects.

Message display with avatars

Role-based styling with avatar support:

'use client';import {   Message,   MessageContent,   MessageAvatar } from '@/components/ui/shadcn-io/ai/message';const Example = () => {  return (    <div className="flex flex-col gap-4 p-8 max-w-2xl mx-auto">      <Message from="user">        <MessageAvatar src="https://github.com/dovazencot.png" name="User" />        <MessageContent>          Hey there! I'm working on a React project and could use some help with state management.        </MessageContent>      </Message>      <Message from="assistant">        <MessageAvatar src="https://github.com/openai.png" name="AI" />        <MessageContent>          I'd be happy to help with React state management! Are you working with component state, or do you need something more complex like global state management?        </MessageContent>      </Message>      <Message from="user">        <MessageAvatar src="https://github.com/dovazencot.png" name="User" />        <MessageContent>          I think I need global state. The app is getting complex with multiple components needing the same data.        </MessageContent>      </Message>    </div>  );};export default Example;

import {  Avatar,  AvatarFallback,  AvatarImage,} from '@/components/ui/avatar';import { cn } from '@/lib/utils';import type { UIMessage } from 'ai';import type { ComponentProps, HTMLAttributes } from 'react';export type MessageProps = HTMLAttributes<HTMLDivElement> & {  from: UIMessage['role'];};export const Message = ({ className, from, ...props }: MessageProps) => (  <div    className={cn(      'group flex w-full items-end justify-end gap-2 py-4',      from === 'user' ? 'is-user' : 'is-assistant flex-row-reverse justify-end',      '[&>div]:max-w-[80%]',      className    )}    {...props}  />);export type MessageContentProps = HTMLAttributes<HTMLDivElement>;export const MessageContent = ({  children,  className,  ...props}: MessageContentProps) => (  <div    className={cn(      'flex flex-col gap-2 overflow-hidden rounded-lg px-4 py-3 text-foreground text-sm',      'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',      'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',      className    )}    {...props}  >    <div className="is-user:dark">{children}</div>  </div>);export type MessageAvatarProps = ComponentProps<typeof Avatar> & {  src: string;  name?: string;};export const MessageAvatar = ({  src,  name,  className,  ...props}: MessageAvatarProps) => (  <Avatar    className={cn('size-8 ring ring-1 ring-border', className)}    {...props}  >    <AvatarImage alt="" className="mt-0 mb-0" src={src} />    <AvatarFallback>{name?.slice(0, 2) || 'ME'}</AvatarFallback>  </Avatar>);

Automatically adjusts layout based on message role (user messages align right, assistant left) in React applications. Includes avatar support with fallbacks and consistent spacing for TypeScript implementations.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai.json

bunx shadcn@latest add https://www.shadcn.io/registry/ai.json

Usage

import {
  Message,
  MessageContent,
  MessageAvatar
} from '@/components/ai/message';

<Message from="user">
  <MessageAvatar src="/user-avatar.jpg" name="User" />
  <MessageContent>Hello, how can I help you today?</MessageContent>
</Message>

<Message from="assistant">
  <MessageAvatar src="" name="AI" />
  <MessageContent>I'd be happy to help! What do you need assistance with?</MessageContent>
</Message>

Why not just use divs with text-align?

Raw divs look amateur and break on mobile in React applications. Users need visual hierarchy to follow conversations—who said what, when, and in what order in JavaScript frameworks.

Most developers underestimate how much styling affects trust in Next.js projects. Professional-looking messages make AI responses feel more credible in TypeScript implementations.

Usage with Vercel AI SDK

Build chat interfaces using Vercel AI SDK's useChat hook with proper message roles in React applications:

"use client";

import {
  Conversation,
  ConversationContent,
} from "@/components/ai/conversation";
import {
  Message,
  MessageContent,
  MessageAvatar,
} from "@/components/ai/message";
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputSubmit,
} from "@/components/ai/prompt-input";
import { useChat } from "@ai-sdk/react";
import { useState } from "react";

export default function Chat() {
  const [input, setInput] = useState("");
  const { messages, append, status } = useChat();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      append({ role: "user", content: input });
      setInput("");
    }
  };

  return (
    <div className="flex flex-col h-full">
      <Conversation>
        <ConversationContent>
          {messages.map((message) => (
            <Message from={message.role} key={message.id}>
              <MessageAvatar
                src={message.role === "user" ? "/user.jpg" : ""}
                name={message.role === "user" ? "User" : "AI"}
              />
              <MessageContent>{message.content}</MessageContent>
            </Message>
          ))}
        </ConversationContent>
      </Conversation>

      <PromptInput onSubmit={handleSubmit}>
        <PromptInputTextarea
          value={input}
          placeholder="Type your message..."
          onChange={(e) => setInput(e.currentTarget.value)}
        />
        <PromptInputSubmit status={status} disabled={!input.trim()} />
      </PromptInput>
    </div>
  );
}

Backend route for chat responses:

// app/api/chat/route.ts
import { streamText, convertToModelMessages } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: "openai/gpt-4o",
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

Features

• Role-based layout (user right, assistant left, system centered) in React applications
• Avatar support with automatic initials fallback for TypeScript projects
• Responsive padding and sizing for mobile in Next.js implementations
• Content wrapper that handles markdown and rich content in JavaScript frameworks
• Proper accessibility with ARIA labeling for screen readers
• Works with any Vercel AI SDK setup and AI chat applications
• Free open source component designed for conversational AI interfaces and customer support

API Reference

Message

Container component for a single message with role-based styling.

MessageContent

Content wrapper for message text or custom content.

MessageAvatar

Avatar display with name-based fallback.

Keyboard interactions

Message layout gotchas

Inconsistent alignment breaks UX: User messages always right, assistant always left in React applications. Don't get creative with this—users expect consistency across JavaScript frameworks.

Missing avatar fallbacks: Not everyone has profile pictures in TypeScript projects. Generate initials or use placeholder icons. Empty avatars look broken in Next.js implementations.

Long messages break mobile: Set max-width constraints in React components. 65ch works for desktop, shorter for mobile. Test with real AI responses that can be 500+ words.

Forgetting loading states: Show typing indicators when AI is generating in JavaScript applications. Dead silence makes users think it crashed in React projects.

Avatar sizing on mobile: Desktop avatars look huge on mobile in Next.js applications. Scale down or your chat will look cramped in TypeScript implementations.

Integration with other components

Works great with Conversation for auto-scrolling chat containers in React applications. Combine with Actions for message-specific operations like copy, regenerate, or edit in Next.js projects. Add PromptInput for complete chat interface. This free open source component integrates seamlessly with modern JavaScript frameworks.

Questions developers actually ask