Building a WhatsApp AI bot for customer support

Building a WhatsApp AI Bot for Customer Support

In this blog post, we’ll look at how to build a customer support application that integrates with WhatsApp using Azure Communication Services and Azure OpenAI. The app allows users to interact with self-service bots to resolve common customer inquiries, including troubleshooting errors and checking order status. We will look at the high-level architecture and provide an overview of the technologies involved, code repository For a deeper exploration.

Sample Overview

The code sample demonstrates a customer support scenario for Contoso Electronics where users can report calculator-related issues via WhatsApp. Just type a simple message like “Hello” and the bot will respond on WhatsApp, assist with troubleshooting and provide real-time guidance based on a personalized knowledge base. This allows companies to automate responses to common customer issues without human intervention.

The same sample can be applied to other use cases, including:

• order query: Customers can check their order status or track their delivery via WhatsApp or SMS.
• Reservation and shopping support: AI bots query relevant databases to help customers find products or book travel.
• appointment schedule:AI rainots helps users reschedule appointments, eliminating the need for human interaction.

Why a WhatsApp channel?

Today’s customers have different preferences for communication channels. Some people prefer WhatsApp, while others prefer SMS, iMessage, or web chat. WhatsApp has over 2 billion monthly active users worldwide. By offering WhatsApp as one of the communication channels for customer interaction, you can increase customer satisfaction by allowing users to connect to your service on their preferred platform.

Steps to build your first WhatsApp AI bot

In this section, we look at the architecture and steps for building a WhatsApp bot. you can check Full code sample on Github.

high level architecture

Overview of the architecture used in this demo:

1. WhatsApp client: The user initiates a conversation through the WhatsApp client.
2. no wayJure aspiratecommunication Sservice Messaging: Messages are routed through: Advanced Communications Messaging SDKNotifies backend applications 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: LLM processes the input and returns a response.
5. Delivery of response: The backend application sends back a response. Azure Communications This service is delivered via WhatsApp.
6. front end: For demo purposes, I ran a lightweight web app that displays conversations going on in WhatsApp. meme browser. Creating a front end is optional and you can choose not to add it to your code.

architecture diagram

This diagram shows sample code and the different techniques used in the application flow.

WhatsApp bots have three main components:

• Logic that integrates with generative AI models to generate natural language responses for your bot. We used Azure OpenAI models.
• Integration of WhatsApp channels with backend applications. This sample used Azure Communication Services.
• The application/bot uses a customized knowledge base to understand customer problems and provide relevant solutions. The sample code includes a technical note at the system prompt. For production-level implementations, you should use Azure AI Search or another indexing service to search for information in documents, websites, or other formats where your knowledge base is stored. You can find various materials about search augmented search. here.

System prompt used in sample

Steps to add intelligence to your bot

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

Steps to integrate WhatsApp channel into your app

1. Create AJure aspiratecommunication Sservice will.
2. Connect your WhatsApp Business account with your Azure Communication resources. You can also create:nd Register a new WhatsApp Business account.
3. Connect your existing number or A.Jure aspiratecommunication Sservice The number where your WhatsApp account is located.
4. Add code to handle events and send WhatsApp messages.
5. To receive WhatsApp messages, register a local or server URL in the event grid..

code flow

The main logic of the WhatsApp bot is as follows: WebHookController class It’s in the code repository. Here’s an overview of the main features:

HandleGridEvent : This method handles messages received by customers on their WhatsApp business account phone number. Call another method “RespondToCustomerAsync” to generate a response and send it through the WhatsApp channel.

        private async Task HandleGridEvents(string jsonContent)
        {
            var eventGridEvents = JsonSerializer.Deserialize(jsonContent, _jsonOptions);
            foreach (var eventGridEvent in eventGridEvents)
            {
                if (eventGridEvent.EventType.Equals("microsoft.communication.advancedmessagereceived", StringComparison.OrdinalIgnoreCase))
                {
                    var messageData = JsonSerializer.Deserialize(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();
        }

Desynchronized response to customer : 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.

 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}"
                });
            }
        }

Create AIResponseAsync : This method calls the LLM model and passes system prompts and conversation history to get a response to the customer.

        private async Task GenerateAIResponseAsync()
        {
            var chatMessages = new List { 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 a response to the customer via WhatsApp.

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

conclusion

Azure Communication Services and Azure OpenAI enable businesses to create efficient self-service customer support applications that work across multiple communication channels. Whether it’s troubleshooting technical issues, checking order status, or scheduling appointments, these applications can significantly improve the customer experience while reducing the burden on your customer support team.

To learn more about the code, check out the repository linked in this blog and start building your own WhatsApp bot today! Additionally you You can check out Our WhatsApp Channel If your organization uses Dynamics 365 Contact Center.

Explore related content: