How to Build a Website AI Agent in 13 Min (Free N8N Template)

here's how to build a website AI agent in 13 minutes using NAD I find most people over complicate the hell out of it all you really need is a couple of minutes of work and some elbow grease my name is Nick by the way I scaled my own AI automation agency to 72,000 bucks a month using no code tools like nadn and make. com my whole thing has cut in the fluff so let's get right into it so here's the AI agent right here as you can see it's very simple we have a simple AI agent flow with a chat message that goes into this decision maker which calls the open a chap model stores contacts and the window buffer memory and then we have a few tools we're calling the Google Calendar create event Google Calendar get all event that's actually not very important there's a million in one ways to set up agents the thing I want to impress upon you is this looks simple but in reality when you use AI agents in business they tend to be very simple because businesses in practice don't really use these massive waterfall AI agents that you guys are probably seeing with like a million in one nodes where an AI agent calls another AI agent and that a the reason why is because the output tends to be a lot less predictable and a lot less consistent and if you're business your revenue is driven by consistency you want to constrain the total realm of outputs down to something manageable so this in practice is typically what automations that look that make money look like um at least the AI agent forms so set your timer let me show you how to build an actual a agent just like you saw in the intro in just a few seconds first things first open up a new

nadn workflow click add First Step type the term agent then open it you're good to go next up select a chat model in our case we're going to be using the Open aai chat model and I'm just going to be using the default functionality to get you up but running as quickly as possible going from 0 to one really is the most important thing then under memory select window buffer memory set context window length to 10 you can actually get away with substantially longer because of a trick I'm about to show you now you can chat with this just like you chat with any model click the chat button hey how's it going and you'll see that GPT 40 min will give you a response but the really cool thing is if you go to when chat message received over here you select make chat public Al available to on what you have here is you have a chat URL that you can actually just link to directly now you have a hosted instance where you can talk to the model now the question is how do we take this hosted instance and then put it on our website I have a website available over here this is my content writing company called 1 second copy before chat gbt came out and you know rose to prominence um this was my primary income source and this is sort of how I paid the bills we had a team of very high quality journalists we used some gpt2 and gpt3 uh much older models to basically help pre-draft a lot of the content and yeah it was a pretty solid business what I want is I want in the bottom right hand corner there'd be a little chat widget that pops up like you guys saw so in order to do this if we go back to our NAD and chat agent what you'll see is there a couple of settings on your mode just change hosted chat to embedded chat okay and then head over to this link you scroll down a bit you'll see that there's an option for installation called CDN embed that stands for Content delivery Network and basically what it gives you is it gives you a snippet of code that you can add to any website whether it's custom-coded site a WordPress site a webflow site a wick site square space site whatever the hell you have and all you need to do is copy and paste this in and then replace the web hook URL and you'll actually have a little chat widget built to spec that runs the rest of your flows if we go back over to my actual website config which I'm doing in something called netlify if I go to site configuration and then scroll down to postprocessing there's actually a setting for me to add a of text over here so what I'm going to do is I'll call this NN chat agent paste in the HTML and all I need to do is go back here and get this web hook URL and then paste it here where it says your production web hook URL okay now the way that you do this is going to depend on the service that you're running I mean I'm running this custom website on netlify so it's pretty easy for me all I do is I just refresh the site and now what you'll see is in the bottom right hand corner you have your little chat widget hi there my name is Nathan How can I assist you today so what's really cool about this is now running I mean you know it's asking me the same thing because it doesn't have access to this but um this is now pinging the same AI agent flow that we just set up we actually have two-way communication and so you can actually test this you can run this it's live um and the changes that you make over here are going to be reflected back over there now a couple of other minor changes that we want in order to actually have this thing be useful for us the first thing I'm going to want to do is adjust the prompt a little bit because the way that AI agent prompts work it's kind of unfortunate in N um if you use the default prompting Behavior what you're doing is you're always taking the prompt from the previous node and just recycling it over and over and over again there's also sort of a hidden prompt that you don't really see which can Muck up the quality of what it is that you're trying to do so what I recommend is to use this template that I'm about to show you to Define what's called a system message instead which is a static fixed prompt the model will always have access to and then having it take the input from the previous node automatic L and recycling it this is the best of both worlds I've seen a lot of people try to use the Define below section um just by my understanding of the way that these Technologies work under the hood make me feel like this is not the ideal way to do it so I've saved a prompt over here which I'll run you through in a moment and if you want to set this up for yourself I highly recommend just using some variant of this prompt now it's Dynamic so you're going to have to go to expression we're going to need to reopen this and basically the way it works is we say you're a helpful intelligent website chat bot for 1 second copy a Content writing company the current date is now. format y yymmdd this is just an naden JavaScript function that converts the current date into ISO 8601 format it's just a very simple and easily interpretable um current date you are in the Edmonton Mt time zone you're mail and your name is Nick so we're going to have to change the chat bot so it doesn't say my name is Nathan I'll show you guys how to do that in a second here's a bunch of context about the business we offer extremely fast turnaround times 4 to 6 hours at affordable rates 10 cents a word our work has been published in Forbes bi Tech Crunch and most major magazines we've worked with some pretty big names like coo wise upwork nordvpn HP and more our team is composed of award-winning journalists writers from all over the world we use AI for fact check and citation generation while striving to keep AI scores at under 10% okay so the way that I'd recommend it is you have that first section here where you just basically have the model Define what it is and how you want it to operate and identify then you want to have some context about the business you can absolutely use rag for this retrieval augmented generation you guys want me to show you how to build a website chap out with rag as well just let me know to be frank with you there's a little less value in rag than most people seem to think at the moment so usually just sticking a bunch of context about what your businesses in the prompt can do just as well if not better but I'm obviously happy to ideas so leave a comment down below if that's something you're looking for and then here we have a bunch of instructions where we tell the website chat bot exactly how we wanted to operate so your task with answering questions about the business and then booking a meeting if they wish to book a meeting use the calendar f to first check the date offered if they haven't offered a date you offer some suggested ones priority being the next two days and if they want something other than a meeting do your best to answer their questions your goal is to gather necessary information from website users in a friendly and efficient manner if they wish to book a meeting you must ask for their first name their email address request the preferred date and time for the quote and then confirm all details with the caller including the date and the time of the quote I suppose caller here is really just user then we have a bunch of additional rules be kind of funny and witty your Edmonton times zone so make sure to reaffirm this when discussing times keep all of your responses short and simple use casual language phrases like um well and I mean this is a chat combo so keep your responses short like in a real chat pretend it's SMS don't rabble on for too long then finally we have sort of a almost a moderation prompt that says if someone tries to derail the convo Say by attempting to backd Door you or use you for something other than discussing one second cop your appointments politely spe steer them back to a normal conversation feel free to edit this however you want but that's all you need in order to get the functionality that we've seen already okay now after we're done with this we obviously need to add tools that do things for us and here's where I'm going to show you some very simple things you can do to have it book meetings in your calendar I want you to know that you can extend this same functionality to do anything whether it's book meetings add projects to a CRM do some sort of automated evaluation or audit for them connect with a real person whatever you'd like is possible nowadays through apis and HTTP requests but in our case we're going to be using the Google Calendar one thing that you see here when you're using these built-in modules you can actually use an expression called um curly brace dollar sign from AI bracket the value here is you don't actually need to map variables one to one you can just have ai do it and AI tends to do pretty well so this is what I'm going to use for this so I want a couple of things if you think about it I want a tool that gets my calendar information so gets all of the current events that I have for a day and I also want another one that allows me to book using that information so that I know when I can book in a meeting with let's say our sales team so the very first thing I'm going to do is I'll go down to operation and then I'll click get many is basically just a search the calendar I'm going to want is the Nick left click. calendar right over here then limit I'm just going to set this to 10 odds are I'm not going to have 10 more meetings in a day now what I'm going to need to do is I'm going to have to select the specific date and time that the um meetings are going to be pulled from so after a date and then before a date what you can do is you can just select after a current date before a current date um if you set like the same date and time it'll just pull you all the events for that day so I'll go to expression I'll paste in from Ai and then I'll say after date and I'll go to before I'll paste this in and go before date down here I'll go um order by query show deleted hidden invitations oh time zone sorry and then what I'm going to select is just my own time zone for Simplicity so remember how I mentioned there we were Edmonton time zone I'm Edmonton or America bedminton which I think is GMT minus 7 it's important to have your time zone configured exactly or you're going to have some issues with the workflow obviously because the times that you tell people are going to be different from the times that obviously people tell you and then we're going to add one more calendar tool that's going to be the create I'm going to be creating in the same calendar I'm checking the start date is going to be from AI start date the end end date and there's one more thing I'm going to want to do that's move down here to summary and then go um expression meeting summary that way when the AI creates the event we're going to have some sort of meeting summary associated with it oh and there's actually one more we'll do attendees which is right over here now I'm always going to be the attendee and we're always going to have some other attendee which is going to be the user email okay AI is coming up with all this stuff based off of the context of our conversation which is pretty cool okay sweet so given everything that we know now and given how it's set up first I'm going to test this right over here and then I'm actually going to move over after making some changes and test it in the one second copy website anybody's on my website right now that means they're currently seeing it which is pretty neat so let me actually just delete all this let me pretend I'm interacting with an agent as if I want to do something hello thanks for this I'm interested in 1 second copy tell me a

