How to Create Your First AI Tool With ZERO Code - A Step-by-Step Guide

I just created this awesome AI tool powered by gbt3 in a few hours using nothing but no code editors like bubble so I'm going to be showing you step by step in this video let's get stuck into it today I thought I'd hop on and show you guys how you can create your first AI tool hosted on a website for you to start selling and making businesses off the catch with this is that I'm only going to be using no code website and Tool Builders like bubble this means throughout this tutorial I'm not going to write a single line of code and I'm going to go from an idea to a final product of having a website hosted that people can go and interact with and use underlying large language models like chat GPT like gpt3 on this website I know that sounds like a lot but I'm going to be compressing this down so that you guys can understand it in the most simple way and I'm going to be giving you step by step guide me on the keys showing you how to do this and

we'll start with stage one which is coming up with an idea for my site in this video I really wanted to show you guys how you can use prompt engineering and use these large language models like gpt3 and combine it with a little bit of user input like I've mentioned in my previous videos my uh entrepreneurship guide which I'll put up here I've mentioned one of the business models is a prompt based business today we're going to be building a prompt-based AI tool slash business so what you're going to be doing is taking in a little bit of user input from the user on the website and then combining that with a prompt that I've written and then sending it off to the API getting the response back and giving that response back to the user so that was the kind of restriction I had on what this site and what this tool would do I thought in this for a while and I'm a very big reader and fan of uh startup philosophy if you're familiar with Marcus Aurelius or Seneca or Epictetus these are all stoic philosophers who have a really well known and published writing that is uh really quotable stoic philosophy is a great operating system I've heard people call it for entrepreneurs so I really enjoy the literature and I thought if I can make a tool that allows people to give what they're struggling with like I'm struggling with a breakup I'm struggling with my business not performing how I want to this tool is going to take that user input and then using the power of the large language model give back a recommended Style a quote to sort of galvanize them and give them strength through the stuff of time in their life and so I have my idea a stoic AI powered life coach now I have my idea now I need to start writing a prompt and using prompt engineering to interact with the large language models to start getting these kind of responses that I want so we're going to hop onto my laptop here and I'll show you how I'm

doing it here we have on screen a website called promptable. ai that I'm using to help write my prompts this is essentially the same as the open AI playground but it allows me to save things a lot more easily and I feel like it's just nicer interface for me to use I've been using this recently I'll drop a link to it below if you want to sign up and check it out okay so on screen here you have a little mock-up of what I want the main functionality of the site to be so are you going to go onto the site scroll down and see this uh prompt which is what are you struggling with and then they're going to be able to enter what they're struggling with say it's a breakup say it's a difficult situation with their friends or family they're going to be able to enter that into the search box or not search box but text input and then hit the get wisdom button and then below it is going to spit out the large language model generated solar system to help them out so now that you understand what I'm going for we're going to hop back over to promptable so that we can start crafting The Prompt in order to get this working behind the scenes okay so here I've written up a really bad basic prompt but this gets you the gets the idea this is a zero shot prompt if you don't know about prompt engineering and understand what zero shot means and fuse shot which we're going to go into later be sure to head to my prompt engineering video which is going to be up here that's a absolutely vital skill if you're going to be making businesses and tools in the AI space so if you don't understand what comp engineering is I definitely go check that video out and then come back and uh follow along with the tutorial so we have a zero shot prompt here give me a quote from one of the great start philosophers Marcus Aurelius Seneca and Epictetus that helps me with struggling with my business so I'm and I want help from one of these stock uh philosophers so if I run that then it gets me back apart which is pretty good it's not the events of life that shape us but our opinions to those events by Epictetus so this one is a very basic prompt of it's giving us what we want but I think we can do a little bit better so I've written one up that we can look at over here which is the final one that I'm going to use now the cool thing about promptable is that you can put an input variable in or you can put variables into the prompt that you can sort of earmark for having user input in from your site or from your application so if you can see down the bottom here I've got an input field and this input field is connected to the input thing on the right so whatever I type in here is going to essentially insert that when I submit it now if we go over this entire prompt that I've read and I've done a little bit of role prompting you are a stock life coach you're an expert on teachings and literature of the stock grades like Epictetus and Max relius and Seneca you use the wisdom of these means to help the clients of your life coaching business who seek help from you in their day-to-day struggles you only quote stock philosophers of Seneca Epictetus and Marcus Aurelius to your clients and Below I've used what's called a few shot prompt to essentially teach this model what were the expected kind of outputs are and what also what the expected inputs are going to be so I've gone through a couple different question and answer situations so I've gone recently I've been struggling with my business it's not performing well as I've expected and then I've given what I deem to be an appropriate quote from Seneca and I've done this a couple times with a bit of variation to the author is so by the end of it we've covered a range of topics being broke break up not getting what you want and at the end of it we can now take the user input in this input field and get the outputs now I've got an input here which is my friend has wronged me and I'm having trouble forgiving him so if we submit that so the answer it gave us back is if you want to improve be content to be thought foolish and stupid by Epictetus which I think is a pretty appropriate answer to

