@lid-vizion/document-intelligence

A React component library for building powerful Document Intelligence experiences. Easily integrate features like OCR text detection, document search, and field and entity recognition into your web applications with production-ready components.

Components

• OcrTextDetection - Detect text from documents using OCR and access additional structured JSON data for detailed analysis.
• DocumentSearch - Create and manage vector databases with customizable embedding configurations. Upload documents to each database to automatically extract text, split it into chunks, and generate embeddings. Run semantic search queries against each database using vector search to retrieve the most relevant document chunks based on embedding similarity.
• FormReviewer - Review and validate form submissions with configurable field rules. Analyze each form’s field values against defined rules, highlight errors or warnings, and provide actionable feedback. Supports dynamic rule evaluation and field-level insights to ensure accurate and compliant data collection.

Option 1: Use Wrapped Components

Ideal for quick, isolated integration where you only need a single component on a page. These components come pre-wrapped with DocIntelligenceProvider and can be used directly:

import { FormReviewerWithStore } from "@lid-vizion/document-intelligence";

function App() {
  return (
    <div>
      <FormReviewerWithStore clientId="my-client-id" />
    </div>
  );
}

Option 2: Use Individual Components with RootStoreProvider

Ideal when importing multiple library components into your app that share the same clientId. These components will operate within a single, synchronized context.

import { 
  FormReviewer,
  DocumentSearch,
  DocIntelligenceProvider
} from "@lid-vizion/document-intelligence";

function App() {
  const currentClient = "my-client-id";

  return (
    <DocIntelligenceProvider clientId={currentClient}>
      <div>
         <DocumentSearch />
         <FormReviewer /> 
      </div>
    </DocIntelligenceProvider>
  );
}

Styling

Components use Material-UI's theme system. You can customize the appearance by wrapping a component with a theme provider:

import { ThemeProvider, createTheme } from '@mui/material/styles';
import { FormReviewerWithStore } from "@lid-vizion/document-intelligence";

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <FormReviewerWithStore clientId="my-client-id" />
    </ThemeProvider>
  );
}

Dependencies

• React
• Material-UI
• React-Dropzone
• MobX
• TypeScript
• CodeMirror
• Motion
• UUID
• React-pdf
• PDF.js