-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #57 from Renumics/feature/better-readme
copy readme to frontend
- Loading branch information
Showing
2 changed files
with
76 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,89 @@ | ||
| # React + TypeScript + Vite | ||
| <p align="center"><a href="https://spotlight.renumics.com"><img src="lexio/src/stories/assets/lexio logo transparent.png" alt="Gray shape shifter" height="60"/></a></p> | ||
|
|
||
| This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
| <p align="center">Quickest way to production grade RAG UI. </p> | ||
|
|
||
| Currently, two official plugins are available: | ||
|
|
||
| - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
| - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh | ||
| <h3 align="center"> | ||
| <a href="https://renumics.com/lexio-ui"><b>Documentation</b></a> • | ||
| <a href="https://renumics.com/blog/"><b>Blog</b></a> | ||
|
|
||
| ## Expanding the ESLint configuration | ||
| </h3> | ||
|
|
||
| If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: | ||
|
|
||
| - Configure the top-level `parserOptions` property like this: | ||
| Lexio is a robust React library for Retrieval-Augmented Generation (RAG) document QA interfaces, handling complex workflows out of the box while remaining simple to use. | ||
|
|
||
| ```js | ||
| export default tseslint.config({ | ||
| languageOptions: { | ||
| // other options... | ||
| parserOptions: { | ||
| project: ['./tsconfig.node.json', './tsconfig.app.json'], | ||
| tsconfigRootDir: import.meta.dirname, | ||
| }, | ||
| }, | ||
| }) | ||
| It supports multiple document types (PDF, HTML, Markdown) with advanced features like streaming responses and source highlighting. | ||
|
|
||
| Developers can use ready-made components or easily build custom ones using React hooks. | ||
|
|
||
|  | ||
|
|
||
|
|
||
| ## Quick Start | ||
|
|
||
| You can install the library with npm or yarn: | ||
|
|
||
| ```bash | ||
| npm install lexio | ||
| ``` | ||
|
|
||
| - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` | ||
| - Optionally add `...tseslint.configs.stylisticTypeChecked` | ||
| - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: | ||
|
|
||
| ```js | ||
| // eslint.config.js | ||
| import react from 'eslint-plugin-react' | ||
|
|
||
| export default tseslint.config({ | ||
| // Set the react version | ||
| settings: { react: { version: '18.3' } }, | ||
| plugins: { | ||
| // Add the react plugin | ||
| react, | ||
| }, | ||
| rules: { | ||
| // other rules... | ||
| // Enable its recommended rules | ||
| ...react.configs.recommended.rules, | ||
| ...react.configs['jsx-runtime'].rules, | ||
| }, | ||
| }) | ||
| To use the GUI components, you need to provide retrieval and generation functions to the `RAGProvider` context: | ||
|
|
||
| ```tsx | ||
| import { RAGProvider, ChatWindow, AdvancedQueryField, SourcesDisplay, ContentDisplay, ErrorDisplay } from 'lexio'; | ||
|
|
||
| const App = () => ( | ||
| <RAGProvider | ||
| retrieveAndGenerate={(messages) => { | ||
| return { | ||
| sources: Promise.resolve([ | ||
| { | ||
| source: "example-doc.pdf", | ||
| }, | ||
| relevanceScore: 0.95 | ||
| } | ||
| ]), | ||
| response: Promise.resolve("This is a sample response based on the retrieved documents.") | ||
| }; | ||
| }} | ||
| > | ||
| <ChatWindow /> | ||
| <AdvancedQueryField /> | ||
| <SourcesDisplay /> | ||
| <ContentDisplay /> | ||
| <ErrorDisplay /> | ||
| </RAGProvider> | ||
| ); | ||
| ``` | ||
| Follow the Tutorial to learn more about the library. | ||
|
|
||
| ## Key Features | ||
| - **Powerful Viewers**: Pre-built components for chat interfaces, source selection and viewing with source highlighting | ||
| - **Integrated State Management**: Transparent state handling for interaction between components | ||
| - **Opinionated Architecture**: Implements RAG best practices out of the box | ||
| - **Highly Customizable**: Theming and component customization options through ... | ||
|
|
||
| ## 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 | ||
|
|
||
| ## Python package | ||
| ## Target Groups | ||
|
|
||
| The Python package can be automatically generated from the frontend library. It contains API types for the lexio frontend library. Follow these steps to release the package: | ||
| ### 🚀 Startups | ||
| - Rapid prototyping capabilities | ||
| - Quick time-to-market | ||
| - Flexible customization options | ||
|
|
||
| 1. Update the frontend library with the latest changes. | ||
| 2. If needed, update the [types-to-include.json](scripts%2Ftypes-to-include.json) file to modify the exported types. | ||
| - (Optional) Run the `generate-types` script ([package.json](package.json)) to export types in JSON schema format. | ||
| - (Optional) Run the `generate-python-package` script ([package.json](package.json)) to generate the Python package. | ||
| - (Optional) Test the generated package with the `test-python-package` script ([package.json](package.json)). | ||
| 3. `Tag` the commit with the version number. | ||
| 4. Publish the package to PyPI using the [release-python-package.yml](..%2F.github%2Fworkflows%2Frelease-python-package.yml) workflow. This runs automatically when a new tag is pushed to the repository. | ||
| ### 🌐 Enterprise | ||
| - Enterprise-grade reliability | ||
| - Seamless integration with existing systems | ||
| - Production-ready components | ||
| - Professional support options | ||
|
|
||
| Since we are creating the `lexio` python package automatically we run several test with 'pytest' to ensure the package is working as expected. The tests are located in the [tests](tests)[tests](..%2Fpython%2Flexio%2Ftests) folder. | ||
| If you add new types which are exported to the python package, you should also add tests for them. | ||
| ### 👨💻 AI Developers | ||
| - Full control over RAG pipeline | ||
| - Custom component development | ||
| - Advanced configuration options | ||
| - Direct access to underlying state |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters