DEV Community: Shyam Vijay

I Built a Custom AI Chatbot Using a JS Widget – Here's a Quick Walkthrough

Shyam Vijay — Thu, 12 Mar 2026 08:22:37 +0000

Learn how to build AI chatbot for websites in 48 hours

For over 5 months, I’ve been thinking about building an AI chatbot for my website.

I added Noupe once. It was fun and worked well. But in a week I had some amazing ideas to customize the features further for my business. Unfortunately, the features I was looking for were locked behind the enterprise plans.

And then in over a month, I met one of my old acquaintances. We discussed this project and he shared his idea on building chatbots with JS widgets.

He used Sendbird. I felt it was a bit pricey for my business currently.

So I made a list and condensed it to two options: MirrorFly and Vapi. Since I wanted an on-prem solution for the next few years, I picked MirrorFly after reading their guide on how to build a custom AI chatbot.

The setup was simple and quick (completed the entire dev in 43 hours). I felt it would be helpful for other developers who have a similar idea and mine and so I made this chatbot tutorial.

In this guide, I’m sharing the exact steps I followed. You can replicate it or make changes as per your requirements.

Part I: Agent Creation

1. Setting up your agent

To get started with this project, you will need access to MirrorFly’s AI agent dashboard. Contact the team, discuss your requirements and get your credentials.

Once you get the credentials, log in to the dashboard.

Inside the dashboard, click the 'Create Agent' button. A popup will appear with 3 different options: Chatbot, Voice Agent and Task Agent. Select 'Task Agent'.

Click on 'Continue'. This will open a form to collect your chat agent’s name, description, system prompt (guardrails), dataset, agent avatar, language, dataset and the opening message.

2. Setting up the Personality & Agent Model

Once you create the AI chatbot,

Set the welcome message that the agent will start the conversation with.
Next, set the fallback response - the message which the agent will respond with when the agent does not have an accurate/ relevant response.
Pick a Formality: Casual, neutral or formal
Choose a tone: Personable, confident, empathetic, engaging, witty or direct.
Select an AI model - one from OpenAI or Anthropic
Create an SDK key to start the integration process.

3. Agent Training

Prepare a knowledge base of your product or service details in PDF, CSV or TXT format.
Navigate the Datasets
Click on ‘Import from file’.
Add the file from your local device.

Another option is adding the details from your website.

Click on the ‘Sync from website’ button.
Add the URL you want to sync the data from.

Since you are creating a RAG-based assistant, your chatbot will fetch data from this dataset rather than generic automated conversations.

Make sure you update the data periodically to keep the chatbot up-to-date. Other way around, syncing your website will help the chatbot fetch the latest information from your website, without having to manually update the information.

4. Workflow Builder

Go to the Workflows tab and set up how your agent talks to users:

Define the conversation flow and decision logic.
Add API calls and forms to collect user data.
Set up email triggers and message nodes.

5. Connect Custom Tools

Go to the Custom Tools section to connect external services to your agent:

Set up a Webhook to send and receive real-time data from third-party apps.
Connect an MCP Server to give your agent access to external tools and data sources.

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 from the dashboard.
Your website must run on HTTPS for microphone access.
Latest versions of Chrome, Edge, or Safari.

Supported Browsers: Latest versions of Chrome, Edge, and Safari.

1. Install the SDK

Copy the script below and add it to your HTML file.

<script src="https://d1nzh49hhug3.cloudfront.net/aiVoiceScript/uat/mirrorfly/mirror-fly-ai.v1.1.1.js"></script>

2. Initialize the Agent

Add a container element to your HTML and initialize the SDK with your 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
});

3. Handle Callbacks

Use callbacks to track the agent's connection status and capture transcriptions.

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're running multiple agents, use this function to switch between them on the fly.

function switchAgent(newAgentId){

  MirrorFlyAi.destroy();
  document.querySelector('#widget').innerHTML = "";

  MirrorFlyAi.init({
    container: "#widget",
    agentId: newAgentId,
    triggerStartCall: true
  });

}

And that's it!

Your AI chatbot is ready!

Over the past few months, I assumed the process of developing chatbots was some rocket science. But it turned out to be one of the most interesting and straightforward builds I’ve done recently.

I hope things turn out well with your chatbot ideas for you as well!