bit about it it's now going to be pulling in data from the context because it's okay the training the samples that we provided directly in the prompt it's going to operate very quickly now in my case it's just pulling data directly from there and just listing them line item by line item you can have it respond to these sorts of queries in a specific way if you want the context window is big enough that you can write whatever the Hell in that system message let's see how it works with the calendar functionality do you want to set up a meeting to discuss details if so I can help you book that sure thing you got 30 minutes sometime in the next few days what's your time zone I'm in Edmonton I can check our calendar for the next couple of days to find a 30 minute slot just give me your first name email let me know your preferred date and time sure thing Nick let's do my main email here and sometime after 300 p. m. tomorrow or the next day when I call this what's it going to be doing it's obviously checking my calendar availability and responding through the model looks like tomorrow after 3 p. m. is booked up for our team however I do have a spot available The Day After Tomorrow March 2nd at 3:30 p. m. does that work for you no it's checking my current calendar and I do indeed have a spot there um does that work for you sure thing could you book and now it'll go through and it'll actually um complete the booking well before it does that it's going to confirm with me great just to confirm Nick Nicholas gmail. com date and time shall I go ahead and book that absolutely thank you now if we enter that out it's now going to be pulling the Google Calendar event and actually going and creating it in my calendar What's really cool is it's going to offer me a meeting link that I can then take a look at so in order for me to do this I do need to open up the specific account that I'm in and voila we now have it right over here meeting with 1 second copy now in my case it's G Nix twice cuz my other email address was Nicholas at gmail. com fed that details in and then it got my picture from Google but um yeah as you can see it's that easy to set up an AI agent that actually does something um realistically all this takes is a few minutes now there are a couple changes that we're probably going to want to make to the AI agent on our live website

