Pre-styled React components for @assistant-ui/react.

This package contains styled UI components that were previously part of the main @assistant-ui/react package (prior to v0.8). It provides ready-to-use, customizable components for building AI chat interfaces.

npm install @assistant-ui/react-ui @assistant-ui/react @assistant-ui/react-markdown

• Thread - Complete chat interface with messages, composer, and scroll management
• ThreadList - List view for managing multiple conversation threads
• AssistantModal - Floating modal chat interface
• AssistantMessage - Styled assistant message component with action bar
• UserMessage - Styled user message component with edit capabilities
• Composer - Message input with attachment support
• EditComposer - Message editing interface
• BranchPicker - Navigate between message branches
• MessagePart - Render message content parts
• ThreadWelcome - Welcome screen with suggestions
• AttachmentUI - Attachment display component
• makeMarkdownText - Factory for markdown rendering

import { Thread } from "@assistant-ui/react-ui"; import { AssistantRuntimeProvider } from "@assistant-ui/react"; import "@assistant-ui/react-ui/styles/index.css"; function MyChat() { return ( <AssistantRuntimeProvider runtime={runtime}> <Thread /> </AssistantRuntimeProvider> ); }

All components use CSS classes prefixed with aui- for easy customization:

.aui-thread-root { /* ... */ } .aui-message-root { /* ... */ } .aui-composer-root { /* ... */ }

// Base styles (required) import "@assistant-ui/react-ui/styles/index.css"; // Optional theme import "@assistant-ui/react-ui/styles/themes/default.css";

Components accept configuration through the ThreadConfigProvider:

import { Thread, ThreadConfigProvider } from "@assistant-ui/react-ui"; function MyChat() { return ( <ThreadConfigProvider config={{ assistantMessage: { allowReload: true, allowCopy: true, allowFeedbackPositive: true, allowFeedbackNegative: true, }, userMessage: { allowEdit: true, }, composer: { allowAttachments: true, }, }} > <Thread /> </ThreadConfigProvider> ); }

• Compatible with @assistant-ui/react v0.11.x
• Requires React 18 or 19
• Full TypeScript support

MIT