Top AI Repos — open-source AI, indexed and scored
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Chat UI components for LLM apps
| Date | Stars |
|---|---|
| 2026-07-31 | 590 |
| 2026-08-01 | 590 |
| 2026-08-06 | 590 |
Today
— stars today
This week
— stars this week
This month
— stars this month
Momentum
0.0
growth rate 0.00%/day
# @llamaindex/chat-ui
Chat UI components for LLM apps
## Overview
@llamaindex/chat-ui is a React component library that provides ready-to-use UI elements for building chat interfaces in LLM (Large Language Model) applications. This package is designed to streamline the development of chat-based user interfaces for AI-powered applications.
## Quick Start
You can quickly add a chatbot to your project by using Shadcn CLI command:
```sh
npx shadcn@latest add https://ui.llamaindex.ai/r/chat.json
```
## Manual Installation
To install the package, run the following command in your project directory:
```sh
npm install @llamaindex/chat-ui
```
## Features
- Pre-built chat components (e.g., message bubbles, input fields)
- Minimal styling, fully customizable with Tailwind CSS
- Custom widgets to extend components (e.g., for rendering generated or retrieved documents)
- TypeScript support for type safety
- Easy integration with LLM backends like Vercel Ai
- Code and Latex styling with highlight.js and katex
## Usage
1. Install the package
```sh
npm install @llamaindex/chat-ui
```
2. Configure Tailwind CSS to include the chat-ui components
For Tailwind CSS version 4.x, update `globals.css` to include the chat-ui components (update the relative path to node_modules if necessary):
```css
@source '../node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}';
```
For Tailwind CSS version 3.x, you need to add the following to your `tailwind.config.ts` file:
```ts
module.exports = {
content: [
'app/**/*.{ts,tsx}',
'node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}',
],
// ...
}
```
3. Import the components and use them
The easiest way to get started is to connect the whole `ChatSection` component with `useChat` hook from [vercel/ai](https://github.com/vercel/ai):
```tsx
import { ChatSection } from '@llamaindex/chat-ui'
import { useChat } from '@ai-sdk/react'
const ChatExample = () => {
const handler = useChat()
return <ChatSection handler={handler} />
}
```
This simple example looks like this:
## Component Composition
Components are designed to be composable. You can use them as is:
```tsx
import { ChatSection } from '@llamaindex/chat-ui'
import { useChat } from '@ai-sdk/react'
const ChatExample = () => {
const handler = useChat()
return <ChatSection handler={handler} />
}
```
Or you can extend them with your own children components:
```tsx
import { ChatSection, ChatMessages, ChatInput } from '@llamaindex/chat-ui'
import LlamaCloudSelector from './components/LlamaCloudSelector' // your custom component
import { useChat } from '@ai-sdk/react'
const ChatExample = () => {
const handler = useChat()
return (
<ChatSection handler={handler}>
<ChatMessages />
<ChatInput>
<ChatInput.Form className="bg-lime-500">
<ChatInput.Field type="textarea" />
<ChatInput.Upload />
<LlamaCloudSelector /> {/* custom component */}
<ChatInput.Submit />
</ChatInput.Form>
</ChatInput>
</ChatSection>
)
}
```
Your custom component can use the `useChatUI` hook to send additional data to the chat API endpoint:
```tsx
import { useChatInput } from '@llamaindex/chat-ui'
const LlamaCloudSelector = () => {
const { requestData, setRequestData } = useChatUI()
return (
<div>
<select
value={requestData?.model}
onChange={e => setRequestData({ model: e.target.value })}
>
<option value="llama-3.1-70b-instruct">Pipeline 1</option>
<option value="llama-3.1-8b-instruct">Pipeline 2</option>
</select>
</div>
)
}
```
## Styling
### Components
`chat-ui` components are based on [shadcn](https://ui.shadcn.com/) components using Tailwind CSS.
You can override the default styles by changing CSS variables in the `globals.css` file of your Tailwind CSS configuration. For example, to change the background and foregroExcerpt of 6,526 characters
Read on GitHub
Thuc Pham · Vietnam
83
56
Marcus Schiesser · @schiesser-it · Taiwan
35
Huu Le · AI & Data · Vietnam
6
Miao
2
Alex Yang · @fundamental-bottom · United States
2
Adrian Lyjak
1
Logan · LlamaIndex
1
1
Guan-Ming Chiu · National Taiwan University · Taiwan
1
1
1
1
1
1
Homyee King ホミイ · China
1
1
Would you bet a product on this? Bounded 0–100 and slow moving.
matched fp:d7ee3a2e55e3c1aa, name:chat ui, desc:chat ui, desc:ui components
matched fp:d7ee3a2e55e3c1aa, topic:llm