1. Azure AI ChatBot with WebClient App
Lily Taharudin

2. 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

3. (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

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

5. Create an account on Microsoft Azure

6. Azure Web App Bot

7. Create Azure Web App Bot

8. Create Azure Web App Bot

9. Create Azure Web App Bot

10. Deploy Web App Bot Locally
Bot Framework Emulator

11. Deploy Web App Bot Locally

12. Deploy Web App Bot Locally

13. Deploy Web App Bot Locally

14. 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

15. WebChatUI-page.wcli
    <div id="webchat" role="main"></div>     <script src="     <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>

16. Generate Token for WebChat UI

17. Generate a Direct Line Token

18. Postman Example to Generate a Direct Line Token

19. 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.

20. 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

21. 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

22. Configure LUIS - Intents

23. Configure LUIS - Entities

24. Configure LUIS - Utterances

25. 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.

26. 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.

27. (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

28. Question ?

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