Building chat bots using ai platforms (wit.ai or api.ai) in nodejs

1. Building Chatbots using
Existing Platforms with
NodeJS!
Ashish!
!
!
!
Linkedin: https://www.linkedin.com/in/ashkmr!

2. What are chatbots ?!
• Tools whom you can message and it replies back
accordingly.!

3. Chatbots: Latest Trend!
• The biggest incoming after the Facebook
messenger.!
• The biggest in thing since the app stores.!
• The future of the way we communicate, the way we
order things, the way we buy, the way we travel, the
way we book things and services.!
• In future we may forget websites, these bots are
going to be the new websites in a way.!

4. Mobile messaging apps worldwide as of
January 2017, monthly active users (in millions)!
https://www.statista.com/statistics/258749/most-popular-global-mobile-messenger-apps/!

5. No more apps ?!
• Almost 70 percent of all app usage comes from just
200 apps. !
• Most apps go unused.!
• Lot easier to get users to just chat with the chatbots
than to download an app, login, learn to use and
then try to remember its flow.!

6. Why use chatbots?!

7. Development cost!
command line! chatbot! website! mobile app!

8. Deploying updates!
command line! chatbot! website! mobile app!

9. Push notifications!
command line! chatbot! website! mobile app!

10. Customer Support!
Traditional Way
1. Find contact info of company through the
Internet
2. Call contact number
3. Navigate through a sequence of touch
tones or semi-functional speech
recognition steps
4. Wait on hold until a specialist is available
5. Step through a sequence of verifications
to make sure it is truly you who is calling
6. Get told you need to talk with a different
representative and get put on hold
7. Connect with a rep who now tries to have
you navigate the Internet via voice
instructions
8. Login to the company website
9. Finally, get an answer to your question
Future
1. Open Facebook Messenger and search for
the business name
2. Start the conversation by making a
request
3. Receive rich media feedback (text +
images + hyperlinks + voice) that answer
your question

11. Why ChatBots are future of
customer support ?!
• Standardised way of interaction!
• Automatic verification via profile (FB, Telegram ...) !
• No “transferring” to “other experts” !
• No media breaks -> web to web (link, pictures, rich-web) !
• Huge cost savings !
• New marketing and up-selling tool for brands!
!

12. Business Chatbots : !
Need of the Hour !!
• If you don’t have strategy on your bot yet, you
definitely need to rethink in order to catch up to be
competitive in the market.!
• users like to perform tasks like scheduling
meetings, ordering a product, booking a flight etc
all via text. Its easier, quicker.!

13. Business Chatbots
Examples!

14. KUDI!
• KUDI — seamless bill
payment through messaging!
• Helps users transfer money,
buy airtime for their phone,
pay bills and stay on top of
their bank accounts easily. !
• More info : https://kudi.ai!

15. MyStarbucks Barista!
• lets customers place orders by speaking, “I want a
latte.” !
• can be used to pay for orders. !
• http://money.cnn.com/2017/01/30/technology/starbucks-mobile-app/!

16. VerbalAccess!
• VerbalAccess uses natural
language processing
technology to empowers its
bot to take voice commands
and do banking transactions.!
!
• http://northsideinc.com/index.php/verbalaccess/!

17. eBay Shopbot!
• eBay ShopBot is a chatbot on
facebook which will help you
find a gift for your friend.!
• You can test eBay
Shopbot here:
https://www.facebook.com/
ebayshopbot/!

18. Microsoft’s ZO!
• Zo : Social Bot in general!
• https://www.zo.ai/!

19. How ChatBots work ?!
1. Rule based!
• If this, then do that !!
• If the word “Book” appears, return website where books can be bought
or …!
• If user types “Travel”, then ask for a city name , then send list of
“places to see” in that city.!

20. How ChatBots work ?!
2. Machine learning!
• Supervised learning!
inputs and their desired outputs, given by a programmed code
• Unsupervised learning!
leaving it on its own to find structure in its input

21. FB Messenger Platform!
• 900 million people around the world who use
Messenger every month.!
• Available on all platforms, including iOS, Android,
and web.!
• You define the message templates, using features
like images, text and calls to action (CTAs) !

22. Bot for Messenger!
• Three ways to interact!
• Send / Receive API!
• Generic Message Template!
• Welcome screen + Null state CTAs!

23. Building Chatbot !
using !
NodeJS!

24. Step1!
1. Create a Facebook App and Page, Select
“Messenger”!

25. Step 2, 3!
2. Setup Web hook!
4. Enter a URL for a webhook,
enter a Verify Token and
select messages and
messaging_postbacks under
Subscription Fields.!

26. Step 4!
Clone the repository : https://github.com/fbsamples/messenger-platform-samples!
4. In the sample app, this method is defined in app.js!
!
app.get(/webhook, function(req, res) {!
if (req.query[hub.mode] === subscribe &&!
req.query[hub.verify_token] === <VERIFY_TOKEN>) {!
console.log("Validating webhook");!
res.status(200).send(req.query[hub.challenge]);!
} else {!
console.error("Failed validation. Make sure the validation tokens match.");!
res.sendStatus(403); !
} !
});!

27. Step 5!
5. Get a Page Access Token!

28. Step 6!
6. Subscribe the App to the Page!

