Building a chatbot with Dialogflow and CircleCI

Chatbots are becoming essential to software applications, enhancing user engagement through automated conversations. Deploying a chatbot to a cloud platform requires integrating multiple technologies, ensuring smooth communication between services, and automating updates efficiently.

In this tutorial, you will learn how to deploy a Python-based conversational chatbot to an Azure Functions app. The chatbot will use Google Dialogflow to process user queries and fetch real-time weather data from the OpenWeather API. You will design conversation flows, integrate external APIs, and automate the deployment process using CircleCI.

To streamline updates, you will set up a CI/CD pipeline with CircleCI, enabling automatic deployment of your chatbot to Azure Functions whenever changes are pushed to the GitHub repository. By the end of this tutorial, you will have a fully functional chatbot capable of answering weather-related queries, backed by a seamless deployment workflow.

Prerequisites

• Python 3.8+ installed locally.
• An Azure account
• Fork and download the Azure Function App code.
• Download and install the Azure CLI.
• Create a CircleCI account connected with your GitHub account.

Designing the chatbot with Dialogflow

Dialogflow is a robust conversational AI platform that allows developers to create chatbots and virtual assistants. Its key components include agents, which can recognize queries and respond appropriately, intents, which define the purpose of user queries, and fulfillment, which enables dynamic responses through external service integration.

Intent responses can be static, providing fixed answers, or dynamic, which uses fulfillment to retrieve real-time data from external APIs, such as the Azure Function we will configure later on in this tutorial.

Here are the step-by-step instructions to create our DialogFlow Agent:

Set up a DialogFlow agent

• Open a web browser and go to Dialogflow Console.
• Sign in using your Google account.
• Click the Create New Agent button in the left sidebar.
• In the Agent Name field, enter: “WeatherBot”.
• Select an existing Google Project or click Create a new Google Project.
• In the Description field under the General tab, enter: “A weather bot to answer user questions related to current weather data in specific world locations.”
• Select the Default Language, English (en), or another language if necessary.
• Click Create

Create DialogFlow intents

This part of the tutorial contains the following steps:

1. Create the Greeting Intent
2. Create the Yes_Coordinates Flow intent
3. Create the GetWeatherByCoordinates intent
4. Create the No/City Flow intent
5. Create the No/City Flow intent
6. Create the GetCityName intent
7. Create the GetStateName intent
8. Create the GetCountryName intent

1. Create the Greeting Intent

• Go to Intents in the left menu.
• Click Create Intent and name it Greeting.
• Training Phrases:
  • Add the greeting phrases: “Hi” and “Hello”.
• Responses:
  • Add the Text Response: “Hello! I’m a weather bot. Do you have the precise coordinates of the location you want to know the weather for?”.
• Click the Save button.

2. Create the Yes_Coordinates Flow intent

• In the /intents page of your agent in DialogFlow, move the mouse over the Greeting intent. Click the Add follow-up intent link, then choose the yes option.
• Open the created intent and rename it as Yes/Coordinates Flow.
• Responses: add the Response: “Enter the standard latitude and longitude format, which for New York City, for example, would be: 40°42′46″N 74°0′22″W.”.

3. Create the GetWeatherByCoordinates intent

• In the /intents page of your agent in DialogFlow, move the mouse over the Yes/Coordinates Flow intent. Click the Add follow-up intent link, then choose the custom option.
• Open the created intent and rename it as GetWeatherByCoordinates.
• Training Phrases:
  • Add the training phrases:
    • 23°27′46″S 46°31′58″W
    • 40°42′46″N 74°0′22″W
• Responses:
  • Select the Set this intent as end of conversation option.
• Fullfilment:
  • Set the Enable webhook call for this intent as true.

4. Create the No/City Flow intent

• In the /intents page of your agent in DialogFlow, move the mouse over the Greeting intent. Click the Add follow-up intent link, then choose the no option.
• Open the created intent and rename it as No/City Flow.
• Responses: add the response: "Enter the city name.".

5. Create the GetCityName intent

• In the /intents page of your agent in DialogFlow, move the mouse over the No/City Flow intent. Click the Add follow-up intent link, then choose the custom option.
• Open the created intent and rename it as GetCityName.
• Training Phrases:
  • Add the training phrases: “New York” and “Tokyo”.
