Azure AI ChatBot with WebClient App Lily Taharudin

Objective Setup and run cloud artificial intelligent web chatbot in WebClient application on Microsoft Azure What is a bot? It provides an experience that feels less like using a computer and a little bit like dealing with a person. What is a chatbot? It is an intelligent bot that can interact naturally with your users on websites

(Language Understanding) Azure Database Server       SQL Server       SQL Database App Service      Tomcat 8.5      Web app LUIS (Language Understanding)  Service Bot service  WebClient Development Environment Browser Eclipse       Java project       Web project

Checklist Have an Azure account​ Create Azure Web App Bot​ Configure chatbot​ Configure LUIS (Language Understanding)​ Create a page template to load the chatbot

Create an account on Microsoft Azure https://azure.microsoft.com/en-us/account/

Azure Web App Bot

Create Azure Web App Bot

Create Azure Web App Bot

Create Azure Web App Bot

Deploy Web App Bot Locally Bot Framework Emulator

Deploy Web App Bot Locally

Deploy Web App Bot Locally

Deploy Web App Bot Locally

Create a WebClient Page Template for WebChat UI Create a new Java project named customTemplate Create a new WebClient page template file named WebChatUI-page.wcli Add the following code

WebChatUI-page.wcli     <div id="webchat" role="main"></div>     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>     <script>       window.WebChat.renderWebChat({         directLine: window.WebChat.createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }),         userID: 'YOUR_USER_ID',         username: 'Web Chat User',         locale: 'en-US',         botAvatarInitials: 'WC',         userAvatarInitials: 'WW'       }, document.getElementById('webchat'));     </script>

Generate Token for WebChat UI

Generate a Direct Line Token

Postman Example to Generate a Direct Line Token

LUIS (Language Understanding) A machine learning-based service to build natural language into apps or bots Can be created quickly with prebuilt Intents and Entities Enterprise-ready Always learning and improving To extract information from natural language.

Intent Represents a task or action the user wants to perform Calendar app intents Example utterances Calendar Schedule a meeting with Susan tomorrow afternoon View my today's calendar Schedule a doctor appointment next Monday at 10am

Entity Represents a word or phrase inside the utterance that you want to extract An utterance can include many or no entities Utterance Entity Data Schedule a doctor appt next Monday at 10 am Calendar.Subject DateTime doctor 10 am View my today's calendar today Schedule a meeting with Susan tomorrow afternoon Susan tomorrow afternoon

Configure LUIS - Intents https://www.luis.ai/home

Configure LUIS - Entities

Configure LUIS - Utterances

Bot Builder Interface to WebClient This is running in Node.js. This is the code that is called when a message is parsed by LUIS. We will trigger a WebClient event by sending a special message to the webchat component.

Bot Builder Interface to WebClient This is the code that is running in the page template that receive from the bot backend and then transfer the data to Plex webclient.

(Language Understanding) Azure Database Server       SQL Server       SQL Database App Service      Tomcat 8.5      Web app LUIS (Language Understanding)  Service Bot service  WebClient Development Environment Browser Eclipse       Java project       Web project

Question ?

Lily Taharudin +1 512-610-0623 lily.taharudin@cmfirstgroup.com www.cmfirstgroup.com