How to Create A Weather Chatbot. A React-based Weather Chatbot... | by Ng Wai Foong | Towards Data Science

By reading this piece, you will learn to create and deploy your own weather chatbot. At the end of this tutorial, you should have a basic chatbot that can respond appropriately in regards to the current weather, temperature and humidity when being asked by the users.
There are 4 sections in this tutorial:
Weather APIRasaReact-based Chatroom ComponentConclusion
Weather API
Rasa
React-based Chatroom Component
Conclusion
Let’s proceed to the next section
For getting the weather data, I am going to use ClimaCell’s weather API. It comes with a free tier in which you can make up to 1000 call per day and 100 per hour which is more than enough for our use case.
Head over to the login page and sign up for it. You should see the following dashboard once you have logged into the main page.
Remember the API key as we are going to need it later on.
Let’s move on to the next section and start playing around with Rasa stack which is an open source machine learning framework to automate text- and voice-based conversations.
Creating a virtual environment before you continue with the package installation is highly recommended. Install Rasa via the following command.
pip install rasa
Verify that you have installed the module by running
pip show rasa
Make sure that terminal is at the root of your project directory. Initialize the sample dataset by running the following:
rasa init
When it prompt for training, choose No (n) as we will need to train it again later on. You should have the following files in the directory.
Uncomment the codes for action_endpoint in endpoints.yml
action_endpoint:  url: "http://localhost:5055/webhook"
Add a new intent called ask_weather in nlu.md. Provide a few examples inside it
## intent:ask_weather- what is the weather now- may i know the weather- is it sunny outside- is it raining now
Once you are done, change the content in domain.yml to the following. You can find the complete code in the following gist.
Append the following code in stories.md.
## weather* ask_weather  - action_ask_weather
Update the code in actions.py as follow. You can find the complete code in the following gist.
You need to modify a few parameters for querystring based on your use case. I used the latitude and longitude for my current location. I have specified additional fields such as temp and humidity as well. Feel free to modify it accordingly.
lat — Latitude, -59.9 to 59.9
lot — Longitude, -180 to 180
unit_system — Unit system, “si” or “us”
fields — Selected fields from the data layers provided (such as “precipitation” or “wind_gust”)
apikey — The API key from the dashboard of Climacell Weather API.
Next, we are going to train it via the following command
rasa train
It might take some time for it to train and you should see a new folder called models with a file that ends with tar.gz.
The next step is to run both the Rasa Server and Action server. Let’s start with the Action Server. In the existing terminal, run the following command to start the action server. It will be defaulted to port 5055.
rasa run actions
You should see the following output at the terminal
Open a new terminal and activate the same virtual environment. Change to directory to the same directory as the previous terminal. Run the following command to start the server. The default port is 5005.
rasa run --enable-api --cors "*"
cors is required to allow secure data transfer and prevent you from getting Cross-Origin Resource Sharing error. The terminal will show the following output. For Windows users, you need to use double quotes to ensure that CORS registered correctly.
Let’s move on to the next section to implement the UI for our weather chatbot.
For this tutorial, I am going to use a readily available UI framework made by the team from Scalableminds. Head over to the following github repository and clone/download it into your machine. Unzip it and place all the files in a separate directory from the Rasa files.
The instruction provided by the official github page is based on yarn but I am going to use npm for this tutorial.
Make sure that you have installed Node.js in your machine. Open a new terminal and change it to the root directory of chatroom-master where package.json is located. Modify the code at line 35 in package.json from
"prepare": "yarn build",
to
"prepare": "npm build",
This modification is required if and only if you are using npm to install the packages.
Next, run the following command to install the necessary modules.
npm install  //for npm useryarn install //for yarn user
It will create a new folder called node_modules and install all the listed packages inside it.
You should have the following files and folder inside chatroom-master
Before you build the files, make sure that you are using port 5005 for the Rasa Server. If you are using other ports, you need to make changes to line 18 in index.html.
host: "http://localhost:5005",
Build the files by running the following command.
npm run build  //for npm useryarn build     //for yarn user
It will create a new folder called dist and create a minified version of the required files inside it. After that, you can simply serve it by running
npm run serve //for npm useryarn serve    //for yarn user
You should see the following output at your console
Open up a browser and go to the the following url
http://localhost:8080/index.html
It should load the chatbot interface for you to test it. For now, it can only answer basic questions and provide you with information on the weather.
Congratulations for completing the tutorial. Let’s recap on what you have learned today.
We started off with signing up to get the apikey for access to weather data.
Then, we moved on to install the necessary packages such as Rasa. We modified the dataset to include an additional intent and stories for weather. Once we have completed the training, we started both the Action Server and Rasa Server.
For the Chatbot UI, we used a React-based component and serve it normally via npm run serve. You can easily extend and modify it based on your own preferences and use cases.
Thanks for reading this piece. Hope to see you again in the next tutorial!
A Beginner’s Guide to Rasa NLU for Intent Classification and Named-entity RecognitionMulti-lingual Chatbot Using Rasa and Custom TokenizerReact-based Chatroom Component for Rasa StackRasa Open Source
A Beginner’s Guide to Rasa NLU for Intent Classification and Named-entity Recognition
Multi-lingual Chatbot Using Rasa and Custom Tokenizer
React-based Chatroom Component for Rasa Stack
Rasa Open Source