For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
30
Sponsor

Message Bubble

PreviousNext

Chat message bubbles with text, image, voice, and reaction variants.

S

Hey! How are you doing today?

Dec 8, 10:30 AM

Installation

$ pnpm dlx shadcn@latest add @mcpcn/message-bubble

Usage

import {
  MessageBubble,
  MessageBubbleContent,
} from "@/components/ui/message-bubble";
<MessageBubble>
  <MessageBubbleContent />
</MessageBubble>

Composition

Use the following composition to build an MessageBubble:

MessageBubble
└── MessageBubbleContent

Examples

Image Messages

A
Check out this view!

Check out this view!

Dec 8, 2:45 PM
"use client";

import { ImageMessageBubble } from "@/components/ui/message-bubble";

export function MessageBubbleImageDemo() {
  return <ImageMessageBubble />;
}

With Reactions

T

We just hit 10,000 users!

Dec 8, 4:20 PM
"use client";

import { MessageWithReactions } from "@/components/ui/message-bubble";

export function MessageBubbleReactionsDemo() {
  return <MessageWithReactions />;
}

Voice Messages

M
0:42
Dec 8, 3:15 PM
"use client";

import { VoiceMessageBubble } from "@/components/ui/message-bubble";

export function MessageBubbleVoiceDemo() {
  return <VoiceMessageBubble />;
}

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

Add MessageBubble to a component library and map it to the installed component.

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import {
  MessageBubble,
  MessageBubbleContent,
} from "@/components/ui/message-bubble";
 
const OpenUIMessageBubble = defineComponent({
  name: "MessageBubble",
  description:
    "Chat message bubbles with text, image, voice, and reaction variants.",
  props: z.object({}),
  component: () => (
    <MessageBubble>
      <MessageBubbleContent />
    </MessageBubble>
  ),
});
 
export const message_bubbleLibrary = createLibrary({
  root: "MessageBubble",
  components: [OpenUIMessageBubble],
});

For richer generated compositions, define the child primitives separately and connect them with .ref fields. See Defining Components in the OpenUI documentation.

json-render Integration

Install the json-render React packages.

pnpm add @json-render/core @json-render/react zod

Add MessageBubble to a component catalog and map it to the installed component.

import { defineCatalog } from "@json-render/core";
import { defineRegistry } from "@json-render/react";
import { schema } from "@json-render/react/schema";
import { z } from "zod";
 
import {
  MessageBubble,
  MessageBubbleContent,
} from "@/components/ui/message-bubble";
 
export const catalog = defineCatalog(schema, {
  components: {
    MessageBubble: {
      props: z.object({}),
      description:
        "Chat message bubbles with text, image, voice, and reaction variants.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    MessageBubble: () => (
      <MessageBubble>
        <MessageBubbleContent />
      </MessageBubble>
    ),
  },
});

Use catalog.prompt() to constrain model output, then render the generated spec with the json-render React Renderer. See the json-render Quick Start for the provider and streaming setup.

API Reference

See the Base UI documentation for more information.