How to Integrate GPT-4o Assistant Into Your Website (updated)

hey friends exciting news from open AI on May 13th they announced gp4 o now the O stands for Omni which means this model can handle text audio images and even video all in real time and compared to what we had before this is a huge leap forward GPT 40 is 50% cheaper than gp4 turbo across both input tokens and output tokens it is two times faster than gp4 turbo and it offers five time higher rate limits they say over the coming weeks GPT 40 will Ram to 5x those of gp4 Turbo up to 10 million tokens per minute for developers with higher usage all of these points have often been bottlenecks for real world business applications at our agency we often have projects that need much higher rate limits and obviously speed and pricing are very important too so in this video I'll guide you on how to leverage this most advanced model from opening for your business or for your client's business if you sell AI Solutions and how to build or upgrade your chatbots to get the best possible results I'll provide you with two methods for creating a gp4 Omni chatbot and integrating it into a website the first method is a third party solution which is extremely easy to use but comes with some limitations the second method involves using custom build code so it's not merely you know drag and drop but it offers more flexibility and cost Effectiveness so for the first method I'm going to use a tool called chatbase I already showas this tool about half a year ago in one of my other videos it is very beginner friendly in just a few minutes you can have a chatbot ready to go and they say GPT 40 is now available so let's quickly create it right now I will attach a link to this tool in the video description once you sign up you can click new chatbot and create it right away you'll be redirected to this screen where you can add your data sources this should be a knowledge base that your chatbot is going to use to answer questions I have a sample knowledge base from my previous video it is for a fake hotel called Vista by Resort so I'll just drag and drop that PDF file obviously apart from file format you can also use plain text or a website if you choose website for example you can paste the links to craw but in this case I just added a PDF file the number of character is within the limit so all good I'll click create chatbot give it a few moments to process and boom that's it the chatbot is created and ready to use it says the module in use is GPT 40 which is exactly what we need I really admire from the user experience point of view how straightforward they made it you have only one button create chatbot then you have only one step to add your knowledge base and that's it the basic version of your chat B is created well done chat base now if needed you can modify the settings let's go to the settings tab and on the left hand side if you click on model you'll see which GPT model is in use you can change it if you want also you have instructions here this is a role that your assistant is going to perform they have a default one but you can change it of course I have my custom Persona prompt prepared again from my previous video so I'll copy it and paste it back into chat base quickly check it looks good to me okay I'm going to click save and what else you can do here is customizing the chat interface so the kind of front end for our assistant you can change the initial message you can add some suggested messages select the theme light or dark and so on you can also upload a profile picture let's actually do it I'll choose one of my pictures display name let's say um B AI is assistant you can change the colors uh you know chat icon alignment etc for now let's just click save and move on you also have the sources TP in case you need to change or update your knowledge base you can do it here they also offer some preconfigured Integrations that's very convenient you can integrate the chatbot directly into WhatsApp for example if you subscribe for paid plan of course but for this video I just want to embed it on my site so I'll click make public and we get a piece of code that we can copy and paste directly into the HTML of a website I'm going to use this sample website from that previous video about an AI solution for hotels check it out by the way if you haven't yet there are no chatbots here let me refresh it okay no chatboard widgets here I go to the HTML of the website scroll down paste the script from chatbase and save now let's refresh it again and the chatbot icon has appeared B AI assistant nice let's ask it hi tell me your check out time Wow first of all the speed is impressive for comparison if you go to my previous video where I built the same chatboard but I used different chatboard Builder and I believe the model in use was GPT 3.5 turbo the time it took to respond was much longer so GPT 40 is definitely faster and that's my first impression here now it replied check out time at Vista by Resort is at 12:00 p.m. let's quickly check it in my knowledge base yes indeed under checkout procedures it says checkout time is 12:00 p.m. let's say nice thanks what is your Wi-Fi password and I really like the speed here I'm not going to cut the delays so that you could see how it replies in real time okay you're welcome the Wi-Fi password for our guest is Vista 2024 you can connect to the network blah blah blah so according to my Persona instructions it is friendly right it doesn't merely provide the answer to my question the Wi-Fi password blah blah it replies you're welcome because I said thanks in the previous message so it works as anticipated okay that's it I think that's the easiest and the fastest way to implement a gp40 assistant for your business but there are of course some limitations as it is a third party solution there are additional costs paying for tokens to use the GPT model will be more expensive because there is their margin fee included chatbase needs to make money as well right the second limitation is the lack of flexibility you are dependent on their preconfigured functionalities and cannot Implement Advanced features like image recognition or product recommendations or you know online dynamically updated knowledge base such as spreadsheets for example and while web hooks functionality is available and theoretically you can build custom code for those Advanced features and integrate it this raises the question if you are capable of building such code why overpay for chatbase when you can use the assistant API from open AI directly the same issue applies to the knowledge base the S scraping function within chatbase doesn't really work well with larger size or with unstructured size if you aim to generate a quality knowledge base from your website content it would be much more effective to build a custom scraper for better accuracy in conclusion despite these limitations chatbase provides real value that's for sure if your goal is to build a basic customer support chatbot for your website without the need for coding or using more complex chatboard Builders chatbase would be a great solution for you moving on the second method involves creating a custom build chatboard from scratch which requires writing code but don't worry you won't need to actually write anything yourself because my team has already done that for you all you need to do just copy and paste our code and I will guide you through the process so we are going to use ret as a back end to host our code which is going to implement the whole functionality of the assistant then voice flow as a front end to get the interface for our chatbot widget and we will connect replit with voice flow allowing them to communicate with each other by via API calls once you click on the RIT Link in the video description you'll see this template it was prepared by my partner and CTO Nick you're welcome to go to the comment section and thank him once you do that obviously you need to sign up with ret and click use template give it a name say gp40 chatbot and click use template now this is your workspace and you can amend it I have a very similar tutorial that I published on my channel back in November last year and now I decided to update the code because since November open AI libraries have been updated a lot and this code is updated accordingly it includes Vector database file search and so on anyway I will show you very specifically what you need to change here to make it work with your data the first thing to do is to add your secret API key from open ai go to secret and here as a value you need to paste your API key let's go to open I developer platform as always to make it work make sure you have some credit balance just go to settings then billing and you can check it out here or recharge then go to API Keys create new secret key give it a name click create secret key copy it and paste it as a value back in ret click add secret and it's done now you have four files on the left hand side assistant Json index JS knowledge dog and open AI service JS this is index JS it includes two main end points start and chart the start Endo initiates a new thread while the chart end point receives a question from the bot forwards it to the thread and then Returns the response from open AI then we have our knowledge based dog and open AI service JS it is going to check if our assistant Json exists if yes it will use it and if not it will create one according to the instructions here here we have a name Persona instructions and the GPT model that should be in use So the instructions you provide here will be used to create an assistant that was just a quick overview for your understanding now let me show how to actually change the knowledge base and the Persona instructions after you added your secret API key you can delete assistant Json then delete the knowledge doc yes delete file to add your own knowledge base click on the three dots here then upload file and select your knowledge based dog I'll use the same one about my Vista by Resort business pay attention to the naming of your file before as you see it was knowledge. doog now it is knowledge base. doog so I need to go to open AI service and in the line number nine I need to change the name of my knowledge based file so it is aligned with the file name I just attached all right and you also want to change the Persona prompt right the role your assistant is going to perform so I'll use the same Persona prompt for Vista by Resort assistant just copy all of that and paste it back in ret as instructions I'm going to click run and since there is no existing assistant Json file it should create one let's see yes it did create a new file it uses gp40 as the model and includes instructions for my Vista Resort assistant and the RIT setup is done only three steps for you right add your secret API key replace the knowledge base and the Persona instructions now I'm going to set up voice flow and Link it all together download The Voice flow template from the video description and once you sign up with Voice flow you can import it then just open the assistant and this is what you'll see let's just quickly change the welcome message so instead of Bonnie now James customer support assistant I'll say Ashley your personal customer service assistant at Vista Bay Resort generate a few more variants with AI the second message let's also change it to Vista by Resort services and also generate more options all right really the only thing you need to do here is to paste your replit url click on the first block switch back to replit click on the replit dodev here and copy Dev URL now paste it back to voice and make sure it ends with Slash start okay do the same for the other blog and this time it should end with Slash chat and now our voice L chatbot is linked to replit Let's test it out click run test hi when is your checkout time and it replies according to our knowledge base nice let's Now quickly deploy it to a website click publish give it a name say Vista Bay assistant publish and I can embed widget this is the code snippet that we need to add to our site HTML but you can also customize the interface of the chatbot here let's change the name to Vista Bay Resort assistant amend the description and you can also modify the appearance change the colors upload different icons profile pictures Etc now let's go to our sample website we still have the previous chatbot from chatbase here so I'll go to the HTML of the site and delete it and this part as well delete now I'll save it go back to the site refresh it and the chatbot is gone let's copy the code snippet from voice flow paste it into the HTML save go back to the site refresh it again and this time the chatbot widget from voice flow has appeared that's the final demo I promise let's see how it works hey what is your Wi-Fi password and yes it replies Vista 2024 according to the knowledge base let's ask one more question when does your bar close and the response is again correct and aligned with my knowledge base all right when I published a similar tutorial with replit many of you asked how to make it work when you close ret the answer is that you need to deploy your code so at our agency we use AWS Lambda it is very secure they offer pay as you go pricing so it is quite convenient but you can also deploy it directly in replit you can click deployments here on the left hand side and you'll see deploy to production deploy a stable public version of your project unaffected by the changes you make in the workspace you can for example select Resort virtual machine and upgrade your plan to deploy in this video we just deployed the chatbot to a website but you can also integrate it with WhatsApp for example there is a detailed guide on WhatsApp integration prepared by voice flow I'll attach the link in the description and I will definitely cover it as well in my upcoming videos so make sure to subscribe and stay tuned to sum up we achieved the same result using two different methods I understand that if you're not familiar with coding or using GPT models this code might seem overwhelming and kind of difficult to adopt to your needs but it offers many advantages and opportunities for further development for instance you can integrate image recognition functionality into this assistant or turn it into a voice agent or introduce some scraping solution to use online sources as a knowledge base there is a great deal of flexibility available and if you are looking to implement a more advanced and custom build solution for your business our agency can help my team of developers is ready to assist you just visit the website in the description below to get in touch and that's it for today let's me know if that tutorial was useful for you leave some comments I am so excited about everything that's going on right now from the recent presentations by Google and open AI it is evident that the leading companies in the field are not going to stop the agent capabilities are going to be greater and greater so make sure to leverage this technology thanks for watching do not forget to subscribe like the video watch my other tutorials a lot of value there and I'll see you soon in the next one bye

Channel: Bo Sar

Views: 11,581

Keywords: how to integrate gpt-4o assistant into your website, gpt-4o assistant, gpt-4o assistant to website, gpt assistant to website, AI assistant to website, add gpt to website, gpt to website step by step, how to add, how to add gpt to website, gpt to website tutorial, gpt-4o to website tutorial, GPT-4o, GPT-4 omni, OpenAI GPT-4o, integrate GPT-4o, GPT-4o chatbot, GPT-4o tutorial, GPT-4o guide, GPT-4o methods, GPT-4o demo, add gpts to a site, chatbase tutorial

Id: sWbqPKkI44g

Length: 16min 59sec (1019 seconds)

Published: Thu May 30 2024