• Parameters:
  • Make sure the parameter below has been created by the training phrases:
    • Name: geo-city, Entity: @sys.geo-city, Required: Yes.
• Responses: add the response: "Enter the state/province name.".

6. Create the GetStateName intent

• In the /intents page of your agent in DialogFlow, move the mouse over the GetCityName intent. Click the Add follow-up intent link, then choose the custom option.
• Open the created intent and rename it as GetStateName.
• Training Phrases:
  • Add the training phrases: “California” and “Chihuahua”.
• Parameters:
  • Make sure the parameter below has been created by the training phrases:
    • Name: geo-state, Entity: @sys.geo-state, Required: Yes.
• Responses: add the Response: "Enter the country name.".

7. Create the GetCountryName intent

• In the /intents page of your agent in DialogFlow, move the mouse over the GetStateName intent. Click the Add follow-up intent link, then select the custom option.
• Open the created intent and rename it as GetCountryName.
• Training Phrases:
  • Add the training phrases: “Brazil” and “Japan”
• Parameters:
  • Make sure the parameter below has been created by the training phrases:
    • Name: geo-country, Entity: @sys.geo-country, Required: Yes.
• Responses:
  • Check the “Set this intent as end of conversation” option.
• Fullfilment:
  • Set the Enable webhook call for this intent as true.

Obtaining an OpenWeatherMap API key

To configure a free OpenWeatherMap account and obtain an API key, start by visiting the OpenWeatherMap website and signing up for a free account. Log in, then go to the API keys section under your account settings. Under the Create Key button, provide a name for your key (e.g., “WeatherBot”). Click Generate to create the key. Keep your API key secure and handy to be used in the following steps.

Configuring an Azure Function app

Setting up an Azure Function App involves several key steps to prepare the environment, authenticate with Azure, and deploy the necessary resources. These commands use the Azure Command-Line Interface (CLI).

The first step is to authenticate with your Azure account using the terminal:

az login

Note that you will be prompted to select the active to complete login.

Next, you need to create a resource group to hold the Azure resources related to this project, providing the location code (ex.: “eastus”):

az group create --name [YOUR-AZURE-RESOURCE-GROUP] --location [YOUR-AZURE-REGION]

It will output the resource group details:

{
  "id": "/subscriptions/<your_subscription_id>/resourceGroups/circleci-resource-group",
  ...
  "name": "circleci-resource-group",
  "properties": {
    "provisioningState": "Succeeded"
  },
}

Create a Azure Service Principal (SP) to allow the CircleCI project to authenticate with Azure and perform operations:

az ad sp create-for-rbac --name circleci-weather-sp \
--role Contributor \
--scopes /subscriptions/[YOUR-AZURE-SUBSCRIPTION]/resourceGroups/[YOUR-AZURE-RESOURCE-GROUP]

Once this command creates the SP, it will output the SP details:

{
  "appId": "your_app_id",
  "displayName": "circleci-weather-sp",
  "password": "your_sp_password",
  "tenant": "your_tenant_id"
}

Keep the SP details handy as you will need them while configuring the Circle CI workflow environment variables.

Next, you need to create Azure Storage account to manage logs, queues, and other function-related data. Before creating the Storage account, register the Microsoft.Storage resource provider for the selected subscription.

Next, create a new Azure Storage account using the following command:

az storage account create --name <your_storage_account_name> \
--location [YOUR-AZURE-REGION] \
--resource-group [YOUR-AZURE-RESOURCE-GROUP] \
--sku Standard_LRS

Replace <your_storage_account_name> with a unique name before executing the above command. Refer to the Storage account docs to understanding naming restrictions.

Finally, create the Azure Function. The app will host the Python-based function that you want to deploy:

az functionapp create --resource-group [YOUR-AZURE-RESOURCE-GROUP] \
--consumption-plan-location [YOUR-AZURE-REGION] \
--runtime python \
--runtime-version "3.11" \
--functions-version 4 \
--name <your_function_name> \
--os-type linux \
--storage-account <your_storage_account_name>

Notes:

