ai-components

Message

Conversation rows in the same language as the composer: assistant turns led by a dotted thought orb, user turns in the accent colour with an optional liquid-metal ring.

Today
Can you tighten the launch note to three sentences?
9:41
Voice mode is here. Tap the mic and the input follows your voice as you speak. Pause any time, then send when you are ready.
9:41

Install

Steps for Next.js.

  1. Install the package

    One package carries every component, the beUI base they build on, and the effect libraries.

    bun add @poulo2/ai-components

  2. Load the styles with Tailwind v4

    Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.

    @import "@poulo2/ai-components/theme.css";
@source "../node_modules/@poulo2/ai-components/dist";

  3. Or load the prebuilt stylesheet

    For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.

    import "@poulo2/ai-components/styles.css";

Props

NameTypeDefaultDescription
from"user" | "assistant"—Who sent it. Sets the side, surface and avatar.
childrenReactNode—The message body. Leave empty while streaming to show the typing dots.
status"streaming" | "complete""complete"Assistant only. Streaming animates the orb; complete rests it.
orbStateOrbState"composing"Assistant only. The orb animation while streaming.
metalbooleanfalseUser only. Adds a liquid-metal ring that bends under the cursor. Each ring is a live canvas, so keep it to the newest message.
nameReactNode—Shown above the bubble.
timeReactNode—Shown below the bubble.
actionsReactNode—Controls placed after the time, such as copy or retry.
avatarReactNode—Replaces the default avatar. Pass null to remove it.
animateInbooleanfalsePlays the pop-up entrance once when the row mounts.