jellyfang / messenger-bot-witai-tutorial

Jack up your chat bot using Wit.ai in 30 minutes!

🤖 Add Wit.ai to Your Facebook Messenger bot

Facebook Messenger is a platform that reaches over a billion people world wide. Now that Facebook has opened up access to sending and receiving messages many new opportunities open up.

You can jack up your chat bot’s smarts with two tech buzzwords: natural language processing (NLP) and natural language understanding (NLU). Those two things can make your chat bot not awkwardly ask you again and again what someone just said.

You can read the 5 min quickstart the Wit.ai team prepared but it's really only meant for beginners and not for intermediate hackers.

So instead here is how to add Wit.ai to do real things in 30 minutes.

🤔 Firstly, what’s the difference between NLP and NLU?

NLP helps you break down a sentence into things called entities. It’s like primary school for your bot. For example, NLP can read the sentence “Sally sold seashells by the seashore” and figure out there’s an entity Sally, that there’s another entity sold, that there are entities seashells and seashore.

Sometimes just having words in a sentence is enough. You can extract category or keywords and from there you can hack your chat bot to do something. But for more smarts you need to take your bot to the equivalent of university. NLU helps you figure out what that sentence meant. Sally did something with something. And because of that the chat bot can then react and respond based on what Sally did do and with what. In other words, with NLU your chat bot can figure out human concepts like intent or sentiment.

🏃 Get ready!

If you have not built a chat bot before then read my other tutorial first: http://github.com/jw84/messenger-bot-tutorial

Be sure you know how to deploy a Heroku server. You can then git clone this repository, running npm install, and get started.

Setup Wit.ai

1. Sign up for a Wit.ai account here: https://wit.ai

2. Go clone my weather app: https://wit.ai/jw84/weather

3. Find the app token in your weather app so we can test everything is working. In your app go to the Settings page then find the “Server Access Token” in API Details.

Let’s test first that the token works by running this command in your Terminal:

curl -H 'Authorization: Bearer <YOUR TOKEN HERE>' 'https://api.wit.ai/message?v=20160526&q=what%20is%20the%20weather%20in%20New%20York'

You should get back a response like:

{
  "msg_id" : "14735f29-daa9-4553-a259-24cfa8c4ba42",
  "_text" : "what is the weather in New York",
	"entities": {
		"location": [ {
			"confidence": 0.9984463453705885,
			"type": "value",
			"value": "New York",
			"suggested": true
		} ]
	}
}

Great success! ✨

Deploy the chat bot to the clouds

1. Git clone my bot here

2. I have organized my chat bot into four major components: the server, the Facebook Messenger connector, the bot app, and the NLP service. It’s a good idea to make chat bots modular. You can progressively add more more components to make the bot understand language or locations but you should also be able to remove components and until only a web server is left.

3. Deploy the bot to Heroku by running these command in Terminal inside the cloned git repo directory. A page should pop up meaning your app is ready. Be sure to remember the URL of your Heroku app.

   heroku apps:create
   git push heroku master
   heroku open
   

Setup Facebook to talk to your chat bot

1. Go to https://developers.facebook.com and create a new app, be sure to add Facebook Messenger as a product to the app. You can also use an existing an app.

2. Go to the settings page of the app you’ve made then go to the Messenger settings page. Here you will generate a token of the Facebook Page to link to with Messenger. Remember to save this token key somewhere.

3. Set up Webhooks to your FB app. Remember to use the link to your own Heroku app.

Click Verify and Save. You should see the Complete sign!

4. Now we’ll set up the server again. Set the keys required as environment variables to make the bot work by running these commands in Terminal:

   heroku config:set WIT_TOKEN='your_token_here'
   heroku config:set FB_PAGE_TOKEN='your_token_here'
   

When that’s done you should be able to at least say hi to your chat bot and have it echo back hi! 🤖

Create stories in Wit.ai

Wit.ai does the hard work for you by creating a simple to use interface to manage what are called “stories” — these are ways to extract meaning from a keyword or sentence.

For now you might have to write a lot of stories for your chat bot to understand language but soon Wit.ai has a vision that we can share hundreds of stories with each other. And with more stories the more skills your chat bot will have.

🎓 Time to teach your bot!

Extract location out of conversations

