Building a WhatsApp AI bot for customer support

  • Thread starter Thread starter MilanKaur
  • Start date Start date
M

MilanKaur

Building a WhatsApp AI bot using Azure Open AI and Communication Services​




In this blog post, we’ll explore how to build a customer support application that integrates with WhatsApp using Azure Communication Services and Azure OpenAI. This app enables users to interact with a self-service bot to resolve common customer queries, such as troubleshooting errors or checking order status. We’ll walk through the high-level architecture and provide an overview of the technologies involved, pointing you to the code repository for deeper exploration.



Sample Overview​


The code sample showcases a customer support scenario for Contoso Electronics, where users can report issues with their calculators via WhatsApp. By typing a simple message such as “Hello,” the bot responds on WhatsApp and assists with troubleshooting, providing real-time guidance based on a custom knowledge base. This helps businesses automate responses to common customer problems without human intervention.



whatsapp dcemo.png



The same sample can be adapted for other use cases, including:

  • Order Queries: Customers can check order status or track shipments through WhatsApp or SMS.
  • Booking & Shopping Assistance: AI bots can help customers find products or book travel by querying the relevant databases.
  • Appointment Scheduling: AI bots can help users reschedule appointments, eliminating the need for human interaction.



Why WhatsApp channel?​


Customers today have varied preferences for communication channels. Some might prefer WhatsApp, others SMS, iMessage, or web chat. WhatsApp has more than 2 billion monthly active users globally. By offering WhatsApp as a one of the communication channels for your customer interaction, you ensure your users can connect with your services on their preferred platforms, improving customer satisfaction.



Steps to build your first WhatsApp AI bot​


In this section, we walk through the architecture and steps for building a WhatsApp bot. You can check out the full code sample on Github.



High-Level Architecture​


An overview of the architecture used for this demo:

  1. WhatsApp Client: The user initiates a conversation via the WhatsApp client.
  2. Azure Communication Services Messaging: Messages are routed through Advanced Communication Messages SDK, which notifies the backend application of incoming messages.
  3. Backend Application: The application receives the message and queries the knowledge base using Azure OpenAI's language model.
  4. Azure OpenAI Service: The LLM processes the input and returns a response.
  5. Response Delivery: The backend application sends the response back to the Azure Communication Services, which forwards it to WhatsApp.
  6. Frontend: For demo purposes, we spun up a lightweight web app that displays the conversation happening on WhatsApp in a browser. Creating a front-end is optional and you can choose not to add it in your code.



Architecture Diagram​


This diagram demonstrates the different technologies used in the sample code and the application flow.



MilanKaur_1-1729722094289.png



A WhatsApp bot has three main components​

  • Logic to integrate with a generative AI model to produce natural language responses for the bot. We have used Azure OpenAI model.
  • WhatsApp channel integration with your backend application. We have used Azure Communication Services for this sample.
  • The application/bot uses a custom knowledge base to comprehend customer issues and provide relevant solutions. In the sample code, we have included the knowledge base in the system prompt. For a production-level implementation, you would need to use Azure AI Search or other indexing services to retrieve information from documents, websites, or any other format in which the knowledge base is stored. Numerous resources on retrieval-augmented search can be found here.



System prompt used in the sample

MilanKaur_2-1729722162051.png



Steps for adding intelligence to your bot​

  1. Create an Azure Open AI resource on the Azure portal
  2. Create an AI model deployment in Azure AI Studio
  3. Write and test a system prompt in Azure AI Studio or use the one in the code repository.
  4. Pass the system prompt and conversation history to a chat completion API in code.

​

Steps for integrating WhatsApp channel in your app​

  1. Create an Azure Communication Services resource.
  2. Connect your WhatsApp business account with Azure Communication resource. You can also create and register a new WhatsApp business account.
  3. Connect your existing number or an Azure Communication Services number with WhatsApp account.
  4. Add code to handle events and send WhatsApp message.
  5. Register your local or server URL in event grid for receiving WhatsApp messages.

