React Components

Coming Soon: Pre-built React components for EasyRAG

What to Expect

We're building a library of ready-to-use React components that handle all the complexity of file uploads, search, and chat interfaces.

Planned Components

• 🎯 FileUpload - Drag-and-drop file upload with progress
• 💬 ChatInterface - Full-featured chat UI with streaming
• 🔍 SearchBox - Document search with autocomplete
• 📁 FileManager - List, preview, and delete files
• 🎨 Fully customizable - Tailwind CSS or bring your own styles

Preview

Here's what the components will look like:

Installation

bash
npm install @easyrag/react
# or
yarn add @easyrag/react

File Upload Component

jsx
import { FileUpload } from '@easyrag/react';

function MyApp() {
  return (
    <FileUpload
      datasetId="my-dataset"
      token={frontendToken}
      onUploadComplete={(files) => {
        console.log('Uploaded:', files);
      }}
      onError={(error) => {
        console.error('Upload failed:', error);
      }}
      accept={['.pdf', '.docx']}
      maxSize={100 * 1024 * 1024}
    />
  );
}

Chat Interface

jsx
import { ChatInterface } from '@easyrag/react';

function MyApp() {
  return (
    <ChatInterface
      datasetId="support-docs"
      token={frontendToken}
      placeholder="Ask a question about our products..."
      welcomeMessage="Hi! How can I help you today?"
      streaming={true}
    />
  );
}

Search Box

jsx
import { SearchBox } from '@easyrag/react';

function MyApp() {
  return (
    <SearchBox
      datasetId="company-docs"
      token={frontendToken}
      onResultsChange={(results) => {
        console.log('Found:', results);
      }}
      filters={[
        { key: 'department', match: { value: 'legal' } }
      ]}
    />
  );
}

File Manager

jsx
import { FileManager } from '@easyrag/react';

function MyApp() {
  return (
    <FileManager
      datasetId="user-documents"
      token={frontendToken}
      allowDelete={true}
      allowPreview={true}
      onFileClick={(file) => {
        console.log('Clicked:', file.originalName);
      }}
    />
  );
}

Features

FileUpload Component

• ✅ Drag-and-drop or click to browse
• ✅ Multi-file upload with batch processing
• ✅ Progress indicators per file
• ✅ File validation (size, type)
• ✅ Custom metadata support
• ✅ Retry failed uploads
• ✅ Preview thumbnails

ChatInterface Component

• ✅ Message history
• ✅ Streaming responses (typing effect)
• ✅ Markdown rendering
• ✅ Source citations with links
• ✅ Copy messages
• ✅ Rate limiting UI
• ✅ Mobile responsive

SearchBox Component

• ✅ Autocomplete suggestions
• ✅ Highlighted results
• ✅ Relevance scores
• ✅ File source badges
• ✅ Debounced search
• ✅ Keyboard navigation

FileManager Component

• ✅ Grid or list view
• ✅ File previews
• ✅ Bulk actions (select, delete)
• ✅ Sorting and filtering
• ✅ File metadata display
• ✅ Download links

Customization

All components support:

Styling

jsx
<ChatInterface
  className="my-custom-chat"
  theme={{
    primaryColor: '#4f46e5',
    fontFamily: 'Inter, sans-serif',
    borderRadius: '12px'
  }}
/>

Custom Renderers

jsx
<ChatInterface
  renderMessage={(message) => (
    <CustomMessageBubble {...message} />
  )}
  renderInput={(props) => (
    <CustomInput {...props} />
  )}
/>

Hooks for Headless Usage

jsx
import { useFileUpload, useChat, useSearch } from '@easyrag/react';

function CustomChatUI() {
  const {
    messages,
    sendMessage,
    loading,
    error
  } = useChat({
    datasetId: 'my-dataset',
    token: frontendToken
  });

  // Build your own UI
  return (
    <div>
      {messages.map(msg => <div>{msg.content}</div>)}
      <button onClick={() => sendMessage('Hello')}>
        Send
      </button>
    </div>
  );
}

TypeScript Support

Full TypeScript definitions included:

typescript
import type {
  FileUploadProps,
  ChatInterfaceProps,
  Message,
  UploadProgress
} from '@easyrag/react';

const config: ChatInterfaceProps = {
  datasetId: 'my-dataset',
  token: frontendToken,
  streaming: true,
  onMessage: (message: Message) => {
    console.log(message.content);
  }
};

Notify Me When Available

Want early access to the React components?

📧 Email: support@easyrag.com with "React Components Beta" in the subject

Examples Repository

Once released, we'll provide a full examples repository with:

• Complete chat application
• Document upload portal
• Knowledge base search
• Multi-tenant SaaS template
• Mobile-responsive layouts

In the Meantime

Build your own components using:

• Quick Start - Example React components
• Upload Guide - File upload examples
• Query Guide - Chat interface examples

Feedback Welcome

Help us build the components you need! Share your requirements:

• 📧 Email: support@easyrag.com
• 💬 Feedback form: Dashboard

---

Estimated Release: Q1 2025

Status: In active development

License: MIT (open source)