Conversation

The flagship AI component — a chat thread composed from the primitives, with an auto-scrolling viewport, role-styled messages, and streaming-markdown rendering via Streamdown.

AI

Hi! Send a message to watch streaming markdown render.

Usage

import { Conversation, ConversationContent } from "@/components/ai/conversation";
import { Message, MessageContent } from "@/components/ai/message";
import { Response } from "@/components/ai/response";

<Conversation>
  <ConversationContent>
    {messages.map((m) => (
      <Message key={m.id} from={m.role}>
        <MessageContent>
          {m.role === "assistant" ? <Response>{m.text}</Response> : m.text}
        </MessageContent>
      </Message>
    ))}
  </ConversationContent>
</Conversation>