Integrating OpenAI Assistants with Websites using FlowiseAI
Flowise AIVintage📅 2023-11-25
Tutorial Overview
┌─────────────────────────────────────────────────────────────────────┐
│ LEARNING PATH │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ LEARN │
│ ───── │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Watch │───►│ Understand │───►│ Follow │ │
│ │ Tutorial │ │ Concepts │ │ Along │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ PRACTICE │
│ ──────── │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Try It │───►│ Experiment │ │
│ │ Yourself │ │ & Adapt │ │
│ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ MASTER │
│ ────── │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Build │───►│ Share & │ │
│ │ Your Own │ │ Iterate │ │
│ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Key Takeaways
- Core concepts explained
- Step-by-step implementation
- Practical examples
Transcript
[00:00] in this video I will show you the easiest and most affordable way to add openai assistance to your websites to demonstrate this I created a website for a fictitious company called cloudsync we can access the assistant by clicking on the chat bubble at the bottom right of the website from here we can ask the assistant questions about the business for example what services do you offer and after a few seconds the assistant will answer our question using a knowledge base we provided this
[00:31] interface is using an openai assistant behind the scenes and when we go to open ai's website we can see the assistant along with the instructions the model and the tools that were made available and you will also notice that I provided a Word document that contains the information about the business what you will also notice is that I've added a function called add lead to this assistant as well and this add lead fun function will be used to create a lead
[01:02] in our CRM system should this user want to continue with our services for instance let's say that we are interested in finding out more about this business and we want to schedule a meeting we can now ask the chatbot something in the lines of I would like to schedule an appointment and this will trigger some very interesting functionality within this chatbot it's now asking us to provide our first name last name email business name and phone number and these are the values that I
[01:33] need from the users for my lead system but you can customize this however you see fit so let's go ahead and provide this information my name is Leon fanale and note that I'm not providing these values separately but I'm expecting the assistant to intelligently split out the first name and last name from this my email is test test.com now now watch what happens if I only provide these values because the assistant is also
[02:05] expecting the business name and phone number it's now saying thanks Leon which is quite cool so it's definitely identified my name and split that out from the full name but it's also saying could you also provide me with your business name and phone number so the assistant will continue this back and forth conversation until it's collected all the information it needs my business name is cognitive and my phone number is 01112
[02:36] 31234 and now saying Thank You Leon someone from sales will get back to you soon if you need any further assistance feel free to ask and if we wanted to we can continue with this conversation but if I go back to my CRM system which contains my leads and if I refresh this we can now see that that lead was indeed captured in our system as you can see this is an extremely powerful solution and yet it's extremely easy to set up and in order to build this chatbot and
[03:06] integrate it into a website we will be using an open-source platform called flow wise and if we have a look at the flow wise project this entire assistant consists of only two nodes this video is beginner friendly and you do not need any coding knowledge to follow along so let's get started to follow along with this video you do need to set up an instance of flow wise so if you haven't done so already I've got a whole series going through the basics of setting up
[03:37] flow wise and in this demo I've got an instance of flow wise running on render I highly recommend having a look at my video that takes you through the steps of deploying flow wise to render but just to recap the process all you have to do is go to the flow wise GitHub repository and I will leave a link to this repository in the description of this video then all you have to do is create a copy of flow wise by clicking on this Fork button over here then on the following page simply click on
[04:09] create Fork then go over to [Music] name like flow wise AI select your region leave the branch as main leave the root directory as blank for the runtime select Docker then select your
[04:41] instance type then you can select the free plan if you simply want to follow along with this tutorial but if you want permanent storage and if you plan on using this for a client select one of the paid plans after this scroll down and click on create web service and this will take a few 2 minutes to complete building and once build is complete you can simply click on this URL over here to access flow wise now that we have access to flow wise we can go ahead and create our assistant go ahead and click
[05:13] on add new first we need to save our chat flow and then give our chat flow a name I'll just call mine assistant demo now go to add nodes and then under agents go ahead and add the open AI assistant node to to the canvas this node takes in tools as input and we also need to select an assistant so in order to create an assistant we need an openai account so if you don't yet have an account go over to platform.
[05:44] open.com and sign up for an account you should be presented with a dashboard like this and on the left hand side we can see the menu and if we click on assistance we should be able to see a list of all of our available assist assistants and at this stage I do not have any assistant set up and we will not be using this screen to create the assistant but instead we will allow flow wise to create and manage these assistants on our behalf so let's go back to flow wise then under select
[06:17] assistant click on create new let's give our assistant a name because our fictitious company is called Cloud sync I will call the assistant Cloud sync support we can also enter a description like an AI customer support bot then for assistant model you need to select either GPT 41106 preview or GPT 3.5 turbo 1106 these models will allow the assistant to call functions I will
[06:47] select GPT 41106 preview if you get any error messages related to you not having access to this model then you might have to add a credit card to your open AI account or simply select GPT 3.5 turbo 1106 now for the open AI credentials we need to provide our open AI API key so in this drop down click on create new then give this a name I will call it open AI API key but you can call this
[07:18] whatever you want then we need to get our API key from open AI so let's go back to open AI then on the left hand side click on API Keys then click on cre create new secret key give it a name I'll just call mine assistant demo then click on create secret key copy this key then go back to flow wise and then paste in that key and then click on ADD now we need to provide the assistant instructions and in the description of this video I will leave the full
[07:49] instructions that I will be using but I will go through this with you step by step as this is extremely important first let's start by providing the role for this assistant by saying you are a helpful assistant that works for a company called cloudsync your name is Sammy so if the user asks our assistant what its name is it will respond with Samy your tone should be friendly and helpful keep your an short and accurate then because we want this assistant to
[08:21] answer questions from a knowledge base I will provide the following text use the information contained in the provided files to answer question questions about Cloud sync such as the products and services offered by the company after answering the questions ask the user if they would like to book an appointment or consultation so with this instruction here we are getting the assistant to push the client towards a sale or a consultation and this is important because we want the user to be converted
[08:52] to a lead then if the user shows interest in our products or Services we want to convert them to a lead so so we can therefore add the following if the user asks to set up an appointment or book a consultation then collect the following information from the user and then send this information to a function add lead and the information that we want to collect is their first name last name email address business name and phone number and this is where you can
[09:22] change the information that the assistant should collect once you have all this information respond with a message like like thank you someone from sales will get back to you soon and that is all we need for the instructions for the assistant tools we can leave these default values as is now for the knowledge files we can upload the documents that contain information about our business and for this example I used chat GPT to generate the contents for this document and this contains the name of the business and some fictitious
[09:54] information like the established date information about the owners the location contact information frequently asked questions Etc and I saved that information into a Word document so all we have to do is upload those files and then click on ADD and that is really all we need to create our assistant and if we go back to open Ai and if we go to assistants we can now see our Cloud sync support assistant in this list of assistants and if we click on this we
[10:26] can view all the instructions that we just provided and the model and we can also see that our file is attached but for the functions we don't yet have any functions attached to this assistant but we will add a function using flow wise in a second but for now the retrieval functionality should be working so back and flow wise go ahead and save your chat flow we can test our assistant by clicking on chat and then let's send a simple message like hello and we are
[10:56] getting a response so the the assistant is working let's try something like what is your name and that is correct its name is Sammy now let's try what services do you offer and now it should Fitch this information from the knowledge base which it does great so now we know that the retrieval is working and we are able to interact with our assistant before we move on to adding our function let's first have a look at a few extremely important features about flow wise first it's
[11:29] important to note that we can view past conversations by going to settings then view messages and from view messages we can see the transcripts of past conversations and this is useful for tweaking and improving our assistance over time as users interact with it then we can make changes to our assistant by going back to the flow wise dashboard and from here we can go to assistance and within assistance we can see our Cloud sync support assist assistant and
[11:59] when we click on this assistant we can make changes for example we can change the model change the instructions add additional files to the knowledge base Etc or we can also delete or we can also delete our assistant and by deleting the assistant year we have the option of only deleting the assistant from flow wise or from flow wise and open AI but let's cancel this action now we have an assistant that's able to assist with customer queries by using using a knowledge base now let's go ahead and
[12:31] create a custom tool for adding leads to our CRM system there are many different ways for storing leads and if you want you could simply use a Google sheet Air table or whatever tool you want and the solution that I'll show you in this video will work for most use cases for this demo we will have a look at adding leads to zoo CRM which is free to use and an extremely popular tool in the industry so go over to this website and then create your account or sign in
[13:03] after signing in you should be presented with a screen like this and what we want is to add leads to this lead page over here so once a user requests a meeting or a consultation we will expect the assistant to create a lead on this screen so in order to integrate flow wise with Zoho CRM or pretty much any other CRM solution including air table or Google Sheets we will make use of a
[13:34] service called make.com so go over to make.com and then create your account or log in after logging into make click on scenarios from scenarios click on create new scenario what make.com will do is expose an API endpoint which flow wise can call and make will then collect the users information from onflow wise and then pass that information on to our lead system which is zoo in this example
[14:05] let's create that endpoint by clicking on this big plus button then within this list search for web hooks then click on web Hooks and then click on custom web hook then click on ADD let's give our web hook a name like flow wise Ai and then click on Save mag.com will now give us this URL which is the endpoint URL that we need to call and it's actually listening out for a call from flow wise so just leave the screen as is and do
[14:37] not close this popup now let's get flow wise to call this endpoint back in flow wise let's add a custom tool for our add lead function under Tools click on Custom Tool and add that to the canvas then let's connect this Custom Tool to our assistant now we need to select our tool within this drop- down click on create new let's give our tool a name like addore lead and this naming convention is important for the tool
[15:07] description enter something like use this tool when capturing a lead and take note that I called the tool atore lead and if we have a look at our assistant for a second we told our assistant in the instructions to call this add lead function when the user asks to set up an appointment so that is how we tie these two instructions together for the schema we need to add a few properties and these are the input values that the tool
[15:37] expects for instance the first name which is of type string in the description I'll just say first name and this is a required field let also add properties for the last name which is of type string with a description of last name which is also required then we ALS also need the email address which is of typ string with a description of email this is also required then we also need a property for the phone number which is
[16:10] of typ string with a description of phone number this is also required and lastly we also want the business name which is also of typ string with a description of business name and this is also required now scrolling down we need to provide the JavaScript code to call this endpoint and I will leave this code in the description of this video so just simply go to the description copy this code and paste it into this input box
[16:41] and it should look something like this if you are not a programmer then don't get intimidated by this as you really don't have to change much all we have to do is provide the URL to the make.com endpoint so going back to make.com Simply copy this URL L we can actually copy it by clicking on this button and then pasting it in between these two single quotes like so then these values with the dollar signs need to match the names of the properties that you
[17:12] provided over here so if yours are different then simply change them in this code and you can also add or remove values as you see fit and the names of these attributes can be whatever you want it to be now let's go ahead and add this tool and then save our assistant if you ever need to make changes to this tool in the future then you can simply click on this edit button over here and make whatever changes you want or Additionally you can simply go back to the flow wise dashboard go to tools and
[17:44] then edit the tool from here make.com is still listening to a call from flow wise so let's go ahead and test this out let's go to chat and then in the chat let's say something like let's schedule and appointment and let's see what happens now the assistant is asking for our details so let's provide this as Leon fanale email is test test.com business name is cognitive doai and my
[18:14] phone number is and that is not my real number by the way it's just an example so let's send this so we got this response back from the bot saying Thank You Leon someone from sales will get back to you soon to confirm the details of your appointment and what's also useful is we can see which tool was called by the assistant and by clicking on this button we can see the values that were extracted from the conversation and sent to this make.com endpoint so let's go back to make.com
[18:45] and now we can see this message saying successfully determined we can now click on okay to close this popup so now that the connection between flow wise and make.com was established we can now pass these messages to make.com Let's test this again we can run the specific node by right clicking on this node and clicking on run this module only now this module is waiting for flow wise to trigger it so back in flow wise I'm going to clear this conversation and
[19:16] then let's start a new conversation and let's just say let's book a meeting let's again provide our information and phone number is 011 1 1 2 3 1 2 3 4 and let's send this and let's go back to make.com and we can see this little green box saying that make receive the message from flow wise but now we can see this button up here and if we click on this we can see the information that we received from flow wise now all we
[19:49] have to do is add another module to this flow to take this information and then pass it to our lead system thankfully make.com makes that incredibly easy to send this information to our Zoho CRM system we will simply grab this node and then in applications I will search for Zoho CRM and then click on Zoho CRM within this list we get this option for upserting a lead so let's click on that
[20:22] now all you have to do is click on ADD Zoho connection and then click on Save this will bring up a popup where you need to accept this connection between make.com and Zoo now after that connection was made we can now map the values from this web hook to Zoho CRM so for company we will select the business name from this web hook for the last name we will select the last name from the web hook the same for the first name
[20:53] the full name will simply be the first name and the last name the email email address will just be email and the phone number will be the phone number from the web hook and of course if you are passing more information from flow wise you can just map those values as well but this is all I need so let's click on okay that is really all we need we can go ahead and give the scenario a name up here maybe something like flow wise assistant and then we can go ahead and
[21:24] save the scenario now let's test this let's click C on run once our web Hook is now waiting for a call from flow wise so back in flow wise to avoid typing all of this again I'm just going to copy this I'm going to clear the chat then in the chat let's say I want to set up a meeting let's paste in all that information and let's switch back to make.com and we can already see that this process has completed and if we click on this little button up here
[21:56] above zo CR M we can see the input from our webbook and then the output from zoo with the state approved now if we go back to Zoho CRM and refresh this we should see our lead which we do excellent now that this is working all we have to do is toggle this switch to on and now m.com is constantly listening for calls from flow wise and we can test this again by going back to flow wise
[22:27] let's clear this chck then let's say please schedule a meeting then let's send this information I'll just change the name to John do then let's send this so we've got our response back let's go back to CRM let's refresh this and now we can see that lead in our lead system as well so now we have an assistant that's able to answer questions from a knowledge base and capture leads and all that's left now is to add this assistant
[22:58] to our website and for this example we'll have a look at adding this assistant to a WordPress website I've already created a video on adding these chatbots to HTML websites but most of you seem to be using Wordpress or similar CMS Solutions in order to add flow wise chatbots to a website all you have to do is click on API endpoints and from here you can see several solutions for calling these chat Bots from your
[23:28] applications this embed API allows us to add that little chat bubble to our websites and here we can see solutions for displaying the bubble or displaying the chatbot as a full page chat window we also have solutions for react and full page react alternatively if you want to call this chatbot as an API endpoint you can also see solutions for calling it from python or JavaScript if you are using these API endpoints I highly recommend setting a betterer
[24:00] token or API key but for what we will be doing that's not necessary what we are interested in though is this configuration option over here and from configuration we can set the rate limits rate limiting will prevent users from spamming our chat Bots and driving up costs so as an example let's say that within 60 seconds we will only allow up to 20 messages to be received we can also set the message that will be displayed if these limits are reached
[24:32] like rate limit reached try again in a few seconds let's save this now let's go back to this embed Tab and what we are interested in is this code over here now this code can simply be added just below the body tag of our websites but if you are using tools like WordPress then the process of getting this code into your pages is is slightly different so I've created a demo WordPress website for us
[25:02] and what I'll do here is go to the admin section of this website and let's then go to plugins and here we need to install a plug-in so let's click on add new plugin then the plugin that we are interested in is called WP code so go ahead and install this plug-in and activate this plug-in as well after installing this plug-in go to code Snippets then from code Snippets click on add new then click on add your custom
[25:33] code and then let's copy this code from flow wise and simply paste it into the code preview then scrolling down for the insert method leave it on auto insert for the location change this to sitewide footer like so for the device type selected device that this chat bubble should display on I'll just leave it on any device and then then click on Save snippet and lastly change this from inactive to active and click on update
[26:05] now when we go back to our website we will now see that chat bubble on the site and we can start interacting with our assistant Let's test it by sending hello there and we are getting a response back let's ask a question from the knowledge base like what services do you sell fantastic so we got a response back from the knowledge base now let's go ahead and set up an appointment let's schedule an appointment let's provide this information
[26:36] like my name is Ben over phone is 0111 2 3 1 2 3 4 business is testing and email is test at ben.com and let's send this and let's go ahead to our CRM system let's refresh this and there we go our lead was captured successfully