How I built my first AI agent "Miai" with n8n workflow and implemented it into wordpress website with elementor

Posted by Monirul on

Introduction

Meet Miai — my first AI agent, built completely from scratch using n8n, OpenAI (Trialed with Local Ollama - Free and Open-Source) , and WordPress Elementor.
As a tech enthusiast who loves experimenting with automation and AI, I wanted to create something meaningful — a smart website assistant that could answer questions, assist visitors, and collect leads automatically. This is just kick start, but I learnt a lot to go beyond.

Instead of using costly chatbot platforms, I went with a self-hosted n8n workflow, connected it to OpenAI, and designed the interface directly inside my WordPress website built with Elementor.



Here’s exactly how I built Miai step by step:

Step 1: Defining Miai’s Role

Before building Miai, I started by defining her core purpose:

  • Help visitors find information from my site’s FAQ or knowledge base.

  • Collect the visitor’s name and email before conversation starts.

  • Check and update data in Google Sheets for leads.

  • Respond naturally using OpenAI’s conversational abilities.

This structure made Miai both functional and user-friendly — acting like a smart digital receptionist for my website.

For testing purpose - I discontinue and disabled it from the project, but this is important and is a good practice.


Step 2: Building the Workflow in n8n

n8n became Miai’s “brain” — the system that handled all the backend logic.

Here’s how her workflow looked in simple terms:

  1. Webhook Node – Receives chat messages from the website (Miai’s inbox). n8n Workflow JSON codes are free to use from the Webhook Node GitHub link.

  2. Google Sheets Node – Checks if the visitor already exists in the database.

  3. Qdrant or Text Vector Node – Searches relevant FAQ or contextual answers.

  4. AI Node – Processes the prompt and generates a natural response. Including (Chat Model & Simple Memory). n8n Workflow JSON codes are free to use from the AI Agent Node GitHub link.

  5. JavaScript Code Node  – By this JS code node, I am sending and converting the JSON markdown code to plaintext, singlelinetext, html forted data to avoid parsing error in the HTML widget. n8n Workflow JSON codes are free to use from the JavaScript Code Node GitHub link.

  6. Webhook Response Node – Sends the reply back to the user through the website chat interface. n8n Workflow JSON codes are free to use from the Webhook Response Node GitHub link.

Step 3: Designing Miai’s Chat Interface in Elementor

With the backend ready, I moved on to giving Miai a “face” — a chat box embedded on my WordPress site using Elementor.

I added a Custom HTML widget with the following structure: Custom HTML, CSS, & JavaScript code can be use for free from the GitHub link.

Step 4: Connecting Everything in WordPress

The integration was surprisingly easy.
I simply:

  • Placed the chat widget inside Elementor’s Custom HTML block.

  • Linked it to my n8n webhook URL.

  • Tested the input and output flow — and Miai replied instantly!

For advanced users, you can enhance this by:

  • Adding message timestamps or animations.

  • Storing conversation logs in Google Sheets.

  • Securing your webhook using n8n’s authentication options.

Step 5: Training and Fine-Tuning Miai

To make Miai truly useful, I connected her to a FAQ knowledge base stored in a Qdrant vector database.
This allowed Miai to retrieve the most relevant answers before passing the prompt to OpenAI — creating more accurate, contextual responses.

Miai’s conversational flow looked like this:

  1. Ask for name → “Hi! I’m Miai. May I know your name and email?”

  2. Search FAQ → “Let me check what I found about that.”

  3. Generate smart response → “Here’s what I can tell you…”

  4. End with a call-to-action → “Would you like me to send more details to your email?”

This gave Miai both a professional tone and a personal touch.

Skipped for the beta, but will add and work with final project.

Final Results

After testing and refining, I finally had a fully functional AI agent — Miai — running smoothly on my website.

Miai can now:

  • Chat with visitors in real-time

  • Retrieve information from my database

  • Save new leads in Google Sheets

  • Respond naturally using AI

  • Work seamlessly within WordPress + Elementor

All of this — built with no complex coding, just creativity, logic, and n8n’s powerful automation tools.

Tools & Stack Used

ToolPurpose
🧩 n8nWorkflow automation engine
💬 AI APIAI conversation generation
📊 Google SheetsLead storage and lookup
🧠 QdrantVector database for FAQ retrieval
🌐 WordPress + ElementorFrontend design and embedding
💻 HTML + JavaScriptCustom chat interface


Lessons Learned

  • Give your AI agent a name and personality — it makes the experience more human.

  • n8n’s visual workflow builder saves tons of time versus manual coding.

  • Embedding a custom chat interface in Elementor is easier than it looks.

  • Always log requests in n8n to debug data flow efficiently.


Final thoughts

I didn't explain everything with details, but uploaded all the original JSON, HTML, CSS, JAVASCRIPT codes in the Github repository for everyone to use. If anyone needs help and guidance - feel free to contact with me. I will try my level best to help.

Thanks in advance!

Nothing Special - But give a try!

miai




Comments

Post a Comment