Build an Edge-enabled Intelligent Chatbot with PubNub and Watson Assistant
Tags: javascript, opensource, machinelearning
Published: 2020-08-13 16:25:07

Chatbots are a rapidly growing market for applied artificial intelligence. But what separates a smart chatbot from a virtual assistant that's just not helpful? We want to make sure our chatbot understands the end user's intents and is able to effectively respond in an intelligent manner. At the same time, we want to make sure our chat infrastructure is globally-distributed for a low-latency and high-availability experience.

In this tutorial, we'll combine the Watson Virtual Assistant technology with PubNub's global data stream network to build a React-enabled chat application that can intelligently respond to user queries.

###Table of Contents

* [Create your Watson Assistant](#watson)
* [Get your PubNub Keys](#pubnub)
* [Remix your Glitch code](#glitch)
* [Next Steps](#next)

###Sign Up for your Free Watson Assistant<a name="watson"></a>

1. [Click here to sign up for your IBM Cloud account](https://ibm.biz/Bdqgtw 
). You'll need to provide your Email address and choose a password:

![IBM Cloud Signup](https://dev-to-uploads.s3.amazonaws.com/i/8e0brssm6p6faoimh80r.png)

ℹ️ *Unable to verify your email address?* Sometimes outlook.com and gmail.com domains get flagged as spam. Try using another email account.

2. Verify your email address by **entering the verification code** in your confirmation email.

![Finish creating your account](https://dev-to-uploads.s3.amazonaws.com/i/suyebywt8d1tdwbbm7be.png)

3. Enter your **personal information**, click **Next** and then click **Create account.**

4. Acknowledge the IBM Privacy policy.

5. *Congratulations!* Your account was created, and now we can create our Watson Assistant. On the top right of your screen, click **Create resource +.**

6. Now you'll see all the Services and Software you can create. We'll type `assistant` into the search box and press **enter.** Then click the box for **Watson Assistant.**

![Search box](https://dev-to-uploads.s3.amazonaws.com/i/j6ttjao07xyrueizsznx.png)

7. Make sure the **Lite** plan is selected -- you'll get 10,000 messages per month free. In the bottom right corner, click **Create.**

![Create Watson Assistant screen](https://dev-to-uploads.s3.amazonaws.com/i/onpoqdeyn7c2bkooe87k.png)

8. Congratulations, you've created your own Watson Assistant! For the rest of this lab you'll want to take note of the `API key` and `URL` under Credentials. Then, click **Launch Watson Assistant** so we can configure the assistant.

Now we can take a look at the different ways we can configure your assistant:

![Watson Assistant Skills](https://dev-to-uploads.s3.amazonaws.com/i/inen2g19zi6kmhfjvf0m.png)

Let's go over these briefly:

* **Intents** are purposes or goals that are expressed in a customer's input, such as answering a question or processing a bill payment.
* **Entities** represent information in the user input that is relevant to the user's purpose.
* **Dialog** is where you'll add nodes that define how your assistant will converse with your end users.
* **Options** is where you'll hook in your webhook URLs, if you decide to do other integrations in the future.
* **Analytics** tells you the metrics of the conversations, and how well your assistant understands what end users are saying to it.

We could spend a lot of time building our own skill, but instead, we can import a pre-built one!

9. On the left of your screen, click on the **Assistants** icon.

![Assistants page](https://dev-to-uploads.s3.amazonaws.com/i/012kp3k2lw79bqnlfvsb.png)

10. Click on your assistant (mine is called **My first assistant**)

11. Click the triple dot menu and click **Swap skill.**

![Assistant skill swap](https://dev-to-uploads.s3.amazonaws.com/i/nk4j4425r2mzh4rh4vj5.png)

12. Click **Use sample skill** and then click **Customer Care Example Skill.**

![Customer care example skill](https://dev-to-uploads.s3.amazonaws.com/i/1bgve9q0myhq4o1v3jzc.png)

Yay, we've populated a sample skill with intents, entities and dialog notes!

13. Now let's grab our API details. At the top of the page, click the left arrow next to **Assistants**.

![Back to assistants](https://dev-to-uploads.s3.amazonaws.com/i/3ncezgerglp1rfqx20a8.png)

14. Click the triple dot menu in your assistant and click **Settings**.

![Assistant settings](https://dev-to-uploads.s3.amazonaws.com/i/os5fjl249apk1hdvefle.png)

15. Take note of your **Assistant ID** and **API key**.

![Assistant settings](https://dev-to-uploads.s3.amazonaws.com/i/sc8ti6ve3hs9hv92gk6q.png)

###Create your PubNub Account<a name="pubnub"></a>

![PubNub Logo](https://dev-to-uploads.s3.amazonaws.com/i/z9zzn2eza3isdzoyrt6a.png)

Next we'll create a private PubNub channel and get our keys by creating an account. [Click here to get started](https://dashboard.pubnub.com/signup).

You'll need to copy down the `publish key` and `subscribe key` from your PubNub project. Keep a note of these keys, we'll use them to send and receive messages inside our project.

###Remix our Glitch Project<a name="glitch"></a>

[Glitch](https://glitch.com/) is a fun, collaborative coding environment that makes it really easy to re-use, or "remix" in Glitch parlance, other people's code. 

Please visit our [Watson PubNub Chat Project on Glitch](https://glitch.com/~pubnub-watson-react-chat-workshop). Once you **click Remix,** you'll duplicate that code into your own project.

After that, **follow the instructions in the** `README.md` in order to complete the workshop.

###Next Steps<a name="next"></a>

* [Red Hat Marketplace](https://ibm.biz/BdqAJY) is a collaboration between Red Hat and IBM that allows you to buy, deploy and run applications across your public, private and hybrid cloud deployments. If your company makes cloud software, you can also sell your software direct to customers through Marketplace.
* Check out other [Watson posts on the PubNub blog](https://www.pubnub.com/blog/tag/watson/).
* [Bother Dave on Twitter](https://twitter.com/drnugent)