@mdxui/dochat

AI chat components for building conversational experiences with MDXUI.

Installation

pnpm add @mdxui/dochat @mdxui/primitives

Components

Chatbot Components

• PromptInput - Composable chat input with attachments, model selector
• Message - User/assistant message display with markdown support
• Conversation - Thread container with auto-scroll
• CodeBlock - Syntax highlighted code with copy button
• Reasoning - Collapsible thinking/reasoning sections
• Sources - Expandable source citations
• Suggestion - Suggestion chips with horizontal scroll
• Tool - Tool call status indicators
• Loader - Typing/thinking indicators

Usage

import {
  PromptInput,
  PromptInputBody,
  PromptInputTextarea,
  PromptInputFooter,
  PromptInputSubmit,
} from '@mdxui/dochat/chatbot'

export function ChatInput() {
  return (
    <PromptInput onSubmit={(message) => console.log(message)}>
      <PromptInputBody>
        <PromptInputTextarea placeholder="Ask anything..." />
      </PromptInputBody>
      <PromptInputFooter>
        <div />
        <PromptInputSubmit />
      </PromptInputFooter>
    </PromptInput>
  )
}