Skip to content

MirrorFly/White-Label-AI-Chatbot

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MirrorFly AI Chat Agent Integration

Build a custom AI chat agent, and integrate it to any platform using the MirrorFly AI-RAG Dashboard, workflow builder and SDK. This white-label AI chatbot solution supports real-time messaging, external knowledge base training (RAG), and SDK documentation.

🚀 Overview

The implementation is divided into two primary phases:

  1. Agent Creation: Configuring the chat agent’s personality, uploading and training it with datasets, and designing conversation structure using the workflow builder.

  2. Agent Integration: Embedding the chatbot into your web app using the MirrorFly AI SDK.


🛠 Part I: Agent Creation

1. Initial Setup

MirrorFly AI Dashboard

  • Create Agent: Click 'Create Agents' and select 'Chat Agent' and click on ‘Continue’.

MirrorFly Dashboard

  • Configuration: Provide an agent name, description, and define the initial System Prompt to set core behavior.

MirrorFly Dashboard

2. Personality & Model Settings

  • Personality: Set the welcome message, fallback responses, and adjust the formality and tone.

  • Model Selection: Choose from multiple available AI models (OpenAI or Anthropic agents)

  • SDK Key: Create an SDK Key. You’ll need this to connect the chatbot to your web platform.

MirrorFly Dashboard

3. Training with RAG (Retrieval-Augmented Generation)

  • Datasets: Click on the ‘Import from file’ button and select your PDF or CSV files (up to 5MB each, max 10 files) from your local device.

  • Website Sync: Click on the ‘Sync from website’ to sync business data directly from your website URL.

MirrorFly Dashboard

4. Workflow Builder

In the MirrorFly’s node-based workflow builder, design the conversational logic and automate the workflow:

  • Conversation Flow Control: Use the node-based logic trees to define conditional branching, user intent routing and multi-turn dialogue paths.
  • API Integration: Map requests and responses, authenticate headers and error handling for external service calls by configuring the HTTP endpoints.
  • Form Data Collection: Implement structured data capture nodes with field validation, type constraints, and conditional field display logic.
  • Event Triggers: Configure event-driven actions like email notifications, webhook dispatches, and message queue operations.

Each node supports parameter configuration, variable binding, and connection to downstream nodes, enabling complex workflow orchestration through the drag-and-drop canvas interface.


💻 Part II: Agent Integration

Prerequisites

  • Valid Agent ID
  • Mic access (HTTP-supported website)
  • Latest version of Chrome, Edge, or Safari.

1. Install the SDK

Use the below single script tag in your HTML file to add the SDK generated in the dashboard.

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

2. Initialize the Agent

Define a container element and initialize the SDK:

// HTML Container
<div className="content" id="chatbot-root"></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

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 your platform runs multiple agents (for example, Sales agent and Custom service agent), use the option below to switch between their contexts.

function switchAgent(newAgentId) {
  MirrorFlyAi.destroy();
  document.querySelector("#widget").innerHTML = "";
  MirrorFlyAi.init({
    container: "#widget",
    agentId: newAgentId,
    triggerStartCall: true
  });
}

🛡 Security & Permissions

During initialization, the browser prompts the user to grant microphone access. Be prepared to manage errors using the onError callback, including permission denials or connectivity issues.

🤹 Key Product Offerings

☁️ Deployment Models - Self-hosted and Cloud

MirrorFly offers full freedom with the hosting options:

Self-hosted: Deploy your client on your own data centers, private cloud or third-party servers.
Check out our multi-tenant cloud hosting

Cloud: Host your client on MirrorFly’s multi-tenant cloud servers.
Check out our multi-tenant cloud hosting

📚 Learn More

🧑‍💻 Hire Experts

Need a tech team to build your AI Chat agents and chatbots? Hire a full team of experts. Let our team handle every step of the development process. Get a high-quality, fully-built Ai agents ready to launch, carefully built by industry experts

⏱️ Round-the-clock Support

If you’d like to take help when working with our solution, feel free to contact our experts who will be available to help you anytime of the day or night.

💼 Become a Part of our amazing team

We're always on the lookout for talented developers, support specialists, and product managers. Visit our careers page to explore current opportunities.

🗞️ Get the Latest Updates

Releases

No releases published

Packages

 
 
 

Contributors