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, Excel) 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:

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: fetchSources(),
          // 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;
    }}
  >
    <ChatWindow markdown={true} />
    <AdvancedQueryField />
    <SourcesDisplay />
    <ContentDisplay />
  </LexioProvider>
);

Follow the documentation to learn more about the library.

Dependencies

Lexio has minimal core dependencies, but some advanced components require additional packages that are not installed by default:

• SpreadsheetViewer: For Excel/spreadsheet file viewing, you'll need to install:

  npm install exceljs xlsx @tanstack/react-table @tanstack/react-virtual

• Explanations Module: For advanced explanation features, you'll need to install:

  npm install compromise js-tiktoken sbd @types/sbd

These dependencies are dynamically imported when the components are used, but you must install them yourself to avoid runtime errors.

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