DEV Community

Raghavendra Narayan Rao
Raghavendra Narayan Rao

Posted on

Open Source Chatbot UI template for Developers

Image description

Dear Developers,

I have created this repository to support your projects. This is not a product but a template that will ease your workflow.

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.

Key features included in both ConvoUI and TurboGPT:

  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.

New features that I added:

  1. 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.
  2. 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].
  3. 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. Support this by starring so more developers are aware of tools available to them :)


More resources on building chatbots

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.

For Frontend Developers:

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.

For Machine Learning Engineers:

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.


Feedback

Do let me know if you would like to see any other additional features that would be useful in a chatbot UI.

Reach out to collaborate and let's build a better UI for everyone to use!

Top comments (2)

Collapse
 
ngtduc693 profile image
Duc Nguyen Thanh

thanks for sharing

Collapse
 
ragharao314159 profile image
Raghavendra Narayan Rao

Just to reiterate, this is not a plug but a post to share with other developers regarding free tools available to them :)