Creating a Cool Crypto Concierge over the Weekend
Tags: web3, nlp, javascript, tutorial
Published: 2023-01-31 07:13:42

Hello decentralized world! Apologies for not being as active an author as I used to be. Balancing things out can be tiresome. Anyways, here we are – back with another interesting, beginner-level article where we will make a cool mini-project. 

Before we begin, let’s go over the requirements or target audience for this article. This article is targeted towards a beginner-level audience. Some basic understanding of things like NLP is required. However, I will be giving a 3-min rundown of everything so no worries. All that is required is practical knowledge of JavaScript. ML and Web3 are not really that tough – why should learning them be?

What will we be building in this article? Firstly, we will use Dialogflow to create a Natural Language Understanding agent. This agent will use Covalent to get the crypto balance when the user provides a wallet address and a chain. We will then integrate this agent as a bot on Telegram and as an app on Google Chat. So, let’s get the show on the road…

## Dialogflow
First off, we have [Dialogflow](https://cloud.google.com/dialogflow/docs). If you haven’t used Dialogflow before, let me give you a 3-minute rundown of what it is to help you get started.

Dialogflow is Google’s Natural Processing Understanding offering. Natural Language Understanding might be considered a step after Natural Language Processing. In the latter, you try to design systems (RNN, LSTM, BERT or even plain old embeddings) to teach or make an artificial agent understand our human language. Natural Language Understanding is where that artificial agent can already understand what you are saying. It can extrapolate on what you might say or how you might say – it adapts. Basically, it’s another step towards Skynet.

In Dialogflow, you create “**Agents**”. These agents are a generalized term of _bots_. Developers need to create “**Intents**” for each agent. Based on what you say, your intention is inferred and one or multiple of these “**Intents**” might get triggered.
In your “**Intent**”, you define what things the user might say to trigger it. You also define a set of “**Actions**” that “**Intent**” will take when triggered. 

“**Actions**” and “**Parameters**” are the core of “**Intents**”. “Parameters” are extracted from what the user says. A simple example of this might be – an Agent which shows the user the weather. The agent gets triggered when the user says “_What is the weather today?_”. The Agent has only one Intent defined – show the weather. This Intent gets triggered – let’s call it the “**Weather Intent**”. Now “**Weather Intent**” needs a place and a time to give out the weather. These two things can be considered as “**Parameters**”. These “**Parameters**” can change from user to user (kind of like arguments/input to a method or function in a programming language).

Enter Dialogflow magic. Your Dialogflow Agent’s Intent can automatically extract these “**Parameters**” from user audio/text. So, in the above example, `today` would be extracted from the sentence. The Intent can then ask for the location. After this, the Intent can then use a Weather API behind the scenes and show the weather to the user.

Now, each “**Parameter**” will have an “**Entity**”. Each “**Entity**” will have a “**Entity Type**”. Think of these as a type of variable and its identifier in case of a programming language. The developer defines the datatype or Entity and the parameters are matched as values with a specific entity type. Some samples of this need to be provided to Dialogflow and then it can train on those behind the scenes and infer the rest.

Last but not the least, when we use an external API in the “**Intent**” to fetch the results to the user’s queries then the process is called “**Fulfillment**”. Dialogflow provides an inline editor where you can write your intent handlers (kind of like routes handlers in backend development). You can then map these handler functions to Intent names in the code. You can also do the above from a Cloud function like set up and providing a secure Webhook. But in our case, we will stick to the inline editor

> Dialogflow comes in two flavours – CX and ES. CX stands for Customer Experience while ES is for Essentials. The former is a more production-grade version of Dialogflow. In our case, Dialogflow ES is enough.

## Covalent
Contrary to popular belief – Web3 is not at a level at the time of writing where it can provide a smooth and seamless User experience like the one provided by Web2. This stems from the fact that in the case of Web3, we are querying decentralized data. The data is coming from a blockchain and not from a central backend server. So, there is a bit of latency.

To remedy this, _Indexing_ was introduced in Web3. _Indexing_ is basically querying up the blockchain data, storing them in a formatted manner in a database and then exposing the data stored in the database. Frontends can query this database for blockchain data. This improves latency and as a result – User Experience.

[Covalent](https://www.covalenthq.com) is an up-and-coming service which provides blockchain data in a similar manner. The USP in Covalent’s case is that it provides all the data through a single API. This makes it ideal for beginners and also removes the developer team’s warm-up time. With Covalent, developers do not need to learn GraphQL or go through the steps in setting up a subgraph (ref. The Graph Protocol).

**We will be using Covalent in our Fulfillment to get user wallet address balances.**

## Housekeeping
This tutorial assumes you have a Google Cloud Platform account with a billing setup. If you don’t know what that means, you need a credit or debit card to be attached to Google Cloud for billing purposes. You will get a free trial period of 1 year and $300 credit for playing around.

To follow along in a hands-on manner, the reader also needs a Covalent API key. This is way easier than the above process. Just sign up on [Covalent](https://www.covalenthq.com) with your email and they will provide you with an API key first thing on the Covalent Dashboard like the image shown below.

![Covalent Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ln6jslaa7otl1qmuxdi.png)

## Creating a Dialogflow Agent

![Dialogflow Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ubwjtzcn3nah6iz8pj7.png)
 
Go to the [Dialogflow](dialogflow.cloud.google.com/#/agent) console. If this is the first time you are opening it, you will see a screen similar to the one above. It will ask you to give a name to the agent. Choose a name you’d like. In our case, I am starting out with “**my-crypto-assistant**”. You can change this anytime you want.

![Dialogflow Agent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qat4081udifv15mb5rxa.png)
 
Once you have created the agent, you will need to create intents. By default, Dialogflow provides two intents. These are “`Default Welcome Intent`” and “`Default Fallback Intent`”. The former is triggered when someone invokes your agent. It’s the first thing that starts. While the latter is kind of a 404 page. Both of these intents provide conversation to make the user <-> agent exchange more lifelike.

### Entities
We will first create our Entities. In our case, we will need two entities to show the user their balance. First is the user address and second, the blockchain they’d like to see the balance on.

To create the entities, on the left panel, click on Entities. If you are not prompted for an entity name, then click on the ”**Create Entity**” button. This should prompt you to enter your entity name. In our case, let’s first create an entity called “**address**” like the one shown below. Below the entity name, you will see a few checkboxes. Make sure the RegExp entity checkbox is checked. Next enter the regular expression `/(0x[a-f0-9]{40})/g` in the row and click on Save as shown below. Explanations come after the image.

![Address Entity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2tqgbcrmz1c9olneipc.png)
 
What we are saying in the above steps is that there is a type called address and it can be identified by the regular expression. Any text in the user input which matches the pattern passed in will be counted as an address.

Next, we will define our chain type. Again, click on Entities on the left panel and then click on “**Create Entity**”. As shown in the image below, we will name this entity as “**chain-name**”. Now this won’t exactly be a regex. Instead, we will define synonyms for the values which the entity “**chain-name**” will take. The values taken by the entity are the chain names supported by Covalent. Covalent supports 72 chains. We won’t do all of the 72 chains. Instead, as shown below, we will support only a select few.

![Chain Name Entity in Dialogflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h65pzfk6r8ea18q7ystd.png)
 
In the image above, the rows below the entity name have two columns. The left column takes the values which the entity will take while on the right we give the values which the user might say or enter. The values on the right will be extracted from user input and then they will evaluate to the values on the left. Click on Save and that will complete our Entity creation step.

### Intent
Next, we will create our main intent. This intent will be triggered whenever the user wants to know the balance of a wallet address on a specific chain. Let’s call this intent “**Get Balance Intent**”. Click on “**Intents**” in the left panel and then click on Create Intent. This will prompt you for an Intent name. Enter the name of the intent.

![Dialogflow Intent Creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgtstna4m1w3az1sj3dd.png)
 
After this, we won’t concern ourselves with “**Context**” but we need to pay attention to “**Training Phrases”**. This is where we will enter example statements that the user might say to trigger this intent. As shown above, there are multiple ways to enter a training phrase. _Usually, 5-6 training phrases suffice. The Agent will then expand the vocabulary itself during training and as more users use it. That‘s the magic of NLP_.

As shown in the image above, we also need to select the parameters which the agent needs to extract. Select example parameters in your training phrases. Dialogflow will automatically prompt you to select the type from a list of entities. In our case above, we select the words like “_Polygon Testnet_”, “_Ethereum mainnet_” and “_arbitrum_” one-by-one and denote them as `@chain-name` entity type. Likewise for the wallet address, we select them and select `@address` as the entity type.

If you scroll below, you will see a section called “**Actions and Parameters**”. You will notice that if you have followed the above steps then Dialogflow has already added the parameters and you do not need to a thing. Refer to the image below.

![Dialogflow Parameters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kp13yrvm5fke8wvcus68.png)
 
We need to enable fulfilment for our “Get Balance Intent”. Scroll at the very bottom and then click on “**Enable webhook call for this Intent**” and “**Enable webhook call for slot filling**” if they are not already enabled like the image below. And then Click on Save. This will start the agent training.

![Enable Fulfillment for Intent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i22n35vj6mw2fwzc89m6.png)

### Adding a Follow-up Intent
After the above step, we have almost finished the first half of this phase. Lastly, to improve the agent, we will add a follow-up intent which will repeat the prompts of this intent. This allows for better fidelity if the agent is not confident.

![Adding a Follow-up intent in Dialogflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6oxfcjeg8lxueddn8mnn.png)
 
Just click on Intents on the left panel and then hover over the “**Get Balance Intent**”. Towards the right of it, you will see “**Add a follow-up intent**” option. Click on that, scroll down and select “**repeat**”. Following this, your Intent section should look somewhat like the image below.

### Writing the Fulfillment
Click on Fulfillment on the left panel. This will show you the inline editor. Upon enabling it, if you don’t already have Google Cloud Billing enabled, then it shall prompt you to setup a billing account. On completion, you can enable the inline editor and will see something similar to the image below.

![Dialogflow Fulfillment Inline Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsgyoan5hb5ahy2xlwxu.png)
 
The inline editor contains JavaScript Code. We will write the handler function in the `dialogflowFirebaseFulfillment` export. Please the following code below the fallback function:

```javascript
function getBalance(agent){
    const chain = agent.parameters['chain-name'];
    const address = agent.parameters.address;
    console.log("Parameters received", agent.parameters);
    return axios.get(`https://api.covalenthq.com/v1/${chain}/address/${address}/balances_v2/?key=ckey_7fc6e038bf44d18c4ef449a1f`)
    .then(result => {
      const items = result.data.data.items;
      
      const balanceCards = items.map(item => new Card({
        title: `${item.balance} ${item.contract_ticker_symbol}`,
        imageUrl: item.logo_url,
        text: `Your 24h Balance is: ${item.balance_24h}\nContract Address: ${item.contract_address}`
      }));
      
      agent.add(balanceCards);
      
      agent.add(`Hope you liked the experience. WAGMI ;)`);
    });

```
In the function above, we get an argument called `agent`. This is supplied by Dialogflow. This argument allows us to extract parameters from the user input and put output to the user among other things. First we extract the parameters `chain-name` and `address` into constants called `chain` and `address`. 

Next, we pass this on to the Covalent API as parameterized strings.
Keep in mind that we also need to add out API key to the URL as I have done above. It might be counted as a security flaw in the design but we won’t debate that now.

The result we get from the API, we process it. The Axios API call result contains the response in a `data` property. Inside that property, we need to again access a `data`. This will finally give us access to the `items` property which contain an array of balances.

We create `Cards` out of these items and pass these on to the `agent.add()` function. This `agent.add()` function is used to print output to the user. Make sure to add `axios` as a dependency in the `package.json` file in the tab adjacent to `index.js`. 

Lastly, add the function to the `intentMap` with the Intent name as the key. This links the Intent to the function `getBalance(agent)`. Clicking on “**Deploy**” after this will deploy the code on a cloud function and our task will be mostly done.

![Deploy Dialogflow Fulfillment code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mycwa66dwcekda0zv7pc.png)

With the successful deployment, you will be able to test out the agent in the simulator on the right which says “Try it now” (refer to the above image). You can also click the link below the inline editor to view the execution logs in case you are not getting the response you expected.

## Creating a Bot

![Creating a Bot from Dialogflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8bclu11tz3jrp52szdn.png)

To create a bot, we need to click on the **Integrations** on the left panel. You will see a variety of integration available like Slack, Telegram and IVR-based. The image above should seem familiar. You can try to create a Web Demo. This will expose your agents as a chatbot. You will be able to add this chatbot to your website by embedding it in `iFrame`.

In our case, let’s build a Telegram Bot. Scroll to the Telegram option and click on it. You will need to click on the More in Documentation link as shown in the image below. This will direct you to the documentation. You will be able to access BotFather from there and retrieve an API token for your bot. Enter the API token in the Dialogflow tab like the image shown below and you will have a cool new bot you can chat with.

![Telegram Bot from Dialogflow Agent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nqtb1plvrq5ezjjedxn.png)
 
I have already deployed a bot called [@CovalentTestBot](https://web.telegram.org/k/#@CovalentTestBot) on Telegram. If you wish, you may converse with it to know your balance on different chains. You can also try to create a Google Chatbot. This will help you add that bot as an app to any Google Chat.

## That’s about it…
With this, we have reached the end of the article. At this time, if you followed along, you should have a fully functioning Crypto Concierge at your service. Thanks for following along. It was quite long.

![Michael from The Office](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2sv8y0czrzkw973v620q.gif)

Let’s end the article here. If you have doubts or wish to reach out to me, my twitter handle’s @abhikbanerjee0. Feel free to start a discussion. Until next time, keep building awesome stuff on Web3 and WAGMI!