DIY: Portfolio Q&A Chatbot using n8n

-

I recently built a Q&A chatbot for my portfolio website using n8n and hosted it on Google Cloud Platform (GCP), so I thought it would be interesting story to share. It covers a simple use case, where visitor of my website could ask the chatbot anything about my work experience.

Here are some pre-requisites that you should learn or do before building workflow using n8n:

  1. Basic server-client knowledge
  2. Basic JSON knowledge
  3. Get yourself Gemini or Claude API key
  4. Install n8n, either locally or host it somewhere (*)

The Q&A chatbot workflow has several nodes (of course you can add / remove whatever nodes to suit your needs) and in my project, it looks like this:



I'll explain a little bit about the node one by one:

  • Webhook node. This one is used to listen to the request that is coming from the client. In this case, the questions coming from the visitor of my website. 



  • Read and parsing HTML node, used to read the content of my portfolio website and parse my it into readable text that can be feed to AI as base context.



  • AI node, which can be whatever AI that you prefer. I used Gemini, simply because I want to have the billing centralised since I already hosted my n8n in GCP. In this node, I send a prompt to ask AI to answer visitor's question based on the my work experience that I parse from previous node.  
    • Ping me if you want to know what is the prompt that I use.


  • Last, respond to Webhook node, used to return any answer from the AI. It will return in JSON format, so make sure your client could parse the response.



That's it. Hopefully this would also help you setting up your own Chatbot using n8n.

Popular posts from this blog

Understanding Customer's Jobs, Pains, and Gains

-
Image
As a product manager, you need to become an expert of customers and you can only do this by fully understanding their jobs, pains, and gains.  Understanding the customer will help a product manager, not only in writing a better user story but also to influence or even create a buy-in from stakeholders. Creating a customer profile is pretty similar with user persona. Customer profile has 3 key components: job or things that user wants to accomplish,  pain or any obstacle that hinder user from accomplishing her job,  and gain or outcome or benefit that user want after accomplished her job and this may include emotional gain. So whenever we're writing requirements in PRD or  JIRA  ticket, do remember to also write the gains and pains , even before writing the  jobs  or acceptance criteria. This will help the product team to understand what exactly our customer goals and pain points before creating or thinking the solution. “Successful problem solving re...
Read more

Product Manager and Project Manager

-
Image
Both product manager and project manager are important roles in any organization especially in technology-backed organization. Product managers focus on developing and executing a long-term strategy for a product, ensuring it meets customer needs and stays ahead of competitors. Project managers, on the other hand, oversee a project from start to finish, ensuring it's delivered on time, within budget, and to the required quality standards. Another difference is who they work with. Product managers talk to a lot of people, not only customers, engineering, and design teams but also executives , sales, marketing , finance and even legal . They need to make sure everyone is on the same page and working towards the same goal. While project managers primarily work with the project team, stakeholders, and customers to make sure the project is delivered successfully. Both positions require different skill sets and approaches, and while some aspects may overlap, they require different persp...
Read more

Watermark using Canvas & Javascript

-
Image
Just found out that we can actually add a watermark to any image using HTML <canvas>   & Javascript.  This should be a piece of cake if you're familiar with HTML and Javascript So how do we do it? 1st create a  <canvas>  element in your HTML file <canvas id="myCanvas">Your browser doesn't support canvas</canvas> Then use Javascript to load image into the canvas var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); After that you can add the watermark using this script ctx.font = "30px Arial"; ctx.fillText("watermark", 10, 10); Now if you check browser, you'll find the image is watermarked by a text that we put in the Javascript code Result References https://www.w3schools.com/graphics/canvas_images.asp https://www.w3schools.com/graphics/canvas_text.asp
Read more