• This command specifies the Python version 3.11, but you can deploy it using a local Python version 3.8 or above.
• The Azure-CLI command creates an empty Azure function App on Azure, but it doesn’t create any function yet. An Azure Function App is a container that hosts one or more Azure functions. An Azure function is a single serverless function within the app that executes code in response to events.

Later, you will deploy the weather chatbot as an Azure function to this Azure Function App.

Replace <your_function_name> with a unique Azure Function name and <your_storage_account_name> with the Azure Storage name used in the previous step.

Setting up the Azure Function App

To follow this section, fork and download the Python code for the Azure Function App.

The provided Python code implements an Azure Function webhook that communicates with Dialogflow intents to provide weather information using the OpenWeatherMap API.

Key highlights and how the Python code communicates with Dialogflow intents:

Environment variables:

• The OPENWEATHERMAP_API_KEY is loaded from an .env file using the dotenv package. This key is used for making API requests to OpenWeatherMap. If you want to run this Azure Function App locally, create a local.settings.json file with this content:

{
"IsEncrypted": false,
    "Values": {
        "AzureWebJobsStorage": "UseDevelopmentStorage=true",
        "FUNCTIONS_WORKER_RUNTIME": "python",
        "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
        "OPENWEATHERMAP_API_KEY": "[YOUR-OPENWEATHERMAP-API-KEY]"
    }
}

Communication with DialogFlow intents

The Azure Function webhook interacts with Dialogflow intents in the following ways:

1. Incoming Request Structure:
   • The webhook expects incoming HTTP requests to contain a JSON payload with queryResult, which contains the intent name and relevant parameters.
   • The relevant parameters, like geo-city, geo-state, and geo-country, are extracted from the outputContexts (for intents like GetCountryName).
2. Handling the GetWeatherByCoordinates Intent:
   • The webhook listens for Dialogflow’s GetWeatherByCoordinates intent.
   • It extracts the queryText from the incoming request and attempts to parse latitude and longitude from it using the parse_lat_lon() function.
   • If the coordinates are valid, it makes a request to OpenWeatherMap’s weather API using the parsed coordinates and returns the weather details to the user in the response.
3. Handling the GetCountryName Intent:
   • The webhook listens for Dialogflow’s GetCountryName intent.
   • It extracts the city, state, and country from the outputContexts of the incoming request.
   • The webhook then makes a request to OpenWeatherMap’s geo API to retrieve the latitude and longitude of the location based on the extracted city, state, and country.
   • The coordinates are used to call the weather API and return the weather data to the user.

Configuring the project on CircleCI

In this step, visit the Projects page on the CircleCI dashboard. Click Add Project, and locate the GitHub project you have cloned previously. Then click Set Up Project:

Configure CircleCI

On the config page, select the Fastest option to use the .circleci/config.yml in your repo, then click the Set Up Project button.

Start the build

Click Start Building. The initial build will fail because the configuration file hasn’t been set up yet, but you will complete this step later in the tutorial.

At this point, you will need access to your Azure account in the deployment script. This is why you created the Azure Service Principal account earlier in the tutorial. You will use the azure-cli orb to log in and use Azure CLI in the deployment script. This orb requires the setup of several environment variables for the project.

The required environment variables are:

• AZURE_SP: The appId of your Service Principal
• AZURE_SP_PASSWORD: The password key from your service principal account creation response
• AZURE_SP_TENANT: The tenant key from your service principal account creation response
• FUNCTION_APP_NAME: The name of your Azure Function App created with the Azure CLI
• FUNCTION_APP_NAME_RESOURCE_GROUP: The name of the Azure resource group where the function app was created
• OPENWEATHERMAP_API_KEY: The API key obtained when you registered with OpenWeather

Go to Project Settings and then Environment Variables on your CircleCI project. Click Add Environment Variable.

Using the dialog, add the environment variables.

Setting up CI/CD with CircleCI

Review the config.yml file contained in the /.circleci folder of our Azure Function App project.

