How to Add Custom GPTs to Any Website in Minutes (OpenAI GPTs Tutorial)

in this video I'll be showing you step by step the fastest way to add your custom gpts to any website this has been a highly requested video because many of you have created awesome gpts in the Builder but you want to break them out of the chat GPT site and start using them in the real world unfortunately a lot of people don't understand the enormous value of gpts because they are missing a key part of open ai's Vision that no one is talking about right now so by the end of the video you'll not only know exactly how to put your gpts onto websites but you'll also understand exactly how open AI has really laid out the path for all of us to build and sell gpts that integrate into every part of our world so that you can pounce on this incredible new opportunity before others catch on if you're new to the channel and don't know who I am my name is Liam otley and I run my own sixf figure AI development company called Morningside Ai and I also run the largest community of AI agency owners in the world where my students learn how to make money by selling AI solutions to businesses just like the website chatbot that you're about to build let's get into it the first thing that you need to understand before getting stuck into building this is the difference between the gpts that you can build on the chat GPT website and the gpts that you can build with open ai's assistance API the gpts that you can create on the chat GPT site are best understood as consumer toys they are cool little gimmicky things that allow people to come on and do this like setup experience where they can add some knowledge and build these gpts and put them on a Marketplace but you need to understand that that is is sort of one area and one side of this entire equation the other side is the assistant AP I and the real powerful assistance that you can create and operate programmatically so the chbt ones that you build on the chat gbt website cannot be operated programmatically you can set them up you can save them in your little sidebar but you can't actually start to call those programmatically which is why you watching this video because you don't know how to take that functionality and put it elsewhere that's what the assistant API is for this is the business facing product so we have the consumer side then we have the business facing side of this this gpt's product and that is created through through the assistant API what the assistant API allows you to do is all of the things you do on the on the chat gbt Builder side of things but allows you to set things up programmatically and then once you have created an assistant with this which I'm going to show you in this video Once youve created that assistant you can then make calls to it in the same way that you used to make calls to the chat gbt API you can create your assistant you can give it knowledge you can give it functions and once that's created you can call that assistant and ask for responses from it and use those within your application so what we're doing in this video is creating assistant using the assistant's API that I've templated all for you guys to copy so you don't have to worry about writing code but we'll create an assistant we'll connect it to a chatbot builder then we're going to be able to take that and put it onto a website that's going to be accessible through a little chat bubble widget that you're probably used to by now for anyone who is looking to make the most of this opportunity that is gpts you need to understand the assistance API and how this is going to be used in real word applications and don't get too distracted by this gpts thing and and the GPT store and stuff like that well it might be great the real value and real impact of the gpts release will be created through this assistant API which you're going to get a crash course on now but that out of the way we can get into exactly what we are building today and how so we are creating a custom knowledge chatbot and in this case the custom knowledge chatbot is going to be a a sales rep training assistant so we're going to give it custom knowledge on training documentation for our business so that the sales reps and the junior sales reps in particular can talk to this chatbot to get information about the business on what offers they can sell how much things cost what methods they should use Etc so custom chatbot and we're going to be taking that functionality creating it with the assistant's API and then putting that onto a website with a little bubble in the corner that can be interacted with the actual implementation of this is going to consist of two parts we are going to create this functionality by firstly creating a repet that creates our assistance for us and manages the conversations back and forth and then we're going to connect that repa to voice flow as our front end so we're going to make API calls from voice flow to our repet and so they can talk back and forth with each other and then we can start getting our conversations through a nice chat interface that anyone can use on our website to get started you need to clone my repet as always I've done all of the code and I've written everything for you so you can just plug and play my repet and copy it and you can get up and running in a couple of minutes so it's going to be available in the first link in the description you'll be able to sign up to my resource Hub and then inside the resource Hub you'll be able to find a link to this repet once you're on the screen you can go up to the top right and click this Fork button then we can call it uh gpt2 website and just save it there we can Fork this it's going to create a copy of everything that I've done once it loads in you should see this screen here I'm going to take you through a quick tour of how I've set this up so you're fully aware of what's going on without needing to do any changes or modifications so in this case I have my knowledge document that I've uploaded it looks like a tool scr here but the machine can understand it I've uploaded my knowledge document which is the training information for uh the solar business and the salip is going to be able to chat and back and forth with so I've uploaded the knowledge document here you have the main.py file where we have our API endpoints that we'll be able to talk to from voice flow so there's one here to start the conversation and create a new thread then there's one that we'll send our user queries off to to process and send back to us so I won't get stuck in the weed here too much you can take a look over it as you'd like or even paste this into the chat GPT and ask it for some help breaking down and understanding how this works that might be a good learning experience for you as well but the high level of it is that we have this create assistant function here and when we run this app for the first time it's going to look in this left hand column here and see if there's a file called assistants. Json if there isn't one it's going to create you a new assistant based off these instructions here so this is the Smith solar sales assistant and I have the instructions for it here so these are the instructions that you have when you put into the GPT Builder on the chat GPT website this is the prompting and sort of explanation of what it's supposed to do if you are following along but you want to do it differently with your own use case this is what you need to modify so you can change the information here to prompt it into a different role here I have set up the retrieval tool so if you want to have a custom knowledge base and add in a document like I have you just need to leave this as is so that's the retrieval sort of knowledge retrieval feature and then what this function is going to do is send all of that information off to the assistant API create a new assistant up in the up in The Ether and it's going to return back the ID for that assistant and we're going to save that assistant into a file on the leftand panel here called assistant. Json and that's going to save the ID so that we can later recall it and every time you run this over again you won't need to create a new assistant which is going to cost you a lot in API usage so it's going to store that assistant ID and it's going to reload that every time when you restart this application so it's going to save you a ton of money all you need to do to get this thing up and running out is to go to the bottom left to secrets and you'll see open AI API key up on the right here you need to go to open ai's website and either create or get your existing key come back here and hit the edit button and paste in your API key and save it and then we should be good to go and run this thing for the first time now if I click on the Run button here it's going to boot everything up and it's going to create the assistant because there's no assistant. Json in the left hand panel here so you should see assistant. Json appears great I'm not going to open it up because you'll see my assistant key but inside that file is going to be the ID of the assistant that you just created with those settings so with the prompting settings that you gave it and with that knowledge base you've created a new assistant that it's up there ready for you to talk to in future next we need to create the chatbot that allows us to interact with our system programmatically via the API endpoints that we have set up on our rep we're going to be using as my favorite bot building platform called voice flow which is something I use daily at my AI development company as well so this stuff is really solid and I really back it for you guys to learn how to use this as well the link to sign up to voice flow will be available in the description so then once you're here you can log in and create an account and then once you're inside what you're going need to do is download the template file that I've created for you it's going to be available in the resource Hub in the description so again go down to the description you can sign up to my resource up and inside will be the repet template there'll also be the voice flow template as well so you need to go in there download that file and then come back even if you're not copying exactly the use case that I'm doing there is still a very good base for you guys to be able to plug in any kind of assistance apis that you want to into these kind of custom custom fronti and and chat Bots you can put on website so once you've downloaded that you come back here and you can click the import. VF file up in the top right right and then obviously load in the file that you've just downloaded we can click open assistant on the right here and just like that you've got all of the work that I've done already for you that allows you to just plug and play the ret functionality into this voice one just to take you through what this chatot does firstly we have a get request to our start URL if we go back to replate you can see we have in our main.py file we have our app rot which is start and what this is going to do is sort of initialize the conversation and create a new thread so under your assistant you have threads which are basically conversations threads all just store memory and retrieve it later on so whenever we start a new conversation we need to create a new thread and that's what this is doing here we are going to create a get request and then we're going to save the thread ID and every time the user sends a message to the chatbot we're able to take the thread ID that we created at the start of the conversation then we're able to take the message as well and send all of that off to our chat endpoint which again if you go back to the main file we have the chat one here so we have the start conversation with create to thread then we have the chat inpoint which is going to generate a response I know that might te complexs for you but I promise this as soon as you get this repet template set up you're able to make these little tweaks and you get this running then this is going to be very easy for you to sort of understand how this whole system works so we actually very close to seeing this in action now all we need to do is go back to repet and on the right side here you'll see this web view that popped up if you click on the new tab button here on the right it will pop up in a new window and it will give you the URL the address of where your server is currently running so we can copy this and go over to voice flow again and now we just need to update the URLs in our request so we can replace entire thing paste this in here and this one needs to be slash start start so your URL and then it should be SL start so this is the start conversation and then here if I paste this in here again and go/ chat those are the two different endpoints that we need to be calling all of this should be set up and ready for you to go now all we need to do to test this is Click On The Run button up in the top right if I click run test it's going to allow me to start the chat with our assistant so hi I'm Dale Smith solar Sal rep assistant how can I help you today um what discounts do we we have available and this is a question about some of the information that is in the source material that I provided so we'll see what it comes back with great at Smith solo we have various discounts available early be discount referral discount cash discounts Etc as we can see it is outputting from my custom knowledge base I can even ask it another question I can say uh what are our finance options and test it again at the moment these assistant API calls run quite slow so if you want to keep an eye on how this is actually the process and progress of the the call in the back end what you can do is come back over to repet and whenever you run it you'll see in this bottom right hand corner where it's it's logging what it's doing so okay I received a request to create a new thread okay I created the thread here's the ID okay now I'm in the process of generating an answer I'm in progress and progress and progress run completed here's the answer so if you need any help debugging what's going on or any issues that are happening I've written this code in a way that allows you to see what's happening in real time time within the console here so just a handy tip for you if you need any help where you run into any issues since we have the functionality working nicely here in voice flow we are good to take this and put it onto our website now which is super easy one of the reasons I love voice flows because of this functionality as go all I need to do is click on the publish button in the top right I don't need to give it a name wait for it to publish and now I can click on this embed widget settings on the screen we have three parts firstly the installation which is the code that we're going to put on the website in a second but then you can also modify the appearance of it so you can see on the right I've made it look kind of nice already and on brand with a kind of Solar Company I've called it Smith solar assistant and I put a description here which of these two things here and then I've also customized the appearance with some coloring and I've put a little logo thing on it as well so it looks quite nice I think it's fairly on brand for a Solar Company might look like all I need to do now is copy this code and take it over to the website for the sake of this tutorial I've just downloaded a website template off the internet so that I can show you what this looks like in action this is a website code don't need to look at any of it really this this is going to be your website code or the website code that you want to put this chatot onto need to scroll down to the bottom of the the main file whichever it may be and just before the end in the sort of script section you should see a bunch of different scripts here you can just paste it in between some of these so I can paste that in there then my JavaScript code that puts that little bubble on the website is now installed I can save this file I can click this and run a live preview and we'll see what it looks like so here's the template website I've just pulled off the internet but in the bottom right hand corner you can see there is the Bubble Up it pops Smith solar assistant hi male Smith solar sales R how can I help you today um what uh are our financing options and there we have it a working custom GPT using our own knowledge base put onto a website using voice flow and repet and using the assistant API this is only just scratching the surface of what is possible with the assistance API for this video I actually had to take out a ton of features to keep it as simple and straightforward to explain as possible I'm actually going to be releasing a full length tutorial going into depth on everything related to the assistant API and how you can build gpts for businesses and start selling them to really start making money and capitalizing on this new opportunity before everyone else wakes up to what I've just shown you in this video so if you want to be a part of that you want to stay in the loop make sure you subscribe to the channel because I have a ton more content like this coming that shows you how to make money from this new technology and if you want to join my AI business accelerator where I'm teaching my community and my students how to make money with this opportunity and with this exact same thing you've seen in this video you can join that in the link in the description as well remember if you want free access to all of the resources mentioned here the riplet template the knowledge based document and also the voice flow template is all going to be available in the first link in the description on my resource Hub which is completely free and if you're not already in my free telegram I'm dropping a ton of game in there on this exact topic and everything related to GPT so if you want to get some free value and free game on what we're doing here you can get access to my Telegram in the description as well if you're interested in learning more about my thoughts on the gpt's release and what it means for AI businesses you can take a look at the video which is available here but aside from that thank you so much for watching and I'll see you in the next one

Channel: Liam Ottley

Views: 390,167

Keywords: ai automation agency, ai automation, liam ottley, openai update, chatgpt update, gpts, how to create a custom gpt, create a openai gpt, openai, openai devday, ai tools, custom chatgpt, chatgpt, build custom gpts, openai gpts, chatgpt on custom data, openai function calling, how to make gpts, openai gpts tutorial, custom gpt tutorial, chat to pdf, ai business ideas, assistants api, assistant api, gpt assistant, openai assistants, add gpts to website, website gpts

Id: Uk5f3ajkfSs

Length: 14min 4sec (844 seconds)

Published: Sun Nov 12 2023