AI-ON UI

A ChatGPT-like (Multi) Chatbot Snippet

This npm module allows you to add a chatGPT-like chatbot UI widget to your website or application. Built with Solid.js, this widget provides a seamless way to interact with multiple chatbots at once. Users can easily create integrations through simple props.

Build with JSX, Integrate with any framework

Built on top of solid.js and web components, this widget can be integrated with any framework, and yet it leverages the power of JSX to provide a seamless developer experience.

Features

• Multi-Chatbot: Easily integrate multiple chatbots into your UI, but you can also use it with a single chatbot
• Out-of-the-box Themes: Choose from a variety of built-in themes from DaisyUI or create your own by cutomizing this widget
• Responsive: This widget is responsive and mobile-friendly.
• Customizable: Customize the look and feel of the chatbot widget with a familiar toolkit for modern web developers: Tailwind CSS and JSX
• Easy to use: Simply add the widget to your project and pass in the props. You don't have to worry about managing the state, or even leaking css to the rest of your application. It's all encapsulated in the widget.
• Built with Solid.js: Built with Solid.js, this widget can be integrated with any framework. Plus, you get JSX with no version conflicts with other frameworks.
• Bateries Included: This widget comes with OpenAI Integration provider. If you want to enhance your chatbot capabilities even further with user management, automatic memory management and interacting with your custom knowledge base, there's the AION Provider. You can also easily integrate your own chatbot provider. More built-in providers coming soon.
• Open Source: Under GNU GPL v3.0 license, this widget is open source and free to use. You can also contribute to the project by submitting a pull request.

Installation

NPM

npm install @ai-on/ui

Yarn

yarn add @ai-on/ui

CDN

<script src="https://unpkg.com/@ai-on/ui" type="module"></script>

Usage

If you imported the module using NPM or Yarn, you can import the module like so:

import renderer from '@ai-on/ui';
// {... rest of your code here ...}

If you imported the module using CDN, you can import the module like so, in your <script>tag:

<script src="https://unpkg.com/@ai-on/ui"  type="module"></script>
<script type="module">
    const renderer = window.renderer // renderer is the global variable that contains the module
    // {... rest of your code here ...}
</script>

Then, you can pass in the props to the widget like so:

const initialProps = {
    onSendMessage: async ({ message, conversation }, stream) => {
        // Implement your logic when user sends a message here
    },
    onCreateConversation: () => { 
        // Implement your logic for when user creates a new conversation here 
    },
    onDeleteConversation: () => { 
        // Implement your logic for when user deletes a conversation here 
    },
    placeholder: "Type your message here...",
    regenerateLimitText: "It looks like I were unable to answer you message. Please try again with a different question.",
    botTypingCaption: "Typing...",
    allowConversations: true,
    bots: [ // List your available chatbots here
        {
            name: "Bot 1",
            description: "Bot 1 description",
            id: 1,
            introMessage: "Hello, my name is bot 1. How can I help you today?",
            suggestions: ["What's franch for 'bread'?", 'How are you doing? (answer as joey from friends)', 'What is the meaning of life?']
        },
        {
            name: "Bot 2",
            description: "Bot 2 description",
            id: 2,
            introMessage: "Hello, my name is bot 2. How can I help you today?",
            suggestions: ["What's english for 'pão'?", 'How are you doing? (answer as chewbaca from star wars)', 'Why does the universe exists?']
        }
    ],
    conversations: [ // List your conversations here
        {
            title: "Thread 1",
            description: "Description from thread 1",
            id: 1,
            messages: messages,
            bot: bots[0],
            updatedAt: new Date("2023-06-20")
        },
        {
            title: "Thread 2",
            description: "Descrição longa da conversa 2, adicionando mais contexto e informações",
            id: 2,
            messages: messages,
            bot: bots[1],
            updatedAt: new Date("2023-06-20")
        },
    ]
};

renderer(initialProps);

And, finally, you can render the widget like so in your html file:

<body>
    <!-- ... Rest of your html code here ... -->
    <!-- This is where the widget will be rendered. Please, note that the it's id should be 'aion-ui' -->
    <div id="aion-ui" width="100%" height="100%" ></div> 
</body>

Props

License

GNU GPLv3 ©

Author

Made with ❤️ by AI-ON Team 👋🏽 Get in touch!