RAG Frontend

A React-based frontend for RAG (Retrieval-Augmented Generation) applications, built with TypeScript and Vite.

Features

• Modern React 18 with TypeScript
• Chat interface for RAG interactions
• Responsive design with dark/light mode support
• Real-time message streaming support
• Clean, accessible UI with Lucide icons

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository
2. Install dependencies:

   npm install

Development

Start the development server:

npm run dev

The application will be available at http://localhost:3000.

Building

Build for production:

npm run build

Linting

Run ESLint:

npm run lint

Project Structure

src/
├── components/
│   ├── ChatInterface.tsx    # Main chat component
│   ├── MessageList.tsx      # Message display component
│   └── *.css               # Component styles
├── App.tsx                 # Main application component
├── main.tsx               # Application entry point
└── index.css              # Global styles

API Integration

The frontend expects a backend API endpoint at /api/chat that accepts POST requests with the following structure:

{
  "message": "user question"
}

And returns:

{
  "response": "assistant response"
}

Configuration

• Vite configuration: vite.config.ts
• TypeScript configuration: tsconfig.json, tsconfig.node.json
• ESLint configuration: eslint.config.js