1. Create a new story in the Wit dashboard. The first type of story we’ll write is extracting location from conversations. This way we can build a weather bot! Go here https://wit.ai/jw84/weather/stories to see the recipe I’ve created.

2. Find the Read function in the bot.js file. Here the bot can recognize messages. The first message can be hello, the chat bot can send back an introduction. Otherwise, we can pass the message on to Wit.ai for processing.

3. Let’s test and see if the weather shows up!

Extract category and sentiment out of conversations

1. Create yet another Wit app in the dashboard. This new app will have three stories to extract the category and sentiment entities out of a conversation so your chat bot can reply with some cute pics! Go here https://wit.ai/jw84/cutepics/stories to see the recipe

2. Create a new story to look for the user response then trigger the bot to execute the action and respond.

When you double click a word it will be highlighted as blue, after assigning the word as an entity the highlight turns purple to indicate Wit.ai has learned.

Have the bot execute a merge function to extract the entity and save it to the context object. Then execute the fetch-pics action to return the actual pic itself. Thereafter you can trigger two replies by Wit.ai, one saying what the category is and the other the image link itself.

3. Add and create two more stories based on my template. Each will help train Wit.ai on what to look for and how to respond to a sentiment and to an acknowledgement.

4. Now we can test. Be sure to update your Heroku server with the new Wit app’s token by running this command:

   heroku config:set WIT_TOKEN='your_new_token_here'
   

Let’s go back and chat it up. Ask to see some corgis. Then ask to see some racoons!

Congratulations you’ve made a chat bot that’s smart enough to know what you’re talking about, what you mean, and reply back accordingly!

🤓 Tell Your Chat Bot What’s What

NLP and NLU are not magical! They are merely defining rules for your bot. Your chat bot will break sometimes and maybe even often when being told new and interesting conversations it’s never heard before.

It is now up to you to help keep training and testing your bot until it’s the very best. You have two tools in Wit.ai to do so. Go to the console and let’s learn about the Inbox and the Understanding page.

Training your chat bot

Wit.ai has an inbox that shows you all the messages it has received. From here you can pick and choose which one to validate and contribute to the training data of your chat bot.

For example, if you have an entity of location you can assign more values to help train your chat bot to know that “San Francisco” and “Timbuktu” are both locations. If you have categories for “corgis” then you can also validate that “dogs” can mean the same thing.

The more people that talk to your chat bot and the more complex your bot is the more you will spend time in this page. And the work you do here will help make your bot even smarter.

Testing your chat bot

The other page you will be spending time at will be in the Understanding page. Here you can try out sentences yourself to test whether your chat bot can understand and to troubleshoot when a sentence doesn’t trigger the right response.

📡 How to share your bot

Learn how to get your bot approved for public use here.

Remember, your chat bot has to be approved by Facebook so that anyone can talk to it. Otherwise, you have to go to the Roles page in your Facebook app and add testers.

Add a chat button to your webpage

Go here to learn how to add a chat button your page.

Create a shortlink

You can use https://m.me/<PAGE_USERNAME> to have someone start a chat.

💡 What's next?

Read about all things chat bots with the ChatBots Magazine here

You can also design Messenger bots in Sketch with the Bots UI Kit!

How I can help

I build and design bots all day. Email me for help!

Credit

Thanks to https://github.com/hunkim/Wit-Facebook for the inspiration

messenger-bot-witai-tutorial's Issues

Question: What is cb in the wit.js file?

I am trying to understand your project and write my own code (instead of just cloning your repo and using it for my bot). I am confused on what the cb() function is in the wit.js file?

Another thing is that I am facing Syntax Error issues on many places where you have used ECMAScript. For example in the wit.js, its giving me trouble at the

say (sessionId, context, message, cb)

Is there anything I can do to fix this? I am not sure what the alternate for this code would be.

PS: Expect more questions to follow. Thanks :)

does wit.ai works eith persian language?

does wit.ai works eith persian language?

Heroku "Application error"

The project has a problem.
I cloned it and all I get is "Application error" from Heroku.

Structured input

How to clone wit ai app?

There seems to be no option for cloning the wit ai app. How is it done?

no matching user

