Discover, design and personalize your perfect AI chatbot

Discover, design and personalize your perfect AI chatbot

At AINIRO, we've got infinite possibilites for the AI chatbot designs. Here I'll showcase the evolution of our chatbot designs, as well as showing you all of our current designs. Additionally, I'll touch upon the subject of personalization through custom designs, although I won't delve into comprehensive guidelines just yet - a blog like that is in progress!

Whether you're a chatbot enthusiast or a business owner keen on harnessing the potential of conversational AI, you probably recognize the significance of design. Not only does it catch the user's attention with the chat button, but it also plays a vital role in ensuring a seamless user experience.

The OG designs

We started out with a handful of Thomas' original designs. Thomas did some experimenting with the designs, and kept improving them little by little. These are the office, numorphism, default, morphed bubbles and chess designs (in that order, from left to right).

Original designs

The first colored designs

Tage and I wanted to experiment with different colors and designs for the chatbots, but since Thomas is usually busy with coding, he didn't have time to prioritize it. So I experimented a bit with the CSS code, and made some color choices based on the chess design. For these designs, I mostly did things like remove borders and change the HEX colors. While testing color combinations took a bit of time, these designs are almost a true copy of the chess design, just with different colors.


Twilight UI

Burning sunset:

Burning sunset UI


Galaxy UI

Ocean Bleu:

Ocean Bleu UI


Parakeet UI


Emerald UI


Sunflower UI


Lollipop UI

Scandinavian designs

We also wanted to have some "cleaner" designs to pick from, so I got back to experimenting and made a template for what we ended up naming the Scandinavian designs. We chose that name due to Scandinavian design being known for being clean with rounded edges. With these designs I changed a lot more than I did for the first color designs, but to narrow it down: a lot of places in the CSS code that said x px, I changed the number. Border radius was increased for more rounded edges, most borders were removed, padding and margin was changed some places and of course colors were changed.

Scandinavian Cyan:

Scandinavian Cyan design

Scandinavian Navy:

Scandinavian Navy design

Scandinavian Orchid:

Scandinavian Orchid design

Scandinavian Grape:

Scandinavian Grape design

Scandinavian Flamingo:

Scandinavian Flamingo design

Scandinavian Blush:

Scandinavian Blush design

Scandinavian Mulberry:

Scandinavian Mulberry design

Scandinavian Maroon:

Scandinavian Maroon design

Scandinavian Scarlet:

Scandinavian Scarlet design

Scandinavian Pumpkin:

Scandinavian Pumpkin design

Scandinavian Honey:

Scandinavian Honey design

Scandinavian Lime:

Scandinavian Lime design

Scandinavian Teal:

Scandinavian Teal design

Scandinavian Deep Teal:

Scandinavian Deep Teal design

Scandinavian Raven:

Scandinavian Raven design

Scandinavian Chocolate:

Scandinavian Chocolate design

Personalizing the chatbot designs by experimenting yourself will probably mostly consist of changing numbers and HEX codes. The code is very intuitive, there are "headers" explaining which part of the design the following code is for - for example chat window. You can find UI templates in Hyper IDE by checking system files, typing "openai" in the search field and expanding the folders system - openai - front.files - chat. It's very important to make your own new file though, because if you make changes to a system file, it'll revert back to the original design with the next update. To make a new file, uncheck system files and expand the folders etc - www - system - openai - css - chat and create your file here. Name it anything.css. A comprehensive guide is coming!

As we continue to expand our range of designs, we value your valuable input and feedback. If you have specific suggestions in mind, we'd love you share them with us! Your insights will help shape our chatbot designs, creating even better experiences for users. Stay tuned for regular updates, and the upcoming guide dedicated to creating personalized designs yourself!

Aria Natali Aurora

Aria Natali Aurora Nygård I am the COO and Co-Founder of AINIRO.IO AS together with Tage. I write about Machine Learning, AI, and how to help organizations adopt said technologies. You can follow me on LinkedIn if you want to read more of what I write.

Published 24. Jun 2023