​

Code Flow​


The main logic for the WhatsApp bot is in the WebHookController class in the code repository. Here's an overview of its key functions.



HandleGridEvents : This method handles incoming messages by the customer on your WhatsApp business account phone number. It calls another method "RespondToCustomerAsync" to generate a response and send it via WhatsApp channel.









Code: 
        private async Task<IActionResult> HandleGridEvents(string jsonContent)
        {
            var eventGridEvents = JsonSerializer.Deserialize<EventGridEvent[]>(jsonContent, _jsonOptions);
            foreach (var eventGridEvent in eventGridEvents)
            {
                if (eventGridEvent.EventType.Equals("microsoft.communication.advancedmessagereceived", StringComparison.OrdinalIgnoreCase))
                {
                    var messageData = JsonSerializer.Deserialize<AdvancedMessageReceivedEventData>(eventGridEvent.Data.ToString(), _jsonOptions);
                    Messages.MessagesListStatic.Add(new Message
                    {
                        Text = $"Customer({messageData.From}): \"{messageData.Content}\""
                    });
                    Messages.OpenAIConversationHistory.Add(new UserChatMessage(messageData.Content));
                    await RespondToCustomerAsync(messageData.From);
                }
            }

            return Ok();
        }











RespondToCustomerAsync : This method calls "GenerateAIResponseAsync" to get a response from the Azure Open AI model and then calls "SendWhatsAppMessageAsync" to send the AI generated response to the customer.











Code: 
 private async Task RespondToCustomerAsync(string numberToRespondTo)
        {
            try
            {
                var assistantResponseText = await GenerateAIResponseAsync();
                if (string.IsNullOrWhiteSpace(assistantResponseText))
                {
                    Messages.MessagesListStatic.Add(new Message
                    {
                        Text = "Error: No response generated from Azure OpenAI."
                    });
                    return;
                }

                await SendWhatsAppMessageAsync(numberToRespondTo, assistantResponseText);
                Messages.OpenAIConversationHistory.Add(new AssistantChatMessage(assistantResponseText));
                Messages.MessagesListStatic.Add(new Message
                {
                    Text = $"Assistant: {assistantResponseText}"
                });
            }
            catch (RequestFailedException e)
            {
                Messages.MessagesListStatic.Add(new Message
                {
                    Text = $"Error: Failed to respond to \"{numberToRespondTo}\". Exception: {e.Message}"
                });
            }
        }











GenerateAIResponseAsync : This method calls the LLM model and passes the system prompt and conversation history to get a response for the customer.









Code: 
        private async Task<string?> GenerateAIResponseAsync()
        {
            var chatMessages = new List<ChatMessage> { new SystemChatMessage(SystemPrompt) };
            chatMessages.AddRange(Messages.OpenAIConversationHistory);
            ChatCompletion response = await _azureOpenAIClient.GetChatClient(_deploymentName).CompleteChatAsync(chatMessages);
            return response?.Content.FirstOrDefault()?.Text;
        }











SendWhatsAppMessageAsync : This method uses Azure Communication Services to send the response to the customer through WhatsApp.









Code: 
        private async Task SendWhatsAppMessageAsync(string numberToRespondTo, string message)
        {
            var recipientList = new List<string> { numberToRespondTo };
            var textContent = new TextNotificationContent(_channelRegistrationId, recipientList, message);
            await _notificationMessagesClient.SendAsync(textContent);
        }











Conclusion​


By leveraging Azure Communication Services and Azure OpenAI, businesses can create efficient, self-service customer support applications that work across multiple communication channels. Whether it’s troubleshooting technical issues, checking order statuses, or scheduling appointments, these applications can greatly enhance customer experience while reducing the load on human support teams.

To dive deeper into the code, check out the repository linked in this blog, and try building your own WhatsApp bot today! Additionally, you can check out first-party WhatsApp channel if your organization uses Dynamics 365 Contact Center.



Explore related content:​


Continue reading...
 
Back
Top