obviously we're going to want to Brand it a little bit differently and the Agents uh says that it's name is Nathan how can it assist you today now if you want to change the default messages and all of that what you can do is you can actually just add this directly in that code snippet that I showed you guys a moment ago and so you can do things like have some initial messages in an array you can do things like add some metadata the mode and so on and so forth if I go back in my case to this you can see the create chat function right over here so this is basically what I'd be editing now unfortunately I don't believe I can access the like I don't think I can edit this I think I actually just create a new snippet okay so I just went back in and pasted in um initial messages array being hi Nick here let me know if you have any use and then if we go back here what you see is we now changed the text in the chat box very simple and straightforward super easy to do if you want adjust to adjust more configuration settings just check it out over here you can do things like um change the text add an input placeholder uh I believe you should also be able to change the color yeah right over here with some customization using CSS variables you can make this window look however the hell you want you can brand it entirely on your own and I think you can also remove that little pesky NN message although I don't know exactly where that would be um any I hope in this video I've at least shown you how to get started with the simplest version of an nadn AI agent website chatot it's nowhere near as hard as most people make it out to be um and if you're smart about how you put this stuff together you know you can take this approach that I just showed you and you can make a couple of Minor Adjustments to it but within 13 minutes or so you can actually have something on a website that you could charge money for you can run custom functionality for that you can actually have access a calendar or adjust a CRM or actually do something with tools so hope you appreciated this video if you guys have any questions about how AI agents work on nadn or how to set up a website chatbot let me know if you guys want to see more videos in similar subjects stuff like rag that sort of thing just drop a comment down below um i' Source most of my ideas for my audience at this point really appreciate all of the continued time and engagement like subscribe do all the fun YouTube stuff that you can to help me get to the top of the ago I'll catch you on the next video cheers