it depending on how you interpret it but now that we're finished with our prompting we need to head over to Bubble the no code platform that I'm going to be using for the video and start building the site and so here we are in bubble is a no code not only website builder but they say you can build SAS applications and all sorts of things and essentially I'd say no code development platform there's plenty of depth to it so if you want to get really funky with it and build something bigger than just a basic web application like I'm trying to do here and you can definitely do that but for the purpose of this video we're going to go in here and create a new app and I'm going to call this thing stoic Mentor one thing you need to understand when we're doing this is that what we are creating is essentially a web application now you may be familiar with websites but essentially everything that you do in modern web is actually a web application so there is a front end and there is a back-end and the reason we need to use something like bubble is because doing this processing of the API and taking in user input and sending it off is essentially it back and function that we need to perform so something like bubble allows us to do a lot of work on this and manage a backing without having to set up a big full step application and host it so this allows us to do sort of more complex functionality without any other house for that window we have to go through now we just go through the basic setup process on Bubble we want a hero shot at the top I think we can put one of these down here so this is all just drag and drop which is nice and easy to get started and so you have mapped out the bones of our website which is going to be a header a hero shot a little title and image here and then this is going to be our tool here I'm going to customize this uh this form here and then I'm going to do a little bit of cool stoicism kind of lore here so there we have in a couple seconds we've built up the bones of it we can have a look at it on a preview which is all looking pretty nice so nothing too fancy here we can get stuck into customizing this now so what we're going to do here is customize this form to just take a single input and have the correct button on it so I'm going to delete a bunch of this so we're going to focus first on the back end and getting the functionality of the site sort of first and then we can dress it up afterwards so our main focus right now is getting our app connected to the open AI API so we can start making calls to the uh gpt3 API so we're going to start doing that by firstly naming these fields so we know what we're talking about you can double click on them and then you change it up here so this will be get was done button now that's all named we can go to plugins and you have the API connector plugin we need to add another API and now we need to start building out our API connection and call this open AI so here you can see what we need to essentially wrap up and put into that API connector on Bubble we have a the URL that we're going to be calling to it's going to be a post request the content type which is the application Json authorization our API key and the keyword Bearer and then we'll need to put our data in a Json object like this so we're going to hop over and start putting that all into the bubble API connector I'm going to try and make this as easy as possible because this can be a little bit complicated for someone who hasn't done this before so you're going to need to head to the add plugin section and search up API connector install the API connector so once you've got your API connector installed then you can come over and start building out the API call we can call this a stoic request so this is the name that we're going to be using when we're building out the actions in the back end so we need to make this identifiable change this to a post request because we're going to be posting some data and now we've got to paste in this URL here which is found in the curl thing here so this is the link you need to put in as the post request that we're calling to you need to change this to action because it's going to be an action and then we need to start creating our headers now the headers you can see here are tagged by H so what we need to do is start copy and pasting these across headers key and then value application Json I'm doing this piece by piece so you guys can see the process add another one we need to do our authorization and then be sure to type Bearer in here you have to put Bearer and then you need to go and get your API key from open AI so you can log in order to authorize the API call you need to use one of your own API Keys now these are free to use you have a certain amount of free usage you have on your openai account so head over to platform. openai. com and create an account if you haven't already and then you can head to the personal tab in the corner click view API keys and then create a new one be sure to copy that API key and then bring it back over to Bubble once you have your API key copied you need to create a space after the word Bearer this is important Bearer space and then paste your token in and with that our header is done and now we need to add a body to our API request which is going to be found here you can see this D tag shows you what the data is supposed to be essentially so we need to model The Prompt that we want to ask it the max tokens and a bunch of other settings now good thing is we can take what we have over on promptable I'm going to copy it and take it over to playground just a new playground I'm going to see which my settings Works 0. 9 280 so on text DaVinci 003 0. 9 temperature that should be enough length put a little bit more just to be sure and then what we can do is hit view code and then this is going to give us that all ready to go we can just copy this from the bracket down to the other bracket and copy this over to our Json body here now that we have everything ready and put into our API Core Body we need to do one more thing which is to change that Dynamic value so we're able to access it when we're using our site and taking user input and so head to the input area down the bottom and change this to an angle bracket open and close around the input now this is going to be a dynamic value as you see it popped up down here we're going to say input and then a value we can put in a sample value and test this API call now if we set this all up correctly what we can do is input a value here like my dog died which is going to replace this input here initialize the call and everything has worked as we expected we've got a returned values from our stock request if you click the show raw data here you see how it's broken down and these things above are going to essentially fetch the different things out of this response body so we have a text field here which is going to be the quote back which is what we wanted text and it's given us an Epictetus quote so everything's working as expected and now we have the response from our stoic request look looks a bit complicated but it really isn't that so