If you have questions about any of the steps or ran into something different in your setup, drop a comment below. Happy to help troubleshoot.

Reference

For the complete implementation and source code, check the official repository below:

https://github.com/MirrorFly/White-Label-AI-Chatbot

How To Integrate Video Calling Feature In React Native Apps

Shyam Vijay — Fri, 08 Aug 2025 10:04:25 +0000

A step-by-step guide on adding video calls to React Native apps

The goal of this guide is to demonstrate how to use React Native to build Android and iOS apps the easy way. In this step-by-step tutorial, we will use pre-built APIs and SDKs that can help build our app within a few minutes.

To get started, let’s first skim through the basics of why we are using React Native, while there are a bunch of languages and frameworks out there.

Why Choose React Native For Video Calling APIs?

Not just one or two, React Native have several good reasons why developers like using it to build their apps:

Works on Both iOS and Android: Want to build your app for both iPhone and Android? React Native makes it easier for you. You can write the code once and use it to build your app for both devices. And don’t worry about the look and performance. It feels similar and works the same way everywhere.

Build Faster: React Native is undoubtedly a great choice of framework if you need to develop apps at a faster rate. You need not worry about making mistakes. RN’s Hot Reloading helps you see the output without restarting your app. The less you reload, the more time you save in development.

Lower Costs: This is a good deal, Since you’re only building one app for two platforms, and you can develop it more quickly, the total cost of creating and maintaining the app is usually lower than doing two separate native apps.

Smooth Performance: When you build apps in React Native, it runs smoothly as if it is built directly for iOS or Android. This is because it uses real native components.

Extensive Communication Features: With React Native, you can easily add features like video calls, voice chats, and messaging using available APIs and SDKs. It works well for real-time video chat, especially with tools like WebRTC.

Secure and Compliant: React Native is a good choice if you prioritize security and privacy. It helps you easily achieve the critical privacy standards and encryption criteria that apps require.

Types of React Native Video Call Apps

React Native video call apps can be grouped based on what they’re mainly used for and the tech they rely on. Here’s a simple overview of the common types:

1. Basic Video Calling Apps

These apps are made for straightforward video chats either one-on-one or in small groups like the ones you use to talk to friends or coworkers.

They usually rely on services like MirrorFly or Apphitect, which handle the heavy lifting of sending audio and video in real time over the internet. These tools also help manage things like weak signals or dropped connections.

2. Live Streaming Apps

These are designed for broadcasting live video to big audiences, think social media livestreams or online events. They often come with extras like live comments, emojis, and viewer interaction.

Services like GetStream can help you add live streaming features into a React Native app easily.

3. Audio-First Apps with Optional Video

These apps focus mainly on voice conversations, but can include video if needed. They’re built for more organized discussions, with tools like speaker controls, hand-raising, and moderators kind of like online panels, podcasts, or talk shows.

4. Apps with Built-In Video Calling

Some apps aren’t about video calling at their core, but add it as a feature like a doctor’s appointment in a health app, customer support in an e-commerce app, or face-to-face chats in a dating app. This is when you can go for tools like MirrorFly, Sendbird, or CometChat that offer ready-to-use features for adding video and chat to these types of apps.

5. Specialized or Niche Apps

These are built for specific needs, for example, virtual classrooms with lesson tools, online conferences with breakout rooms, or work apps with screen sharing and whiteboards. They’re usually customized to fit what their users need most.

Must-Have Features When Developing a Video Calling App

If you’re building a video chat app in React Native, there are some key features you’ll want to include to make sure it’s easy to use, secure, and works well. Here’s a breakdown of the essentials, explained in simple terms:

Video Calling: Lets people have face-to-face conversations over the internet, either one-on-one or in groups, with smooth, high-quality video.
Screen Sharing: Allows someone to show what's on their screen to others in real-time during a video call.
WebRTC Technology: The behind-the-scenes tech that makes voice and video calls work quickly and smoothly right in your web browser or mobile app.
Voice Broadcasting: Useful for things like webinars, where one person needs to talk to a big group without interruptions or feedback.
Private and Group Chat: Lets users send instant messages to individuals or groups, either during a call or separately.
End-to-End Encryption: Protects conversations so that only the people in the chat or call can see or hear what’s being shared.
User Login and Permissions: Makes sure only the right people can sign in, access the app, or join calls.
Push Notifications: Sends alerts when there’s an incoming call, a missed call, or a new message.
Message Tracking: Lets users see if their messages were delivered and read in a chat.
Chatbots or AI Helpers: Can help automate things like joining a call, booking meetings, or answering common questions.
File and Media Sharing: Lets users send things like documents, images, or slides during or outside of calls.
Works on All Devices: The app runs smoothly on phones, tablets, and computers, no matter the platform.

