OmarAi Dev Log 4

Creating the UI for OmarAI was definetely a journey and I am going to explain it here.

First I had to think about wether I wanted to build a seperate website for Omar AI or if I wanted to use my current blog site for it. In the end I decided on using my own blog site as this website already has everything about me in one place so adding an actual Omar into the mix would be a pretty fun feature feature.

I first started looking for next js tempaltes that could help me implement this and I came across a template that subframe made for ai chat bots. However, when I tried to use it within my website, I ran into compatability issues. There were multiple libraries and dependencasies in the template that were a diffrent version to the dependancies and libraries that I had used for my own website. This clash of dependencies caused the website to not function.

My thought process next was to create a chatbot frame on my own but there were problems with that too. Creating the front-end of the chabtot was quite easy but I couldn't get it to connect directly to the Opean-AI api. I tried to do the back end within the next js app bu isimg the api routes inside the project but I soon realized how much more difficult it was to code an API in javascript rather than python which I am much more experienced in.

For this reason, I ended up opening a new backend project in python where I put my ai model into and gave some instructions. After hosting that api on the cloud I made a call to it within the front end code of my website so that the frontend and back end were connected.

This was I had finally made a functional chatbot within my website.

Omar Musayev