Tutorial: Intro To The Flow.ai

flowchart weather image

1. Before We Start

1.1 Why Flow.ai

Designing, developing and deploying for voice doesn’t need to be laborious and time-consuming. We made it super easy for professional teams to utilize our powerful AI engine with a beautiful, easy-to-use drag and drop interface.

You can focus on the customer experience, while our platform does all the heavy lifting for you. This allows you to easily model conversation flows. The Flow.ai engine will keep track of the language understanding and context of each conversation.

1.2 Create an account

Flow.ai is free to use to explore the possibilities of our powerful AI toolkit. You pay as you get more value out of Flow.ai and the number of customers you’re interacting with rises.

Click here to create an account.

1.3 What We’re building

In this tutorial, we will cover creating a voice/chat experience from scratch start to finish. We will look at how the design process works when you want to create a conversational experience. Flow.ai is a toolkit for professionals, with it you can design, develop and deploy amazing experiences.

We will learn how the add action and execute a cloud code with an API call. This tutorial also covers how you can submit your voice/chat experience to Amazon Alexa and Facebook Messenger.

2. Design process

2.1 Introduction

The best way to start a project is by sketching out your conversational experience. You can do this for example with sticky notes of in our case with a flowchart. This way you will know what intents and system integrations you need. Because we are designing for Amazon Alexa and Facebook Messenger we also can decide which UI elements we need.

2.2 Conversation topics

First, let’s decide what flows we want to create. For this tutorial, we are going to keep it simple. The user can greet, ask for the weather and there is a simple onboarding flow. flowchart topics

2.3 Get weather report

2.3.1 Trigger flow

We want our users to be able to ask for the weather. We have to create a flow that can be triggered with an intent. flowchart weather get 1

2.3.2 Parameters

From the question of the user, we want to extract some parameters to get a weather report. In this case, we want a city and a date. The city name is a required parameter, and the flow can only reach fulfillment is city name is provided. If the user doesn’t provide a date, then we will show today’s weather. flowchart weather get 2

2.3.3 Required parameters

If the user doesn’t provide a city, then we will ask the user for which city he/she want to know the weather. flowchart weather get 2b

2.3.4 In context: City

We also want to ask follow-up questions in the context of the first intent. In this case, the user wants to know the weather in another city. flowchart weather get 3a

2.3.5 In context: Date

The user can also ask the weather for a specific date. flowchart weather get 3b

2.3.6 API call

After we have collected all the parameters, we can do an API call to a service to get the weather report. flowchart weather get 4

2.3.7 Reply

We want to present the user text that will be spoken by Alexa. flowchart weather get 5

2.3.8 Reply with forecast

In case that someone uses a Facebook Messenger experience, we want to show rich UI element with a list with a forecast. flowchart weather get We have designed the flowchart for the Weather Report. Now, we are going design a flowchart for greetings and app start.

2.4 Greeting

We are now going to create a flowchart for when a user greets.

2.4.1 Trigger flow

A user greeting triggers this flow. flowchart weather greetings 1

2.4.2 Check if first visit

We need to check if this is the first time visit of the user. Depending on this we want to customize our message. flowchart weather greetings 2

2.4.3 First visit: Yes

In case the user is visiting for the first time we want to reply and change the state. flowchart weather greetings 3

2.4.4 First visit: No

If the user is visiting for the second time, we will reply with a different message. flowchart weather greetings

We are now done creating our flowchart. Let’s start building our conversational app.

3. Flow Design

3.1 Introduction

The Flow.ai Design app makes it easy to create compelling conversational experiences. You can easily translate your flowcharts into flows.

3.2 Overview

The Flow.ai Design app makes it easy to create compelling conversational experiences. You can easily translate your flowcharts into flows.

3.3 Get weather report

Let’s start designing our first flow. Login to Flow.ai and go to the Design app. Follow the steps below.

design flow 1 Create a new blank flow

design flow 2 Rename the new flow to Weather Report

design flow 3 Drag and drop the Text trigger from the right pane. Type in “What is the weather in Toronto? Click on (Train) and open intent training.”

design flow 4 Double-click the word (Toronto) and select (Text) from the system types.

design flow 5 Rename the type to (City).

design flow 6 Add another example “What is the weather in Toronto tomorrow?“. Double-click the word (Toronto) and select (city) from the list.

design flow 7 Double-click the word (tomorrow) and select date from the list.

design flow 8 Rename this to (Date) in the right pane.

design flow 9 Repeat the previous steps and give at least 10 examples.

design flow 10 Select the card and make (city) a required parameter in the right pane.

design flow 11 A new option appears in the canvas. Click on (city).

design flow 12 Change the message to “Which city?“.

design flow 13 Drag and drop an action reply from the right pane.

Let’s leave this for now. We will learn how to create a cloud code action in chapter 4.

3.4 Greeting

Creating an intent for greeting works the same way as for weather forecast.

design flow greeting 1 Click on the plus icon and create a new flow.

design flow greeting 2 Rename the new flow to Greeting

design flow greeting 3 Click on train and add some examples for the greeting intent.

design flow greeting 4 Now our app can also react to greetings.

design flow greeting 5 We want the app to reply with code. We want two ways of replying. First time visitors will get a different reply.

Let’s leave this for now. We will learn how to create a cloud code action in chapter 4.

4. Code

The Flow.ai code app allows you to integrate with any back-end services you like using Webhooks. We also have the cloud code option to execute code hosted on our platform.

design flow code 1 Go to the flow.ai Code app and create a new Cloud Code.

design flow code 2 Rename the new Cloud Code to Get Weather.

4.1 Get Weather

For this tutorial, we are going to the Open Weather API. See the complete code below. Read further see how this code is set up.

(function(payload) {

  const {
    params
  } = payload

  if(!Array.isArray(params.city)) {
    // Skip accidental calls without a city name
    return
  }

  // This API key is for Demo purposes.
  const city = params.city[0].value
  const apiKey = '648406a779899b82c6ca28c36778d904'
  const endpoint = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`

  // Make a GET call to fetch the weather
  request.get(endpoint)
    .then(response => {

      // Grab result from request
      const {
        data
      } = response

      const {
        weather,
        main,
        name
      } = data

      // Create description
      const description = weather.map(w => w.main).join(', ')

      // Grab icon
      const icon = weather[0].icon

      // Create rich card
      const card = new Card({
        title: `${name}`,
        subtitle: `${description} with a temperature of ${main.temp} °C`,
        media: new Media({
          url: `http://openweathermap.org/img/w/${icon}.png`,
          type: 'image'
        })
      })

      // Fallback (speech)
      const forecast = `The weather in ${city} is ${description} with a temperature of ${main.temp} degrees celsius`

      // Message to reply
      const message = new Message(forecast)
      message.addResponse(card)

      // Async reply
      reply(message)
    })
    .catch(err => {
      console.error(err)

      // This is not good..
      reply(new Message([
        "Oops. Something went wrong."
      ]))
    })

})  

4.2 Get Parameters

First let get some parameters from out bot. We need to extract the city name from the city entity.

(function(payload) {

  const {
    params
  } = payload

  if(!Array.isArray(params.city)) {
    // Skip accidental calls without a city name
    return
  }

  // This API key is for Demo purposes.
  const city = params.city[0].value

})  

Note: Stay tuned for more