Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/run-llama/chat-ui
Chat UI components for LLM apps
https://github.com/run-llama/chat-ui
Last synced: about 2 months ago
JSON representation
Chat UI components for LLM apps
- Host: GitHub
- URL: https://github.com/run-llama/chat-ui
- Owner: run-llama
- License: mit
- Created: 2024-10-18T00:31:16.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T10:56:56.000Z (3 months ago)
- Last Synced: 2024-10-24T17:27:04.665Z (3 months ago)
- Language: TypeScript
- Size: 783 KB
- Stars: 3
- Watchers: 5
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-local-llms - chat-ui
README
# @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.
## 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 your `tailwind.config.ts` to include the chat-ui components
```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/react'
const ChatExample = () => {
const handler = useChat()
return
}
```
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/react'
const ChatExample = () => {
const handler = useChat()
return
}
```
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/react'
const ChatExample = () => {
const handler = useChat()
return (
{/* custom component */}
)
}
```
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 (
setRequestData({ model: e.target.value })}
>
Pipeline 1
Pipeline 2
)
}
```
## 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 foreground colors:
```css
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
}
```
For a list of all available CSS variables, please refer to the [Shadcn Theme Config](https://ui.shadcn.com/themes).
Additionally, you can also override each component's styles by setting custom classes in the `className` prop. For example, setting the background color of the `ChatInput.Form` component:
```tsx
import { ChatSection, ChatMessages, ChatInput } from '@llamaindex/chat-ui'
import { useChat } from 'ai/react'
const ChatExample = () => {
const handler = useChat()
return (
)
}
```
### Code and Latex styling
Inside the markdown component, we use [highlight.js](https://highlightjs.org/) for code blocks, [katex](https://katex.org/) for latex, and [pdf-viewer](https://github.com/run-llama/pdf-viewer) for pdf files.
If your app is using code, latex or pdf files, you'll need to import their CSS files:
```tsx
import '@llamaindex/chat-ui/styles/markdown.css' // code, latex and custom markdown styling
import '@llamaindex/chat-ui/styles/pdf.css' // pdf styling
```
The `code.css` file uses the `atom-one-dark` theme from highlight.js by default. There are a lot of others to choose from: https://highlightjs.org/demo
You can use any of them by copying [their CSS](https://github.com/highlightjs/highlight.js/tree/main/src/styles/) to your project and importing it.
## Example
See the [example app](./apps/web/README.md) for a complete example. The generate a full-featured project to
get started with, use [create-llama](https://github.com/run-llama/create-llama).
## License
@llamaindex/chat-ui is released under the [MIT License](LICENSE).
## Support
If you encounter any issues or have questions, please file an issue on our [GitHub repository](https://github.com/run-llama/chat-ui/issues).