Quickest way to production grade RAG UI.

Documentation • Blog

Lexio is a powerful React library for building Retrieval-Augmented Generation (RAG) interfaces, handling complex workflows out of the box while remaining simple to use and highly customizable.

It supports multiple document types (PDF, HTML, Markdown, Text) with advanced features like streaming responses, source highlighting, and a comprehensive state management system.

Developers can use ready-made components or easily build custom ones using React hooks and the flexible action handler pattern.

Quick Start

You can install the library with npm or yarn:

npm install lexio

To use the GUI components, you need to provide an action handler to the LexioProvider context:

import { 
  LexioProvider, 
  ChatWindow, 
  AdvancedQueryField, 
  SourcesDisplay, 
  ContentDisplay, 
  ErrorDisplay 
} from 'lexio';

const App = () => (
  <LexioProvider
    onAction={(action, messages, sources, activeSources, selectedSource) => {
      // Handle user messages
      if (action.type === 'ADD_USER_MESSAGE') {
        return {
          // Return sources as a Promise that resolves to Source[]
          sources: Promise.resolve([
            {
              title: "Example Document",
              type: "pdf",
              relevance: 0.95,
              metadata: {
                author: "Documentation Team",
                page: 3
              }
            }
          ]),
          // Return a response as a Promise or use streaming
          response: Promise.resolve("This is a sample response based on the retrieved documents.")
        };
      }
      
      // Handle source selection
      if (action.type === 'SET_SELECTED_SOURCE' && action.sourceObject) {
        return {
          sourceData: fetchSourceContent(action.sourceObject.id)
        };
      }
      
      return undefined;
    }}
    config={{
      timeouts: {
        request: 30000,  // 30 seconds for entire operations
        stream: 5000     // 5 seconds between stream chunks
      }
    }}
  >
    <div className="flex flex-col h-screen">
      <div className="flex-1">
        <ChatWindow markdown={true} />
      </div>
      <div>
        <AdvancedQueryField />
      </div>
      <div className="flex">
        <SourcesDisplay />
        <ContentDisplay />
      </div>
    </div>
    <ErrorDisplay />
  </LexioProvider>
);

Follow the documentation to learn more about the library.

Core Concepts

🔄 LexioProvider

The LexioProvider is the core component that provides the context for all Lexio UI components:

• It manages the shared state for all UI components
• It processes user actions through the onAction ActionHandler
• It handles error states and loading indicators
• It provides configuration options for timeouts and other settings

🧩 UI Components

Lexio provides several ready-to-use UI components:

• ChatWindow: 💬 Displays the conversation history and AI responses with markdown support
• AdvancedQueryField: 📝 Input field for user messages with optional advanced features
• SourcesDisplay: 📚 Shows retrieved sources with metadata and selection capabilities
• ContentDisplay: 📄 Renders the content of selected sources with highlighting
• ErrorDisplay: ❗ Shows error messages and loading states

🔗 React Hooks

Lexio provides a set of React hooks that allow you to interact with the state and trigger actions from your custom components:

• useSources: 📊 Access and manipulate source-related state
• useMessages: 💌 Access and manipulate message-related state
• useStatus: ⏳ Access loading and error states

Key Features

🔄 Action Handler Pattern

A flexible pattern for handling user interactions and state updates

🧩 Powerful Components

Pre-built components for chat interfaces, source selection, and document viewing with highlighting

⚙️ Integrated State Management

Transparent state handling for seamless interaction between components

🌊 Streaming Responses

Support for real-time, incremental responses with source updates

🛡️ Comprehensive Error Handling

Built-in error handling and timeout management

🎨 Highly Customizable

Theming and component customization options

Advantages

⚡ Quick Implementation

Get your RAG interface running with just a few lines of code

🚀 Production Ready

Built for integration into mature web applications

📚 Best Practices Built-in

Follows RAG implementation patterns from real-world applications

🔌 Framework Agnostic

Works with any backend RAG implementation

🧩 Flexible Architecture

Adapt to various use cases from simple chat to complex document analysis

Target Groups

🚀 Startups

• Rapid prototyping capabilities
• Quick time-to-market
• Flexible customization options

🌐 Enterprise

• Enterprise-grade reliability
• Seamless integration with existing systems
• Production-ready components
• Professional support options

👨‍💻 AI Developers

• Full control over RAG pipeline
• Custom component development
• Advanced configuration options
• Direct access to underlying state