How A Video Call Works In A React Native App

1. Caller Starts the Call

The person who wants to make the call taps a button in the app.
The app uses a tool called CallKeep to show the system’s calling screen (like a regular phone call).
The app also tells Firebase that a call has started.
Firebase then sends a VoIP push notification to the person being called to let their phone know a call is coming in.

2. Receiver Gets the Call

The person receiving the call sees a ringing screen pop up on their phone.
CallKeep is used again to show this incoming call screen.
If they choose to answer, they’re connected to a Call room, which is where the video/audio call actually happens.

3. Both Users Join the Call

After the receiver accepts, the app tells Firebase that the call has been answered.
The original caller is also connected to the same Call room.
Now, both users are in the same virtual space and can see and hear each other.

4. Ending the Call

If the receiver hangs up, the app tells CallKeep to close the call screen.
The receiver leaves the Call room.
Firebase is updated when the call ends, and it sends a regular push notification (not VoIP) to the caller’s device.
The caller’s app then ends the call on their end too and disconnects from the Call room.

💡 Quick Tips for Developers

Keep UUIDs Consistent
Every call gets its own unique ID (called a UUID). That same ID should be used throughout the entire call process. Only create a new one if it's a brand-new call.
Only One VoIP Push Per Call
When starting a call, send just one VoIP push notification to the receiver. Do not send one to end the call. Use a regular push notification instead. Apple enforces this strictly.
Always Report Calls to CallKeep
Whenever your app receives a VoIP push, report the incoming call using CallKeep. When the call ends, report that too using the same UUID.
Ask for Permissions
Before the call starts, your app needs to ask users for permission to use the camera and microphone.
Listen for Events
Your app should listen for important events such as:
- Incoming push notifications
- When the user answers or ends the call
- Other call-related actions

Once these events have occurred, remove the listeners so they are not left running in the background.

Handle Tricky Situations

If the person being called is already on another call, use checkIfBusy() to notify the caller.
You can place calls on hold using setOnHold().
On Android, if the app is in the background or not running, use headless tasks to properly handle ending or rejecting calls.

Step-By-Step Guide: How To Build A React Native Video Calling App

In this tutorial, we will use a React Native Video Calling SDK from MirrorFly to speed up the process and complete the entire development in 10 mins

Requirements

When integrating MirrorFly in a React Native project, ensure all required peer dependencies are installed with the exact versions specified to avoid compatibility issues.

Node >= 18.20.4
npm - 10.7.0
react-native >= 0.73.0 <= 0.75.4

Get SDK License Key

To integrate the MirrorFly Call SDK into your React Native app, you’ll need an SDK License Key. This key is used by the MirrorFly server to authenticate your app’s SDK instance.

Contact the MirrorFly team to create a user account.
Log in to your MirrorFly account.
Navigate to the Application Info section to retrieve your License Key.

Integrate Call SDK into Your React Native App

MirrorFly’s Call SDK for React Native streamlines the implementation of in-app calling functionality, providing all the core features needed for real-time communication.

Installation via npm

Step 1: Add the MirrorFly SDK to your project using npm:

  npm i mirrorfly-reactnative-sdk

Step 2: Import the SDK into the required module or component:

  import { SDK } from "mirrorfly-reactnative-sdk";

Use this import in any file where you need to initialize or interact with the MirrorFly call functionalities.

Adding NPM Package Dependencies for Call SDK Integration

First, include the necessary chat-related dependencies as outlined in the MirrorFly documentation.

Next, add the call-specific dependencies required for enabling in-app calling functionality:

{
  // Add chat related dependencies. And then add the below calls related dependencies
  "react-native-webrtc": "124.0.4", // must use version "124.0.4"
  "react-native-background-timer": "^2.4.1",
  "react-native-permissions": "^5.2.1"
}

Ensure all peer dependencies are resolved and linked properly, especially if using React Native versions below 0.60.

