ChatBubble

Message bubble for user and assistant turns.

Available inreactangular

Preview

Live previewreal component

How do I add a component?

9:41 AM

Run `npx mcp-elements add button` and it copies into your project.

9:41 AM

Install

TerminalBash

$ npx @mcp-elements/cli add chat-bubble

Usage

chat-bubble-example.tsxTSX

import { ChatBubble, ChatBubbleAvatar, ChatBubbleContent, ChatBubbleTimestamp } from '@mcp-elements/react'

export function Example() {
  return (
    <div className="flex flex-col gap-4">
      <ChatBubble variant="user">
        <ChatBubbleContent>How do I add a component?</ChatBubbleContent>
        <ChatBubbleTimestamp>9:41 AM</ChatBubbleTimestamp>
      </ChatBubble>
      <ChatBubble variant="ai">
        <ChatBubbleAvatar src="/avatar.png" alt="Assistant" />
        <ChatBubbleContent>Run `npx mcp-elements add button`.</ChatBubbleContent>
        <ChatBubbleTimestamp>9:41 AM</ChatBubbleTimestamp>
      </ChatBubble>
    </div>
  )
}

Props

Prop	Type	Default	Description
`variant`	`'user' \| 'ai'`	`'ai'`	Which side and style the bubble renders on
`children`	`React.ReactNode`	—	Use ChatBubbleContent, ChatBubbleTimestamp, ChatBubbleAvatar as children
`src (ChatBubbleAvatar) *`	`string`	—	Image URL for the avatar
`alt (ChatBubbleAvatar) *`	`string`	—	Alt text for the avatar image