Building an AI Chat App: 5 Free UI Widgets to Consider

In today’s digital landscape, developing a user-friendly AI chatbot app can be simplified and sped up with the help of ready-made UI chat widgets. Beyond aesthetics like thought-out buttons and themes, these tools prioritize accessibility and intuitiveness, ensuring a pleasant experience for end-users and ease of use for your development team.

This article includes 5 great examples of free or open-source chatbot UI widgets available today. They provide an intuitive chat interface and can be integrated with any LLM. Besides, you can use online samples and robust documentation to accelerate learning and simplify component integration and configuration.

Let’s get down!

DHTMLX ChatBot

DHTMLX ChatBot is a customizable JavaScript widget designed to build intuitive conversational user interfaces with minimum time and cost effort. This widget allows you to integrate any large language model (LLM) system, including popular options like ChatGPT, Claude, and Gemini.

The UI chatbot widget includes a robust feature set. For instance, you can implement a single-agent chat or a chat with multiple agents, load messages from the backend, and display chat history in the sidebar. The widget supports markdown text formatting and renders headers, links, and bold or italic text.

With DHTMLX ChatBot, you can easily tailor your chat app's look and feel. It’s possible to modify the structure and set proper message render templates by choosing between intuitive flow, blocks, cards, and bubbles modes. The widget allows holding a conversation in a narrow mode as well as setting a read-only mode, ensuring that the content can be viewed but not modified by end-users.

The DHTMLX ChatBot is shared under the MIT license, ensuring maximum flexibility. The technical support, ideas for improvements, and example requests are available on the official DHTMLX forum.

Deep Chat

The Deep Chat component is written in JavaScript and can be integrated into any website to create an AI chatbot. For AI-driven applications, Deep Chat offers connectivity to popular AI APIs such as OpenAI, HuggingFace, and Cohere directly from the browser. Additionally, you can connect the component with your custom service.

With the Deep Chat AI chatbot component, you can add avatars and customizable names to messages. It supports sending and receiving files and lets users capture photos directly via webcam and record audio through a microphone, making the interaction more dynamic.

To facilitate rich content interaction, Deep Chat supports Markdown and custom elements, allowing developers to structure text and render code effectively. It also includes an initial overlay panel displayed in the center of the chat.

You can customize any chat’s container element to fit your needs. For example, you can modify the chat view's bottom area, attach and send buttons, etc. The widget also provides ready-made examples to style the chat appearance and simulate ChatGPT, Bard, Bing, and iMessage SMS themes.

Deep Chat is shared under the MIT License. The development team accepts suggestions and bug reports created as new issue tickets on their GitHub page.

NLUX

NLUX library is designed for developers looking to integrate conversational AI into their web apps. Built on React and JavaScript, NLUX can be integrated with any LLM, offering compatibility with popular adapters such as LangChain and HuggingFace. Moreover, you can create a custom adapter with support for stream and batch processing modes.

The library provides essential React components and hooks, such as the <AiChat /> for UI elements and useChatAdapter for smooth integration. Additionally, NLUX offers out-of-the-box support for Next.js and Vercel AI, complete with demos and examples to streamline the development process.

With NLUX AI chat library, you can customize assistant and user personas with names, images, and descriptions. It also provides theming and layout options to tune every UI aspect.

NLUX is distributed under the Mozilla Public License Version 2.0, with specific restrictions to ensure ethical use. This license allows you to use NLUX in both personal and commercial projects, and you are free to modify and publish changes under the same license. However, the source code cannot be used as a dataset to train AI models or for code translation tools.

Chatbot UI

Chatbot UI AI chat app supports a wide range of hosted models from industry leaders such as OpenAI, Anthropic, and Google. Moreover, it’s compatible with local Ollama models, with multi-modal support coming soon. You can also use Chatbot UI with Next.js by setting frontend with Vercel.

The application includes essential chat features that support both image and file sharing, making interactions more versatile. You can also use OpenAI or local embeddings to measure the relatedness of text strings.

Chatbot UI allows creating chat setting presets for quick selection and using @ commands to manage files and collections. These standard chat features as well as access to over 100 AI models with your API keys are available with a free plan.

For advanced features, including character-driven AI assistants and tools, workspaces, and faster messages, you should get a Pro plan available with a monthly or yearly subscription.

Chatbot UI is shared under the MIT License. For support and discussions, the community is encouraged to use the "Discussions" tab on their GitHub page to ask questions, share ideas, and get help.

Chat UI

Chat UI interface is designed to provide support for tools, web search, and a wide array of API providers. Powered by SvelteKit and MongoDB, Chat UI is a part of the HuggingChat app, where users can set up their own instances.

One of the standout features of Chat UI is its versatility in integrating various tools. It offers function calling with custom tools and supports Zero GPU spaces. Additionally, it includes automated web search, scraping, and Retrieval-Augmented Generation (RAG), ensuring that the chat interface can provide accurate and up-to-date information.

Chat UI is also multimodal, accepting image file uploads on supported providers. For user authentication, it optionally supports OpenID, providing a streamlined login process.

The interface is compatible with open-source models such as OpenAssistant and Llama. Developers can deploy their own customized Chat UI instance with any supported LLM on Hugging Face Spaces by using the provided chat-ui template.

Chat UI is licensed under Apache-2.0.

Summing up, a well-designed AI chatbot UI combines visual appeal with essential features like modern LLM integration, the ability to load chat history, and markdown and multi-agent support. You may rely on one of the UI chat widgets mentioned above or suggest your solution in the comments.