now that we have it all connected we can head back over to our design and start connecting this up to our front end sorry to interrupt guys but I just thought I'd let you guys know that I'm finally accepting Consulting clients so if you want to have a chat with me and book in an hour call then it's available in the description talking about your business ideas anything like this I'll tell you how I would do it and the feasibility of it Etc so hit down below uh check out the Consulting Link in the description and in the pin comment and if you're enjoying the video please leave me a like by now it really helps my channel and I'd really appreciate it if you could drop me a like so back to the video what we also need on this page is a text element to show the response from the API once we've got it so people are going to put in their struggle hit the button it's going to go to the API come back and now we need to display that text in a dynamic text asset on the page okay so we have this here Center align it we need to set up the back end logic for what happens when this get wisdom button is clicked so if you double click on get wisdom you can go start and edit workflow you come over here add an action and we have added our stoic request as an action so we can start off here so we need to set up what's called a state and this state is something that can be toggled on and off so you need to click on the text box here conditional and there's tabs up on the right and we'll Define a new condition click this text and then get down the bottom create a new custom State we're going to call that a stoic response and a state type of text and then we're going to want it to be not empty so when it's not empty that's going to be the state that we're looking for now that we've set up the State Management we can head back to our workflow for the button so we can go get wisdom start need a workflow so we've got the style Quest set up now we need to toggle the state change for the text response area that we've just set up so the startup request is triggered when the button is clicked and then it needs to toggle the state to display the generated text so we click on here click to add an action element actions set State be sure to head back and change the name of the responsibility of text where the quote will be displayed so it's memorable I'm just going to call it quotext and head back to your workflow set the element up here as quote text and then the custom response is going to be stock response so when we click on result of step one it's going to be referencing the big body of response we got back that big chunk of Json and all the different fields so we're going to start digging through that and trying to pluck out that text field that we want so we can head here choices first item text so with this value result of Step one's choices first items text essentially digs through that response and plucks out the text that we want as simple as I can put it this workflow we've just created is when the button is clicked it takes the input from that the user has provided includes that in our API core which we've called a stoic request sends that off when it comes back it digs through and finds that text value that we want which contains the quote and then it's updating the state of that final quote area down the bottom to include and have the value of the quote that we just got back from the request so what the dynamic value of this is going to be is the quote text so the name of the field itself this text and it's going to be the stove response we have the dynamic value set up now we can preview the site and see if it's all working now I can put in here my dog guide ask for wisdom it's going to send the API request and hopefully it's going to show us quote back it is not the size of things which produce the greatest effect on the sole but the sides of the view we take on them so we've got everything working in the back end maybe we can play around with the display of this a little bit but essentially we have created a website that's going to take in some user input package it up with a prompt we've written query the API get the response back and display it for the user so now I'm going to go through and tidy this all up and make it look nice and then we have a finer product so I'll be back in a second

and now we're back with the completed site I'm going to give you a quick look through on the editor and then I'm going to show you the live product so I've made a little logo up here for the stoic Mentor I put in some appropriate text a stoic Mentor for life's toughest battles AI powered personalized wisdom you need from History's Greatest Minds so I've got these buttons get wisdom and they all link down to this section here put in a bit of a nice Roman style image here and I've put in a bit of context down the bottom as well regarding uh who these quotes are going to be from and the kind of lives they've lived so this is the editor side and then we have the finished product The Stoke mentor. com and here now I'm pretty happy with how this came out given it was only a few hours work but we have these buttons here get wisdom that takes you down to this get wisdom take of course and then we can prompt in here I've hidden the text field so we can put and then we have a response from Seneca what holds sorrow isn't the passing of time but us clinging to it very easy to do and I hope the tutorial side of things of the nitty-gritty of bubble which can be a little bit confusing uh was enough for you and I'm going to put this in the description if you have any questions then please hit down below and I'll be sure to ask them a call because I can but I'm a beginner to Bubble too I haven't used this thing before but I was able to pick it up with a little bit of tutorial help and uh just trial and error guys this is the kind of stuff that you need to be playing around with they're getting familiar with if you want to be building AI based businesses in the future like Paul Jacobian said in the interview I did with them it's all about building fast and getting things out in like a week and if you can't do it in a week you'll few days like really push yourself to be playing around with these tools and getting stuck in and learning like I'm learning so much just by shooting these videos with you guys so there's like bubble editor I was not familiar with that but I've learned how to use it so I really urge you guys to hop in start playing around with these tools if you like this kind of AI entrepreneurship focused content I make videos three times a week or more hit down below and subscribe hit the Bell so you don't miss the next one because I have some bangers coming up soon I've got an entire will deal with great ideas I can't wait to share with you guys uh so please hit down below leave a like if you enjoyed the video I really appreciate it and leave a comment if you have any questions but that's all for today thank you so much for watching and I'll see you in the next one foreign