Custom Chatbot UI

This is a custom Chatbot UI that has been modified from TurboGPT in order to accomodate RAG applications. Try Convo UI

1. Purpose
2. More resources
3. Built With
4. Installation
5. Usage
6. Docker
7. API Calls
8. Textboxes

Dear Developers,

I have created this repository to support your projects. Here's the background:

While working on a Retrieval-Augmented Generation (RAG) project, I found that no existing chat UI template offered all the features I needed. In response, I decided to build my own, incorporating those missing functionalities.

1. Multiple Chats/Conversations Support:
   While Gradio is great, it only supports a single active conversation at a time. My template addresses this by storing multiple chats locally (via localStorage) and linking them to authentication keys.

2. Authentication:
   The template integrates authentication using OpenAI API keys for security and access control.

3. Dark and Light Mode:
   This feature can adapt to system settings or be manually toggled in the UI, providing flexibility in appearance.

4. Markdown Table Parsing and Display:
   Many existing chatbot UI templates struggle with cleanly rendering markdown tables, including TurboGPT. My version resolves this, ensuring tables display as neatly as they do in OpenAI's UI.

5. Custom Backend Model Integration:
   Most chatbot UIs lack the ability to interact with custom backend models, as these typically require different object classes for communication compared to standard API calls. My template includes examples for calling backend models using Flask and Langserve. You can test this by selecting a backend model. Click to visit the Backend Repo.

6. Streaming Chatbot Outputs:
   While streaming outputs is straightforward with foundation models, it becomes complex when dealing with backend servers. After extensive testing, I successfully implemented streaming capabilities for backend models in this template. Unfortunately, pythonanywhere voids this and my backend is currently on pythonanywhere. I will move it to another server in due time.

I hope this template helps you accelerate the development of your full-stack applications.

I have thoroughly explored various approaches to building a fully custom Retrieval-Augmented Generation (RAG) LLM chatbot, and the results of my work can be found in my RAG repository. Unlike many other online resources, this repository offers a complete full-stack solution for developing a RAG chatbot.

I have included multiple UI options, from simple mockups to production-grade interfaces, along with the necessary code to integrate the frontend with the backend. The chat interface is a React application, similar to this one, utilizing LangServe. You can find the frontend code in the AuditBot repository.

I have conducted extensive experiments to improve the RAG framework, covering techniques such as HyDE, recursive retrieval, and others. Additionally, the repository provides implementations of frameworks like Langchain and LlamaIndex. It also includes setups for data stores, examples of prompt engineering with GuardRails, and much more.

To install and run this chatbot, you need to use Yarn or Node package manager. Clone this repository and install the necessary packages by running the following command:

yarn install

or

npm install

To use the UI, simply run the following command:

yarn start

or

npm start

This will start the project in your terminal. Simply enter your API key on the frontend where prompted and then use it as normal.

This chatbot's server can be instantiated in Docker. The server will automatically restart with Docker.

docker-compose up -d --build

API calls are done in "src/app/api/openai.ts"

Text boxes are created and updated in "src/app/pages/Chat/Textbox.tsx"