Conversation

The Conversation component provides a complete chat interface with message history, automatic scroll management, and typing indicators. It's designed to integrate seamlessly with the Vercel AI SDK.

Overview

A Conversation is composed of a message list, individual message bubbles, and a prompt input. Each piece is a separate component, allowing you to compose exactly the interface you need.

Preview

How can I help you today?

Explain how to set up Streamdown with all plugins.

To set up Streamdown with all plugins, first install the packages...

Basic usage

components/chat.tsx

"use client"

import {
  Conversation,
  ConversationContent,
  ConversationInput,
  Message,
} from "@/components/ui/conversation"

export function Chat() {
  const [messages, setMessages] = useState<Message[]>([])

  return (
    <Conversation>
      <ConversationContent messages={messages} />
      <ConversationInput
        onSubmit={(content) => {
          setMessages((prev) => [
            ...prev,
            { role: "user", content },
          ])
        }}
      />
    </Conversation>
  )
}

With AI SDK

The Conversation component works naturally with the AI SDK's useChat hook:

components/ai-chat.tsx

"use client"

import { useChat } from "@ai-sdk/react"
import {
  Conversation,
  ConversationContent,
  ConversationInput,
} from "@/components/ui/conversation"

export function AiChat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <Conversation>
      <ConversationContent messages={messages} />
      <ConversationInput
        value={input}
        onChange={handleInputChange}
        onSubmit={handleSubmit}
      />
    </Conversation>
  )
}

AI SDK compatibility

The Conversation component accepts the same message format as the AI SDK, so you can pass messages directly from useChat().

Props reference

Prop	Type	Description
`messages`	`Message[]`	Array of message objects to display
`onSubmit`	`(content: string) => void`	Callback when user sends a message
`isLoading`	`boolean`	Shows typing indicator when true
`placeholder`	`string`	Input placeholder text