29. Step 7!
7. Receive Messages!
app.post(/webhook, function (req, res) {!
var data = req.body;!
!
// Make sure this is a page subscription!
if (data.object === page) {!
!
// Iterate over each entry - there may be multiple if batched!
data.entry.forEach(function(entry) {!
var pageID = entry.id;!
var timeOfEvent = entry.time;!
!
// Iterate over each messaging event!
entry.messaging.forEach(function(event) {!
if (event.message) {!
receivedMessage(event);!
} else {!
console.log("Webhook received unknown event ", event);!
}!
});!
});!
!
// Assume all went well.!
//!
// You must send back a 200, within 20 seconds, to let us know!
// youve successfully received the callback. Otherwise, the request!
// will time out and we will keep trying to resend.!
res.sendStatus(200);!
}!
});!
!
function receivedMessage(event) {!
// Putting a stub for now, well expand it in the following steps!
console.log("Message data ", event.message);!
}!

30. Step 8!
8. Send a Text Message from Facebook page!
!
function receivedMessage(event) {!
!
var senderID = event.sender.id;!
var recipientID = event.recipient.id;!
var timeOfMessage = event.timestamp;!
var message = event.message;!
!
console.log("Received message for user %d and page %d at %d with message", !
senderID, recipientID, timeOfMessage);!
console.log(JSON.stringify(message));!
!
var messageId = message.mid;!
!
var messageText = message.text;!
var messageAttachments = message.attachments;!
!
if (messageText) {!
!
// If we receive a text message, check to see if it matches a keyword!
// and send back the example. Otherwise, just echo the text we received.!
switch (messageText) {!
generic!
sendGenericMessage(senderID);!
break;!
!
default!
sendTextMessage(senderID, messageText);!
}!
} else if (messageAttachments) {!
sendTextMessage(senderID, "Message with attachment received");!
}!
}!

31. callSendAPI() function!
!
function sendTextMessage(recipientId,
messageText) {!
var messageData = {!
recipient {!
id recipientId!
},!
message {!
text messageText!
}!
};!
!
callSendAPI(messageData);!
}!
!
function callSendAPI(messageData) {!
request({!
uri https//graph.facebook.com/v2.6/me/messages,!
qs { access_token PAGE_ACCESS_TOKEN },!
method POST,!
json messageData!
!
}, function (error, response, body) {!
if (!error && response.statusCode == 200) {!
var recipientId = body.recipient_id;!
var messageId = body.message_id;!
!
console.log("Successfully sent msg id %s to recipient %s", !
messageId, recipientId);!
} else {!
console.error("Unable to send message.");!
console.error(response);!
console.error(error);!
}!
}); !
}!

32. Lets start sending messages!

33. A Structured Message!!
var messageData = {!
recipient {!
id recipientId!
},!
!
message {!
attachment {!
type "template",!
payload {!
template_type "generic",!
elements [{!
title "rift",!
subtitle "Next-generation virtual reality",!
item_url "https//www.oculus.com/en-us/rift/", !
image_url "http//messengerdemo.parseapp.com/img/rift.png",!
buttons [{!
type "web_url",!
url "https//www.oculus.com/en-us/rift/",!
title "Open Web URL"!
}, {!
type "postback",!
title "Call Postback",!
payload "Payload for first bubble",!
}],!
}, {!
title "touch",!
subtitle "Your Hands, Now in VR",!
item_url "https//www.oculus.com/en-us/touch/", !
image_url "http//messengerdemo.parseapp.com/img/touch.png",!
buttons [{!
type "web_url",!
url "https//www.oculus.com/en-us/touch/",!
title "Open Web URL"!
}}]!

34. Handle Postbacks!
function receivedPostback(event) {!
!
var senderID = event.sender.id;!
var recipientID = event.recipient.id;!
var timeOfPostback = event.timestamp;!
!
// The payload param is a developer-defined field which is set in a postback !
// button for Structured Messages. !
var payload = event.postback.payload;!
!
console.log("Received postback for user %d and page %d with payload %s " + !
"at %d", senderID, recipientID, payload, timeOfPostback);!
!
// When a postback is called, well send a message back to the sender to !
// let them know it was successful!
sendTextMessage(senderID, "Postback called");!
!
}!

35. Demo with following keyword Inputs!
• image !
• gif!
• audio!
• video !
• file !
• button!
• generic!
• receipt!
• quick reply!
• read receipt!
• typing on!
• typing off!
• account linking!

36. Natural Language Processing Tools!
• API.AI and WIT.AI !
• integrate natural language processing and
understanding into your applications.!

37. Comparison!
api.ai Wit.ai !
• Y-Combinator startup, !
• $3M seed-round by
Andreessen Horowitz,
Ashton Kutcher and Eric
Hahn, !
• bought by Facebook Inc
after 18 months.!
• API.AI is a conversational UX
platform enabling natural
language interactions for
devices, applications, and
services.!
• $8.6M in 4 Rounds !
• API.AI is backed by Intel
Capital, Motorola Solutions,
SAIC Motor, and Alpine
Electronics.!
• bought by Google in Sept 2016!

38. What does Wit.AI or API.AI do ?
Suppose user types this message!
I want to book ticket for 2 from SanFrancisco to NewYork on 5th Apr
2017.!
These Platforms extracts parts from input, then follows the rules /
machine learning as programmed!
Action book ticket
Travellers 2
From Location SanFrancisco
To Location NewYork
Date 5th Apr 2017

39. Understanding API.AI!

40. Understanding API.AI!
• API.AI Agent : a bot, app, service or device that you would like to have
conversation to.!
• Entities: Objects you want to interact with. !
• example, for travel booking agent, we have location, or date or number Of
Passengers as entities.!
• 3 Types of entities: system , developer , and user entities.!

41. Demo!
api.ai!

42. Thanks!
!
!
!
!
!
!
Linkedin: https://www.linkedin.com/in/ashkmr!
!