Engineering

How to build a Microsoft Teams bot with Voiceflow

Xavi Portilla Edo
|

Microsoft Teams x Voiceflow

Microsoft Teams is one of the most important applications used in business. It has a lot of functionalities like channels, apps and chatbots. In this example, we are going to build a Microsoft Teams bot using Bot Builder and the Voiceflow runtime Client SDK.

Prerequisites

The technologies employed in this project are listed below:

  1. Voiceflow Account
  2. VS Code
  3. Microsoft 365 developer account (Sign up if you don't have one already!)
  4. App Studio - look for the app in Teams desktop client and install

Overview

Bots are conversational apps that a user can send and/or receive messages to/from the bot.

  1. index.ts: The TypeScript code that listens to the incoming requests. Using Bot Builder and Express.JS
  2. bot.ts: Sends a message to Voiceflow using Runtime Client SDK.
  3. teams-app: Manifest package to be installed in Teams client.

See the instruction below to see how you can create your chatbot package using App Studio

Microsoft Teams - App Configuration

Here's the step-by-step how to set up the chatbot and install it on Teams.

Creating App Manifest with App Studio

App Details

Open App Studio app in Teams client.

Then, click Create a new app and fill out all the required fields including the Bot names, descriptions, etc.

Generate an App ID.

In App URLs section, include your privacy and TOU webpages. In this example, I am just using the placeholder URL, {% c-line %}https://example.com{% c-line-end %}.

Bots config

From the left menu, select Capabilities > Bots.

Then, click Set up to configure a new bot. Fill out the bot name, and let's just select the Personal scope for now.

Next, click Generate new password. At the prompt, copy the password. You will need to paste it in your .env file in the next step.

App Credentials

Copy the ID under your bot name (something looks like {% c-line %}123xx567-123x-...{% c-line-end %}) and paste it as an environment variable in your {% c-line %}.env{% c-line-end %} file.

Under App Passwords, generate a new password, and copy it. Then paste it in your {% c-line %}.env{% c-line-end %} file.

These credentials are used to initialize your bot adapter. (See index.ts).

For Messagind Endpoint, we will use ngrok. The URL should be something like: {% c-line %}https://<id>.ngrok.io/api/messages{% c-line-end %}.

Finish creating the app manifest package

Go to Finish > Test and distribute.

If you get any errors, you'll need to fix it. Otherwise, click Install your client.

You can also download the zip file that contains {% c-line %}manifest.json{% c-line-end %}, and two icon images to install later or distribute.

Voiceflow Configuration

NOTE: Before we continue, it's important we create a general project on Voiceflow.

Let's create the Voiceflow client to work with Voiceflow's cloud using the Runtime Client SDK:

The {% c-line %}getclient(){% c-line-end %} function calls the {% c-line %}createClient{% c-line-end %} method of the factory object. This is the intialization of that factory object:

As you can see, there are some values that will be added to our {% c-line %}.env file {% c-line-end %}. Let's explain how to obtain those variables.

1. VersionID

To obtain your VersionID, you have to go to your Voiceflow Project:

Then copy the {% c-line %}VERSION_ID{% c-line-end %} from the URL in your address bar. When you are inside a Voiceflow project, your address bar should have a URL: {% c-line %}https://creator.voiceflow.com/project/{VERSION_ID}/...{% c-line-end %}

2. apiKey

To obtain the API Key, we need to go to our workspace where we created our General Project. Once there, we have to append to the URL {% c-line %}/api-keys:{% c-line-end %}

Next, click the {% c-line %}Create new API Key{% c-line-end %} button to create a new one:

You'll need to add a name for the new API Key, for example, {% c-line %}ms-teams-bot{% c-line-end %}. Once this is completed, we can click the {% c-line %}Confirm button{% c-line-end %}:

Finally, we have to add these variables to our final {% c-line %}.env{% c-line-end %} file. It should look like this:

Test your bot

In your Microsoft Teams client, we can now try out our personal bot. You can access the bot you just installed from the sidebar on your left.

Now you have a 1:1 chat interface with the bot. Let's type sending a message.

Deployment

Please note: Ngrock is a great tool; however, this does not work for production environments.

To deploy your chatbot, view the following: Deploy your bot to Azure.

Resources

Conclusion

And so with just 60 lines of code we now have a Microsoft Teams bot connected to Voiceflow. I hope this gives you a better understanding of the how you can use Voicefow to bring conversational experiences into your very own interfaces and products. Happy coding!

⚙️ To access all of the code mentioned above, click here.