Error: (#100) No matching user found

heroku open under 'Deploy the chat bot to the clouds'

heroku open under 'Deploy the chat bot to the clouds' causes Heroku error code H10 Application Error.

Feature req: Please integrate apipie.ai

Users want access to as much AI as they can get, they dont want to manage 50 accounts, they want the fastest AI they want the cheapest AI, and you can provide all of that for them with this update.

in addition to or in place of integrating with any aggregators - Please integrate APIpie so devs can access them all from one place/subscription and plus it also provides:

-The most affordable, reliable and fastest AI available
-One API to access ~500 Models and growing
-Language, embedding, voice, image, vision and more
-Global AI load balancing, route queries based on price or latency
-Redundancy for major models providing the greatest up time possible
-Global reporting of AI availability, pricing and performance

Its the same API format as openai, just change the domain name and your API key and enjoy a plethora of models without changing any of your code other than how you handle the models list.

This is a win win for everyone, any new AI's from any providers will be automatically integrated into your stack with this one integration. Not to mention all the other advantages.

wit.ai login not working

wit.ai login is not working. login with github is not loading and facebook login is not giving any response. Is anyone facing this issue?

How to handle not to answer back,if doesn't match.

I want to control ,not to answer anything back,if doesn't match.Can i?
Link-stackoverflow

Make the actual Weather Api Work

Hi guys,

i am trying to make the actual weather api stuff work. But i can´t seem to get it right. It looks like the context.forecast = forecast is always 0 despite the function getWeather returning the actual value.. Any help on that one?

// list of functions Wit.ai can execute
	['fetch-weather'](sessionId, context, cb) {
		// Here we can place an API call to a weather service
		 if (context.loc) {
		 	getWeather(context.loc)
		 		.then(function (forecast) {
		 			context.forecast = forecast 
                                         console.log(forecast)
		 		})
		 		.catch(function (err) {
		 			console.log(err)
		 		})
		 }

		cb(context)
	},

Unable to call function

I have uncommented the fetch-weather action section from the code

    },

    // list of functions Wit.ai can execute
    ['fetch-weather'](sessionId, context, cb) {
        // Here we can place an API call to a weather service
        console.log("***********************Called ");
         if (context.loc) {
            getWeather(context.loc)
                .then(function (forecast) {
                    context.forecast = forecast || 'sunny'
                })
                .catch(function (err) {
                    console.log(err)
                })
         }

        context.forecast = 'Sunny';

        cb(context)
    },

the Error

2016-06-30T13:07:43.566415+00:00 app[web.1]: oops! No '
2016-06-30T13:07:43.566427+00:00 app[web.1]: fetch-weather
2016-06-30T13:07:43.566449+00:00 app[web.1]:   ' action found.

What is wrong here?

can't add new actions with entities

Hello, every time i try to add a new action that uses entities I get the following error:

The 'getAppointments' action should accept 3 arguments: sessionId, context, callback. Learn more at https://wit.ai/docs/quickstart

Where is that defined? I already changed my story several times.

Thanks!

Unable to run $ node index.js

I got the following error which prevented me from running the bot.

In the terminal, I tried to run

$ node index.js

but the following error was returned:

module.js:442
    throw err;
    ^

Error: Cannot find module 'node-wit'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/macbookair13/Desktop/BudgetBot/services/wit.js:5:11)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)

After i deploy, my Heroku shows the same error

2016-07-13T17:08:23.902935+00:00 app[web.1]:     at Object.Module._extensions..js (module.js:422:10)
2016-07-13T17:08:23.902926+00:00 app[web.1]:     at Module._compile (module.js:387:25)
2016-07-13T17:08:23.902927+00:00 app[web.1]:     at Module.load (module.js:357:32)
2016-07-13T17:08:23.902928+00:00 app[web.1]:     at Function.Module._load (module.js:314:12)
2016-07-13T17:08:23.902929+00:00 app[web.1]:     at require (internal/module.js:20:19)
2016-07-13T17:08:24.786494+00:00 heroku[web.1]: Process exited with status 1
2016-07-13T17:08:24.789328+00:00 heroku[web.1]: State changed from starting to crashed

there is a wrong word (webhooks[x] --> webhook[o]) in source...

After many tries and errors, i found that why there was no response in facebook messeger's mychatbot.

This was caused by the followings,

In index.js line37
app.post('/webhooks', ....
--> app.post('/webhook', ....
by this wrong url,
heroku's /webhook could not find the exact the path...

ps.
app.get('/webhooks', ....
--> app.get('/webhook', ....