https://github.com/assistant-ui/assistant-ui-react-ui
https://github.com/assistant-ui/assistant-ui-react-ui
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/assistant-ui/assistant-ui-react-ui
- Owner: assistant-ui
- License: mit
- Created: 2025-09-10T00:52:58.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-10T01:34:15.000Z (9 months ago)
- Last Synced: 2025-10-02T08:44:40.321Z (9 months ago)
- Language: TypeScript
- Size: 11.9 MB
- Stars: 1
- Watchers: 0
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# @assistant-ui/react-ui
Pre-styled React components for [@assistant-ui/react](https://github.com/assistant-ui/assistant-ui).
## Overview
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.
## Installation
```bash
npm install @assistant-ui/react-ui @assistant-ui/react @assistant-ui/react-markdown
```
## Components
- **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
## Basic Usage
```tsx
import { Thread } from "@assistant-ui/react-ui";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import "@assistant-ui/react-ui/styles/index.css";
function MyChat() {
return (
);
}
```
## Styling
### CSS Classes
All components use CSS classes prefixed with `aui-` for easy customization:
```css
.aui-thread-root { /* ... */ }
.aui-message-root { /* ... */ }
.aui-composer-root { /* ... */ }
```
### Importing Styles
```tsx
// Base styles (required)
import "@assistant-ui/react-ui/styles/index.css";
// Optional theme
import "@assistant-ui/react-ui/styles/themes/default.css";
```
## Configuration
Components accept configuration through the `ThreadConfigProvider`:
```tsx
import { Thread, ThreadConfigProvider } from "@assistant-ui/react-ui";
function MyChat() {
return (
);
}
```
## Compatibility
- Compatible with `@assistant-ui/react` v0.11.x
- Requires React 18 or 19
- Full TypeScript support
## License
MIT