Chatbot with Angular 5 & DialogFlow

I have seen many posts on how to build a chatbot for a wide variety of collaboration platforms such as , , … So I decided to build a chatbot from scratch to production using latest release , and . Slack Facebook Messenger HipChat Angular v5.0.0, DialogFlow AWS Here is how our will look like at the end of this post: chatbot Note: This project is open source and can be found my . Github To get started, create a brand new Angular project using the : Angular CLI ng new smartbot — style=scss 1 — Chatbot Architecture We will split out chat app in different components and each component will be able to communicate with others using attribute directives: 2 — Message Entity Create an empty class by issuing the following command: ng generate class models/message The message entity has 3 fields: 3 — Message List Component Generate a new component: ng generate component components/message-list Now we can display the messages by iterating over them: The code of this component should look like this: Note the usage of instead of the relative path, its called . To be able to use aliases we have to add the properties to our file like this: @app/models alias paths tsconfig.json Note: I also added alias to be able to access environment variables from anywhere in our application. @env 4 — Message Item Component Let’s build a component that will simply display a message in our message list: ng generate component components/message-item In , add the following content: message-item.component.html The code of the component should look like this: 5 — Message Form Component Let’s build the form that will be responsible for sending the messages: ng generate component components/message-item In the , add the following content: message-form.component.html And it’s corresponding typescript code in message-form.component.ts: The method will be called each time a user click on send button. sendMessage() That’s it! Try it by yourself and you will see that it’s working. ng serve At this moment, you wont get any response, that’s where comes to play. NLP 6 — NLP Backend I choose to go with Sign up to and create a new agent: DialogFlow. DialogFlow Then, enable the feature to have a simple chitchat: Small Talk Note: You can easily change the responses to the questions if you don’t like them. To go further you can create your own & as described in my . Intents Entities previous tutorial Copy the . It will be used for making queries. DialogFlow Client Access Token Past the token into your file: environments/environment.ts 7 — DialogFlow Service Generate a which will make calls the to retreive the corresponding response: DialogFlow Service DialogFlow API ng generate service services/dialogflow It uses the to process natural language in the form of text. Each API request, include the field in the . DialogFlow API Authorization HTTP header Update the method in as follows: sendMessage() MessageFormComponent Finally, in copy and past the following code to include the and the directives: app.component.html, message-list message-form 8 — Deployment to AWS Generate production grade artifacts: ng build — env=prod The build artifacts will be stored in the directory dist/ Next, create an with : S3 bucket AWS CLI aws s3 mb s3://smartbot-mlabouardy Upload the build artifacts to the bucket: aws s3 cp dist/ s3://smartbot-mlabouardy — recursive — grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers Finally, turns website hosting on for your bucket: aws s3 website s3://smartbot-mlabouardy — index-document index.html If you point your browser to the , you should see the chatbox: S3 Bucket URL