Steps to build a fully white-label AI chatbot using RAG-based conversational AI, STT/TTS, and a low-code JavaScript widget. build a custom ai chatbot agent I’ve been experimenting with AI chatbots for a while now. I noted the problem with most them, all the time: they confidently say or do something completely wrong. One of the AI based chatbots I tested did this: Me: “I want to talk to a human.” Bot: “ Sure! Please explain your problem.” I explained the delay in my order. Bot: “Thanks! Based on your problem, here’s an article.” And another one responded this way: Me: My laptop is freezing Bot : I’m sorry to hear that. Please place your laptop somewhere warmer. Do you need me to suggest the best-selling warmers under your budget? While all of these sound funny when testing, a customer who really needs help might not see this the same way. The frustration might lead to loss of business. That’s when I started looking into RAG-based chatbots. RAG, or Retrieval-Augmented Generation, means your bot doesn’t just rely only on the system prompts or confined knowledge bases. You can train the chatbot on your own data. This generative AI chatbot goes around multiple data sources to fetch relevant information and provide the most accurate response possible. So instead of making something up, it gets the right information and responds to your customer, understanding and analysing their intent, tone and mood. I built one such generative AI bot recently. In this post , I’m walking you through exactly how I set it up so you can do the same without the trial and error I went through. Part I: Agent Creation 1. Creating the AI chat agent The first thing we’ll need to start with this project is access to the AI dashboard. Since we are creating this agent with MirrorFly , connect with the team, discuss your project requirements and get access to the dashboard. create a white label ai chatbot agent Log in with your credentials and click the ‘ Create Agent ’ button on your dashboard. You will see 3 different options as a popup: Chat Agent, Voice Agent and Task Agent build a customizabel ai chatbot agent Click on the ‘ Continue ’ button. This will open a form. Here, you can enter your chat agent’s details. Add the agent’s name, description , and system prompt (guardrails). You can also upload the dataset, choose a language, add an avatar, and write the opening message . create a custom ai chatbot agent 2. Setting up the Personality & Agent Model Once your agent is created, you can start setting up its personality and model settings. Set the welcome message that your agent uses to start the conversation with. Next, define the fallback response. Your agent will show this message when it does not have an accurate or relevant answer. Pick the formality level and tone for your agent. Select an AI model from the list of OpenAI or Anthropic agents. Finally, create an SDK key to begin integrating your agent to your app. 3. Agent Training To make sure your agent responds with the most accurate answers, you’ll need to start training your agent. You can do this by adding details about your product or service. Collect all the information about your business and convert it into PDF, CSV or TXT. To start uploading, Go to Datasets. Click Import from file. Upload the file from your local device. You can also add data directly from your business website. Click the Sync from website button. Enter the URL you want to sync data from. Instead of relying only on generic AI responses, the chatbot uses your uploaded knowledge base. This keeps the chatbot accurate and up to date, hallucinating less. Also, this removes the need for manual updates. Build Advanced Voice AI Agents 4. Workflow Builder Go to the Workflows tab. This is where you’ll set up how your agent interacts with users. Before working on this, have a clear idea of what exactly your AI chatbot will do. Set up the conversational flow accordingly. Then, add the decision logic that will guide your agent on how to respond to your customer. Add forms to collect user information. Set up email triggers to send notifications or follow-ups. Finally, include message nodes. These control what the agent says at different stages of the conversation. 5. Connect Custom Tools Go to the Custom Tools section. Here, you can connect external services to your agent. Set up a Webhook to enable your agent to send and receive real-time data from third-party apps. You can also give your agent access to external tools you use by connecting an MCP Server. How to Build an AI Agent without Coding By the end of this step, your chat agent set up is complete. Part II: Integrating the Agent Into Your Website What you’ll need? Your Agent ID. A website that runs on HTTPS. Microphone access. The latest version of supported browsers: Google Chrome, Microsoft Edge, or Safari. 1. Install the SDK Copy the script below. Add it to your HTML file. <script src="https://d1nzh49hhug3.cloudfront.net/aiVoiceScript/uat/mirrofly/mirror-fly-ai.v1.1.1.js"></script> 2. Initialize the Agent Next, initialize the SDK using your configuration settings. // HTML Container <div id="widget"></div> // Initialization MirrorFlyAi.init({ container: "#widget", agentId: "<YOUR_AGENT_ID>", title: "Voice Assistant", theme: "dark", triggerStartCall: true, transcriptionEnable: true, transcriptionInUi: true, chatEnable: true, agentConnectionTimeout: 500 }); This step will connect your agent to your app’s interface. Apart from this, it also enables features like voice calls, chat, and transcription. 3. Handle Callbacks Using the code below, you can monitor the connection status of your agent. You can also capture transcriptions and errors. const callbacks = { onTranscription: (data) => console.log("Transcription:", data), onAgentConnectionState: (state) => console.log("Connection:", state), onError: (error) => console.error("SDK Error:", error) }; 4. Dynamic Agent Switching If you use multiple agents, you can switch between them dynamically. Use the function below to load a different agent. function switchAgent(newAgentId) { MirrorFlyAi.destroy(); document.querySelector("#widget").innerHTML = ""; MirrorFlyAi.init({ container: "#widget", agentId: newAgentId, triggerStartCall: true }); } This removes the current agent. Then it initializes the new one right away. And that’s it. Your AI chatbot is now ready! Parting Thoughts When my RAG chatbot went live, I was confident my AI agent would hallucinate less and provide specific, accurate and knowledgeable responses as much as possible. I just connected my website URL, and the bot pulled fresh information automatically. I didn’t have to do anything manually. I hope this article helps you build your AI-enabled chatbot faster and better. Got questions? Post them below. I’ll try to respond as quickly as possible. Reference Websites https://github.com/MirrorFly/White-Label-AI-Chatbot https://www.youtube.com/watch?v=fI0qy0lnAWQ https://www.mirrorfly.com/blog/how-to-build-a-custom-ai-chatbot/ A message from our Founder Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community. Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. If you want to show some love, please take a moment to follow me on LinkedIn , TikTok , Instagram . You can also subscribe to our weekly newsletter . And before you go, don’t forget to clap and follow the writer️! How To Create A Custom AI Chatbot, Train & Deploy It In 48 Hrs was originally published in Artificial Intelligence in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.