Skip to main content

Introduction

In the age of Generative AI, most applications will interact with a LLM (Large Language Model) via a chat interface.

AI-ON UI is a powerful chatbot UI widget that allows you to integrate chatGPT-like chatbots into your website or application with ease. With AI-ON UI, you can create a seamless interactive experience for your users and provide them with the ability to interact with multiple chatbots at once.

Purpose​

The main purpose of AI-ON UI is to simplify the integration of chatbots into your web projects. Whether you are building a website or an application, AI-ON UI can be easily integrated with any framework and leverages the power of JSX to provide a smooth developer experience. With AI-ON UI, you can create chatbot interfaces that are responsive, customizable, and visually appealing.

Demo (various themes)​

AI-ON UI comes with various built-in themes that you can choose from. You can also create your own custom theme by customizing the widget's CSS using Tailwind CSS or using any of the available DaisyUI Themes.

... and many others you can use from DaisyUI. Just add ?aion_theme={DAISY_UI_THEME_NAME} query parameter to the url in the demo link.

Benefits​

By using AI-ON UI in your projects, you can enjoy a wide range of benefits, including:

  • Multi-Chatbot Capability: AI-ON UI allows you to integrate multiple chatbots into your UI, enabling users to interact with different chatbots simultaneously.

  • Out-of-the-box Themes: AI-ON UI comes with a variety of built-in themes that you can choose from. These themes are designed to provide a visually appealing user interface for your chatbots. You can also create custom themes by customizing the widget.

  • Responsive and Mobile-Friendly: The AI-ON UI widget is fully responsive and optimized for mobile devices. This ensures that your chatbot interfaces provide a seamless experience across different screen sizes.

  • Customizable and Easy to Use: With AI-ON UI, you can easily customize the look and feel of your chatbot interfaces using familiar tools such as Tailwind CSS and JSX. The widget encapsulates all the necessary components and state management, making it easy for you to integrate and use in your projects.

  • Small Bundle Size: AI-ON UI is designed to be lightweight, with the entire codebase occupying just around 250kb (50kb gzipped). This ensures that your users have a fast and smooth experience, even on slower internet connections.

  • Built with Solid.js: AI-ON UI is built on top of Solid.js, a declarative JavaScript library for building user interfaces. This means that you can integrate AI-ON UI with any framework without running into version conflicts or compatibility issues.

  • Batteries Included: AI-ON UI comes with built-in chatbot providers, including the OpenAI Integration Provider. These providers enable you to enhance your chatbot capabilities and interact with user management systems and custom knowledge bases.

  • Open Source and Free: AI-ON UI is an open-source project released under the GNU GPL v3.0 license. This means that you can freely use and modify the widget in your projects. You can also contribute to the project by submitting pull requests on the GitHub repository.

Integration and Technologies​

AI-ON UI is built using JSX and leverages Solid.js as the underlying framework. This allows for seamless integration of the widget into any web project, regardless of the underlying framework being used. Whether you're using React, Angular, Vue.js, or any other framework, you can easily integrate AI-ON UI and take advantage of its features.

Additionally, AI-ON UI supports web components, which further expands the possibilities for integration. You can integrate AI-ON UI into your web projects through NPM, Yarn, or by using the CDN link provided.

In the following sections of the documentation, we will dive deeper into the various features and functionalities of AI-ON UI, providing detailed examples and code snippets to help you get started quickly.

Now that you have an overview of the AI-ON UI project and its integration options, let's explore how to use the widget and its features in more detail.