Bubble io Clone Chat GPT-3.5 turbo | Full tutorial (Design + Open AI API)

in this video I will create the Clone charge repeat team on Bubble IO we will create a design and also connect all necessary apis for this um I will start with creating new Bubble app uh and connection and downloading unnecessary plugins for now we will need an API connector and also I will already have one plugin for loading animation do not just show empty screen while chat repeat generates in our answer um you can find all this plugin here by just typing this names on the screen okay let's start by creating an API already have one but let's delete it and start from scratch okay firstly we will need to go in the documentation of open AI it API references and we already see all parameters advertisation methods that we need to generate this API firstly let's start with let's just copy entire cut and generate new and let's make it post request and use like action post request means that we create something new So based on our answer or another question we will create an answer it it's why we use post also action it will allow us to use API inside workflow they're just paste everything that we copied authoritization we will need to say what what content type we are using its application Json also inside header we need to put authorization it will be better plus secret key um secret key you can find inside open a account by going uh here inside view API keys and let's just generate new that I will delete after this video and paste it here copy this URL and let's check how it worked in just by leaving bad here so here in body we say that it will be modeled PT 5.5 Turbo and just message that we will send let's try to initialize it now let's first name it open AI chat GPT 3.5 and just let's try to initialize it our initialization didn't work because we missed something now what does it say invite requester okay we haven't mistake inside adjacent body I think like this okay now everything is working and we can even see a respond on our questions so hello there how may I assist you today okay safe um it means an API already working but right now it's only this static text and we want to make it Dynamic so we could put our question uh inside here it will be not question I will explain a bit later but we need to make this value Dynamic so for this inside bundle and just put this signs and let's call this variable just as such that's interesting make it not private so we could use it and here inside the introduction of chat we can see that inside message we can put Json button in three different rows it will be system user assistant it's an answer of the charge GPT and user are all its person who just asked a question for example here who won the World Series in 2020 we asked JoJo PT and we get an answer also you have a system role um system role it's basically some programming in the beginning that we give to child GPT by given some default Behavior for example here they said that you're helpful assistant we can write something like your system who can only answer with letter A or your assistant that sounds like a key it's something like that it can be different values um okay for generation let's just copy again it's earlier and put it here to reinisterialize our call okay it's working but now we have this value message Dynamic so we can put dynamically data inside it while using it workflow then let's start with creating database for database I want to create one data type where we save one question one answer and another data type will be chat data type that contains a list of all questions and answers so let's call it one request and it will contain action text type answer and text and also I will explain a bit later we will need to have the same answer but in Json format equation based on format let's create new type chat and just create a list of all requests that will be inside one chat uh it can be just all list of requests make it list um we can make also item for example for chat and inside user type we will create for example all cats that this user list okay we finished with them also inside chat we will create the list of strings it um it's the value that we will put like Dynamic value inside a request that we will do in charge rapid API I will show it later how it will work um let's continue this design I already put them background color um let's put the group here make it column let's make it on all high create a sidebar we can check parameters this will be 260 column 260 and what color it is that um next let's just create something I um check what is the right of the repeating group 768 inside this group let's put repeating group is it like data type will be one request in data search we will do is search for later we will filter what exactly chat we'll use first item and list of all requests right column 768 repeating group mm-hmm back [Music] um working fine then inside repeating group let's put two groups we will show our answers and questions okay group data type really one request to encounter one request and data type here for example will be print group request question um let's put awesome and icon okay let's make it roll shape the size 13 14. Center two make it white okay let's say that it's around 20 pixel between picture and answer to make it Gap and the minimum size is 88. here is a 45 pixels on the top let's also copy and paste it and create the same group but before answer check what it's color it'll be ready not transparent and instead of question it will be an answer here we can take a sum default or um default picture for example image but let's just do it christian for example I don't know um uh-huh here interior should be a current user profile picture but let's make it some color total output inside yes if it will be image we just take current user and choose a profile picture but let's make it simple for example just color guides and yes and this will not be 768 it will be full bright what we will need to do let's put his group inside column group and it's inside and this will be ready 768 one second no not this we will need to do inside this group yes okay we have the same group that we had before and we put this group inside row make it Center and it's this group inside another row make it Center and raise you on these groups we will put colors that around and this we will put the limitation of 768. so 168 and let's just copy colors there is a transparent color anyway and here let's make it last here make it none and make it on the outside group oil okay Center also we will need to have a group this multi-line input 14 round let's put multi-line input inside and an icon okay this is row let's make it like this make last something around K 28 and 24. and an icon 16. take it 10 16 Cent make it white let's put this group inside the line container for example and was it 28 let's make it 28 and 28 mix and Clicker um some color out let's just make 10. okay foreign 68 too um okay 68 and color now let's let's take it then then let's add some patterns then I've and make a gap like 20. okay let's make quiet text right remove Porters just take a look how it looks repeating group they'll remove part of stone and minimum height zero okay yes also in the sidebar we will do a repeating group um these all chats that this user have chat and current user chats here I can check 45 a height [Music] um four row let's make just some margins around set and make it chat turn cell chat and just put some margins around proudness is 10. okay inside this group foreign just text like let's make it just a title uh for now okay um to know about chat we will show let's create them custom state that chat naked chat and then we load page is loaded the set state of the index chat and current user chats last item and then next if user have no chats we will create a new chat create a chart and let's make a changes to current user and we will add this chat inside current user list of chats but we will do this only if index chat is empty so if after creating a custom State set state it will be empty so we will create a new chart and also we will set state of this chat by step two let's also say that this group will be another color when custom state of this office chat okay during cell chat is index cut then the ground Style on it a very flat color and Crown color we will have um color and let's put some paddings inside will not create a completely um full clone of the church episode just some main features okay let's start let's take a look how it looks like okay we already like we see created new chat uh it's just without title so you will not see okay by clicking on of his group what we will do we will create one request answer we will need to firstly run API of charge repeat to get an answer so you can put it in this information question will be Mutual Island input value and Json value how I said we need to write it like in Json so we copy this role user so it was our question then we put Dynamic value like multi-line input and be close it Next Step um The Next Step they make changes inside chat that is selected it will be index chat we will list of requests at um result step one and also inside string list of string we will add our question Json because we need to put Dynamic value of the request inside chatgpt like Json buddy okay we create a new request just to ask questions and question normal type and questioning Json type then we added inside chat list our generated request and also edit our question in Json type inside string the next it will be generating an answer what we will need let safe square brackets and just put inside index chat string put square bracket okay what we have done we created one question add this question inside chat and also save it like a text list inside chat and also and we create a request so of this string that have our question the next step it will be make change inside our request because we didn't fill also answers so is that one answer normal type and answer Json answer will be open AI answer so what we will choose is out of step 3 choices first item um message content I think but we will check clear and let's do the same like Json but instead of usual um real use assistant role okay now inside one request to field all our fields but we didn't save this Json inside chat we edit only one hour question but we also need to and add our answer on this so we can store all all our questions answer questions answer question answer instead one chat and based um and because we save all this answers PT can give us response based on the previous answers and question that we asked so the step will be in make changes to them the same index chart and we will just add inside list of strings at this Json answer four answer Jason that's all so we can also change for example title like I see that we have Title Here and title usually question assistant let's make title and our last and a question that question let's check sample hello how are you okay you'll see we will have a generated our question and we haven't answer okay let's also make reset relevant inputs so after we click a button we will not have text here and add a button on the top create a new chat let's hide it for a bit group you can just copy this delete and let's just say um new chat icon foreign and some Gap and by clicking on this icon on this group we will create logic um the the following logic it's the Creator um create chat and also set a state of chat uh create a new chart then make a change to user and we will add this chat and the last set state of this chat um foreign put a condition here filter what exactly chat we are searching for and that's why we need this set State here so unique ID of chat will be index chat unique ID so now uh we will see only chat that equal only questions and answers of the chat that we will choose from list here and the last before testing let's make when someone click on the icon of the repeating group we set state of this set State index chat current cell chat depends a lot it's the last chance that you have okay let's test mm-hmm so we have only one shot so we already have generated seven so let's create new chart and we will need to put some author in so yes here okay let's ask for example what is the biggest what is them country yes population China in the biggest country and let's then ask a question that will not be I mean the tilby without mentioning in China so let's check if Chachi Pizza can give an answer based on previous experience not that what we ask exactly about this country and for example would you please tell me the biggest it's heated there so we don't mention China PC should give us an answer about China what the biggest city inside China the biggest city in China is Shanghai so basically chat working and how we see we have different chats so if we check it should we will see another chat uh let's um change a bit here so remove minimum height and put some ordering order oh okay current user chats shortcut by create a day um no no we need to use yes so the newest chat will be on the top um so basically what else could we add here and the main functionality is working and if you want you can customize it how you need uh add some animations so while waiting it will not be empty screen for example we can do this think last thing [Music] um we have a slider that already showed for example um inside plugins I used this plugin to load animation we can choose a lot animation for example just plain let's remove controls its Loop so 500 300 pixels copy code let's put it inside and make background for example 40 um and when we click button um show animation um right there let's check and set black and what action they have show light and height loader okay louder just put it all to be sure and The Last Action so this step 4 it takes small time so after this step is done um animation we started we'll start when we click a button and then we'll continue while this step is processing and then when it's finished it will hide animation here let's check showing the default in the beginning and let's just put like clothes automatically so 10 and second check um okay what else what is the best for food in there a check you see our animation and then respond is done animation is hidden um let's fix a bit also our repeating Group by adding some here for example just dog pages and bottom so you can have some space and here too it's also to check I can also put some top margin there so a repeating group in a bit on the top and we also can do that when page is loaded so we can scroll with a beating group to the bottom it will be request let's check yes maybe single group request and let's make repeating group one request list of request last item and we can do the same after generation of the text um here Let's test so it's go on the bottom okay um can you give me address um can you give me another five examples let's put on the top for example to check so it's loaded and up on the bottom foreign of course we can customize another features that inside chat repeat but I just wanted to show the basic how to work with this API and um to copy some design of it um thank you for watching this video and if you have any additional questions you can always leave them in the comments below thank you

Channel: Nikita NoCode

Views: 1,149

Keywords:

Id: G9YLXitJ9o0

Length: 46min 39sec (2799 seconds)

Published: Sat Mar 18 2023