Most tasks are repetitive and time-consuming. What if we could use a bot to help in doing the tasks instead? This will hugely increase productivity. Chatbots are fantastic for this. 

In this tutorial, I’ll walk you through steps to adding a chatbot to your Stream Chat app using Dialogflow and Vue. At the end of this tutorial, you will build a frequently asked questions (FAQs) bot, be more familiar with Stream Chat API, and the webhook system provided by Stream.
Here is a preview of what we’ll be building:

Prerequisites

To follow along with this tutorial comfortably, the following are expected:

  • A basic understanding of JavaScript
  • A basic understanding of Vue.js
  • You should also have Node installed on your system (version 8.9 or above – preferably the latest 12.x)
  • You should have npm or yarn installed on your system
  • Have ngrok installed on your system

If you have all the above ready, then let’s get started!

Set up the Client App – Create a New Vue App

Vue provides a CLI for scaffolding a new Vue project. First, you’ll need to install the Vue CLI globally on your system (if you don’t have it installed already). After that, we’ll create a new Vue project with CLI commands.
Next, create a new Vue project by running the following commands in any convenient location on your system:

$ yarn global add @vue/cli # Create a new Vue project (for the prompt that appears, press enter to select the default preset.) 
$ vue create faqx # Change your directory to the project directory $ cd faqx # Install Stream Chat client SDK $ yarn add stream-chat # Install axios - a library for making request $ yarn add axios # Run the app! $ yarn serve

Accessing the URL displayed on your terminal will take you to a Vue default page.

Get Your Stream Chat Keys

To start using the Stream Chat API, you need to have an API key. 
Create an account here or log in if you already have an account. 
Then, from your dashboard

  • Create a new app using any convenient name. I will call mine “FAQ”
  • Fill in the App Name as “FAQx” or any name you wish
  • Finally, submit the form by clicking on the Submit button to create the app

Once the app is created, you will be provided with some options on your dashboard. Select Chat to go the Stream Chat dashboard.

Next, check Disable Permissions Checks and then click on the Save button. Then, scroll to the bottom of the page and take note of your App Access Keys – Key and Secret.

Next, create a .env file in the root directory of the project and update your Stream keys to it:

VUEAPPPORT=3000
VUE_APP_SERVER=http://localhost:3000 VUEAPPKEY=<YOUR KEY> 
APPSECRET=<YOUR SECRET> DIALOGFLOWPROJECTID=<YOUR DIALOGFLOW PROJECT ID>
GOOGLE_APPLICATION_CREDENTIALS=<GOOGLE SERVICE FILE>

Remember to replace <YOUR KEY> and <YOUR SECRET> with the correct app keys you have noted above.

Set up the Server

Next, create a new directory named server in the root directory of the project. Then open up a new terminal and then change your current directory to the server directory. Then install the following dependencies that we’ll need for the server:

$ yarn add express cors body-parser dialogflow path uuid dotenv

The above dependencies include:

  • express – A Node framework we are using to build our server
  • dialogflow – Dialogflow’s Node SDK
  • dotenv – An npm package for parsing configs from .env files
  • cors, body-parser, uuid and dotenv (all excellent npm packages)

Next, create an Express app by creating a new file named app.js to the server directory and then add the following code to it:

 
// ./server/app.js const express = require("express"); const cors = require("cors");
const bodyParser = require("body-parser");
const StreamChat = require('stream-chat').StreamChat;
const dialogflow = require('dialogflow').v2beta1;
const uuid = require('uuid'); require('dotenv').config({path: "../.env"}) const app = express();
const port = process.env.VUE
APPPORT || 3000 app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); // Initialize Stream Chat SDK
const serverSideClient = new StreamChat( process.env.VUE
APPKEY, process.env.APPSECRET
); app.get("/", async (req, res) => { res.send({ hello: "World!" }); }); app.listen(port, () => { console.log(Node app listening on port ${port}!) });

In the code above, after importing the packages that we have installed,

  • We created an Express app using const app = express();
  • Next, we initialize the Stream Chat SDK
  • Then finally, we created an endpoint – / (app.get(‘/’,…) for testing to know if the app works. So, if you visit http://localhost:3000/, you will get a message – { hello: ‘World!’}

Next, create a new endpoint for creating a token.

// ./server/app.js app.post('/login', async (req, res) => { const userId = req.body.userId if (!userId) { return res.status(400).send({ status: "error", message: "username and name is required" }) } return res.status(200).send({ status: "success", token: serverSideClient.createToken(userId) })
});

The token is required for initializing the Stream Chat SDK. Finally, start up the server:

node app.js

If it starts successfully, you will see a message printed to the terminal – “Node app listening on port 3000!”

Dialogflow is a Google-owned developer of human-computer interaction technologies based on natural language conversations. Before you can start using the service of Dialogflow, you need to have an account with them.
Now head to Dialogflow’s website and create a free account if you don’t have one already. You’ll need a google account to be able to create an account. Once you are on the page, click on the sign in with Google button.
From your dashboard,

  • Create an agent by selecting Create Agent.
  • Type in the Agent name as FAQX.
  • Click the Create button to processes the form.

Next:

  1. Click on the gear icon, to the right of the agent name.
  2. Enable beta features and APIs.
  3. Copy your project ID and update the .env file with it:

DIALOGFLOWPROJECTID=<YOUR DIALOGFLOW PROJECT ID>

  1. Click the Save button to save your changes
  2. Under the GOOGLE PROJECT section, click on the name of the Service Account.

This will take you to the Google Cloud Platform Service Accounts page, but you first need to update the Service Account’s role.Once the page finishes loading: