Integrating an AI agent into your website

- We have seen how to build a customer support AI agent in n8n, but it's time to actually add it to our online store, which we have built on Lovable. Now this is going to be a simple process now that we understand how everything is working. So, I close the chat, we will remove this workflow, or we can keep this aside. Now we are going to focus on the main workflow, which is this one in the middle, right here. Now this one has got Webhook instead of a chat trigger node. Now this webhook URL is how we are going to connect this to our online store. Now, how have I built this Lovable store? This is the prompt that I've used, "Create a white and beige theme online store website "for a coffee brand called Stargazers Coffee. "Add a hero section, "then add a product catalog with cold brew," and then I specified flavors. Hot brew, similar thing with flavors. And under the hero section you add the product catalog, and that's what we have. This is the product catalog and I've asked it to generate some placeholder images for our brand. That's it. This is the entire prompt, it took two to three minutes and it spun up this really elegant-looking online store for us. Now, I want to add a customer support AI agent such that the visitors on my store can ask questions right there on the website itself. For that, I need to add a customer support floating icon, the chatbot icon at the bottom right corner of this website. And clicking on that chatbot, users will be able to send messages and chat with our support agent, which is built on n8n. So that is how I want to build this connection. First of all, we'll add this support icon onto our website. For that, the prompt is something like this, "Add a customer support bot called Kelly," I'm just giving it a name, "which should be "a floating icon "at the right bottom corner "fixed to the page. "Users should be able to click "on this bot icon and it should open up a chat "with a complementing theme to our website, "and they will be able "to send inquiries "and chat with our bot." This is the first part of the prompt. Then, "All user messages "are going to send a POST request "to this webhook URL." And this is where I need to go back to my n8n agent and copy this test URL. You can see, HTTP method is POST, path, this is going to be generated by n8n automatically. If you want to change, you can do it yourself. "Respond," if you click on this dropdown, earlier in the previous use case, we had "immediately" because we did not want to change anything. We did not have any other... way of outputting the content of our lead management workflow. It was just ending at sending an email, that's it. In this case, I want to send a response to the customers who are asking questions in that chat. So I'm using, "Using 'Respond to Webhook' Node." And if you click on the nodes panel, you can actually search for this node right here. So the output of this customer support AI agent is going into this "Respond to Webhook" node. You can see this is the one. I'll delete it for now. This is already set up, so all we need to do is copy the test URL, and here, I'm going to paste that URL. This is done. And lastly, I'll say, "This will receive "a response from the same webhook, "so wait for the response, "parse the markdown text response," because most of the large language models, they return the output in markdown, so we want that output to look elegant in the chat, "And display it nicely in the chat." That's my prompt. This is the complete prompt. Let's hit enter. It'll take like one minute and will add that customer support bot, that chatbot, right here, at the bottom right corner of our online store. All right, so you can see now we have the customer support bot added at the bottom right corner. This is a nice-looking chatbot that we have right here. One thing that we have not yet added is the session ID that we have here. This session ID is going to come from Webhook. Earlier it was the n8n chat message, but this time it should come from the Lovable chatbot. We are going to ask Lovable to, "Add a session ID... "to the chat... "such that we are able to preserve... "context of the conversation chatbot." So this is going to pass on that unique session ID and the AI agent then, in the Simple Memory, would receive that session ID and it will store all the previous interactions. And once that is done, then we'll test our chatbot. All right, so this is done. You can quickly refresh the page. Now, in order to test it, I'm going to click on the chatbot. And from here I'm going to click on "Execute Workflow." Clicking on this, the webhook will start listening, and then when I'll send the message from my chatbot, the workflow will get triggered. So "Execute Workflow," and I'll say, let's say, "What is the return policy?" Hit enter, we come back here, you can see the workflow running. Great. So it is now preparing the response and I should have the response right here. So you can see that we have got the complete response in our chatbot. So this is working really well. We have now connected our n8n workflow with our online store. This is pretty amazing. Now I can think of any automation service and I can put an interface on top of it using Lovable. Up until now, I've had to click on this "Execute Workflow" to test this n8n agent and the connection. Once you are clear that this is working for you, the last step is to turn this workflow into active mode, and you're going to double-click on "Webhook" and you'll go to "Production URL." So you'll now use Production URL, so copy this, and all you have to do is go to your Lovable website and you can say, "Configure the chatbot to send requests "to this production... "webhook URL now." That's it. So now this is in production. Anytime anybody asks questions on this chatbot, it will automatically start working, and all the executions you will be able to see in the "Workflow Execution" tab. So here, you'll be able to see all the workflows, all the executions, how many customers, and what type of questions they are asking. So this is all about connecting your n8n workflows, your automation services, with your vibe coded Lovable applications. That opens up the doors for so many different ideas, so many business ideas that can come to life within a couple of minutes. And that's what you have learned.