How to Build Chatbot Interfaces with Python

Key Takeaways

let's create this chatbot interface using only Python and the streamlit library in this video I'm going to walk you through this script over here that we got I'm going to share this with you the code will also be made available via GitHub so you can follow along and this is ideal for python developers like me who work on AI applications but don't have the front-end skills of let's say JavaScript HTML CSS all of that stuff to build fancy applications so here are the step-by-step instructions you can also go to the official streamlit docs to get a little bit of a better understanding what's going on here's the link to the kit repository so let's start with a new and fresh project make sure you have a virtual environment or k environment I have one set up over here you can clone that exactly from the giup repository then we're going to install the dependencies which are streamlit open Ai and python. so you can either pip install this into your environment or you could just run the requirements.txt file over here get everything set up all right then you can do a little test to see if streamit is working properly by opening up a terminal make sure your environment is activated and then run streamlit hello so let's see what we got going on and here we have the Local Host spin up with the welcome to stream LD if you see the screen as well then that uh means that the streamlet library is configured correctly and now if you've been following along up until this point then make sure to leave a like down below and also subscribe to the channel so you stay tuned for more AI content all right let's continue with step two you need aemv file with your open AI API key now I have an example EMV file over here and this is my main one what you can do is you can come over here just rename this just remove the example part and fill in your openi API key in here and then save that you should now create an app app.py file in your library so you can either clone the repository that I got and then you should already have all the code over here or if you build it from scratch um you should use this file name and now we're going to add the Imports so let's start with the Imports that we need so we got a bunch and mainly also streamlit uh we're going to use shelf to store the messages which is a quite interesting way in a cool python library to do all of that now let's do the setup and and I'm going to walk you kind of like high level to what's going on over here uh but it's is pretty straightforward we can give our page a title and sorry before that we load our environment variable which is our openai API key then we can set some icons for the chat interfaces so either for the user and the bot and then we load up our openai client so that's the setup now we're going to configure model and messages so let's come over here plug that in let's quickly see what's going on over here we have the load chat history which will be loading a chat history. DB file so this is something we will run upon initiating the application and we also have a function to store the messages in here and then we can initialize it over here so if there are no messages in the state we load the messages and we also add a nice little sidebar to our application with a delete button okay and now we can come to to the main chat interface that we're building out and again if you want to learn or better understand what's going on over here make sure to check out the docks so you can see the chat elements what we're doing how they're working but for now I'm just going to quickly show you how we can set this up so I'll put that in here as well so that will make sure that we have all of the code let's see within our application and now what we can do is streamlit run app. Pi now make sure that app.py is the actual name of your file if you've used another name then you should update that over there so let's again open up the terminal make sure we're in the correct environment and load this up streamlet run app and here you can see it correctly loaded the conversation that we were having in the beginning now I can also delete this and say again hi there and the cool thing is that it has history and this is something that is not shown in the basic example uh over here so that's something I added and you can also do cool things like show data so you can show a bar chart and there is a lot more actually that you can do with this Library so that's pretty cool now of course this is a very simple demo but I wanted to show you this because for me it was very useful because I had to create a demo for one of my clients that I'm working with to Showcase some generative AI projects and I've worked on a bunch but a lot of those are all also for example integrated within slack or within WhatsApp and I wanted to create something custom where I could show the client what potential use cases of generative AI could be and this for me was a way to quickly set it up on my own without relying on a front-end developer so this just uses the cad GPT uh 3.5 turbo model right now so it's essentially a c gbt like clone that you got going on right now but of course you can make this a little more fancy and for example hook it up via Lang chain and do all kinds of crazy things with this to really build in that AI functionality even more now if you want to learn more about that you can follow this link it also shows you how to deploy this app now if you want to learn more about how you integrate your own data for example into this bot using open AI assistance API you want to learn more about that then make sure to check out this video next