Chat Ui

@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:

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:

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

npm install @llamaindex/chat-ui

1. 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):

@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:

module.exports = {
  content: [
    'app/**/*.{ts,tsx}',
    'node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}',
  ],
  // ...
}

1. 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):

import { ChatSection } from '@llamaindex/chat-ui'
import { useChat } from '@ai-sdk/react'

const ChatExample = () => {
  const handler = useChat()
  return 
}