jobs:
  deploy:
    working_directory: ~/repo
    docker:
      - image: cimg/python:3.9
    steps:
      - checkout
      - azure-cli/install
      - azure-cli/login-with-service-principal
      - run:
          name: Install Azure Functions Core Tools
          command: |
            curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
            sudo mv microsoft.gpg /etc/apt/trusted.gpg.d/
            sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/microsoft-ubuntu-$(lsb_release -cs)-prod $(lsb_release -cs) main" > /etc/apt/sources.list.d/dotnetdev.list'
            sudo apt-get update
            sudo apt-get install azure-functions-core-tools-4
      - run:
          name: Deploy to Azure Function App
          command: |
            CLI_DEBUG=1 func azure functionapp publish $FUNCTION_APP_NAME --python
            az functionapp config appsettings set --name $FUNCTION_APP_NAME --resource-group $FUNCTION_APP_NAME_RESOURCE_GROUP --settings OPENWEATHERMAP_API_KEY=$OPENWEATHERMAP_API_KEY

orbs:
  azure-cli: circleci/azure-cli@1.0.0
  python: circleci/python@1.2.0
version: 2.1
workflows:
  login-workflow:
    jobs:
      - deploy

This CircleCI configuration automates deploying a Python app to Azure Functions. It installs necessary tools like Azure Functions Core Tools, logs in to Azure, and then deploys the app to an Azure Function App. Additionally, it sets an environment variable (OPENWEATHERMAP_API_KEY) that’s needed for the app’s functionality. The configuration uses reusable orbs for Azure CLI and Python-related steps, simplifying the deployment process.

Finally, go back to the project page and click the Trigger Pipeline button.

This time the pipeline will run successfully, because you have provided all the required environment variables. Now click the successful run.

Review all the steps you defined previously in the .circleci/config.yml file, from spinning up the environment to deploying the function to Azure:

Testing and validating the chatbot

In the previous section, you successfully published your Python code as an Azure Function App on Azure.

To integrate DialogFlow with the new Azure Function, log in to the Azure portal and get the function URL for your Azure Function named “webhook”.

Copy the function URL under “default (Function key)”.

Click the Fullfilment tab, enable the webhook, and insert your Azure Function URL as the webhook URL.

With the “Try it now” panel on the Dialogflow dashboard, you can test your chatbot in real time by simulating user queries and reviewing the bot’s responses.

Testing the coordinates flow

1. Type “Hi” in the Try it now field.
2. DialogFlow will respond with “Hello! I’m a weather bot. Do you have the precise coordinates of the location you want to know the weather for?”
3. Type “Yes”.
4. DialogFlow will respond with “Enter the standard latitude and longitude format, which for New York City, for example, would be: 40°42′46″N 74°0′22″W.”
5. Type “40°42′46″N 74°0′22″W”.
6. DialogFlow will respond with something like “The weather for lat 40.71 lon -74.01 is few clouds with a temperature of 5.68ºC”.

Testing the City / State / Country Flow

1. Type “Hi” in the Try it now field.
   • DialogFlow responds with “Hello! I’m a weather bot. Do you have the precise coordinates of the location you want to know the weather for?”
2. Type “No”.
   • DialogFlow responds with “Enter the city name.”
3. Type “Munich”.
   • DialogFlow responds with “Enter the state/province name.”
4. Type “Bavaria”.
   • DialogFlow responds with “Enter the country name.”
5. Type “Germany”.
   • DialogFlow will respond with “The weather for Munich / Bavaria / Germany is overcast clouds with a temperature of 1.94ºC.”

You will end up with two flows that can respond to user questions about the current weather using either latitude and longitude or the city, state, and country names.

Conclusion

Congratulations! You created a weather chatbot using Dialogflow and set up an Azure Function app for real-time weather predictions from OpenWeatherMap. You set up CircleCI for seamless CI/CD deployment of the Azure Function from GitHub to the Azure cloud. Finally, you integrated the deployed Azure Function as a webhook for the Dialogflow agent.

Cloud services like Azure and Dialogflow facilitate chatbot development and growth, while CircleCI ensures smooth and continuous updates.

This tutorial covered the essentials, but there’s always more to explore! You can enhance your bot by adding more intents, improving natural language understanding, or expanding its capabilities with additional APIs. To deepen your knowledge, check out the official documentation for Azure Functions, Dialogflow, OpenWeatherMap, and CircleCI. Keep experimenting and refining your chatbot—there’s no limit to what you can create!