Initialize calls SDK

To initialize the MirrorFly Call SDK, you’ll need to provide specific parameters that enable the SDK to respond to connection status changes within the client application.

Pass your license key to the licenseKey parameter, along with any other required initialization data. Use the following method to initialize the SDK:

const incomingCallListener = (res) => {};
const callStatusListener = (res) => {};
const userTrackListener = (res) => {};
const muteStatusListener = (res) => {};
const missedCallListener = (res) => {};
const mediaErrorListener = (res) => {};
const callSpeakingListener = (res) => {};
const callUsersUpdateListener = (res) => {};
const callSwitchListener = (res) => {};
const userCallLogListener = (res) => {};

const helper = {};

const initializeObj = {
  apiBaseUrl: `API_URL`,
  licenseKey: `LICENSE_KEY`,
  isTrialLicenseKey: `TRIAL_MODE`,
  callbackListeners: {
    connectionListener,
    incomingCallListener,
    callStatusListener,
    userTrackListener,
    muteStatusListener,
    missedCallListener,
    mediaErrorListener,
    callSpeakingListener,
    callUsersUpdateListener,
    callSwitchListener,
    userCallLogListener,
    helper
  },
};

await SDK.initializeSDK(initializeObj);

Ensure this method is invoked during your app’s startup flow or wherever appropriate for SDK readiness.

Sandbox Configuration

You can retrieve the apiUrl and licenseKey required for SDK initialization from the Overview section of the MirrorFly Console dashboard.

These values are essential for authenticating your application and establishing a connection to the MirrorFly services during development and testing in the sandbox environment.

function connectionListener(response) {
  if (response.status === "CONNECTED") {
    console.log("Connection Established");
  } else if (response.status === "DISCONNECTED") {
    console.log("Disconnected");
  }
}

const initializeObj = {
  apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",
  licenseKey: "XXXXXXXXXXXXXXXXX",
  isTrialLicenseKey: true,
  callbackListeners: {
    connectionListener,
  },
};
await SDK.initializeSDK(initializeObj);

Example Response

{
  "statusCode": 200,
  "message": "Success"
}

User Registration

Step 1: Register a new user using the following method:
Step 2: On successful registration, the SDK will return a username and password. These credentials are required to establish a server connection using the connect() method.

await SDK.register(`USER_IDENTIFIER`, `ANDROID_FCM_TOKEN`, `IOS_VOIP_TOKEN`, `IS_PRODUCTION`);

Sample code for register user

import messaging from '@react-native-firebase/messaging';
import RNVoipPushNotification from 'react-native-voip-push-notification';

RNVoipPushNotification.addEventListener('register',
  async voipToken => {
    const fcmToken = await messaging().getToken();
    SDK.register(userIdentifier, fcmToken, voipToken, process.env?.NODE_ENV === "production");
  }
);

// =====  register for VOIP  =====
RNVoipPushNotification.registerVoipToken();

Sample Response:

{
  "statusCode": 200,
  "message": "Success",
  "data": {
    "username": "123456789",
    "password": "987654321"
  }
}

Connecting to the MirrorFly Server

Step 1: Use the username and password obtained during user registration to establish a connection to the MirrorFly server
Step 2: On successful connection, the SDK returns a response with statusCode: 200. If the connection fails, an execution error will be thrown.
Step 3: You can monitor real-time connection state changes via the connectionListener callback, which helps you track events like connected, disconnected, or connection lost.
Step 4: In case of a failure during the connection attempt, the error details will be available in the callback for debugging and handling purposes.

{
  "message": "Login Success",
  "statusCode": 200
}

Generating a User JID

To generate a JID (Jabber ID) for any registered user, use the following method:

const userJid = SDK.getJid(USER_NAME);

This method constructs the fully qualified JID required for identifying users during call operations or messaging within the MirrorFly infrastructure.

Wrapping Up

Using MirrorFly’s React Native Video SDK makes it much easier to add video calling to your mobile app without having to build everything from the ground up. The SDK takes care of the heavy lifting like user setup, server connection, and managing call IDs so you can focus on your app's core experience.

This step-by-step guide walks you through the basics, making it simple to get started. To get the most out of it in a live app, make sure to handle things like connection updates, push notifications, and any errors properly. When you're ready to go deeper, the official docs have everything you need to customize and scale further.